Key Terms
The 3 Languages of the Web
- HTML (HyperText Markup Language) – Using Tags we create web elements such as Images, Links, Headings, and Lists.
- CSS (Cascading Style Sheets) – Using Selectors ( Cheatsheet ) and Rules ( Cheatsheet ) we can add style to the elements.
- JS (JavaScript) – The Programming Language of the web; We can use all the Variables and Control Structures (Ifs, Loops) we’re use to. Using Events ( Cheetsheet) we add interactivity to the elements.
- jQuery popular is a JavaScript library .
Video Tutorial
About the Project
Let’s create a To-Do list. In the process, We’re going to learn all 3 languages of the web and what they are used for.
Getting Started
- Create a new Pen on CodePen.
Adding jQuery
On your new Pen’s Settings, add the jQuery JavaScript library.
Objectives
- Create a Heading for our list.
- Create a list with a few list items.
- Style the list items. (Change either font-size, color, background-color, etc.)
- Cross out completed items on the ToDo list by clicking them.
- Create a class for complete list items. ( .complete) These items should have the rule ” text-decoration: line-through; ” applied.
- Attach a JavaScript function to the Click event of the List Item (<li>) element(s).
- The JavaScript function should add the class for complete items to the list item that is clicked.
- Add a Clear All button.