HTML, JS, JQuery Exercises

Project 1: Create a Cookie

Instructions:

• Navigate to the project1 folder within your assessment3 folder
• Review the index.html file (in browser and in text editor)
• Update the comment with your name and date
• Use the script.js file to write a function that creates a cookie to store the username input by the user
• Test your cookie to ensure it works
• All JavaScript must be on your script.js file and all functions must be named
• Comment generously throughout your JavaScript
• You may modify the HTML page as needed to meet the requirements
• Save your changes and be sure to save all project1 files within the project1 folder

index.html

< !DOCTYPE html >
< html lang="en" >
< head >
< title >Cookie< /title >
< meta charset="utf-8" >
< /head >
< body >
< form id="cookieForm" onsubmit="return false" >
< h1 >Enter your username: < input type="text" id="nameField" >< /h1 >
< input id="submitButton" type="submit" value="Submit" >
< /form >
< script src="script.js" >< /script >
< /body >
< /html >

Project 2: AJAX, JSON

Instructions:

• Create a JSON file that contains 5 data sets containing the name of a product, the product description, and the product price. You determine the product name, product description and product price for each data set.
• Create a JavaScript file that obtains information from the JSON file using AJAX
• Bonus: get and display the JSON data on a webpage (worth 25 bonus points)
• Save your changes and be sure to save all project2 files within the project2 folder

Project 3: API Research

Instructions:

• Use your browser to research and find a JavaScript API that you can use within a website or application
  • Ideas include, but are not limited to: Google APIs, Sport APIs, Transportation APIs, Pet Adoption APIs
• Review the documentation for the API
• Navigate to the project3 folder within your assessment3 folder
• Open the API word document and answer the questions within the document
• Save your changes and be sure to save this file within the project3 folder

Project 4: Use jQuery to Show/Hide Paragraph Elements

Instructions:

• Navigate to the project4 folder within your assessment3 folder
• Review the index.html file (in browser and in text editor)
• Update the comment with your name and date
• In the index file, add a script element for the jquery file and then the script file (both js files are located within the js folder)
• In the script.js file:
  • add your name and date within the comment
  • Use jQuery to slowly hide all paragraph elements when the "Hide" button is clicked (Hint: this is a speed parameter)
  • Use jQuery to slowly show all paragraph elements when the "Show" button is clicked
• You may use your book, api.jquery.com, (Links to an external site.) or w3schools.com (Links to an external site.) as a resource to complete this project
• You may modify the HTML page as needed to meet the requirements
• Save your changes and be sure to save all project4 files within the project4 folder

index.html

< !DOCTYPE html >
< html lang="en" >
< head >

< title >jQuery< /title >
< !-- Comments -- >
< meta charset="utf-8" >
< link rel="stylesheet" href="css/styles.css" >

< /head >

< body >

< div id="wrapper" >

< article id="main" >

< p >I know how to create HTML pages.< /p >
< p >I know how to style webpages with CSS.< /p >
< p >I know how to add functionality to webpages with JavaScript.< /p >
< p >I understand how to use the jQuery library.< /p >

< /article >

< button id="hideBtn" >Hide< /button >
< button id="showBtn" >Show< /button >

< /div >

< script src="js/jquery-3.5.1.min.js" >< /script >
< script src="js/script.js" >< /script >
< /body >
< /html >