Created
September 25, 2017 20:09
-
-
Save claraj/e91544b5c43506d055a23a739f3e98db to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Your Turn</title> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | |
| <style> | |
| .visited { | |
| background-color: lightgray; | |
| text-decoration: line-through; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Travel Wishlist</h1> | |
| <h3>Click on a place to 'visit' it</h3> | |
| <ul> | |
| <li class="place">Rome</li> | |
| <li class="place">Cairo</li> | |
| <li class="place">New York</li> | |
| <li class="place">Rio de Janeiro</li> | |
| </ul> | |
| <hr> | |
| <P>You have visited <span id="total_visited">0</span> place(s)</P> | |
| <P>You have <span id="total_not_visited">0</span> place(s) left to visit</P> | |
| <script> | |
| $(function(){ | |
| // TODO update the numbers in total_visited and total_not_visited spans | |
| // TODO select all class=place elements. When they are clicked, add the class "visited" | |
| // TODO keep the the numbers in total_visited and total_not_visited spans updated as user selects more places | |
| // TODO Display an alert when all destinations have been visited | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment