Hosted Project: https://js-beginners.github.io/counter-project/
Github Source Files: https://github.com/JS-Beginners/counter-project
JavaScript used:
- DOM Manipulation
- Control Structures
- Array.forEach()
- JavaScript CSS Manipulation
- eventListeners
Your Turn!
What to accomplish:- Download the source code from the github repository above.
- Delete the contents of the
app.jsfile. - Implement the JavaScript code in your own
app.js file. - Add a link to your finished project below!
- The default counter begins at the number 0.
- When you click “Lower Count”, the counter should decrement by 1. If the count goes below 0, the number should change to the color red.
- When you click “Add Count”, the counter should increment by 1. If the count goes above 0, the number should change to the color green.
Need to see the video solution for this project?
Get John's JavaScript Tutorial and Projects Course now!
These assignments are really great. It still takes me much longer than you did it, but the practice is really helpful. I didn’t use the project files, but created my own project from scratch and added some more functionality to it.
https://my-counter.netlify.com/
Great! Keep it up!
my complete projecy
countwithme.netlify.app
Thank you for these projects!
Hey thanks for these tutorials! This is great practice for a newb like myself 🙂
I’ve been going through and writing out the JS on my own without looking and comparing to yours afterwards. This exercise I noticed quite a bit of a difference. This is what I had.
const count = document.querySelector(‘#count’);
const lowerCount = document.querySelector(‘#lowerCount’);
const addCount = document.querySelector(‘#addCount’);
let total = 0;
function changeColor() {
if (total > 0) {
count.style.color = ‘green’;
}
else if (total {
total –;
count.innerText = total;
changeColor();
});
addCount.addEventListener(‘click’, () => {
total ++;
count.innerText = total;
changeColor();
});
I noticed that you use a forEach loop that allows you to use one addEventListener vs. my two EventListeners. Is yours a better practice to follow? Curious if I want to try and reduce my addEventListeners as much as possible.
Thanks for your insight!
Seth
For some reason it didn’t copy the full thing. Here are my event listeners..
lowerCount.addEventListener(‘click’, () => {
total –;
count.innerText = total;
changeColor();
});
addCount.addEventListener(‘click’, () => {
total ++;
count.innerText = total;
changeColor();
});
perfect, Seth!
I did it using constructor function 😁
Thank you for share these awesome projects.
I have stuck on something in the project
in the project
buttons.forEach(function(button){
button.addEventListener(‘click’, function(){…
I am very confused whether button element can be a parameter
Guys, if you know how to solve the tasks in the project (algotihm) and do not know how to write the solution in programming language, my avice do not destroy yourself, just open the written code and learn each word\function and explain what is written \ why it is written. Than try to solve it with notes. It helps If you have the same problem with knowledge of syntaxis. Otherwise, you spend too much time just for searching in google