Question

In: Computer Science

Please take the code below and add some javascript to it. Please use javascript inline. Please...

Please take the code below and add some javascript to it. Please use javascript inline. Please be sure to specify within the webpage with something like 'Click here' too show what was done and how to activate it. Please post in a format that can be directly copied. Thank you in advance

HINT: add some fun widgets to the page

index-css.html:

<!DOCTYPE html>

<html lang="en">

<head>

<!-- title for web page -->

<title>Index-CSS Page</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- <link> refer to external style shet -->

<link href="index-style.css" rel="stylesheet">

</head>

<body>

<header>

<img src="Image1.jpg" alt="Image1" id="image1"/>

<br>

<img src="Image2.jpg" alt="Image2" id="image2"/>

<br>

</header>

<section>

<nav>

<ul>

<li> <a href="Assign-1.html">Assign-1</a>

<ul>

<li><a href="Part-2.html">Part-2</a></li>

<li><a href="Part-3.html">Part-3</a></li>

</ul>

</li>

<li><a href="Assign-2.html">Assign-2.html</a></li>

<li><a href="Assign-3.html">Assign-3.html</a></li>

<li><a href="Assign-4.html">Assign-4.html</a></li>

<li><a href="Assign-5.html">Assign-5.html</a></li>

<li><a href="mailto:[email protected]">Send a mail</a></li>

<li><a href="http://www.google1.com">Go to google</a></li>

</ul>

</nav>

<aside>

<p>

Replace this text.Replace this text.Replace this text.Replace this text.Replace this text.

This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.

This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.

This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.

This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.

This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.

This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.

This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.

This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.

This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.

This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.

</p>

</aside>

</section>

</body>

</html>

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

index-style.css :

/* style rule for body */

body{

background-color: gold;

}

/* style rule for header */

header{

background-color: black;

margin-left:20px;

margin-right: 20px;

text-align: center;

}

/* style rule for Image1 */

#image1{

height: 70px;

width: 150px;

}

/* style rule for Image2 */

#image2{

height: 70px;

width: 500px;

}

/* style rule for nav */

nav{

margin-left:20px;

width: 30%;

float: left;

height: 500px;

background-color:lightgreen;

}

/* style for li */

li{

padding: 5px;

}

/* style rule for aside */

aside{

margin-right:20px;

width: 67%;

float: left;

height: 500px;

background-color:white;

}

/* active links */

a:active{

background-color: yellow;

}

/* style rule for p */

p{

padding: 20px;

text-align: justify;

font-size: 22px;

}

Solutions

Expert Solution

index-css.html

<!DOCTYPE html>

<html lang="en">

<head>

<!-- title for web page -->

<title>Index-CSS Page</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- <link> refer to external style shet -->

<link href="index-style.css" rel="stylesheet">

</head>

<body>

<header>

<img src="Image1.jpg" id="image1"/>

<br>

<img src="Image2.jpg" id="image2"/>

<br>

</header>

<section>

<nav>

<ul>

<li> <a href="Assign-1.html">Assign-1</a>

<ul>

<li><a href="Part-2.html">Part-2</a></li>

<li><a href="Part-3.html">Part-3</a></li>

</ul>
<script>
function showFoo(){
alert("I am foo!")
return false;
}

</script>

</li>

<li><a href="Assign-2.html">Assign-2.html</a></li>

<li><a href="Assign-3.html">Assign-3.html</a></li>

<li><a href="Assign-4.html">Assign-4.html</a></li>

<li><a href="Assign-5.html">Assign-5.html</a></li>

<li><a href="mailto:[email protected]">Send a mail</a></li>

<li><a href="http://www.google1.com">Go to google</a></li>

<li><a href="index-css.html" id="foo" onClick="showFoo()"> click here </a></li>

</ul>

</nav>

<aside>

<p>

Replace this text.Replace this text.Replace this text.Replace this text.Replace this text.

This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.

This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.

This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.

This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.

This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.

This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.

This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.

This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.

This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.

This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.This is dummy Text.

</p>

</aside>

</section>

</body>

</html>

index-style.css

/* style rule for body */

body{

background-color: gold;

}

/* style rule for header */

header{

background-color: black;

margin-left:20px;

margin-right: 20px;

text-align: center;

}

/* style rule for Image1 */

#image1{

height: 70px;

width: 150px;

}

/* style rule for Image2 */

#image2{

height: 70px;

width: 500px;

}

/* style rule for nav */

nav{

margin-left:20px;

width: 30%;

float: left;

height: 500px;

background-color:lightgreen;

}

/* style for li */

li{

padding: 5px;

}

/* style rule for aside */

aside{

margin-right:20px;

width: 67%;

float: left;

height: 500px;

background-color:white;

}

/* active links */

a:active{

background-color: yellow;

}

/* style rule for p */

p{

padding: 20px;

text-align: justify;

font-size: 22px;

}

venereology answered 2 years ago
Next > < Previous

Related Solutions

Write the below code to use HTML and JavaScript. 1. a) Write a JavaScript program to...
Write the below code to use HTML and JavaScript. 1. a) Write a JavaScript program to display the current day and time. b) Write a JavaScript program to print the contents of the current window.   c) Write a JavaScript program where the program takes a random integer between 1 to 10 d) Write a JavaScript program to calculate multiplication and division of two numbers (input from the user). e)Write a JavaScript program to create a new string from a given...
Use Javascript to implement the class below to the code below. Create a class Order which...
Use Javascript to implement the class below to the code below. Create a class Order which contains one array member variable that stores Sandwich objects. Initially, this array is empty. Add a function named add that adds a sandwich to the array. Add a getter function named price which iterates over the array and sums up the price of each  sandwich in the array. class Sandwich { constructor(price) { this.price = price; } toString() { return "Sandwich", this.price; } } class...
Exercise 1 (a) Use javascript modify the code below, so that in addition to outputting the...
Exercise 1 (a) Use javascript modify the code below, so that in addition to outputting the selection to the web page, the selection is also placed in the browser’s local storage. Use ‘select’ as the local-storage key. The value will be the name of the category that was selected or the empty string is no selection was made. (d) Add a button called ‘retrieve’. When it is clicked the local storage is read and the prior selection is shown on...
Take the code below, add the parameter validation as prompted by the highlighted comments. #include <iostream>...
Take the code below, add the parameter validation as prompted by the highlighted comments. #include <iostream> using namespace std; // Prototype (Wait, what's this? Hmmm... how would you find out? ) void calculateBill(double, int); int main() { // local variables int numMonths = 10; double rate = 25.99; // Perform a test for $25.99 membership. cout << "Calling the calculateBill function with arguments " ??? << rate << " and " << numMonths << "\n"; total = calculateBill(rate, numMonths); cout...
Below is some code for a rectangle class that needs to be completed. Add member function...
Below is some code for a rectangle class that needs to be completed. Add member function declarations to the class declaration and member function definitions below the declaration. For the accessor functions, you can add the definitions directly into the class declaration. The goal is to code the class so that it works wthout changing the main program #include <iostream> using namespace std; // rectangle has a vertical height and horizontal width // The class below is a rectangle. It...
Also please add comments on the code and complete in C and also please use your...
Also please add comments on the code and complete in C and also please use your last name as key. The primary objective of this project is to increase your understanding of the fundamental implementation of Vigenere Cipher based program to encrypt any given message based on the Vignere algorithm. Your last name must be used as the cipher key. You also have to skip the space between the words, while replicating the key to cover the entire message. Test...
JAVASCRIPT HTML I'm looking to make a function that will take a postal code in a...
JAVASCRIPT HTML I'm looking to make a function that will take a postal code in a text box. The function jobs is to basically make sure the first letter of the postal code starts with these letters. ('A') ('N") ('W') ('F'). If the first letter of the postal code does not match up then an error to the user is sent.
Please use the link below, which will take to an article, then summarize it. The summary...
Please use the link below, which will take to an article, then summarize it. The summary must be three fourths to one page long. Article name: IRS Offers in Compromise By: William A. Bottiglieri, JD, CPA Source:  https://www.cpajournal.com/2018/02/07/irs-offers-compromise/
Please take this c++ code and make it into java code. /* RecursionPuzzleSolver * ------------ *...
Please take this c++ code and make it into java code. /* RecursionPuzzleSolver * ------------ * This program takes a puzzle board and returns true if the * board is solvable and false otherwise * * Example: board 3 6 4 1 3 4 2 5 3 0 * The goal is to reach the 0. You can move the number of spaces of your * current position in either the positive / negative direction * Solution for this game...
JavaScript Use the browser tools to identify the lines missing var keywords, add the keywords in...
JavaScript Use the browser tools to identify the lines missing var keywords, add the keywords in your text editor. <html>         <body>                 <header>                    <h1>                       Hands-on Project 4-3                    </h1>                 </header>                               <article>                    <div id="results">                        <p id="resultsExpl"></p>                        <ul>                           <li id="item1"></li>                           <li id="item2"></li>                           <li id="item3"></li>                           <li id="item4"></li>                           <li id="item5"></li>                        </ul>                    </div>                    <form>                        <fieldset>                          <label for="placeBox" id="placeLabel">                            Type the name of a place, then click Submit:                          </label>                          <input type="text" id="placeBox" />                        </fieldset>                        <fieldset>                          <button type="button" id="button">Submit</button>                        </fieldset>                    </form>                 </article>                 <script>                    var places = []; //...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT