Day 1: 100 Days of Javascript Challenge
Christine
Hi All! I decided to start the Udemy 100 days of Javascript course to keep me coding and get more comfortable with discussing my code.
Day 1 is creating a simple counter app with 3 buttons. One to add, one to subtract, and one to reset. When you click on the add button the number will increase, when you click on the subtract number the number will decrease, and when you click on reset it will reset to 0.
Another feature will be color changing depending on the negative or positive value of the number. It a number is negative its color will change to red, if you increase it will become yellow, and if it is reset it will be white.
I started by creating 3 different files in my project folder: index.html, styles.css, and script.js. From there I always like to start with my html file to layout my project. In index.html I created a container div to house my counter app. In that div I included my h1 title and my 3 buttons. I also included some font awesome icons for my buttons and placed the link for font awesome in the head of my html file.
Next, styling! Using basic CSS I styled the div container, counter, and buttons. A fun tip when wanting to style all the direct children of class is to use > *. For example in the counter div I wanted to style the margin bottom for all the children with that div. so I called the .counter-div in my css file and followed it with > * before my curly braces.
Now onto the JavaScript. In my script.js file I first added some query selectors to select the elements in my html that I wanted to target including my subtract, add, reset, and buttons. Then instead of adding multiple event listeners for each click event. We were taught to use something called event delegation. Which is adding a single event listener to the parent element and then using if statements to select each class of button. From there I created a setColor function and used and if else statment to designate a color change depending on the positive or negative value of the number.
Easy and fun project! Looking forward to the next 99 days!
