DEV Community

loading...
Cover image for #4 of 100DaysOfCode

#4 of 100DaysOfCode

icecoffee profile image atulit023 ・2 min read

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.🌷

Discussion (1)

Collapse
schleidens profile image
Schleidens_DEV

Keep it up dude

Forem Open with the Forem app