Scribd
Upload
41 views

Week 6 Jquery and Asynchronous Javascript Exercise

The document discusses practice exercises on jQuery and asynchronous JavaScript. It includes 6 questions - the first 4 involve selecting and manipulating DOM elements using jQuery, the 5th adds interactivity to a responsive website footer with jQuery, and the 6th involves promises. Instructions are provided on organizing files.

Uploaded by

Haregewoyn Deyu
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
41 views

Week 6 Jquery and Asynchronous Javascript Exercise

The document discusses practice exercises on jQuery and asynchronous JavaScript. It includes 6 questions - the first 4 involve selecting and manipulating DOM elements using jQuery, the 5th adds interactivity to a responsive website footer with jQuery, and the 6th involves promises. Instructions are provided on organizing files.

Uploaded by

Haregewoyn Deyu
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

jQuery and Asynchronous JavaScript (promise) Practice Exercises

The questions in here are based on the jQuery-Practice folder that contains an HTML file.
Please download the folder first from this link. Please look at the “Hint on how to organize
your folders and files” section below on how you organize your folders and files for this
practice.

The first two questions are the same questions you solved last week using vanilla JavaScript.
You will be using jQuery this time round.

Question 1:
The following three questions are based on the two paragraphs under the section which says,
"For Question 1".
1.1. Select the element with an id of "sample1" using jQuery.
1.2. Print the element itself on the console upon page refresh.
1.3. Print the content of the element on the console upon page refresh. Use jQuery to
select the content of the element

Question 2:
The following questions are based on the HTML code found under the section labeled "For
question 2".
2.1. Select the element with an ID of "techCompanies" and display it on your console.
2.2. How many tech companies are listed under the ul element with an id of
"techCompanies"?
2.3. Select all elements with a class of "red" and display them on the console.
2.4. Create a new li HTML element with a content of "Facebook" and display it on console
2.5. Give the newly created element a class of "blue" using jQuery
2.6. Append the newly created element next to the the "Sony" <li> element
2.7. How many of the tech companies are labeled blue? Find the result using jQuery and
display the result inside the "blueCompanies" div.

Question 3:
A form with two text fields is provided under the section which says "For question 3". Write a
jQuery code which takes the values of the two fields, checks if they are number values and
calculate the sum and average of the two numbers.
3.1. Display the result on the console
3.2. Display the result underneath the form
3.3. If any of the numbers provided is not a number, display a message that says "Please
enter numerical values only" underneath the form
Question 4:
Create an HTML form which asks users to provide their First name, Last name and Email
address. All the fields should be labeled as required. Once the user submits, write a JavaScript
function that checks if all the fields are provided. If not, it should show an error message above
the form.

If the user provides all the values, hide the form input fields, and display all the values provided
by the user on the browser.

Question 5: (Adding interactivity features on apple.com website’s footer section)


The following question is based on the responsive Apple website you built back in phase 1. As
we didn't cover JavaScript back then, we didn't implement some of the interactive features of
the website that are provided by JavaScript. You can use apple.com’s responsive code we wrote
from the link provided below to implement the interactivity of apple.com's footer section.

Responsive code for apple.com:


● https://evangadi.com/files/apple/responsive-code-jquery-for-footer.zip
You can refer to apple.com’s live website to check how the footer behaves:
● https://www.apple.com/

In summary, the footer fully displays all the five columns in expanded state while viewed on
desktop or tablet size devices. You are required to implement the following mobile size
features.

Features on mobile size devices:


● Each of the five columns collapse to a single column. Make these columns collapse to
a single column.
● All the sub-links under each <h3> are hidden. Hide these sub-links
● There is also a newly added "+" sign on the right side of each <h3> to trigger the
expansion of the sub-links upon onclick event. Add the added "+" sign on the right
side of each <h3>. (Hint: everything up to this point can be achieved without using
any JavaScript at all. Bootstrap and CSS would be enough to achieve these).
● When users click on the "+" sign, the hidden sub-links under the respective <h3>
slide down and show. Then the "+" sign changes to the "x" sign. (Hint: Use jQuery to
implement the following feature)
● When users click on the "+" sign, the sub-links slide up and get hidden. Note: this
interactivity only happens on mobile size devices. (Hint: Use jQuery to implement
the following feature)
Question 6: on asynchronous JavaScript (promise)
● Visit the link here to find three quizzes. Please provide the output of the code for each quiz.
Please do not work on the quizzes online, rather create HTML and JavaScript files by
following the instructions below.

Hint on how to organize your folders and files

File organization for Questions 1 to 4


● Download the “jQuery-Practice” zipped file, extract it and save it under your
“Evangadi” folder. The zipped file contains the “jQuery-Practice” folder. Inside this
folder, you will find an “index.html” file and a css folder containing a “styles.css”.
The document doesn't have the jQuery and your custom JavaScript files included on
it.
○ Inside of the ““jQuery-Practice” folder, create a folder called “js”.
○ Inside the “js”folder,
■ Create a JavaScript file called “script.js”
■ Download the latest version of jQuery and save it under your "js"
folder.
○ Include/link both your “script.js” and jQuery files at the bottom of your
“index.html”. Note: Make sure you put your “script.js” file below the jQuery
in your “index.html”.
○ Just to make sure you have successfully loaded your “script.js” file in your
“index.html”, console the "jQuery Testing ..." message, check if you get the
message on your browser when inspecting.
● You will be writing your JavaScript code on the “scripts.js” file.
● Now you can start working on your assignment. Happy coding!

File organization for Question 5


● The 5th question is based on the responsive Apple website you built back in phase 1
● All you need to do is download the “responsive-code-jquery-for-footer 2” zipped
folder from the link below, extract it and save it under your “Evangadi” folder.
○ https://evangadi.com/files/apple/responsive-code-jquery-for-footer.zip
● Inside the “responsive-code-jquery-for-footer 2” folder, we have already included
for you:
○ A “bootstrap.js” file
○ A JavaScript file, called “cusotm.js” where you write your JavaScript code
○ A “bootstrap.css” file
○ A CSS file, called “styles.css” where you write your CSS code
● We have also included in the HTML document, the jQuery and Bootstrap library
links, the “custom.js”, “bootstrap.js” and “styles.css” files for you
● All you need to do is write your JavaScript code in the “cusotm.js” and your CSS
code in the “styles.css”
Instructions on how to organize your folders and files for Asynchronous
JavaScript (promise) question
● In your Evangadi folder, create a folder, called “ asynchronousJavaScript”
● In your “asynchronousJavaScript” folder, create an HTML file called “index.html”
● Include an HTML boilerplate in your “index.html” file and give it a title of “Promise
Exercise”
● In your “asynchronousJavaScript” folder, create a JavaScript file called “script.js”
● Link your “script.js” file to your “index.html”
● Before writing any code in your “script.js”, make sure that your script file is linked to your
HTML file. To do that, type this code: alert("JS file linked!"); and run your HTML in your
browser
● Now, go to this link and copy the three quizzes on your “script.js”. Do not copy the
multiple choice portions of the quizzes
● Now start determining the output of the code under each quiz. Note: When you determine
the output of the code, do not just guess the output. Please make sure you understand why
each line outputs whatever result it is outputting
● Now, open your “index.html” file in browser, inspect and open your console to compare the
output you determined above with the output from showing on your console panel

You might also like