Month: September 2021

Lecture 12: Event Propagation, Web Storage

Posted on | by nayeon

To-do for today’s class

Slides

No slides

Helpful Readings

Completed Files

Lecture 11: jQuery

Posted on | by nayeon

To-do for today’s class

Slides

Link to download PDF version.

Completed Files

Assignment 6: To Do List App

Posted on | by nayeon

Overview

For this assignment, you will create a simple To Do List app using jQuery. This assignment will also help you review your HTML and CSS skills in preparation for the upcoming midterm exam.

Suggested approach: start with HTML first and make the delete / add functionalities work. Work on styling at the very end. Following the requirements step by step is highly recommended.

Sample

Note: Samples below don’t always meet all the requirements. Make sure to follow the requirements rather than solely relying on the samples.

Requirements

Note: Steps 1-3 are from this week’s lab. If you have submitted the lab, make copies of the lab files for assignment 6. Do not modify lab files past the lab deadline!

  1. Code set-up
    1. Create a new .html file, .css file and .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 vanilla 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. Today’s weather information is displayed at the top of the page.
    1. Use Weatherbit.io’s API to get this information. You will need to create a free account to obtain an API key.
    2. Read over the documentation to find out how to get the weather in Los Angeles.
    3. Get the temperature, a description, and the apparent temperature (“feels like”).
    4. The temperature must be in Fahrenheit.
  3. To Do list structure
    1. Create a container that will hold all your to do list items. The container should be between 400 – 600px wide.
    2. At the top of the list, add a heading that reads “To Do List.” Add a background color of your choosing.
    3. Below the heading, add an input area that allows users to type in a to do item here.
      1. Include a placeholder that reads “Add to-do item here”.
      2. Do not add a “Submit” button.
    4. Below the input area, create a list of to do items using the <ul> tag. By default, have at least three items hardcoded.
  4. Change the city and remember the city
    1. Add a dropdown at the top of the to do list. Add three cities of your choices as options in the dropdown (Los Angeles can be one of them).
    2. When user changes the dropdown, call the Weatherbit API again and get the weather for the city that the user selected.
    3. Save the city that the user chose last in Local Storage.
    4. When the page is refreshed, the city selected in the dropdown must be the city that the user chose last (retrieve from local storage).
  5. Deleting an item
    1. Have three items hardcoded in so that you can easily test the delete function.
    2. When a user clicks on the to do item text (not the square), change the color of the item and strike it out. Both of these changes can be done using CSS properties. When a user clicks on the to do item text again, change the text style back to normal.
    3. When a user clicks on the square (or X if you have not replaced it with a square icon yet) next to the to do item, remove the to do list item entirely from the DOM.
      1. Fade out the item before removing it.
      2. Hint: there is a jQuery method that removes DOM elements.
    4. The to do item must be removed ONLY when the square is clicked.
    5. If the item is not crossed out and a user clicks on the square button, do not cross out the item when it is removed. The item must only be removed and not crossed out.
  6. Adding an item
    1. A to do item is added to the bottom of the list when a user types into the input area and presses the ENTER key. There is no button to submit this information.
      1. Hint #1: Forms get submitted when user presses ENTER key.
      2. Hint #2: jQuery has a method that allows you to easily append items.
    2. After adding an item, try to delete the item that was just added. You may find that you cannot delete the dynamically created item. Read about Event Delegation and Event Propagation here to help you solve this problem: http://learn.jquery.com/events/event-delegation/
  7. Styling
    1. Icons – The square icon and plus icon shown in the sample are from the icon library Font Awesome here: https://fontawesome.com/
      1. Read the documentation to learn how to load Font Awesome library into your code and how to use a specific icon.
      2. You are free to use any icons you wish. You do NOT have to use the square or plus icon shown in the sample, but do pick icons that make sense 🙂
    2. Font Family – Choose a font family that is not a default web font (e.g. Arial or Times New Roman). Google Fonts is a great resource.
    3. Colors – Choose your own colors. Colors do not need to match the given sample.
      1. Add a background color for the whole browser.
      2. Add a background color where you display the weather information.
    4. Hover effect – When a user hovers over any of the list items, change its background color to a color of your choosing.
    5. Box-shadow – Not discussed in lecture before, but it is a neat CSS property that enhances the look of the list. Add a box shadow around the container of the to do list.
      1. Read more about the box-shadow property at MDN.
      2. A quick google search will reveal many sites that generate box-shadow effects for you.
  8. The plus icon
    1. When the plus icon is clicked, show / hide the input area.
    2. Add an effect so that it feels the input area is sliding up and down. See sample for details.
  9. Web Storage
    1. Add/remove to do items to local storage so that if the user closes the browser tab and comes back to it, the to do items are still saved.

 

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 assignment6 inside the public_html folder. Then upload this assignment HTML file and images to the assignment6 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/assignment6/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 -> Assignment 6: To Do List. You will get some points deducted for not uploading correctly but at least you will not get a zero.

Midterm: Client-Side Information

Posted on | by nayeon

Midterm: Client-Side Information

When & Where: Online, through Gradescope.com can start the exam between Thu, 10/7 12:00 pm PST to Fri, 10/8 6:00 pm PST.

Length & Format: 80 minutes, online exam.

Topics: Everything taught from Lecture 1 to Lecture 12 (covered on 9/30)

Types of Questions: 

  • Multiple choice – select one answer
  • Multiple choice – select all that apply
  • True/False
  • Fill in the blank
  • Short Code

How to take the exam:

  • Log in to gradescope.com. You will need to create an account if you haven’t already with your USC email address.
  • Once you have logged in, you should see two “Online Assignments” for ITP 303.
  • Take the “Practice Gradescope Exam” first. It is a very short and simple practice exam just so you can get familiar with taking an exam on Gradescope.
  • Then take the “Midterm: Client-side Exam” — this is the real exam.
  • For the short code questions, write your code on Sublime Text or another text editor first. Then copy-paste the answers to gradescope. This will help maintain the format of the code (e.g. indentation) and also you can run your code before submitting it.
  • Have questions during the exam? Because you are allowed to take the exam at any time, we will be unable to answer questions you have during the exam like you would in a physical setting. Make your best-educated guess and for really uncertain questions make a note about it separately and email it to the instructor after the exam.

Important Notes:

  • This is an open-book exam. You may use notes, slides, and online resources. The only thing you CANNOT do is collaborate with any human beings on this exam. Do not discuss with anyone about the exam. Your exam must be completed on your own, by yourself.
    • Any suspicion of collaboration will be reported to SJACS.
  • I highly recommend you create one single reference sheet instead of scouring your notes/slides/etc during the exam. This is a timed test so you want to limit time wasted on looking stuff up.
  • No questions about any specific third-party API will be asked (e.g. What’s the endpoint used to get the latest playing movie from the Movie DB API?). You do not need to know a specific third-party API’s methods, endpoints, etc.
  • You’ll be notified via Piazza when a study guide and practice exam is available.

Tips:

  • Anything that appeared on the lecture or the slides is fair game. The best way to study for this exam is to review the code from lectures and your labs and assignments and review what each line of the code does. Rewriting some of the code is very helpful.
  • Review the links under Helpful Reading under each lecture notes to get a deeper understanding of topic(s) taught in that lecture. You do not need to know everything from the links included in Resources, but the resources will help you understand the core material better.

 

 

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.

Lecture 10: JSON, AJAX, Third-Party Web APIs

Posted on | by nayeon

To-do for today’s class

Helpful Readings

Slides

Link to download PDF version.

Completed Files

Lecture 9: JS Objects, DOM Manipulation

Posted on | by nayeon

To-do for today’s class

Helpful Readings

Slides

Link to download PDF version.

Completed Files

Lab 5: Contacts List

Posted on | by nayeon

Overview

For this lab you will practice creating JavaScript objects by implementing a Contact List application. Users will be able to add new contacts, display all contacts, display first three contacts, and clear the list.

Sample

Requirements

  1. Download the starter file from this Dropbox link.
  2. Do not change the HTML or CSS code. You only need to write JavaScript.
  3. Do not use inline JavaScript. This is bad practice. Write event handler like we did in class.
  4. Open up console and console.log() things out as you work on this lab.
  5. A contacts array is created for you. You will be storing any newly created contacts as an object and storing it in this array.
  6. Create an event handler for form submission. When the form is submitted:
    1. Check that all input fields are filled out.
    2. If all inputs are filled out, save the information into an object. The object must have these properties:
      1. firstName: property that stores user input for First Name.
      2. lastName: property that stores user input for Last Name.
      3. email: property that stores user input for Email.
    3. Add this object to the contacts array .
    4. If any of the inputs are not filled out, do nothing. Do not add create an object or add it to the array. For this lab you do not need to display any error messages.
  7. Create an event handler for Show All Contacts
    1. Run through the contacts array and show all contacts.
    2. To display contacts, create <li> elements and append them to <ul class="list-group" id="contact-list"> on line 52. See line 53 to see a sample of what the <li> element should look like.
    3. Each contact must be styled to look like the sample. Not working? See line 53 to see a sample of what the <li> element should look like.
  8. Create an event handler for Show First Three Contacts
    1. Run through the contacts array and show only the first three contacts.
    2. Display contacts by creating <li> elements like in step #7.
  9. Create an event handler for Delete All.
    1. Remove all objects from the contacts array.
    2. Clear everything from <ul class="list-group" id="contact-list"> so that no contacts are displayed.
  10. Not required but helpful: create functions for anything that is repetitive. For example, you will find yourself needing to clear all contacts multiple times.
  11. When completed, upload to the server and add a link to this lab in your student_page.html.

Assignment 5: Movie DB API Search

Posted on | by nayeon

Overview

For this assignment, you will create a web page that allows users to search for movies and display some basic information about the movie. You will use AJAX to access two (2) different endpoints of The Movie DB API (version 3). You will need to read through this API’s documentation to understand how to work with this endpoint.

Sample

Note: Samples below don’t always meet all the requirements. Make sure to follow the requirements rather than solely relying on the samples.

Requirements

Utilizing the Movie DB API
  1. Go to the Movie DB API documentation at https://developers.themoviedb.org/3/getting-started.
  2. Read the “Introduction” section. You will learn that you need to create an API key to authenticate your API calls. Create an account and obtain an API key as instructed.
  3. The first API request you will need to make is to get the movies that are currently playing in theaters. Click through some of the bolded links on the left sidebar of the documentation (Account, Authentication, Credits, etc). You will see that there are numerous endpoints available. Clicking on any endpoint gives you details about the endpoint such as parameters, responses, etc. Look for the one that sounds like you can call to get movies that are currently playing in theaters.
  4. Once you find the endpoint you need, Movie DB API has a nifty tool that allows you to test out the endpoint with your API key and show the results you would get when calling this endpoint. To access this tool, click on the endpoint then click on the Try it out tab. Enter your API key in the api_key field.
  5. Click on SEND REQUEST button and you should see results in JSON format. Get familiar with the JSON keys that are returned because you will need them. Any errors will be displayed if something is wrong.
  6. Next to the SEND REQUEST button, you will also see the full endpoint (with recommended parameters included). This is the endpoint you want to call.
Layout
  1. Create the following new files:
    1. moviedb.html file for all the HTML,
    2. style.css file for all CSS, and
    3. main.js file for all the JavaScript.
  2. Title at the top of the page.
  3. Search box and submit button.
  4. Text that shows how many movies are displayed and how many movies there are in total.
    1. Ex: Showing 20 of 878 result(s).
  5. A layout that displays the movie’s poster image, title, and release date.
    1. Do NOT use tables.
    2. Mobile (0-767px): show 2 columns per row
    3. Tablet (768px-991px): show 3 columns per row
    4. Desktop (991px and above): show 4 columns per row
  6. When a user hovers over the specific movie, show the movie’s rating, number of voters, and synopsis on top of the movie’s poster image.
  7. If the movie does NOT have a poster image, show an image that says “Not available” or similar.
  8. If the movie’s synopsis is over 200 characters, append “…” at the end.
  9. Rating and synopsis must fit on the top of the movie image. Do not let the text go outside the movie image.
  10. Page and text need to be readable. Ensure colors complement each other.
  11. You may use Bootstrap, but it is not required.
JavaScript
  1. Create a separate function named ajax() that will make a request to the API.
    1. Allow the function to take in two parameters – the endpoint and the function that will be called when results are returned.
    2. You will find having this function is useful because you will need to make two AJAX calls for this assignment.
    3. Do not use jQuery’s ajax function if you know what that is. You must use native JavaScript’s XMLHttpRequest object like shown in lecture.
      1. You may use the JavaScript Fetch API to make ajax requests if you know what that is.
  2. Upon the first load of the page, display movies that are currently playing in theaters.
  3. When user submits a search term, display movies that match the search query.
    1. If no results are found, display an appropriate message.
    2. Do not worry about implementing pagination. You can just display the first page of results.
  4. Number of results shown vs returned must be updated when page first loads and every time a new search term is submitted.
    1. Ex: Showing 20 of 878 result(s).
  5. When displaying movies, you may use JavaScript’s .createElement() or use the backtick method (shown in lecture) to create elements for each movie.
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 assignment5 inside the public_html folder. Then upload this assignment HTML file and images to the assignment5 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/assignment5/moviedb.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 -> Assignment 5: Movie DB API Search. You will get some points deducted for not uploading correctly but at least you will not get a zero.

Suggested Workflow

There are many ways to implement this assignment. If you don’t know where to start, here’s a suggested workflow:

  1. Register for Movie DB API key, find the first endpoint you need and Try it out to make sure your API key is working.
  2. Create a brand new HTML file. Set up the ajax() function and make a request to the API. Log out the results to ensure you successfully received a response back.
  3. If you get back a successful response, pause on working on the JavaScript for now. Start laying out the page with HTML/CSS. While Bootstrap is not required, it may be helpful in creating the responsive layout.
  4. Although you will need to create movie elements using JavaScript, write out HTML to create a few movies first. Hardcode the title, image, rating, synopsis, etc to ensure the layout meets all the requirements first.
  5. Back to JavaScript! Write JavaScript to create the movie elements. Use console.log() to see which keys you need to use to get the movie’s title, image, rating, etc. Start with creating outer elements first and make your way in. Test incrementally. Don’t try to create everything at once. Use the Inspect Element tool to ensure that you are building elements as you want them to be.
  6. Once all the movies currently in theaters are displayed, the code to display search results is very similar.

Lecture 8: JS Numbers, Strings, Objects, User Input

Posted on | by nayeon

Lecture recording

IMPORTANT: no in-person lecture was given on 9/16 for this lecture. Instead, a recording of the lecture is provided here: https://www.youtube.com/watch?v=ZeJMQYQ80hQ Watch this lecture before A4.

To-do for today’s class

Slides


Link to download PDF version of slides.

Resources

Completed Files