ZuoTi.Pro
Question

URGENT HELP NEEDED: JQuery. PLEASE POST SCREEN SHOTS Task 1: Downloading jQuery Right-click the link to...

URGENT HELP NEEDED: JQuery. PLEASE POST SCREEN SHOTS

Task 1: Downloading jQuery

  1. Right-click the link to download the uncompressed latest version of jQuery

  2. Copy the jQuery.x.x.x.js file in the folder and specified as source file.

Task 2: Download and install HTML-Kit 1. Navigate to htmlkit.com.

2. Click Download HTML-Kit 292.

After it downloads, launch HKSetup.exe.

  1. Choose Full installation (the default)

  2. Uncheck Yes, download and install HTML-Kit Tools Trial.

6. Click Next>Finish.
Task 3: Creating a Simple jQuery Application

  1. Launch HTML-Kit.

  2. Create a new HTML file and save it as nnLab8.htm.

  3. Add the following HTML to the file:

         <!DOCTYPE HTML>

     <html>
     <head>
     <title>Hello World - jQuery Style</title>
     </head>
     <body>

           <div id="first"></div>
           <div id="second"></div>
           <a href="#" id="link">Click Me!</a><br />
           <span id="greeting"></span>

</body>

</html>

  1. Add the following <script> element to the <head> section. NOTE: Use the jQuery version number that matches the file name of the file you downloaded in Step 1.
    <script type="text/javascript" src="jquery-x.x.x.js"></script>

  2. Add the following <script> element beneath the one you added in Step 4:

    <script type="text/javascript"> $(document).ready(function() {
    /*write 'Hello World! to the first div */ $('#first').html('<h1> Hello World!</h1>'); });
    </script>

  3. Preview in the browser window to verify that “Hello World”!” displays. TIP: You might need to enable scripts to run on your browser.

  4. Take a screenshot and paste it on your worksheet.

  5. Add the following function beneath the selector you wrote in step 5:

    /*a clickable 'Hello World!' example */ $('#link').click(function(){ $('#greeting').html('<h1>Hello Again!</h1>'); });

  6. Test to verify that “Hello Again” displays when you click the link.

  7. Take a screenshot and paste it on your worksheet.

Task 4: Navigating a List

Copy Lab6pics.zip to your virtual machine and extract the .jpg files to the folder you created in Task 1.

  1. Add the following HTML beneath the HTML you added in Task 2:

   <div>
        <h1>Pictures</h1>

<ul>

        <li><a class="pic" href="#"><img
   /></a></li>

        <li><a class="pic" href="#"><img
   /></a></li>

        <li><a class="pic" href="#"><img

        <li><a class="pic" href="#"><img
   /></a></li>

        </ul>
        <div id="showCurrentPicName">
        <div id="showNextPicName"></div>

</div>

3. Preview in a browser to verify it looks like this.

src="brass.jpg"
src="sunburst.jpg"

src="ice.jpg" /></a></li>
src="horizon.jpg"

</div>

4. Take a screenshot and paste it on your worksheet.

  1. Add the following jQuery function:

         /*Output the filename of the clicked picture*/
     $('.pic').click(function(e) {
     var currentImage = $(this)
     .closest('li')

    .find('img')
    .attr('src');
    $('#showCurrentPicName').html('<h1>You clicked ' + currentImage + '</h1>');
    });

  2. Test your code and take a screenshot of the results of clicking each picture.

Task 5: Using jQuery to Validate an Email Address

  1. Launch HTML-Kit.

  2. Create a new HTML file.

  3. Modify the <head> element as follows:

    1. Add “Registration Form” as the title.

    2. Add a <script> element that references the jQuery file.

    3. Add an empty <script> element where you will place your jQuery script.

  4. Add the following <form> element to the <body> section:
    <form name="register" id="registerForm" action="submit" method="post">
    <label class="label" for="email">Email: </label>
    <input type="text" name="email" id="email" size="48" /> <span class="error">please enter a valid email address</span>
    </form>

  5. Preview in the browser.

  6. Take a screenshot and paste it on the worksheet.

  7. Add the following <style> element to the <head>section.

         <style type="text/css">
     .error {
     display: none;
     color: #FF0000;

     font-size: 0.7em;
     margin: 0px 0px0px 5px;
     }
     </style>

  1. Add the following jQuery code:

    $('#email').blur(function() {
    var regexEmail= /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA- Z]{2,4}$/;
    var inputEmail = $(this).val();
    var resultEmail = regexEmail.test(inputEmail); if(!resultEmail) {

    $(this).next('.error').css('display', 'inline'); }

    else {
    $(this).next('.error').css('display', 'none'); }
    });

  2. Test the code to verify that the following conditions exist. TIP: Test the code by viewing it in the default browser. Do not preview it in the browser window because Tab does not cause the blur event to occur.

    1. The error displays when an invalid email is typed and you press Tab.

    2. The error displays when nothing is typed and you press Tab.

    3. The error does not display when you type a valid email address and press Tab.

Task 6: Using jQuery to Validate the Length of a Field

  1. Add the following fields to the form:

    <br /><br />
    <label class="label" for="password">Password: </label> <input type="text" name="password" id="password" size="48" tabindex="1" />
    <span class="error">please enter a valid password</span>

  2. Write jQuery code that verifies that the password is not empty. The message should display when the form is loaded and should not be hidden until the user types in the field. Here are some tips:

3. Test to verify that the following conditions exist. Take a screenshot of each test and paste it on your worksheet.

  1. The message should be displayed when the form is loaded.

  2. Leaving the password field blank and clicking on the Email field causes the password

    error to remain displayed.

  3. Typing a character and clicking away from the field causes the error to disappear.

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

Dear Student ,

As per the requirement submitted above , kindly find the below solution.

NOTE :IMAGES ARE USED FOR DEMONSTRATION PURPOSE ONLY.

Here a new web page with name "nnLab8.html" is created, which contains following code.

nnLab8.html :

<!DOCTYPE HTML>

<html>

<head>

<!-- title for web page -->

<title>Hello World - jQuery Style</title>

<!-- jQuery from CDN , no need to download jQuery -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<!-- download jQuery and use it -->

<!-- <script src="jquery-3.4.0.min.js"></script> -->

<script type="text/javascript">

$(document).ready(function () {

/*write 'Hello World! to the first div */

$('#first').html('<h1> Hello World!</h1>');

/*a clickable 'Hello World!' example */

$('#link').click(function () {

$('#greeting').html('<h1>Hello Again!</h1>');

});

/*Output the filename of the clicked picture*/

$('.pic').click(function (e) {

var currentImage = $(this)

.closest('li')

.find('img')

.attr('src');

$('#showCurrentPicName').html('<h1>You clicked ' + currentImage + '</h1>');

});

});

</script>

<style>

img{

height: 50px;

width: 50px;

}

</style>

</head>

<body>

<div id="first"></div>

<div id="second"></div>

<a href="#" id="link">Click Me!</a><br />

<span id="greeting"></span>

<div>

<h1>Pictures</h1>

<ul>

<li><a class="pic" href="#"><img src="brass.jpg" /></a></li>

<li><a class="pic" href="#"><img src="sunburst.jpg" /></a></li>

<li><a class="pic" href="#"><img src="ice.jpg" />

<li><a class="pic" href="#"><img src="horizon.jpg"/></a></li>

</ul>

<div id="showCurrentPicName">

<div id="showNextPicName"></div>

</div>

</div>

</body>

</html>

======================================================

Output : Open web page nnLab8.html in the browser and will get the screen as shown below

Screen 1 :nnLab8.html

Screen 2:Screen when link is clicked'

Screen 3 :Screen when each image is clicked

************************************

TASK 5 :FORM VALIDATION

As per the requirement submitted above , kindly find the below solution.

Here a new web page with name "jQueryValidation.html" is created, which contains following code.

jQueryValidation.html :

<!DOCTYPE HTML>

<html>

<head>

<!-- title for web page -->

<title>Registration Form</title>

<!-- jQuery from CDN , no need to download jQuery -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<!-- download jQuery and use it -->

<!-- <script src="jquery-3.4.0.min.js"></script> -->

<script type="text/javascript">

$('#email').blur(function () {

var regexEmail = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA- Z]{2,4}$/;

var inputEmail = $(this).val();

var resultEmail = regexEmail.test(inputEmail); if (!resultEmail) {

$(this).next('.error').css('display', 'inline');

}

else {

$(this).next('.error').css('display', 'none');

}

});

$(document).ready(function () {

$("span:last").css("display", "inline");//show error

$('#password').blur(function () {

var inputPassword = $(this).val();//taking value

if (inputPassword == "") {//if password is blank

$(this).next('.error').css('display', 'inline');

}

else {

$(this).next('.error').css('display', 'none');

}

});

});

</script>

<style type="text/css">

.error {

display: none;

color: #FF0000;

font-size: 0.7em;

margin: 0px 0px0px 5px;

}

</style>

</head>

<body>

<!-- html form -->

<form name="register" id="registerForm" action="submit" method="post">

<label class="label" for="email">Email: </label>

<!-- textbox for email -->

<input type="text" name="email" id="email" size="48" /> <span class="error">please enter a valid email

address</span>

<br /><br />

<!-- textbox for password -->

<label class="label" for="password">Password: </label> <input type="text" name="password" id="password"

size="48" tabindex="1" />

<span class="error">please enter a valid password</span>

</form>

</body>

</html>

======================================================

Output : Open web page jQueryValidation.html in the browser and will get the screen as shown below

Screen 1 :jQueryValidation.html

Screen 2 :Screen showing error message for password

Screen 3 :Screen when password is entered

NOTE : PLEASE FEEL FREE TO PROVIDE FEEDBACK ABOUT THE SOLUTION.

0 0
Add a comment
Know the answer?
Add Answer to:
URGENT HELP NEEDED: JQuery. PLEASE POST SCREEN SHOTS Task 1: Downloading jQuery Right-click the link to...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • Task 3: Creating a Simple jQuery Application 1. Launch HTML-Kit. 2. Create a new HTML file...

    Task 3: Creating a Simple jQuery Application 1. Launch HTML-Kit. 2. Create a new HTML file and save it as nnLab8.htm. 3. Add the following HTML to the file: <!DOCTYPE HTML> <html> <head> <title>Hello World - jQuery Style</title> </head> <body> <div id="first"></div> <div id="second"></div> <a href="#" id="link">Click Me!</a><br /> <span id="greeting"></span> </body> </html> 4. Add the following<script> element to the<head> section. NOTE: Use the jQuery version number that matches the file name of the file you downloaded in Step 1....

  • Hello Ive been tryting to add the CDN of jquery to my html code and I...

    Hello Ive been tryting to add the CDN of jquery to my html code and I keep getting an error Need help with this : ​​ Navigate to www.code.jquery.com in your Chrome browser. On this page, you'll find different stable versions of jQuery. Select uncompressed for jQuery Core 3.3.1. Copy the <script> tag that is given to you. In store_hours.html, paste that tag directly above your body's closing tag. This is the jQuery CDN. After you paste this code into...

  • In this problem, you will create a selectable “To Do” List. To add a task to...

    In this problem, you will create a selectable “To Do” List. To add a task to this list, the user clicks the Add Task button and enters a description of the task. To delete a task from the list, the user selects the task and then clicks the Delete Task button. Open the HTML and JavaScript files provided as start-up files (index.html from within todo_list_Q.zip file). Then, review the HTML in this file. Note, within the div element, there is...

  • Hello! I am to create a .js file that allows the paragraph on the bottom of...

    Hello! I am to create a .js file that allows the paragraph on the bottom of the page to update with what the user enters. I need to modify the given HTML to recognize the javascript file that I am to make from scratch. The HTML file and other details are below: Use the given HTML to add functionality to an interactive form that generates an invitation to volunteers for an event. The file will have the following invitation message...

  • I'm having trouble to link the .js file to the html so changes for the html...

    I'm having trouble to link the .js file to the html so changes for the html to be made in the .js file <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>:JavaScript, HTML and jQuery</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- this is so I don't have to give you a separate CSS file --> <style>     .hidden {display: none;}     .menu { width: 100px;} </style> </head> <body> <div class="container"> <h1>Assignment 2: JavaScript, HTML and jQuery</h1> <p>To complete this...

  • Please edit and add all the code needed to make the images side by side and to put the buttons in...

    Please edit and add all the code needed to make the images side by side and to put the buttons in the middle of the images. Thank you index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Untitled Document</title> <!-- Bootstrap -->    <link href="css/bootstrap-4.0.0.css" rel="stylesheet">    <link href="style.css" rel="stylesheet" type="text/css">    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <header>    <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Lakeside Resort Spot</a>        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">...

  • Modify an application that lets users add tasks to a list so the tasks can also...

    Modify an application that lets users add tasks to a list so the tasks can also be deleted when they’re completed. 1. In the HTML file, enclose the text for each of the three existing list items in a <p> element. Then, Add buttons like the ones shown above preceding the <p> elements. No ids or names are required for these buttons, but they should be assigned to the class named “delete”. 2. In the JavaScript file, modify the event...

  • for Javascript, JQuery When the page is first opened a user will see the name field...

    for Javascript, JQuery When the page is first opened a user will see the name field and the three vacation images to the left of the page. The page should behave according to the following rules. 1. When a user's mouse pointer goes over any image, that image's border will change to be "outset 10px" and when the mouse pointer leaves that image it's border will change to "none". 2. When the user clicks a "Vacation" image on the left,...

  • Path of Light Yoga Chapter 7 Please help!! Here is my code for the index page:...

    Path of Light Yoga Chapter 7 Please help!! Here is my code for the index page: <html lang="en"> <head> <title>Path of Light Yoga Studio</title> <link rel="stylesheet" href="yoga.css" /> </head> <body> <div id="wrapper"> <header> <h1>Path of Light Yoga Studio</h1> </header> <nav> <a href="index.html">Home</a> &nbsp; <a href="classes.html">Classes</a> &nbsp; <a href="schedule.html">Schedule</a> &nbsp; <a href="contact.html">Contact</a> </nav> <main> <img class="floatleft" src="yogadoor2.jpg" alt="yogadoor2" height="300px" width="250px"> <h2>Find Your Inner Light</h2> <p> Path of Light Yoga Studio provides all levels of yoga practice in a tranquil, peaceful environment....

  • New Perspectives on HTML5 and CSS3. Solve Chapter 13 Case Problem 3. mas_register.js "use strict"; /*...

    New Perspectives on HTML5 and CSS3. Solve Chapter 13 Case Problem 3. mas_register.js "use strict"; /* New Perspectives on HTML5, CSS3, and JavaScript 6th Edition Tutorial 13 Case Problem 3 Filename: mas_register.js Author: Date: Function List ============= formTest() Performs a validation test on the selection of the conference session package and the conference discount number calcCart() Calculates the cost of the registration and saves data in session storage    writeSessionValues() Writes data values from session storage in to the registration...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT