Coding 101: Lesson 4 - JQuery and buttons Coding 101: Lesson 4 - JQuery and buttons 4.0 Intro Lesson Overview Intro to JQuery and Buttons JQuery Selectors 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 Hints: <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 Hints: $('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 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.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. Hints: $(‘#id’).show() $(‘#id’).hide() $(‘#id’).slideDown() $(‘#id’).click(run_my_cool_function) Project 4.5. Traffic Light 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.6. Cash Register Add item dollar amounts to create a running tally of expenses. Hints: 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! Hints: $(‘#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 Hints: <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() Homework 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.