What I learned during the 100 Days of Code Challenge
Tags: 100daysofcode, javascript, webdev, programming
Published: 2022-09-02 23:37:57

I completed the #100DaysOfCode challenge (almost in a row every day)🎉! The challenge was a great journal to track my coding experience so I'd like to look it back, and set a goal for the next challenge!

Here's my very first post of the challenge:
{% twitter 1519507422238240768 %}

At this point, what I had coding skills were 

- Basic coding skills of HTML and CSS
- Bits of basic knowledge Javascript syntax 

Let's see what I have learned during 100days!


## What I learned 

- HTML
- CSS, Sass
- Algorithms solving
- JavaScript: DOM manipulation, API
- Java: OOP, DataBase, Spring tool, PostgreSQL
- React: JSX, Props, State, class component, Hooks (UseState)
- Tools: Command line, Github, Heroku, Figma, Semantic UI

## What I created (excerpt)

- HTML and CSS (Sass)

Challenges from [Fronted menter](https://www.frontendmentor.io/home) were good to train my HTML and CSS skills and gave me some ideas about designs. Especially getting used to implementing responsive design took me time, but Sass function such as @mixin makes my life easier😂

{% twitter 1526060632885211136 %}

- JavaScript: DOM munpilation

During these 100days, I think one of the most parts I focused on was learning DOM. At the beginning, I've completed the [#JavaScript30](https://javascript30.com/) tutorials to get general ideas about what I can do with it.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3mz7ee0l697y90zp8m1f.png)


After finishing the tutorials, I tried to create several small components or projects to get used to writing codes by myself from scratch.

{% twitter 1535880937090580480 %}


{% twitter 1543463369172140034 %}

Many bugs and getting stuck taught me these essential JavaScript DOM methods such as below. 
Here are some examples:

✅getElementId (to access any element virtually)
`const myExample = document.getElementById(“example_btn”);`

✅Node (to access each nodes)
`const myNodeList = document.body.childNodes;`

✅createElement
`const myNewListItem = document.createElement(“li”)`

✅appendChild
`myList.appendChild(myNewListItem);`

✅removeChild
`myList.removeChild(myRemoveLink);`

✅innerHTML
`myList.innerHTML = “<p> </p>”;`

Below work helped me a lot to get hang of this method.

{% twitter 1546348468431568896 %}

✅setAttribute (to set the value of an attribute on the specified element)

```
add.addEventListener("click", () => {
    i++; 
    const img = document.createElement("img"); 
    const section = document.querySelector("section"); 
    img.src = "https://i.pravatar.cc/100?u=" + i;
    section.appendChild(img);
  });
```
{% twitter 1538407443574554624 %}

- JavaScript: API

I also learned about API to get ready to go through React since I'm aspiring to become a front-end developer. 
The below project is for fetching the Breaking Bad character information. Invoking too many DOM was tiring me a bit so my friends told me I'm going to fall in love with React😂

But through this project, I reviewed some JavaScript objects such as 
`filter(), includes(), toLowerCase(), map()` methods
and learned the difference between static and dynamic variables as well.

{% twitter 1550636421332946944 %}

{% twitter 1553270198936866816 %} 

- Java (OOP)

It's not JavaScript, it is Java! I got confused to understand the concept of OOP so I watched the class recording over and over again. The struggle moments gave me some general idea of programming😇

This is an application I made by Java:

{% twitter 1545229643199836161 %}

And also I experienced a group project to make a company management system by Java. Through it, I learned how to corporate with other developers and use Github.

- React (JSX, Props, State, class component)

It has been already a month since to start learning React so far and already gotten confused a lot to understand some concepts. But the knowledge of JavaScript helps me sometimes!

{% twitter 1558350438184865792 %}

## What I want to learn next 100days of code challenge

{% twitter 1559786990794551297 %}


I'm currently working on round 2 of the 100 Days Of Code challenge. After finishing the next 100days, I assume I'm getting the ball rolling to prepare a job hunting. 
So my goal for the next challenge is to learn and work about:

 
- React
- TypeScript
- UI framework
- making a few projects for my upcoming portfolio (4 or 5 projects)
- Contributing to Open source 
- etc...😉

I feel learning programming is repeating the cycle that learning new knowledge, getting confused, seeing tons of errors and figuring them out, and then getting to know somehow. But I love this process to see how I grew up and feel it.

There's no end to learning programming. I will keep it up consistently with fun🤗🔥