Lab 6: To Do List Starter

Posted on | by nayeon

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 this character with the icon from Font Awesome library.
  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.
Submission/Upload to the server

Please follow the submission requirements below carefully. You will be deducted points for not following submission requirements to the teeth.

  1. Open FileZilla and connect to the itpwebdev server as you have done in Lab 1 (click File -> Site Manager). If you forgot how to connect, follow this guide on how to connect and upload files to the itpwebdev web server.
  2. After you have successfully connected to the itpwebdev server, created a folder (aka directory) named lab6 inside the public_html folder. Then upload this assignment HTML file and images to the lab6 folder. Refer to the guide if you’re not sure how to upload the assignment file.
  3. In your browser, go to http://303.itpwebdev.com/~yourusername/lab6/todolist.html to check that the assignment file has been uploaded correctly.
  4. One last thing. In your computer, open up student_page.html that you created in Lab 1. Add a link to this assignment to student_page.html under the heading “Assignments” so that the TAs can easily access your completed assignment.
  5. Upload the updated student_page.html to the itpwebdev server via FileZilla inside the public_html folder. If it asks you want to overwrite the previous file, click Yes.
  6. (Optional) If you are having trouble uploading to the server and cannot upload on time, add all files for this assignment in a folder, compress it as a .zip file and upload it to Blackboard. On Blackboard, go to Assignments -> Lab 6: To Do List Starter. You will get some points deducted for not uploading correctly but at least you will not get a zero.