I built this small application during Flatiron School's Software Engineering Immersive Bootcamp while initially learning about JavaScript functionalities. It has a few features:
- A Counter that increases by 1 each second
- Plus and Minus buttons that increment or decrement the counter
- A 'like' button (❤️) that adds a 'like' for the number that is currently displayed by the timer
- A comment box that adds comments when submitted
As part of the practice, I had to explore and test out the behavior of a working, finished page to understand what is happening underneath each of these features. Note: the HTML framework was provided.
The challenge was to reverse engineer these features and build them myself, using what I learned in two days about JavaScript and DOM Manipulation.
The deliverables for the practice are included below. They describe the features from the perspective of a user when they visit the page.
- As a user, I should see the timer increment every second once the page has loaded.
- As a user, I can manually increment and decrement the counter using the plus and minus buttons.
- As a user, I can 'like' an individual number of the counter. I should see count of the number of 'likes' associated with that number.
- As a user, I can pause the counter, which should
- pause the counter
- disable all buttons except the pause button
- the pause button should then show the text "resume." When 'resume' is clicked, it should restart the counter and re-enable the buttons.
- As a user, I can leave comments on my gameplay, such as: "Wow, what a fun game this is."
To view the lesson and play with the code, please click on Flatiron School's DOM Challenge page and start learning to code for free on Learn.co.
Head back to my DOM Challenge site.