Category: 20211_itp303

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.

Lecture 24: JavaScript Plugins

Posted on | by nayeon

To-do for today’s class

Slides


Link to download PDF version.

Completed Files

Lecture 23: CSS Transitions, Transform, Animation

Posted on | by nayeon

To-do for today’s class

Slides


Link to download PDF version.

Resources

Completed files

Lecture 21: cURL, Server-Side APIs

Posted on | by nayeon

Lecture Recording

This is a recorded lecture is from Fall 2020. https://usc.zoom.us/rec/play/zIW5I4eYp7STYCkrKvVpipUKEkaZvZ8BncK0mZawb-wHxbhmMZGi7SWiDhMtqYcwLEUwPMFCBAsioSyX.6zuJdKctPG7vEPdQ

To-do for today’s class

Slides


Link to download PDF version.

Resources

Completed files

Lecture 22: AJAX and PHP

Posted on | by nayeon

We did not finish AJAX and PHP during the live Zoom meeting. I made a separate recording (33min) to finish off this lecture. Recording can be found here: https://usc.zoom.us/rec/share/CfUvriw6-HwGAGyxVtCDTFLrCmT-g8LhOd7outTAK3X7oK0HkAp0D9SerwqI3nSx.h1KRJXdyFoSQfM07?startTime=1619058855000

To-do for today’s class

Slides

Link to download PDF version.

Completed files

Assignment 12: Final Project – Front-End

Posted on | by nayeon

Overview

This assignment serves as a milestone to help you progress along your final project. Now that you submitted a proposal and have an idea of what kind of web application you want to build for the final project, you can start writing code.

Requirements

  1. Refer to the wireframes you created in your final project proposal. Your first step in building the final project will be writing HTML and CSS to build the front end parts of your web application. In other words, you are building the “shell” of your web application. Later, you will need to insert PHP into these pages to connect to your database and run the necessary SQL queries, so keep in mind how you want the backend logic to flow as well.
  2. Setup: Create a folder named assignment11 and add save all files in here. When ready to submit, upload this entire folder to the web server via FileZilla.
  3. Create at least four (4) pages.
  4. You may use CSS frameworks like Bootstrap but you may NOT use HTML templates. Layouts must be your own original work.
  5. Must have a clear purpose and topic. All pages make up a cohesive website.
    1. Have a clear and obvious logo (can be text) or page title in the same area on every page.
    2. Have a clear and obvious navigation menu that makes it easy for users to navigate around the site.
  6. All pages must meet the responsive web design requirements of the final project. The pages must look complete on the following three breakpoints:
    1. Mobile: 767px and smaller
    2. Tablet: 768px – 991px
    3. Desktop: 992px and larger
  7. While you are not graded on the aesthetic value of the website, you will be docked points if there are any obvious issues such as:
    1. Unreadable text, due to:
      1. text is too small
      2. color of text blends in with the background
    2. Text or images get cut off at the edges of the screen
    3. Extraneous horizontal scrolling (i.e. don’t let the user scroll if you don’t need to).
  8. You do not need to write any PHP or SQL at this point (although you can if you’d like).
  9. Use hardcoded values and/or placeholders for data that you will eventually receive from the back-end (similar to the starter code provided for you for the CRUD lectures).

Assignment 11: Final Project Proposal

Posted on | by nayeon

Overview

For this assignment, you will write up a proposal for your final project (PDF only, no .docx). Your final project needs to be a full stack web application on any topic. While you need to design your own database, you may use data from different sources.

Requirements

  1. Write up all the below requirements in a document (Word, Google doc, etc). You will need to export a PDF named final_project_proposal.pdf when you are done.
  2. Read over the Final Project requirements and think about what web application you want to build for the final project.
  3. Topic: discuss what your website is about in 1-2 sentences.
  4. Audience: In 1-2 sentences, describe who the intended audience is for this application.
  5. Design & Style:
    1. Discuss design and color scheme in 2-3 sentences.
      1. Don’t know where to start? Coolors.co is a great tool to help you generate color schemes.
      2. Design inspiration: dribbble.com, codepen.io, awwwards.com
    2. Provide links to 3 websites that inspired your design.
  6. Scope:
    1. How many pages are you planning to have?
      1. What are the pages?
    2. If it is a single page website, how many sections are you planning to have?
      1. What are the sections?
  7. Database:
    1. What data will be stored in the database?
    2. Where is data coming from?
  8. Database Diagram:
    1. Design the database you will use for this project and create a database diagram using MySQL Workbench.
    2. You do not need to insert any records. Just the schema is sufficient.
    3. Include the database diagram of your database (image).
  9. Wireframes (minimum of 4 wireframes total):
    1. Include wireframes of what the home page and one other major page of your web application will look like .
      1. You must include at minimum, one mobile version and one desktop version of each page (2 wireframes per page, 4 wireframes total).
    2. These wireframes can be hand-drawn or created digitally using a graphics tool like Figma (free), Sketch, or Adobe Photoshop. You can also use wireframe tools like Whimsical (free version available), Balsamiq or Omnigraffle.
    3. These wireframes do not need to have a ton of detail (placeholders are fine), but should still give you a good idea what the application will end up looking like. Wireframes that look like any of the three samples below are acceptable.
      1. Sample 1 – Hand-drawn
      2. Sample 2 – Wireframe created by Balsamiq
      3. Sample 3 – Wireframe created by Sketch
    4. Of course, if you want to add more detail like colors, real images/text, etc, you are welcome to do so!
    5. Insert these wireframes to the document as well.
  10. This proposal is not set in stone. You may change any aspect of your final project at any time. However, spending a big chunk of time thinking through the final project now rather than later is a wise idea. Don’t treat this assignment trivially.
  11. Submission:
    1. Export this document as a PDF file (name it final_project_proposal.pdf).
    2. Connect to the itpwebdev server on FileZilla.
    3. Create a folder (aka directory) named assignment11 and upload the PDF to this folder.
    4. Open up your student_page.html and add a link to this PDF file.
    5. Upload the student_page.html to the itpwebdev server.