Forem: sandeepsamanth

DAY-26-PANDAS

sandeepsamanth — Sat, 22 Apr 2023 07:49:11 +0000

import pandas as pd 
data = {"a":[1,2,3,4],
       "b":[4,5,6,7],
       "c":["sudh" , "krish","hitesh","navin"]}
df= pd.DataFrame(data)
df.set_index('a',inplace=True)
df = df.reset_index()

data = {"a":[1,2,3,4],
       "b":[4,5,6,7],
       "c":["sudh" , "krish","hitesh","navin"]}
df1 = pd.DataFrame(data,index = ['a','b','c','d'])
df1.reindex(['b','c','d','a'])

for i,j in df1.iterrows():
    print( j)

for col_name , column in df1.iteritems():
    print( col_name , column)

def test(x):
    return x.sum()
df1.apply(test,axis=0)
//a                      10
//b                      22
//c    sudhkrishhiteshnavin

df2 = df1[['a','b']]
df2.applymap(lambda x : x**2)
df.sort_values('c')
df.sort_index(ascending = False)

#Python Pandas - Window Functions
df4 = pd.DataFrame({'a' : [3,4,5,2,1,3,4,5,6]})
df4['a'].rolling(window=1).mean()
df4['a'].rolling(window=3).mean()

#Python Pandas - Date Functionality

date = pd.date_range(start='2023-04-23' , end = '2023-06-23')
df_date = pd.DataFrame({'date':date})
df7 = pd.DataFrame({"date" : ['2023-06-23' , '2023-06-22','2023-06-20']})
df7['updated_date'] = pd.to_datetime(df7['date'])
df7['year'] = df7['updated_date'].dt.year

#Python Pandas –Time Delta
pd.Timedelta(days= 1,hours = 5 ,minutes = 45)
dt = pd.to_datetime('2023-06-20')
td = pd.Timedelta(days = 1 )
dt+td
Timestamp('2023-06-21 00:00:00')

#Python Pandas - Categorical Data

data = ["sudh" , "krish" , "hitesh" , "navin","sudh" ,"sudh" ]
cat = pd.Categorical(data)
cat.value_counts()

#Python Pandas – Visualization
d = pd.Series([1,2,3,3,5,6,6,8])
d
d.plot()
df = pd.DataFrame({'a':[3,4,5,6,7],
                  'b':[4,5,6,7,8]})
df.plot(x= 'a',y='b')
df.plot.scatter(x= 'a',y='b')
d = pd.Series([1,2,3,3,5,6,6,8])
d
d.plot.pie()

DAY 25-PANDAS

sandeepsamanth — Fri, 21 Apr 2023 20:50:05 +0000

import pandas as pd 
df = pd.read_csv("https://raw.githubusercontent.com/datasciencedojo/datasets/master/titanic.csv")

DROP and SET INDEX

df.drop('PassengerId',axis=1,inplace=True)//permanently drops passengerID
df.drop(3,inplace=True)//drops 3rd row

df.set_index("Name",inplace=True)
df.reset_index()

`d = {'key1' :[3,4,5,6,7],
'key2':[5,6,7,8,6],
'key3':[4,5,6,7,8]
}
pd.DataFrame(d)
df1 = pd.read_csv('taxonomy.csv')

df1.dropna()
df1.dropna(inplace=True)
df1.dropna(axis=1)
df2.fillna("sudh")
df.reset_index(inplace=True)
g = df.groupby('Survived')
g.sum()

g.mean()
g1 = df.groupby('Pclass')
g1.max().transpose()

//concatinate
df5 = df[['Name',   'Survived', 'Pclass']][0:5]
df6 = df[['Name',   'Survived', 'Pclass']][5:10]
pd.concat([df5,df6])

MERGE

data1 = pd.DataFrame({'key1':[1,2,4,5,6],
                      'key2':[4,5,6,7,8],
                      'key3':[3,4,5,6,6]
}
)
data2 = pd.DataFrame({'key1':[1,2,45,6,67],
                      'key4':[56,5,6,7,8],
                      'key5':[3,56,5,6,6]
}
)
pd.merge(data1,data2)
pd.merge(data1,data2,how = 'left')
pd.merge(data1,data2,how = 'right')
pd.merge(data1,data2,how = 'outer',on = 'key1')
pd.merge(data1,data2,how = 'cross')

similarly to merge we have join

data1.join(data2,how='right')
data1.join(data2,how='inner')
data1.join(data2,how='outer')
data1.join(data2,how='cross')

df['Fare_INR'] = df['Fare'].apply(lambda x : x*80)
df['name_len'] = df['Name'].apply(len)

Day-05

sandeepsamanth — Mon, 23 Jan 2023 11:45:06 +0000

Practicing with building mini projects useState useEffect

creating a tabs for different user
npm i react-icons

App.js

import React, { useState, useEffect } from 'react'
import { FaAngleDoubleRight } from 'react-icons/fa'
// ATTENTION!!!!!!!!!!
// I SWITCHED TO PERMANENT DOMAIN
const url = 'https://course-api.com/react-tabs-project'
function App() {
  const [loading,setLoading]=useState(true)
  const [jobs,setJobs]=useState([])
  const [value,setValue]=useState(1)

  const fetchJobs=async ()=>{
    const response=await fetch(url)
    const newJobs=await response.json()
    setJobs(newJobs)
    setLoading(false)
  }

  useEffect(()=>{
      fetchJobs();
  },[])

 if(loading){
  return (<section className='section loading'>
  <h1>
  loading...
  </h1></section>)
 }
 const {company,dates,duties,title}=jobs[value]

  return <section className="section">
            <div className="title">
              <h2>experience</h2>
            <div className="underline"></div>
            </div>
            <div className="jobs-center">
             <div className="btn-container">
             {
               jobs.map((item,index)=>{
                 return <button key={item.id} 
                               className={`job-btn ${index===value&&'active-btn'}`} 
                               onClick={()=>setValue(index)}>
                               {item.company}
                        </button>

               })
             }
             </div>

             <article className="job-info">
             <h3>{title}</h3>
             <h4>{company}</h4>
             <p className="job-date">{dates}</p>
             {duties.map((duty,index)=>{
               return <div className="job-desc" key={index}>
                          <FaAngleDoubleRight className='job-icon'/>
                          <p>{ duty}</p>
                      </div>
             })}
             </article>
            </div>
          </section>
}

export default App

css

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

day 4 react projects with useState useEffect hook

sandeepsamanth — Sat, 14 Jan 2023 03:20:38 +0000

project-1

use the previous learning to build a project where it has topics like fetch data and show and hide components and passing of props

App.js

import React, { useState, useEffect } from 'react'
import Loading from './Loading'
import Tours from './Tours'
import './App.css';

// I SWITCHED TO PERMANENT DOMAIN
const url = 'https://course-api.com/react-tours-project'

function App() {
  const [loading,setLoading]=useState(true)
  const [tours,setTours]=useState([])


  const fetchTours=async()=>{
    setLoading(true)
    try{
       const response=await fetch(url);
       const tours=await response.json();
       setLoading(false)
       setTours(tours)
       console.log(tours)
      }catch(error)
      {
        setLoading(false)
        console.log(error)
      }  
  }

   useEffect(()=>{
    fetchTours()
  },[])
    const removeTour=(id)=>{
    const newTours=tours.filter((tour)=> tour.id!==id)
    setTours(newTours)
  }

  if(loading){
    return(
      <main>
        <Loading/>
      </main>
    )
  }
    if(tours.length===0){
    return(
      <main>
        <div className='title'>
          <h2>no tours left</h2>
          <button className="btn" onClick={ fetchTours}>refresh</button>
        </div>
      </main>
    )
  }
  return (
   <main>
        <Tours tours={tours} removeTour={removeTour}/>
    </main>
  );
}

export default App;

Tours.js

import React from 'react'
import Tour from './Tour';

const Tours = ({tours,removeTour}) => {
  return (
    <section>
     <div className="title">
      <h2>our tours</h2>
      <div className="underline"></div>
     </div>
     <div>
      {
        tours.map((tour)=>{
            return <Tour key={tour.id}removeTour={removeTour} {...tour}></Tour>
        })
      }
     </div>

    </section>
  )
}

export default Tours

tour.js

import React from 'react'
import  { useState, useEffect } from 'react'

const Tour = ({id,image,info,price,name,removeTour}) => {
    const [readMore,setReadMore]=useState(false)
  return (
     <article className='single-tour'>
            <img src={image} alt="" />
            <footer>
              <div className="tour-info">
                <h4>{name}</h4>
                <h4 className='tour-price'>${price}</h4>
              </div>
              <p>{readMore?info:`${info.substring(0,200)}...`}
              <button onClick={()=>setReadMore(!readMore)}>
                {
                  readMore?'show less':'read more'
                }
              </button>
              </p>
              <button className="delete-btn" onClick={()=>removeTour(id)} >not insterested</button>
            </footer>
        </article>
  )
}

export default Tour

css used

/*
=============== 
Variables
===============
*/

:root {
  /* dark shades of primary color*/
  --clr-primary-1: hsl(205, 86%, 17%);
  --clr-primary-2: hsl(205, 77%, 27%);
  --clr-primary-3: hsl(205, 72%, 37%);
  --clr-primary-4: hsl(205, 63%, 48%);
  /* primary/main color */
  --clr-primary-5: hsl(205, 78%, 60%);
  /* lighter shades of primary color */
  --clr-primary-6: hsl(205, 89%, 70%);
  --clr-primary-7: hsl(205, 90%, 76%);
  --clr-primary-8: hsl(205, 86%, 81%);
  --clr-primary-9: hsl(205, 90%, 88%);
  --clr-primary-10: hsl(205, 100%, 96%);
  /* darkest grey - used for headings */
  --clr-grey-1: hsl(209, 61%, 16%);
  --clr-grey-2: hsl(211, 39%, 23%);
  --clr-grey-3: hsl(209, 34%, 30%);
  --clr-grey-4: hsl(209, 28%, 39%);
  /* grey used for paragraphs */
  --clr-grey-5: hsl(210, 22%, 49%);
  --clr-grey-6: hsl(209, 23%, 60%);
  --clr-grey-7: hsl(211, 27%, 70%);
  --clr-grey-8: hsl(210, 31%, 80%);
  --clr-grey-9: hsl(212, 33%, 89%);
  --clr-grey-10: hsl(210, 36%, 96%);
  --clr-white: #fff;
  --clr-red-dark: hsl(360, 67%, 44%);
  --clr-red-light: hsl(360, 71%, 66%);
  --clr-green-dark: hsl(125, 67%, 44%);
  --clr-green-light: hsl(125, 71%, 66%);
  --clr-black: #222;
  --transition: all 0.3s linear;
  --spacing: 0.1rem;
  --radius: 0.25rem;
  --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  --max-width: 1170px;
  --fixed-width: 620px;
}

/*
=============== 
Global Styles
===============
*/

*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  background: var(--clr-grey-10);
  color: var(--clr-grey-1);
  line-height: 1.5;
  font-size: 0.875rem;
}

ul {
  list-style-type: none;
}

a {
  text-decoration: none;
}

h1,
h2,
h3,
h4 {
  letter-spacing: var(--spacing);
  text-transform: capitalize;
  line-height: 1.25;
  margin-bottom: 0.75rem;
}

h1 {
  font-size: 3rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.25rem;
}

h4 {
  font-size: 0.875rem;
}

p {
  margin-bottom: 1.25rem;
  color: var(--clr-grey-5);
}

@media screen and (min-width: 800px) {
  h1 {
    font-size: 4rem;
  }

  h2 {
    font-size: 2.5rem;
  }

  h3 {
    font-size: 1.75rem;
  }

  h4 {
    font-size: 1rem;
  }

  body {
    font-size: 1rem;
  }

  h1,
  h2,
  h3,
  h4 {
    line-height: 1;
  }
}

/*  global classes */

/* section */
.section {
  width: 90vw;
  margin: 0 auto;
  max-width: var(--max-width);
}

@media screen and (min-width: 992px) {
  .section {
    width: 95vw;
  }
}

.btn {
  background: var(--clr-primary-5);
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius);
  text-transform: capitalize;
  color: var(--clr-white);
  letter-spacing: var(--spacing);
  border-color: transparent;
  cursor: pointer;
  margin-top: 2rem;
  font-size: 1.2rem;
}

/*
=============== 
Tours
===============
*/
main {
  width: 90vw;
  max-width: var(--fixed-width);
  margin: 5rem auto;
}

.loading {
  text-align: center;
}

.title {
  text-align: center;
  margin-bottom: 4rem;
}

.underline {
  width: 6rem;
  height: 0.25rem;
  background: var(--clr-primary-5);
  margin-left: auto;
  margin-right: auto;
}

.single-tour {
  background: var(--clr-white);
  border-radius: var(--radius);
  margin: 2rem 0;
  box-shadow: var(--light-shadow);
  transition: var(--transition);
}

.single-tour:hover {
  box-shadow: var(--dark-shadow);
}

.single-tour img {
  width: 100%;
  height: 20rem;
  object-fit: cover;
  border-top-right-radius: var(--radius);
  border-top-left-radius: var(--radius);
}

.tour-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.tour-info h4 {
  margin-bottom: 0;
}

.single-tour button {
  background: transparent;
  border-color: transparent;
  text-transform: capitalize;
  color: var(--clr-primary-5);
  font-size: 1rem;
  cursor: pointer;
  padding-left: 0.25rem;
}

.tour-price {
  color: var(--clr-primary-5);
  background: var(--clr-primary-10);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius);
}

.single-tour footer {
  padding: 1.5rem 2rem;
}

.single-tour .delete-btn {
  display: block;
  width: 200px;
  margin: 1rem auto 0 auto;
  color: var(--clr-red-dark);
  letter-spacing: var(--spacing);
  background: transparent;
  border: 1px solid var(--clr-red-dark);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius);
}

day 4 reactjs

sandeepsamanth — Fri, 13 Jan 2023 13:33:50 +0000

short circuit operator

import React, { useState } from 'react';
// short-circuit evaluation
// ternary operator

const ShortCircuit = () => {
  const [text, setText] = useState('');
  const [isError, setIsError] = useState(false);
  // const firstValue = text || 'hello world';
  // const secondValue = text && 'hello world';

  return (
    <>
      {/* <h1>{firstValue}</h1>
      <h1>value : {secondValue}</h1> */}
      {/* {if(){console.log('hello world')}} */}
      <h1>{text || 'john doe'}</h1>
      <button className='btn' onClick={() => setIsError(!isError)}>
        toggle error
      </button>
      {isError && <h1>Error...</h1>}
      {isError ? (
        <p>there is an error...</p>
      ) : (
        <div>
          <h2>there is no error</h2>
        </div>
      )}
    </>
  );
};

export default ShortCircuit;

Ternary oprator with show and hide component

import React, { useState, useEffect } from 'react';

const ShowHide = () => {
  const [show, setShow] = useState(false);
  return (
    <>
      <button className='btn' onClick={() => setShow(!show)}>
        show/hide
      </button>
      {show && <Item />}
    </>
  );
};

const Item = () => {
  const [size, setSize] = useState(window.innerWidth);
  const checkSize = () => {
    setSize(window.innerWidth);
  };
  useEffect(() => {
    window.addEventListener('resize', checkSize);
    return () => {
      window.removeEventListener('resize', checkSize);
    };
  }, []);

  return (
    <div style={{ marginTop: '2rem' }}>
      <h1>Window</h1>
      <h2>size : {size}</h2>
    </div>
  );
};

export default ShowHide;

day-3

sandeepsamanth — Fri, 13 Jan 2023 11:47:13 +0000

UseEffect fetch data and destructuring

import React, { useState, useEffect } from 'react';

const url = 'https://api.github.com/users';

const UseEffectFetchData = () => {

  const [users, setUsers] = useState([]);

  const getUsers=async()=>{
    const response=await fetch(url);
    const users=await response.json();
     setUsers(users);
    console.log(users);
  }

  useEffect(() => {
    getUsers();
  }, []);

  return (
  <>
    <h3>github users</h3>
    <ul className='users'>
    {
      users.map((user)=>{
        const {id,login,avatar_url,html_url}=user;
        return(
          <li key='id'>
           <img src={avatar_url} alt={login}/>
           <div>
            <h4>{login}</h4>
            <a href={html_url}>profile</a>
           </div>
          </li>
        )
      })
    }
    </ul>
  </>
  )
};

export default UseEffectFetchData;

day-2-react js

sandeepsamanth — Wed, 11 Jan 2023 17:57:44 +0000

DATA

export const data = [
  { id: 1, name: 'john' },
  { id: 2, name: 'peter' },
  { id: 3, name: 'susan' },
  { id: 4, name: 'anna' },
];

USE STATE

// starts with use
// component must be uppercase
// invoke inside function/component body
// don't call hooks conditonally_

import React, { useState } from 'react';

const UseStateBasics = () => {
  // console.log(useState());
  // const value = useState()[0];
  // const handler = useState()[1];
  // console.log(value, handler);

  const [text, setText] = useState('random title');
  const handleClick = () => {
    if (text === 'random title') {
      setText('hello world');
    } else {
      setText('random title');
    }
  };

  return (
    <React.Fragment>
      <h1>{text}</h1>
      <button type='button' className='btn' onClick={handleClick}>
        change title
      </button>
    </React.Fragment>
  );
};

export default UseStateBasics;

-useState array

import React from 'react';
import { data } from '../../../data';
const UseStateArray = () => {
  const [people, setPeople] = React.useState(data);

  const removeItem = (id) => {
    let newPeople = people.filter((person) => person.id !== id);
    setPeople(newPeople);
  };
  return (
    <>
      {people.map((person) => {
        const { id, name } = person;
        return (
          <div key={id} className='item'>
            <h4>{name}</h4>
            <button onClick={() => removeItem(id)}>remove</button>
          </div>
        );
      })}
      <button className='btn' onClick={() => setPeople([])}>
        clear items
      </button>
    </>
  );
};

export default UseStateArray;

-useState object

import React, { useState } from 'react';

const UseStateObject = () => {
  const [person, setPerson] = useState({
    name: 'peter',
    age: 24,
    message: 'random message',
  });

  // const [name,setName] = useState('peter')
  // const [age,setAge] = useState(24)
  // const [message,setMessage] = useState('random message')

  const changeMessage = () => {
    setPerson({ ...person, message: 'hello world' });
    // setMessage('hello world')
  };

  return (
    <>
      <h3>{person.name}</h3>
      <h3>{person.age}</h3>
      <h4>{person.message}</h4>
      <button className='btn' onClick={changeMessage}>
        change message
      </button>
    </>
  );
};

export default UseStateObject;

-useState counter

import React, { useState } from 'react';

const UseStateCounter = () => {
  const [value, setValue] = useState(0);

  const reset = () => {
    setValue(0);
  };

  const complexIncrease = () => {
    setTimeout(() => {
      // setValue(value + 1);
      setValue((prevState) => {
        return prevState + 1;
      });
    }, 2000);
  };

  return (
    <>
      <section style={{ margin: '4rem 0' }}>
        <h2>regular counter</h2>
        <h1>{value}</h1>
        <button className='btn' onClick={() => setValue(value - 1)}>
          decrease
        </button>
        <button className='btn' onClick={reset}>
          reset
        </button>
        <button className='btn' onClick={() => setValue(value + 1)}>
          increase
        </button>
      </section>
      <section style={{ margin: '4rem 0' }}>
        <h2>more complex counter</h2>
        <h1>{value}</h1>
        <button className='btn' onClick={complexIncrease}>
          increase later
        </button>
      </section>
    </>
  );
};

export default UseStateCounter;

Events in react

sandeepsamanth — Tue, 10 Jan 2023 12:09:17 +0000

Events - Fundamentals

Vanilla JS

const btn = document.getElementById('btn');

btn.addEventListener('click', function (e) {
  // access event object
  // do something when event fires
});

similar approach
element, event, function
again camelCase

const EventExamples = () => {
  const handleButtonClick = () => {
    alert('handle button click');
  };
  return (
    <section>
      <button onClick={handleButtonClick}>click me</button>
    </section>
  );
};

*most common
*

onClick (click events)
onSubmit (submit form )
onChange (input change )

function BookList() {
  return (
    <section className='booklist'>
      <EventExamples />
      {books.map((book) => {
        return <Book {...book} key={book.id} />;
      })}
    </section>
  );
}

const EventExamples = () => {
  const handleFormInput = () => {
    console.log('handle form input');
  };
  const handleButtonClick = () => {
    alert('handle button click');
  };
  return (
    <section>
      <form>
        <h2>Typical Form</h2>
        <input
          type='text'
          name='example'
          onChange={handleFormInput}
          style={{ margin: '1rem 0' }}
        />
      </form>
      <button onClick={handleButtonClick}>click me</button>
    </section>
  );
};

Event Object and Form Submission

const EventExamples = () => {
  return (
    <section>
      <form>
        <h2>Typical Form</h2>
        <input
          type='text'
          name='example'
          onChange={(e) => console.log(e.target.value)}
          style={{ margin: '1rem 0' }}
        />
      </form>
      <button onClick={() => console.log('you clicked me')}>click me</button>
    </section>
  );
};

map ,filter,......

sandeepsamanth — Tue, 10 Jan 2023 10:27:13 +0000

const names = ['john', 'peter', 'susan'];
const newNames = names.map((name) => {
  console.log(name);
  return <h1>{name}</h1>;
});

props-destructuring

sandeepsamanth — Tue, 10 Jan 2023 10:01:59 +0000

const someObject = {
  name: 'john',
  job: 'developer',
  location: 'florida',
};

console.log(someObject.name);
const { name, job } = someObject;
console.log(job);

other ex

const Book = (props) => {
  const { img, title, author } = props;
  return (
    <article className='book'>
      <img src={img} alt={title} />
      <h2>{title}</h2>
      <h4>{author} </h4>
    </article>
  );
};

const Book = ({ img, title, author }) => {
  return (
    <article className='book'>
      <img src={img} alt={title} />
      <h2>{title}</h2>
      <h4>{author} </h4>
    </article>
  );
};

react day 1 jsx-rules

sandeepsamanth — Tue, 10 Jan 2023 09:49:51 +0000

return single element (one parent element)

semantics section/article
Fragment - let's us group elements without adding extra nodes
camelCase property naming convention

<button onClick={myFunction}>click me</button>

className instead of class

return <div className='someValue'>hello</div>;

import React from 'react';
import ReactDOM from 'react-dom/client';

function BookList() {
  return (
    <section>
      <Book />
      <Book />
      <Book />
      <Book />
    </section>
  );
}

const Book = () => {
  return (
    <article className='book'>
      <Image />
      <Title />
      <Author />
    </article>
  );
};

const Image = () => (
  <img
    src='https://images-na.ssl-images-amazon.com/images/I/71m+Qtq+HrL._AC_UL900_SR900,600_.jpg'
    alt='Interesting Facts For Curious Minds'
  />
);
const Title = () => {
  return <h2>Interesting Facts For Curious Minds</h2>;
};
const Author = () => <h4>Jordan Moore </h4>;

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<BookList />);

react day 1

sandeepsamanth — Tue, 10 Jan 2023 09:36:39 +0000

function Greeting() {
  return <h2>My First Component</h2>;
}

// arrow function also works
const Greeting = () => {
  return <h2>My First Component</h2>;
};

starts with capital letter
must return JSX (html)
always close tag