Create a webpage in which the user is allowed to select the page's background and color...
Create a webpage in which the user is allowed to select the page's background and color whether the page uses serif or sans serif fonts. The change the body element's style attribute accordingly.
If the user onclicks any of the options, the webpage will turn into that format. For example, if the user clicks "Gray background", the background color of the webpage will be Gray. If the user clicks Serif-text, the text in the web page will be in Serif text.
CODE SO FAR:
<!DOCTYPE html>
<html>
<head>
<meta charset =
"utf-8">
<title>Week 4 Page
420</title>
<style type =
"text/css">
a {
font-family: serif;
color: blue; }
p {
font-size: 14pt;
font-family: arial; }
</style>
<style type =
"text/javascript">
funtion
changeBGC(color)
{
document.bgColor = orange;
}
function
changeFontFamily(fontFamliy)
{
document.getElementById("para").style.fontFamliy=sans-serif;
}
</style>
</head>
<body>
href="#" onClick =
"javascript:changeBGC('pink')">Click Pink
href="#" onClick =
"javascript:changeBGC('red')">Click Red
href="#" onClick =
"javascript:changeBGC('orange')">Click Green
href="#" onClick =
"javascript:changeFontFamily('serif')">Click SansSerif
href="#" onClick =
"javascript:changeFontFamily('sans-serif')">Click Serif
</body>
</html>
Homework Answers
Code:
<html>
<head>
<meta charset = "utf-8">
<title>Week 4 Page 420</title>
<style type = "text/css">
a { font-family: serif;
color: blue; }
p { font-size: 14pt;
font-family: arial; }
</style>
<script type = "text/javascript">
function changeBGC(color)
{
document.bgColor = color;
}
function changeFontFamily(fontFamliy)
{
document.getElementById("myP").style.fontFamily = fontFamliy;
}
</script>
</head>
<body>
<p id="myP">Hello World</p>
<a href="#" onClick = "changeBGC('pink')">Click
Pink</a>
<br>
<a href="#" onClick = "changeBGC('red')">Click
Red</a>
<br>
<a href="#" onClick = "changeBGC('green')">Click
Green</a>
<br>
<a href="#" onClick = "changeFontFamily('serif')">Click
SansSerif</a>
<br>
<a href="#" onClick = "changeFontFamily('sans-serif')">Click
Serif</a>
<br>
</body>
</html>
Output:
Add Answer to:
Create a webpage in which the user is allowed to select the
page's background and color...
In the DOM of the HTML document of the previous question (included again below), which of...
In the DOM of the HTML document of the previous question (included again below), which of the following statements is FALSE? <!DOCTYPE html> <html> <head> <title>Question 4</title> <style> body em { font-size: 1.4em; color: yellow; } р { color: blue; font-size: 1.2em; font-family: arial, sans-serif; } #q7 { color: green; } </style> </head> <body> <p>The magician said <em id="q7">abracadabra</em>, and the exam disappeared...</p> </body> </html> O the <html> element has 2 children the grandfather of the <title> element is <html>...
1. Predict the Result.Draw and write a brief description of the Web page that will becreated...
1. Predict the Result.Draw and write a brief description of the Web page that will becreated with the following XHTML code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><title>CircleSoft Designs</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">body { background-color: #FFFFCC;color: #330000;font-family Arial,Helvetica,sans-serif; }.content { width: 750px; }</style></head>Apply Your Knowledge<body><div class="content"><h1>CircleSoft Design</h1><div><strong>CircleSoft Designs will </strong><ul><li>work with you to create a Web presence that fits yourcompany</li><li>listen to you and answer your questions</li><li>utilize the most appropriate technology for your sites:JavaScript, Java, PHP, databases,...
How do I get my HTML and CSS to look similar to this mockup? HTML: <!DOCTYPE...
How do I get my HTML and CSS to look similar to this mockup?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>nitro
site</title>
<link href="css/main.css"
rel="stylesheet"/>
</head>
<body>
<header class="header">
<section class="navlist">
<img
class="logo" src="assets/logobeans.png"/>
<h2
class="headertitle">nitro</h2>
<nav>
<ul>
<li><a
href="index.html"
target="_parent">About</a></li>
<li><a
href="/html/menu.html"
target="_blank">Menu</a></li>
<li><a
href="/html/menu.html">Shop Now</a></li>
</ul>
</nav>
</section>
<section
class="headerContainer">
<h1
class="heading">Nitro Coffee</h1>
<p
class="productDesc">Coffee is a brewed drink prepared from
roasted coffee beans, the seeds of berries from certain Coffea
species.</p>...
finished the web page ********************************************************* .js // I've added a span with the id "count" which...
finished the web page ********************************************************* .js // I've added a span with the id "count" which you can use to modify // the number of clicks on the page // you can do this by getting the value; incrementing it and then // modifying the value of the span function changeColor(){ const colors = ['red', 'green', 'blue', 'cyan', 'yellow', 'black', 'silver', 'tan']; // Choose a random float from [0, 1) the multiply by length to get random index // Math.floor()...
<!-- DOCTYPE declaration --> <!DOCTYPE html> <!-- HTML boilerplate code --> <html lang="en"> <!-- head...
<!-- DOCTYPE declaration --> <!DOCTYPE html> <!-- HTML boilerplate code --> <html lang="en"> <!-- head tag --> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Personal Webpage</title> </head> <!-- body tag --> <body> <style> .sidenav { height: 100%; width: 160px; position: fixed; z-index: 1; top: 0; left: 0; ...
HTML css When i refresh the page, the picture doesnt move at all for #i1 i...
HTML css When i refresh the page, the picture doesnt move at all for #i1 i have width and height but the pictuers doesn't move please fix it. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title of the document</title> <style> body{ background-color:#FFA07A; } #h1{ color:white; text-decoration:none; padding:30px; } #h2{ color:white; text-decoration:none; padding:30px; } #navbar1{ background-color:grey; text-align:center; font-size:35px; height:100%px; border:1px solid black; position:absolute; text-decoration:none; margin-left:300px; } #h3{ color:white; text-decoration:none; padding:30px; } #b1{ background-color:grey; font-size:30px; } i1{ width:10px; height:20px; } </style> <body> <div...
body { color: black; background-color:white; } p { color: orange; } Given the css rules above,...
body { color: black; background-color:white; } p { color: orange; } Given the css rules above, predict what the following HTML code in a web page will look like. <body> <p style="color:blue;background-color:yellow;"> Here is the first paragraph </p> </body> a. The text "Here is the first paragraph" will be black with white background color. b. The text "Here is the first paragraph" will be orange with white background color. c. The text "Here is the first paragraph" will be orange...
use the sample html file below with a submit button to modify the style of the...
use the sample html file below with a submit button to modify the style of the paragraph text through JavaScript code. By clicking on the button, the font, the font size, and the color of the paragraph text will be changed. <!DOCTYPE html> · <html> · <head> · <meta charset=utf-8 /> · <title>Change Paragraph Text</title> · </head> · <body> · <p id ='text'>I’m going to change this text, I hope.</p> · <div> · <button id="jschange" · onclick="js_style()">Style</button> · </div> · </body> · </html>
//--------// // Events // //--------// console.log("Events"); // 1. Change the link (the <a> tag) in the...
//--------// // Events // //--------// console.log("Events"); // 1. Change the link (the <a> tag) in the HTML body below such that a hello // message is displayed on a click event. //--------------// // Input Fields // //--------------// console.log("Input Fields"); // 1. Change the background color to red for the input text field (the <input> // tag) in the HTML body when obtaining the focus and change it back to // white when the focus is lost. // 2. Read the...
Develop the Change Calculator application In this exercise, you’ll create an application that displays the minimum...
Develop the Change Calculator application In this exercise, you’ll create an application that displays the minimum number of quarters, dimes, nickels, and pennies that make up the number of cents specified by the user. Without the use of a JavaScript Library (for coins). 1. Open the HTML and JavaScript files below: 2. In the JavaScript file, note that three functions are supplied. The $ function. The start of a calculateChange function. And an onload event handler that attaches the calculateChange...
In the DOM of the HTML document of the previous question (included again below), which of the following statements is FALSE? <!DOCTYPE html> <html> <head> <title>Question 4</title> <style> body em { font-size: 1.4em; color: yellow; } р { color: blue; font-size: 1.2em; font-family: arial, sans-serif; } #q7 { color: green; } </style> </head> <body> <p>The magician said <em id="q7">abracadabra</em>, and the exam disappeared...</p> </body> </html> O the <html> element has 2 children the grandfather of the <title> element is <html>...
How do I get my HTML and CSS to look similar to this mockup?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>nitro
site</title>
<link href="css/main.css"
rel="stylesheet"/>
</head>
<body>
<header class="header">
<section class="navlist">
<img
class="logo" src="assets/logobeans.png"/>
<h2
class="headertitle">nitro</h2>
<nav>
<ul>
<li><a
href="index.html"
target="_parent">About</a></li>
<li><a
href="/html/menu.html"
target="_blank">Menu</a></li>
<li><a
href="/html/menu.html">Shop Now</a></li>
</ul>
</nav>
</section>
<section
class="headerContainer">
<h1
class="heading">Nitro Coffee</h1>
<p
class="productDesc">Coffee is a brewed drink prepared from
roasted coffee beans, the seeds of berries from certain Coffea
species.</p>...
Most questions answered within 3 hours.
-
9. Depository institutions are always:
a. illiquid
b. profitable
c. insolvent
d. all of the above...
asked 6 minutes ago -
Use AstroTurf Company's income statement below to answer the
following two questions. Answer these questions with...
asked 5 minutes ago -
How is a firm's task
environment different from its general environment? Provide
examples of both types...
asked 3 minutes ago -
What is one reason Innovators can adopt innovations so
early?
Group of answer choices
they are...
asked 6 minutes ago -
Show that min x^2, s.t. x>=2 has strong duality.
asked 6 minutes ago -
Using curved arrows show how the intermediate formed in this
reaction (Hexaphenylbenzene is prepared through a...
asked 12 minutes ago -
Two lightbulbs operate on the same current. Bulb A has four
times the power output of...
asked 8 minutes ago -
1. What five (5) basic parameters need to be measured
during a pump test in order...
asked 20 minutes ago -
One student ran a TLC of an unknown compound on a
silica gel plate and the...
asked 23 minutes ago -
Use inheritance to create a new class AudioRecording
based on Recording class that:
it will retain...
asked 28 minutes ago -
In the long run, an increase in the quantity of money ________
the value of money...
asked 34 minutes ago -
In February 2008, a team of Canadian scientists revealed rare
new horseshoe crab fossils from 445...
asked 39 minutes ago