Coding 101: Lesson 4 - JQuery and buttons

Coding 101: Lesson 4 - JQuery and buttons

4.0 Intro

Lesson Overview

  1. Intro to JQuery and Buttons
  2. JQuery Selectors
  3. JQuery Methods

Projects Overview


Coding 101: Lesson 4 - JQuery and buttons

4.1 JQuery Overview

Intro to JQuery and Buttons

What is JQuery? Why use JQuery?

  • “Library” of JavaScript code to make it easier for you to use JS to interact and dynamcially change HTML and CSS files
  • Open-source, cross browser
  • It allows you to easily perform DOM manipulation and event listening without some of the issues and length of plain javascript
  • Most websites use it
  • Syntax format
    • $(‘CSSselector’).action()
  • Example syntax
    • $(‘button’).click(color_switcher); /* When any button is clicked, color_switcher function is run */

Adding JQuery to HTML

Option 1) Add link to JQuery: API in index.html file ABOVE the script link (it links to file with a CDN). Note if you don’t add JQuery first then you won’t be able to reference it in .js file

Option 2) Download JQuery file and link to it

  • Save JQuery file locally as .js in a js folder
  • In your index.html file, add below code right before closing </body> tag
    • <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  • Again, make sure this link comes before any of your JS file links

Good Practice

Wrap all of your JS and JQuery code with below method as good practice

This prevents your code from running until the entire document is done loading

JQuery Selectors

These are the most commonly used JQuery Selectors


JQuery Methods

These are the most commonly used JQuery Methods


These are other methods that commonly used in JQuery

Coding 101: Lesson 3 - JQuery and buttons

4.2 JQuery Projects

Project 4.1. Color Switcher

Try it yourself before going to next slide

Create a form that allows the user to type in a color and the press a button to change the background color of the webpage


  • <input type="text">
  • <button> </button>
  • $('input').val();
  • $('body').css("background-color",’yellow’);
  • $('button').click(my_color_switcher_function);

Project 4.2. Background drop down menu

Try it yourself before looking at the answers

Create a dynamic dropdown menu that allows a user to select what the background of the image will be

Find images of 6 different backgrounds that the user can choose from and store them in an images folder

Create 6 different classes, one for each background image


  • $('form').change(set_picture_function);
  • var background = $("#background_pick").val();
  • $('body').attr('class',background);
  • $('#pic').append('<option>' + picks[i] + '</option>');

Project 4.3. Grocery List

Try it yourself before looking at the answers

Build a grocery shopping app that allows the user to add new items to a grocery list, have the list displayed on the page, and allow the user to delete items that have been added

When “add new item” button is clicked, the user should be prompted with an “enter item” prompt

When the user presses ok, the app should add the item entered it an unordered html list and concurrently add a button that allows the user to delete the item


  • $('#groceries').append("<li id='" + item_id + "'>" + new_item + "<button class='del_btn' value='" + item_id + "'> delete </button> </li>");
  • var id = $(this).val();
  • $(line).remove();
  • $('#add_btn').click(add_item);
  • $('#groceries').on('click', '.del_btn', delete_item);

Project 4.4. Bob’s Blog

Try it yourself before looking at the answers

Allow users to click on a button to read more. Similar to blogs or eCommerce more info buttons.


  • $(‘#id’).show()
  • $(‘#id’).hide()
  • $(‘#id’).slideDown()
  • $(‘#id’).click(run_my_cool_function)

Project 4.5. Traffic Light

Create a traffic light / stop light!


  • $(‘#id’).css(‘background-color’,’red’);
  • $(‘#id’).click(run_my_cool_function);

Extra credit: make the light automatically switch from red for 3 seconds to yellow for 1 second to green for 3 seconds and then back to red!

Project 4.6. Cash Register

Add item dollar amounts to create a running tally of expenses.


  • CAUTION: This is a grave accent (`); It is not a single parenthesis (‘)!!
  • $(‘#id’).append(` `)
  • $(‘#id’).val(‘’)
  • $(‘#id’).submit(my_function)
  • return
  • my_num.toFixed(2)
  • parseFloat()
  • event.preventDefault()

Project 4.7. Rock Paper Scissors

Play rock paper scissors against the computer and keep score!


  • $(‘#id’).removeClass(‘rock’)
  • $(‘#id’).addClass(user_input)
  • if ((x == y) && (a == b) { }

Project 4.8. User Profile

Create an app that allows a user to create a user profile and submit it

When user clicks submit button, it is saved to local storage, and the user is taken to a profile page that shows their profile

Try to make the profile page look the one to the right

Try to dynamically create the dropdown boxes and the interests check boxes using JQuery


  • <fieldset> <legend> <label> <textarea>
  • localStorage.setItem("first_name",first_name);
  • $('#cell').html(localStorage.getItem("cell"));
  • window.location.href = "profile.html";

Lesson Recap

  • Intro to JQuery and Buttons
  • JQuery Selectors
  • JQuery Methods

Projects Recap

Vocab and Concept Review

  • JQuery: “Library” of JavaScript code to make it easier for you to use JS to interact and dynamcially change HTML and CSS files
  • Library: Group of code files that share with you objects, functions, etc. so that you can easily use commonly used functions in different programs; Many libraries are open-source (i.e. free to use).
  • Open-source: Publicly available code to view and use; Editing is typically controlled to select users
  • JQuery Selectors: Used to find and select HTML elements
  • JQuery Methods: Functions built into JQuery that you can easily use
  • JQuery Syntax format
    • $(‘CSSselector’).action()


Create the following programs and submit it to coding101@upriseuniversity.com before moving to the next lesson:

  • Flashcard App: Build an application that allows user to learn and memorize a stack of five flash cards. User should see “front” of card that has a prompt on it (e.g., what is the capital of the U.S.?). When the user clicks a button, the card flips to the “back” and shows the answer (e.g., Washington D.C.). When the user clicks the button again, it goes to the next card in the stack and shows the front of the card. Once the stack is finished, the user goes back again to the first card.
  • Mad minute math app: Create an application that lets a user play mad minute math. They try to answer math questions one at a time as quickly as possible for a minute. The app tells the user how many questions they got right and what percent they got right after the game ends. The user can press a "play" button to play again.

Prior Lesson Next Lesson