Homework Help is Here – Start Your Trial Now!
Engineering
Computer Engineering
Colorful Interactions Setting Up: 1. Add the following HTML after the form created in Part 1 of this lab Part 2 2. Add the following Script element inside of the Head element in form.html: 3. Add the following Script element above the closing tag of the Body element: Directions: Not all forms need to interact with a server. In this section, you will create a form that changes the background color of the Body element in forms.html. HTML Element Requirements: • 1x Form • 1x Fieldset • 1x Legend • 1x Input You will need to add the correct attributes to this form's elements for this to work. When you have finished, the user should be able to select a color from a color picker widget. After selection has been made (and the user clicks outside of the color picker), the background of forms.html should change color. Hint: • The JavaScript in the Body element is looking for an element with an id of "color"

Colorful Interactions Setting Up: 1. Add the following HTML after the form created in Part 1 of this lab Part 2 2. Add the following Script element inside of the Head element in form.html: 3. Add the following Script element above the closing tag of the Body element: Directions: Not all forms need to interact with a server. In this section, you will create a form that changes the background color of the Body element in forms.html. HTML Element Requirements: • 1x Form • 1x Fieldset • 1x Legend • 1x Input You will need to add the correct attributes to this form's elements for this to work. When you have finished, the user should be able to select a color from a color picker widget. After selection has been made (and the user clicks outside of the color picker), the background of forms.html should change color. Hint: • The JavaScript in the Body element is looking for an element with an id of "color"

Computer Networking: A Top-Down Approach (7th Edition)
Computer Networking: A Top-Down Approach (7th Edition)
7th Edition
ISBN:9780133594140
Author:James Kurose, Keith Ross
Publisher:James Kurose, Keith Ross
Chapter1: Computer Networks And The Internet
Section: Chapter Questions
Problem R1RQ: What is the difference between a host and an end system? List several different types of end...
See similar textbooks
icon
Related questions
Question

what I have so far 

 

 

<!DOCTYPE html>
<html>
<head>
<h1>Lab 5</h1>

<h2>Part 1</h2>


</head>
<body bgcolor="Lightskyblue">
<br>
<br>
<form>

<label> Firstname </label>
<input type="text" name="firstname" size="15"/> <br> <br>
<label> Lastname: </label>
<input type="text" name="lastname" size="15"/> <br> <br>

Email:
<input type="email" id="email" name="email"/> <br>
<br> <br>
Password:
<input type="Password" id="pass" name="pass"> <br>
<br> <br>
</form>
</body>
</html>

 


</body>
</html>

Colorful Interactions Setting Up: 1. Add the following HTML after the form created in Part 1 of this lab <h2>Part 2</h2> 2. Add the following Script element inside of the Head element in form.html: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 3. Add the following Script element above the closing tag of the Body element: <script> $ ("#color").change ( function () { $ ("body").css ('background', $(this).val()); }) ; </script> Directions: Not all forms need to interact with a server. In this section, you will create a form that changes the background color of the Body element in forms.html. HTML Element Requirements: • 1x Form • 1x Fieldset • 1x Legend • 1x Input You will need to add the correct attributes to this form's elements for this to work. When you have finished, the user should be able to select a color from a color picker widget. After selection has been made (and the user clicks outside of the color picker), the background of forms.html should change color. Hint: • The JavaScript in the Body element is looking for an element with an id of "color"
Transcribed Image Text:Colorful Interactions Setting Up: 1. Add the following HTML after the form created in Part 1 of this lab <h2>Part 2</h2> 2. Add the following Script element inside of the Head element in form.html: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 3. Add the following Script element above the closing tag of the Body element: <script> $ ("#color").change ( function () { $ ("body").css ('background', $(this).val()); }) ; </script> Directions: Not all forms need to interact with a server. In this section, you will create a form that changes the background color of the Body element in forms.html. HTML Element Requirements: • 1x Form • 1x Fieldset • 1x Legend • 1x Input You will need to add the correct attributes to this form's elements for this to work. When you have finished, the user should be able to select a color from a color picker widget. After selection has been made (and the user clicks outside of the color picker), the background of forms.html should change color. Hint: • The JavaScript in the Body element is looking for an element with an id of "color"
Expert Solution
Code of Program
<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <h1>Lab 5</h1>

    <h2>Part 1</h2>
</head>
<body bgcolor="Lightskyblue">
    <br>
    <br>
    <form>
        <label> Firstname </label>
        <input type="text" name="firstname" size="15" /> <br> <br>
        <label> Lastname: </label>
        <input type="text" name="lastname" size="15" /> <br> <br>

        Email:
        <input type="email" id="email" name="email" /> <br>
        <br> <br>
        Password:
        <input type="Password" id="pass" name="pass"> <br>
        <br> <br>
    </form>
    <h2> Part 2</h2>
    <form>
        <fieldset>
            <legend>Color Picker Legend Tag here:</legend>
            <label for="color">Background Chooser:</label>
            <input type="color" class="theme" id="color" />
        </fieldset>
    </form>
    <script>
        $("#color").change(function () {
            $("body").css("background", $(this).val());
        });
    </script>
</body>
</html>
steps

Step by step

Solved in 4 steps with 3 images

SEE SOLUTIONCheck out a sample Q&A here
Blurred answer
Recommended textbooks for you
Computer Networking: A Top-Down Approach (7th Edi…
Computer Networking: A Top-Down Approach (7th Edi…
Computer Engineering
ISBN:
9780133594140
Author:
James Kurose, Keith Ross
Publisher:
PEARSON
Computer Organization and Design MIPS Edition, Fi…
Computer Organization and Design MIPS Edition, Fi…
Computer Engineering
ISBN:
9780124077263
Author:
David A. Patterson, John L. Hennessy
Publisher:
Elsevier Science
Network+ Guide to Networks (MindTap Course List)
Network+ Guide to Networks (MindTap Course List)
Computer Engineering
ISBN:
9781337569330
Author:
Jill West, Tamara Dean, Jean Andrews
Publisher:
Cengage Learning
Concepts of Database Management
Concepts of Database Management
Computer Engineering
ISBN:
9781337093422
Author:
Joy L. Starks, Philip J. Pratt, Mary Z. Last
Publisher:
Cengage Learning
Prelude to Programming
Prelude to Programming
Computer Engineering
ISBN:
9780133750423
Author:
VENIT, Stewart
Publisher:
Pearson Education
Sc Business Data Communications and Networking, T…
Sc Business Data Communications and Networking, T…
Computer Engineering
ISBN:
9781119368830
Author:
FITZGERALD
Publisher:
WILEY
SEE MORE TEXTBOOKS