Lab 6: To Do List Starter

Overview

This lab is intended to help start your Assignment 6. Refer to the assignment requirements while you are working on this lab.

Sample

Requirements

1. Code set-up
   1. Create the following new files:
      1.  todolist.html file,
      2. style.css file, and
      3. main.js file.
   2. Include the jQuery library in your .html file.
   3. Write all your CSS in the .css file.
      1. Link your .css file into the .html file.
   4. Write all your JavaScript in the .js file.
      1. You can add your .js file in your .html file by using <script src="name_of_file.js"></script>
      2. Use jQuery for all your DOM manipulation and event listening. You will write very little pure JS.
      3. Note you can still use JavaScript along with jQuery. For example:

         $("button").on("click", function() {
             let isOn = true; // JS way of creating variables
             if( isOn == true) { // JS way of if/else statements
                 $("input").val("The app is on");
             }
         });

2. Simple HTML structure
   1. Before working on adding/deleting items or styling the app, create a basic HTML structure that will help you start the assignment.
   2. Create an area at the top of the page with some text about today’s weather. A placeholder is fine for now.
   3. Below the weather information, create a container that will hold all your to do list items. Make this container somewhere between 400 and 600px wide.
   4. At the top of the to do list, create a heading that displays “To Do List.”
   5. Below the heading, add an input area that allows users to type in a to do item here.
   6. Below the input, use the <ul> tag to create a list of at least three to do items.
   7. Within the list item, add a placeholder for the “square” icon. This can simply be a character for now (In the sample, it is the X). Later you can replace the icon with an emoji (more details in A6).
3. Simple CSS
   1. In your newly created .css file, add some basic CSS to help you get started.
   2. Add a border around the weather and to do list.
   3. Set a width to the weather and to do list.
   4. Center the weather and to do list to the browser.
   5. That’s sufficient for the lab. Feel free to add more CSS if you’d like.
4. Weather API information is displayed at the top of the page.
   1. Get Los Angeles’s weather information from the Weatherbit.io’s API. Sign up for a free account to obtain an API key.
   2. Read their documentation to find out how to get Los Angeles’ current temperature (in Fahrenheit), a short weather description and the apparent temperature (what it “feels like”).
      1. Start by looking for the endpoint of the API. What’s the URL you need to hit to communicate with this service?
   3. Use jQuery’s ajax method get the information from Weatherbit.
5. When completed, upload completed file to the server and add a link to this lab in your student_page.html. Re-upload the student_page.html to the server.