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 10 months 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...
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 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() *...
This code needs to be in C++, please. Step 1: Add code to prompt the user...
This code needs to be in C++, please. Step 1: Add code to prompt the user to enter the name of the room that they are entering information for. Validate the input of the name of the room so that an error is shown if the user does not enter a name for the room. The user must be given an unlimited amount of attempts to enter a name for the room. Step 2: Add Input Validation to the code...
Please add to this Python, Guess My Number Program. Add code to the program to make...
Please add to this Python, Guess My Number Program. Add code to the program to make it ask the user for his/her name and then greet that user by their name. Please add code comments throughout the rest of the program If possible or where you add in the code to make it ask the name and greet them before the program begins. import random def menu(): print("\n\n1. You guess the number\n2. You type a number and see if the...
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/
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...
Create a web calculator with JavaScript. Only four operations (Add, Sub, Multiplication, and Division) Use a...
Create a web calculator with JavaScript. Only four operations (Add, Sub, Multiplication, and Division) Use a CE button to cancel the operation.    Use the following website or any online resource as a reference. Don’t use their CSS or any other code.                 https://freshman.tech/calculator/ I am trying to learn please make comments then I will understand better.
Code in Java Given the LinkedList class that is shown below Add the following methods: add(String...
Code in Java Given the LinkedList class that is shown below Add the following methods: add(String new_word): Adds a linkedlist item at the end of the linkedlist print(): Prints all the words inside of the linkedlist length(): Returns an int with the length of items in the linkedlist remove(int index): removes item at specified index itemAt(int index): returns LinkedList item at the index in the linkedlist public class MyLinkedList { private String name; private MyLinkedList next; public MyLinkedList(String n) {...
Can someone please add clear and concise comments thoroughly explaining each line of code below. Just...
Can someone please add clear and concise comments thoroughly explaining each line of code below. Just need help understanding the code, don't need to modify it. The purpose of the code is to count the frequency of words in a text file, and return the most frequent word with its count. It uses two algorithms: Algorithm 1 is based on the data structure LinkedList. It maintains a list for word frequencies. The algorithm runs by scanning every token in the...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT