Question

PLEASE HELP: EASY CODE. Using your template create a webpage that contains a div. Give the...

PLEASE HELP: EASY CODE.

  • Using your template create a webpage that contains a div.
  • Give the body element the id of TOOscary.
  • Give the div the id of ghost.
  • At the bottom of the page (just before the closing body tag) insert a script element.
  • In the script element insert an assignment statement to save the content of the webpage using the variable candy.

Hint: candy= document.getElementById(‘TOOscary’).innerHTML;

We want to save it so we can bring it back after we make it disappear.

  • Inside the div:
    • Insert a Halloween image (that is not scary even to a three-year old). Save the image in a folder named Lab7_Images
  • Below the div insert an h3 and an h4 containing Halloween text.
  • Insert an h2 that contains your first and last name.
  • In the h2 insert an onmouseover event handler that
    • Uses an assignment statement to set the innerHTML of the body (use getElementById) to the value of the variable candy.
    • Uses an assignment statement to set the background color of the web page to orange. Hint: document.body.style…
  • In the style element
    • set the background color of the page to orange.
    • Set the color of all em elements to the color lime.
  • Put an h1 above the div that says Happy Halloween!
    • Use an onclick in the h1 to do the following in order given below:
      • Remove the picture by setting the innerHTML of the div to text, spaces or to nothing. document.getElementById('ghost').innerHTML = ‘ ’
      • Change the text of the h1 to an em that says Oooh!Your page is Gone! using an assignment statement. (hint: use this.innerHTML on the left side of an assignment statement.) Example: this.innerHTML=‘<em> Oooh! Your page is gone!</em>’;
    • Set the background color of the page to the color black using an assignment statement. Hint: document.body.style…
0 0
Add a comment Improve this question Transcribed image text
Answer #1

****This requires a lot of effort so please drop a like if you are satisfied with the solution****
I have satisfied all the requirements of the question and I'm providing you the screenshots of the output obtained and code for your reference...

Code:

<html>

    <head>

        <style>

            em{

                color:lime;

            }

        </style>

    </head>

    <body id="TOOscary">

        <h1 onclick="this.innerHTML='<em>Oooh! Your page is gone!</em>';

        document.getElementById('ghost').innerHTML='';

        document.body.style.background='black';">Happy Halloween</h1>

        <div id="ghost">

            <img src="Lab7_images/halloween.jpg">

        </div>

        <h3>Halooween text</h3>

        <h4>Halooween text</h4>

        <h2 onmouseover="document.getElementById('TOOscary').innerHTML=candy;

        document.body.style.background='orange';">Your name First, Last</h2>

        <script>

            var candy=document.getElementById("TOOscary").innerHTML;

        </script>

    </body>

</html>

Output Screenshot:

When you hover on your name First , Last text

When you click on Happy Halloween

Code Screenshot:

Add a comment
Know the answer?
Add Answer to:
PLEASE HELP: EASY CODE. Using your template create a webpage that contains a div. Give the...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

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
  • I have the code buts its not working as this below instruction can anyone help Use...

    I have the code buts its not working as this below instruction can anyone help Use the requirements from the pizza part of Assignment 6 and do the following using CSS and an internal style sheet: 1.     Your Javascript function should be in an external file (don’t forget to move it up to studentweb too) 2.     Put a red border of 300px in width around the form 3.     There should be three Div sections: header, main_body, and footer. 4.     Center the name of your...

  • JavaScript (Please debug this code) When a user enters a string in the input box, the...

    JavaScript (Please debug this code) When a user enters a string in the input box, the program is designed to add the string to an array. When the array reaches a certain length, the program displays all the users' entries in a list on the page. When you finish debugging, the user's entry in the input box should be cleared each time the submit button is clicked. Additionally, after five strings are submitted, the entire list of submitted strings should...

  • Create an external style sheet named Lab05.css. In this style sheet put the following styles: At the top of the style sheet, add the line: @charset "utf-8"; Add this comment: /* Lab 5 Extern...

    Create an external style sheet named Lab05.css. In this style sheet put the following styles: At the top of the style sheet, add the line: @charset "utf-8"; Add this comment: /* Lab 5 External Style Sheet - Brandon  */ Style the h1 element with a background color of lightgreen and center the text. Style the p element with a blue text color and yellow background color. Style the p element of class .firstclass with a green text color. Style the...

  • Hello, this is my code. moest of the things works but when select the price, i...

    Hello, this is my code. moest of the things works but when select the price, i just dont get my total. can someone help me out . thank you My queshion is also here The page will simulate the site for a Chicago-based small bus line that travels to St Louis, Milwaukee, and Detroit. Here are the requirements: The home page (i.e. the main page) should simply be the heading, image, and slogan of the site.  The home page should NOT...

  • can you do this js and html question. ill give you the html and js and...

    can you do this js and html question. ill give you the html and js and css files just fix my error use if and else like what i did dont use switch just fix my erorr. <!DOCTYPE html> <!-- Webpage HTML document for Lab 4. Authors: Amirhossein Chinaei, Andriy Pavlovych For: EECS 1012, York University, Lassonde School of Engineering --> <html lang="En"> <head> <meta charset="UTF-8"> <!-- title for web page --> <title> EECS1012: Lab 4 - Computational Thinking </title>...

  • i need help with this homework webpage and code too: The webpage must include: Global Structure...

    i need help with this homework webpage and code too: The webpage must include: Global Structure Tags Text Tags Images   Your first page must be named index.html Include a table within your site, challenge yourself to add a header in the table, and choose interesting border and/or cell formatting. Include a hyperlink within your site. Include an image in your site. Include a form in your site to demonstrate understanding of a variety of form components (the form does not...

  • 2 Apply Your Knowledge Reinforce the skills and apply the concepts you learned in this chapter Styling a Webpage Instru...

    2 Apply Your Knowledge Reinforce the skills and apply the concepts you learned in this chapter Styling a Webpage Instructions: In this exercise, you will use your text editor to create external, embedded, and inline styles for the Durango Jewelry and Gem Shop home page. You will style the sections of the semantic wireframe header, nav, main, and tooter and a div element that surrounds all of the content to center the content on the page. You will also float...

  • LANGUAGE JAVASCRIPT, PHP Need help with PHP and ajax code. The user needs to login but,...

    LANGUAGE JAVASCRIPT, PHP Need help with PHP and ajax code. The user needs to login but, I keep getting an error that I coded "Wrong username and password!" ***PLEASE DONT GIVE ME A NEW CODE THAT IS NOWHERE NEAR THE CODE I SUBMITTED***** PLEASE LOOK AT THE CODE AND SEE ANY ISSUES login.html <!DOCTYPE html> <html> <head> <title>login popup</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style type="text/css"> body { background-color: white; } </style> </head> <body> <center> <h1 style="text-align: center;"> Login </h1> <form>             Login ID:...

  • I can't figure this one out at all. Any help would be appreciated. Here's the question:...

    I can't figure this one out at all. Any help would be appreciated. Here's the question: You will need to complete the functions to Toggle the Fries and Drinks sections by adding or removing the 'hide' CSS class I created. I have already created the function to Toggle Burgers and you can use that as an example to build out the full functionality. I have also made created the function to reset the form. Finally, to calculate the total, you...

  • i need the code that goes within the <script> opening and closing following the insturctions of...

    i need the code that goes within the <script> opening and closing following the insturctions of the insturctions of the pasted assignment screen shots please. <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 3 Hands-on Project 3-1 Filename: index.htm --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Hands-on Project 3-1</title> <link rel="stylesheet" href="styles.css" /> <script src="modernizr.custom.05819.js"></script> </head> <body> <header> <h1> Hands-on Project 3-1 </h1> </header> <article> <h2>Lunch selections</h2> <form> <input type="checkbox" id="item1" value="8" /> <label for="item1">Fried chicken ($8.00)</label> <input type="checkbox"...

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