DEV Community

Cover image for #4 of 100DaysOfCode
Atulit Anand
Atulit Anand

Posted on

#4 of 100DaysOfCode

Fourth Day,
I got mixed feelings about today.
Yesterday after making my second project, I started feeling like I am pretending to know everything but in reality, I know nothing.
I know what the term is, just don't wanna say it .๐Ÿ˜…

So, I took today's whole day for revisiting all the facts and concepts. So-called "revision".
I wasted some of my time too but I also did a remake of my yesterday's project.

My today's project :
Github Cards app but with the help of functional components this time.

const Card = (props) => {
  return (
    <div className="github-profile">
      <img src={props.profile.avatar_url} />
      <div className="info">
        <div className="name">{props.profile.name}</div>
        <div className="company">{props.profile.company}</div>
      </div>
    </div>
  );
};

const CardList = ({ profiles }) => {
  return profiles.map((profile) => <Card profile={profile} />);
};

const Form = (props) => {
  const fetchInput = (event) => {
    event.preventDefault();
    let inputData = document.getElementById("input_cardName");
    props.onSubmitHandler(inputData.value);
    inputData.value = "";
  };
  return (
    <form onSubmit={fetchInput}>
      <input type="text" id="input_cardName" />
      <button type="submit">Add Card</button>
    </form>
  );
};

const App = () => {
  const [currentProfiles, addProfile] = useState([]);
  const addCard = async (profileName) => {
    const resp = await axios.get(`https://api.github.com/users/${profileName}`);
    let profile = await resp.data;
    addProfile([...currentProfiles, profile]);
  };
  return (
    <div>
      <div>Github Cards Application</div>
      <Form onSubmitHandler={addCard} />
      <CardList profiles={currentProfiles} />
    </div>
  );
};

ReactDOM.render(<App />, mountNode);

Enter fullscreen mode Exit fullscreen mode

You can try and run the code in this playground.

But even after that, I didn't felt satisfied. ๐Ÿคทโ€โ™‚๏ธ
So I started learning again.
I'll update the post if I'll learn something wonderful today.

Also I'd really appreciate it if someone wanna share their experience regarding this or best practices to learn. ๐Ÿ™‚

Till then,
Thanks for joining me.๐Ÿค—
Have a beautiful day.๐ŸŒท

Top comments (1)

Collapse
 
schleidens profile image
Schleidens.dev

Keep it up dude