Scripting - To do? Or not TO DO?!
Due: 09-25
Description
You all have just finished learning how to organize content on the web using HTML 5 and CSS3! Yippee! It's time to take things up a notch! This homework is going to test your JavaScript and jQuery skills in order to manipulate the DOM, pull content, create content, and do other fancy stuff!
We have given you a project structure with some code that will get you started:
Use git to clone or pull the homework from github.
Once you have the files, you have a bunch of tasks to finish! So unleash your creativity, especially when the 3 powers combine (which one is gleek?) - HTML! CSS! JS! ... GO WEB!
Assignment
- The Web page currently has a browser title (as indicated by the <title> element). However, it doesn’t have a main title on the page itself. Add a title using the appropriate HTML element.
- Also, the column widths are too narrow. In the css file (_css/style.css), make the columns wider without pushing the form below the list.
- Add various styles to create some hierarchy in the layout and make the to-do list easier to use. For example, you may consider making the input field bigger, adding a background color, making “remove” a button instead of a link, etc.
- The user should be able to add/remove an item to/from the to-do list. Build these two functionalities using jQuery in the script file (_js/script.js). You may find the jQuery API documentation helpful.
- Add at least one animation effect using either CSS3 or jQuery. The animation should make sense for a to-do list (for example, animate the to-do items on hover, or when added or removed from the list)
- Implement one of the following CSS3 properties in your CSS:
border-radius
,box-shadow
,text-shadow
,translate
,rotate
,scale
,skew
- EXTRA CREDIT: Write JavaScript that uses the HTML5 Geolocation API to obtain the user's location when the page loads. Print the latitude and longitude values to the console.
- EXTRA EXTRA CREDIT: Do something useful with the location data (add a map? tag to-dos with location data?)