learn-co-curriculum / jsdom-dom-challenge

The DOM Challenge

If you open up index.html in the browser, you'll find a small application. 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

First, take a few minutes to explore and test out the behavior of the page. Think about how each of the features must work. What must be happening underneath each of these features?

The challenge is to reverse engineer these features and build them yourself, using what you've learned about JavaScript and DOM Manipulation.

Rewriting the functionality

To begin, comment out the script tag linking to js/index.min.js in the html file. This will "shut off" the existing behaviors so you can begin recreating them, using the js/challenge.js file to write your code. You can see the <script> tag that loads this file just after the one for index.min.js.

Add the following features one by one, refreshing the page to see your functionality working as you build.

Note: These deliverables are written in the form of User Stories. They describe the features from the perspective of a user when they visit the page.

1. As a user, I should see the timer increment every second once the page has loaded.
2. As a user, I can manually increment and decrement the counter using the plus and minus buttons.
3. As a user, I can 'like' an individual number of the counter. I should see the count of the number of 'likes' associated with that number displayed.
4. As a user, I can pause the counter, which should:

• pause the counter
• disable all buttons except the pause button
• switch the label on the button from "pause" to "resume"

5. As a user, I should be able to click the "restart" button to restart the counter and re-enable the buttons.
6. As a user, I can leave comments on my gameplay, such as: "Wow, what a fun game this is."

Hint for the timer

If you're not sure how to create or pause a timer, look into:

• setTimeout
• setInterval
• clearinterval

Stuck?

If you're still stuck on this lesson, there is a solution branch available on GitHub that has a video review along with one possible solution. There are many ways to solve this lesson, so if you came up with a different approach than what was shown in the review, that's totally fine!

jsdom-dom-challenge's Issues

Lab, not a read me

The icon on this lab indicates that it's just a read me but it's actually a lab

500 error for students on Learn.co

Just had a screenshare with a student who was attempting to open this lab's page on Learn.co and got a 500 error for the lab.
I also attempted to click on the link for the lab and was unable to open it with the same 500 server error.

Wrong line of code commented out

Per the instructions for this lab, line 43 of index.html should be commented out and line 42 should be uncommented. Otherwise, the lab will not do anything and may leave students not understanding why the lab is not functioning as intended. Students are instructed to switch the line of code that is commented out.

Horrible

Thanks for raising this issue! Future learners thank you for your diligence. In
order to help the curriculum team address the problem, please use this template
to submit your feedback. We'll work on addressing the issue as soon as we can.

Please fill out as much of the information below as you can (it's ok if you
don't fill out every section). The more context we have, the easier it will be
to fix your issue!

Note: you should only raise issues related to the contents of this lesson.
If you have questions about your code or need help troubleshooting, reach out to
an instructor/your peers.

---

Link to Canvas

Add a link to the assignment in Canvas here.

What should be changed?

Suggest your change here. Let us know what section or line of the Readme needs
to be updated, and any proposed corrections. Include the line number(s) if
possible.

Additional context

Add any other context about the problem here.
I have to say this lab is quite horrible and from where you are in the curriculum it's extremely impossible to finish on your own. I worked on it for over 3 days, with about 6+ tech coaches (and 10 mental break downs) and still was unable to finish it fully. If you are going to put such a difficult lab at least have a solution to lean on or tests to go off of because it was very stressful and a lot of tech coaches were even unable to help me. I am not one to give up easily but this lab for sure made me.

Include reference link for preventDefault

As a user, I can leave comments on my gameplay, such as: "Wow, what a fun game this is."

To meet this requirement, students will need to make use of preventDefault, and I don't believe this is mentioned in earlier lessons/readings.

https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault would do just fine

#staff