Skip to content

The-Marcy-Lab-School/js-fun-with-events-lab

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 

Repository files navigation

JS Events Lab

Objective

For this lab, you'll be recreating this webpage. Experiment and interact with the demo webpage to discover all of its features. You can create and edit any files in this repo in order to implement the same functionality as seen in the demo webpage.

User stories

  1. There is a counter that starts at 0 every time the page is loaded or refreshed. Every second, the number in the counter increases by 1.
  2. As a user, I can click the - button in order to subtract 1 from the counter.
  3. As a user, I can click the + button in order to add 1 to the counter.
  4. As a user, I can type something in the comment input, and when I submit the form, a new <p> tag will be added inside the #list.comments div without the page refreshing.
  5. As a user, I can click on the Like button in order to "like" the number currently displayed in the counter. The liked numbers appears as an <li> in an unordered list along side how many times that number was liked. Hint: For this feature, it might helpful to create an object in your JavaScript file to keep track of how many times a number was liked

Bonus Challenge (Pause/Resume Feature)

  1. As a user, I can click on the pause button, which will accomplish the following:
    • The counter on the page will no longer increment every second.
    • All other buttons on the page should be disabled.
    • The text in the pause button changes to resume.
  2. As a user, while the counter is paused, I can click on the resume button, which will accomplish the following:
    • The counter on the page will increment by 1 every second.
    • All other buttons on the page are no longer disabled.
    • The text in the resume button changes back to pause.

Directions

  1. If this is a Practice Lab, fork this repository and clone down your forked repo. OR, if this is a Lab Assignment generated through Github Classroom, you do not need to fork and can clone down your personalized repo directly.
  2. Code your solution in index.js. Open the HTML file in your web browser as you're coding to see your work.
  3. Stage, commit, and push your changes regularly.
  4. If this is a Practice Lab, open a pull request into The-Marcy-Lab-School:master branch to submit. OR, if this is a Lab Assignment, copy the URL of this personalized repo and submit it through Canvas.