4 coding101 fewd_lesson4_j_query_and_buttons 20210105

© 2020 Park22 Ventures LLC. All rights reserved.
Coding 101: Front End Web Development
Lesson 4: JQuery and Buttons
Uprise University
Learn something

© 2020 Park22 Ventures LLC. All rights reserved. 2
1. Intro to JQuery and Buttons
2. JQuery Selectors
3. JQuery Methods
Lesson Overview

• 4.1. Color Switcher: User types color into form and presses submit button to change
background color of website
• 4.2. Background drop down menu: Create a pre-populated drop down menu that
changes the background picture when drop down menu is selected.
• 4.3. Grocery List: User can add or delete items from grocery list. App continues until
finish is entered in. Each iteration, user is shown entire grocery list. Grocery list is
displayed in HTML. User can enter items into a form and press add or delete buttons
to edit grocery list.
• 4.4. Bob’s blog: Allow users to click on a button to read more. Similar to blogs or
eCommerce more info buttons.
• 4.5. Traffic Light: Create a traffic light / stop light!
• 4.6 Cash Register: Add item dollar amounts to create a running tally of expenses.
• 4.7 Rock Paper Scissors: Play rock paper scissors against the computer.
• 4.8. User Profile: New users can create and edit a profile page. Data is stored
locally.
Project Overview

• “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 */
1) Intro
What is JQuery? Why use JQuery?

• Option 1) Add link to JQuery API in index.html file ABOVE the script link (it links to file with a CDN)
• <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
• /* 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
• i) Save JQuery file locally as .js in a js folder
• ii) In your index.html file, add below code right before closing </body> tag
• <script src="js/myscript.js"></script>
• iii) Again, make sure this link comes before any of your JS file links
1) Intro
Adding JQuery to HTML

• 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
• $(document).ready(function() {
• // put all of your code in here
• });
1) Intro
Good practice

2) JQuery Selectors
Selector Example Selector Description
* $(„*‟).click(color_switcher) // all elements
element $(„h2‟).click(color_switcher) // all <h2>‟s
#id $(„#big_box‟).click(color_switcher) // elements with id big_box
.class $(„.important‟).click(color_switcher) // elements with id big_box
selector1, selector2 $(„p, h1‟).click(color_switcher) // all <p>‟s and <h1>‟s
parent child $(„#sidebar a‟).click(color_switcher) // <a>‟s that are within sidebar id
parent > child $(„p > a‟).click(color_switcher) // <a>‟s that are direct children of <p>
Element.class $(„div.container‟).click(color_switcher) // all <div>‟s with class container

3) JQuery Methods
Most commonly used (1 of 2)
Selector Example Method Description
.change() $('#check_boxes').change(prog1); // when check_boxes is changed (i.e.
checked / unchecked), then run prog1
.click() $('#id').click(edit_program); // when id is clicked, then
edit_program is run
.val() x = $(„#id‟).val(); // get value of element and set x to it;
can also set element values
.text() $(„#id‟).text("Changes h1 text to this”); // change html text
.css() $(„#id‟).css("background-color": "yellow"); // change CSS attribute
.attr() $(„#id‟).attr(„class‟,‟important‟); // add „important‟ class to id
.append() $(„#id‟).append(“<option> choice 4 </option>”);
$(„#id‟).append(`<option> ${my_var}</option>`);
// adds option html code to id
// adds option html code using variable
// CAUTION! This is a grave accent (`)
// Not a single quoatation („)
.remove() $(„#id‟).remove(); // deletes html element with id
.on() $('#id').on('click', '.btn-delete', delete_program); // similar to .click() method but used
after you use .append() to add html

3) Methods
Additional methods (2 of 2)
Selector Example Method Description
.css() $(„#id‟).css({"color": "yellow", "font-size": “9px"}); // change multiple CSS attributes
.hide() $(„#id‟).hide(); // hides element
.show() $(„#id‟).show(); // shows element
.slideUp() $(„#id‟).slideUp(); // hides element by sliding it up
.slideDown() $(„#id‟).slideDown(); // shows element by sliding it down
.slideToggle() $(„#id‟).slideToggle(); // toggles between .slideUp() and
.slideDown() methods
.toggleClass() $(„#id‟).toggleClass(); // toggles between adding/removing one
or more class names
.attr() $(„#id‟).attr(“src”, “images/food”); // changes the source attribute picture to
a different picture
.children() $(„#id‟).children(); // returns all direct children of the
selected element
.parent() $(„#id‟).parent(); // returns the direct parent of the
selected element
.html() $(„#id‟).html(“<span> new text </span>”); // changes actual HTML vs. just text of
element

• 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
• Hints:
• <input type="text">
• <button> </button>
• $('input').val();
• $('body').css("background-color",‟yellow‟);
• $('button').click(my_color_switcher_function);
Project 4.1. Color Switcher
Try it yourself before going to next slide

Project 4.1. Color Switcher
Solution

• 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
• Hints:
• $('form').change(set_picture_function);
• var background = $("#background_pick").val();
• $('body').attr('class',background);
• $('#pic').append('<option>' + picks[i] + '</option>');
Project 4.2. Background drop down menu

Project 4.2. Background drop down menu
Solution

• 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
• Hints
• $('#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.3. Grocery List

Project 4.3. Grocery List
Solution

• Allow users to click on a button to read more. Similar to blogs or eCommerce more info buttons.
• Hints:
• $(„#id‟).show()
• $(„#id‟).hide()
• $(„#id‟).slideDown()
• $(„#id‟).click(run_my_cool_function)
Project 4.4. Bob’s Blog

Project 4.4. Bob’s Blog
Solution

• Create a traffic light / stop light!
• Hints:
• $(„#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.5. Traffic Light

Project 4.5. Traffic Light
Solution

• Add item dollar amounts to create a running tally of expenses.
• Hints:
• $(„#id‟).append(`<tr> ${my_var}</tr>`)
• $(„#id‟).val(„‟)
• $(„#id‟).submit(my_function)
• return
• my_num.toFixed(2)
• parseFloat()
• event.preventDefault()
Project 4.6. Cash Register
CAUTION: This is a grave accent (`); It is not a
single parenthesis (‘)!!

Project 4.6. Cash Register
Solution

• Play rock paper scissors against the computer and keep score!
• Hints:
• $(„#id‟).removeClass(„rock‟)
• $(„#id‟).addClass(user_input)
• if ((x == y) && (a == b) { }
Project 4.7. Rock Paper Scissors

Project 4.7. Rock Paper Scissors
Solution

• 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
• Hints:
• <fieldset> <legend> <label> <textarea>
• localStorage.setItem("first_name",first_name);
• $('#cell').html(localStorage.getItem("cell"));
• window.location.href = "profile.html";
Project 4.8. User Profile

Solution (1 of 2)

Solution (2 of 2)

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

• 4.1. Color Switcher: User types color into form and presses submit button to change
background color of website
• 4.2. Background drop down menu: Create a pre-populated drop down menu that
changes the background picture when drop down menu is selected.
• 4.3. Grocery List: User can add or delete items from grocery list. App continues until
finish is entered in. Each iteration, user is shown entire grocery list. Grocery list is
displayed in HTML. User can enter items into a form and press add or delete buttons
to edit grocery list.
• 4.4. Bob’s blog: Allow users to click on a button to read more. Similar to blogs or
eCommerce more info buttons.
• 4.5. Traffic Light: Create a traffic light / stop light!
• 4.6 Cash Register: Add item dollar amounts to create a running tally of expenses.
• 4.7 Rock Paper Scissors: Play rock paper scissors against the computer.
• 4.8. User Profile: New users can create and edit a profile page. Data is stored
locally.
Project Overview

• 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()
Vocab and Concept Review

• 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.
Homework

4 coding101 fewd_lesson4_j_query_and_buttons 20210105

Recommended

Recommended

More Related Content

Similar to 4 coding101 fewd_lesson4_j_query_and_buttons 20210105

Similar to 4 coding101 fewd_lesson4_j_query_and_buttons 20210105 (20)

Recently uploaded

Recently uploaded (20)

4 coding101 fewd_lesson4_j_query_and_buttons 20210105