This is an example of a simple HTML page where, when the user clicks the "add note" button, a modal window with a form appears.
Fork and clone this repo and take a look through the index.html, style.css, and script.js files and try to parse how this works.
Look up CSS properties you do not know and take a look at the documentation for parts of the JavaScript, if you are feeling bold.
Do this out of the context of any other application you've built. You should just need a HTML file, CSS file, and JavaScript file.
Helpful steps to look up include:
- JavaScript click events
- Adding / removing classes using JavaScript
- Adding / removing styles using JavaScript
See if you can add a feature such that the when a user clicks the "x" in the modal window, the modal and overlay is hidden.
On the services page of the Fiona Salon, build functionality so that:
- When a user clicks the name of a massage service, a modal window pops up.
- That window contains the name of the massage, the decorative scroll, the massage description (you can copy directly from the services page), and a price. You can decide on a design for displaying this information.
- When the user clicks an "x" icon, the modal window disappears.
Start by building the modal functionality for just one service, then work to expand it to all of the services.