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:abc@abc.com">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:abc@abc.com">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 1 year 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...
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...
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.
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...
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...
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/
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 = []; //...
Use an external CSS & JS file, no internal or inline styles & scripts Please comment...
Use an external CSS & JS file, no internal or inline styles & scripts Please comment your JS to break down your understanding of what is happening You can use a CDN link for your jQuery (Links to an external site.) library reference Create a web page that includes these HTML 5 semantic elements: <article> <aside> <figcaption> <figure> <footer> <header> <nav> <section> Your web page should have at least 3 images and they should all use the figure/fig caption elements...
javascript BlackJack i made a blackjack game, the code is below //this method will return a...
javascript BlackJack i made a blackjack game, the code is below //this method will return a shuffled deck function shuffleDeck() { //this will store array fo 52 objects const decks = [] const suits = ['Hearts', 'Clubs', 'Diamonds', 'Spades'] const values = ['Ace', 'King', 'Queen', 'Jack', 'Ten', 'Nine', 'Eight', 'Seven', 'Six', 'Five', 'Four', 'Three', 'Two', 'One'] //run a loop till 52 times for (let i = 0; i < 52; i++) { //push a random item decks.push({ suit: suits[Math.floor(Math.random() *...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT