Building the Simple Liker App
Learning Goals
- Set up an event listener to respond to a user action
- Submit a request to a mocked-up server
- Update the DOM based on the mock server's response
Introduction
Remember when we started this exploration of the "Simple Liker" application? You might not have been sure that you would make it to this point, but you have. Right now you should have the information needed to create a basic web application!
Your goal is to implement the "liking" functionality of "Simple Liker." As a reminder, the final product should look something like this:
The focus of this lab is the JavaScript code. You should only need to make one change to the HTML, and no changes to the CSS file.
You might be tempted to look back at previous code, but don't. Use your knowledge and documentation from the internet (if needed), to build the application.
Instructions
You will be doing your coding in main.js
. If you take a look at the file, you
will see that a function, mimicServerCall()
, is being provided for you. This
function will "mock" the behavior of a backend server. You will invoke
mimicServerCall()
in response to a user action, and the function will randomly
return either a "success" or "fail" response. Your code will then need to handle
the response appropriately: updating the appearance of the heart if it returns a
"successful" response, and displaying an error in the DOM otherwise.
Note that the content of the "successful" response from the server is not
important here โ we only care that it's successful. This means you will not need
to call .json()
on the response so you only need a single then()
call.
Here's the specification:
- Add the
.hidden
class to the error modal in the HTML so it does not appear when the page first loads - When a user clicks on an empty heart:
- Invoke
mimicServerCall
to simulate making a server request - When the "server" returns a failure status:
- Respond to the error using a
.catch(() => {})
block after your.then(() => {})
block. - Display the error modal by removing the
.hidden
class - Display the server error message in the modal
- Use
setTimeout
to hide the modal after 3 seconds (add the.hidden
class)
- Respond to the error using a
- When the "server" returns a success status:
- Change the heart to a full heart
- Add the
.activated-heart
class to make the heart appear red
- Invoke
- When a user clicks on a full heart:
- Change the heart back to an empty heart
- Remove the
.activated-heart
class
- Keep all your styling rules entirely in
style.css
. Do not manipulate any.style
properties. - Only manipulate the DOM once the server request responds. Do not make the
heart full until you're inside a successful
.then
block.
Note: The tests will only check for the first part of the specification (adding the
hidden
class). You should verify the rest of the behavior yourself, by checking the page in the browser.
Conclusion
That's it! Congratulations. You're now a real-deal front-end developer! You can use HTML, CSS, and JavaScript to create living, breathing applications. Every web application front-end you see or have seen is built using these three pillars, which you're now skilled with! Give yourself a well-deserved pat on the back!