Web Development and Design Foundations with HTML5 (8th Edition)
8th Edition
ISBN: 9780134322759
Author: Terry Felke-Morris
Publisher: PEARSON
expand_more
expand_more
format_list_bulleted
Expert Solution & Answer
Chapter 14, Problem 18FIB
Program Description Answer
jQuery has an inbuilt method named “css()” to dynamically configure the CSS styles. Using this method, the user can sets the specified CSS property for the selected elements.
Expert Solution & Answer
Want to see the full answer?
Check out a sample textbook solution
Students have asked these similar questions
Web Development:
You are required to create a simple six-page website using HTML5 and CSS3. This project should include Javascript or a JS Library/Framework.
FrameworkUse a CSS framework such as Foundation, Bootstrap, Tailwind CSS, UiKit, Bulma etc.
FontsYour fonts must be one of the following sets.
Baloo with Montserrat
Amaranth with Open Sans
Palanquin with Roboto
Sansita with Open Sans
Playfair Display and Fauna One
Type Scale
Augmented Fourth
Colour Scheme options
Choose one of the following options
https://coolors.co/palette/ff9f1c-ffbf69-ffffff-cbf3f0-2ec4b6
https://coolors.co/palette/555b6e-89b0ae-bee3db-faf9f9-ffd6ba
https://coolors.co/palette/ff6700-ebebeb-c0c0c0-3a6ea5-004e98
https://coolors.co/palette/6b9080-a4c3b2-cce3de-eaf4f4-f6fff8
Digital Asset
Must include at least two (2) video assets
Must include at least six (6) image assets ( at least one must be *.webp. )
No less than three javascript elements such as on demand header, show hide div etc.
Site…
In javascript I need help creating a web page that has the following elements:
You must use the following methods to select elements on your webpage and dynamically change one of their style settings:
getElementsByTagName()
getElementsByClassName()
querySelector()
querySelectorAll()
You must use the following functions to demonstrate creating elements dynamically. These elements must be visible in the web browser.
createElement()
appendChild()
cloneNode() with no children cloned
cloneNode() with children cloned
insertBefore()
You must dynamically remove a node that you added to the original html file.
You must dynamically set at least three windows object properties:
You must add a button that when clicked calls the window object open function and opens a link to another page such as Amazon or CNN.
You must add another button that when clicked calls the window object open function using at least 5 of the options for the open function and opens a link to another page such as…
You may design any web page of your choosing.
You must use the following methods to select elements on your webpage and dynamically change one of their style settings:
getElementsByTagName()
getElementsByClassName()
querySelector()
querySelectorAll()
You must use the following functions to demonstrate creating elements dynamically. These elements must be visible in the web browser.
createElement()
appendChild()
cloneNode() with no children cloned
cloneNode() with children cloned
insertBefore()
You must dynamically remove a node that you added to the original html file.
You must dynamically set at least three windows object properties:
You must add a button that when clicked calls the window object open function and opens www.amazon.com
You must add another button that when clicked calls the window object open function using at least 5 of the options for the open function and opens www.amazon.com
You must add another button that when clicked calls the window…
Chapter 14 Solutions
Web Development and Design Foundations with HTML5 (8th Edition)
Ch. 14.4 - Prob. 1CPCh. 14.4 - Prob. 2CPCh. 14.4 - Prob. 3CPCh. 14.6 - Prob. 1CPCh. 14.6 - Prob. 2CPCh. 14.6 - Prob. 3CPCh. 14.8 - Describe a method that can be used to gather a...Ch. 14.8 - Prob. 2CPCh. 14.8 - Prob. 3CPCh. 14.9 - Prob. 1CP
Ch. 14.9 - Prob. 2CPCh. 14.9 - Prob. 3CPCh. 14.18 - Prob. 1CPCh. 14.18 - Prob. 2CPCh. 14.18 - Prob. 3CPCh. 14 - Prob. 1MCCh. 14 - Prob. 2MCCh. 14 - Prob. 3MCCh. 14 - Prob. 4MCCh. 14 - Prob. 5MCCh. 14 - Prob. 6MCCh. 14 - Prob. 7MCCh. 14 - Prob. 8MCCh. 14 - Prob. 9MCCh. 14 - Prob. 10MCCh. 14 - Prob. 11MCCh. 14 - Prob. 12FIBCh. 14 - Prob. 13FIBCh. 14 - The ________ object is assumed to exist and it is...Ch. 14 - Prob. 15FIBCh. 14 - A form control button can be used with a(n)...Ch. 14 - Prob. 17FIBCh. 14 - Prob. 18FIBCh. 14 - Prob. 19SACh. 14 - Prob. 20SACh. 14 - Prob. 1AYKCh. 14 - Prob. 2AYKCh. 14 - Prob. 3AYKCh. 14 - Prob. 1HOECh. 14 - Prob. 2HOECh. 14 - Prob. 3HOECh. 14 - Prob. 4HOECh. 14 - Prob. 5HOECh. 14 - Prob. 6HOECh. 14 - Prob. 7HOECh. 14 - Prob. 8HOECh. 14 - Prob. 1WRCh. 14 - Prob. 2WRCh. 14 - Prob. 3WR
Knowledge Booster
Similar questions
- With one HTML file and one JS file in English please :) You may design any web page of your choosing. You must use the following methods to select elements on your webpage and dynamically change one of their style settings: getElementsByTagName() getElementsByClassName() querySelector() querySelectorAll() You must use the following functions to demonstrate creating elements dynamically. These elements must be visible in the web browser. createElement() appendChild() cloneNode() with no children cloned cloneNode() with children cloned insertBefore() You must dynamically remove a node that you added to the original html file. You must dynamically set at least three windows object properties: You must add a button that when clicked calls the window object open function and opens www.amazon.com You must add another button that when clicked calls the window object open function using at least 5 of the options for the open function and opens www.amazon.com You must add…arrow_forward<!DOCTYPE html><html lang="en"> below is box-styles.css <style> @import url('https://fonts.googleapis.com/css2?family=Rubik+Mono+One&display=swap'); body { font-size: 62.5%; margin: 0;} h1 {font-size:4em;text-align: center;font-family: 'Rubik Mono One', sans-serif;} h3 {font-size: 2em;} p {font-size: 1.5em;} h3, p { margin:0; } .title-padding { padding: 5% 10%; } .body-padding { padding-left: inherit; padding-right: inherit; padding-top: 7%; } .light-shadow { box-shadow: transparent; } .max-width { max-width: 50em;} /* .full-width { } */ .center-element { margin-top:8em; margin-left:inherit; margin-right: inherit; text-align: center; } .round-borders { border:1px solid black; border-radius: 0.25em; font-size: 2em; } .bb { box-sizing: content-box; width:100%; padding: inherit; margin: inherit; } .cb { box-sizing: content-box; } </style>above is the box-styles.css <head> <meta…arrow_forwardJavaScript all design notvsame as web page remember that. Allala Write the code necesary in javascript to create a webpage that contains a contact form like the one in the attatched picture. To create and style this form, copy the following HTML and CSS code exactly as follows: HTML: <form><label for="myName">Name:</label><input type="text" name="myName" id="myName"><label for="myEmail">E-mail:</label><input type="text" name="myEmail" id="myEmail"›<label for="myComments">Comments:</label><textarea name="myComments" id="myComments" rows="2" cols="20"></textarea><input id="mySubmit" type="submit" value="Submit"›</form> CSS: form { background-color:#eaeaea;font-family: Arial, sans-serif;padding: lOpx; }label { float: left;width: 100px;clear: left;text-align: right;padding-right: lOpx;margin-top: lOpx; }input, textarea { margin-top: lOpx;display: block; }#mySubmit { margin-left: 110px; }.arrow_forward
- What is the correct CSS syntax for making all the elements bold? O p {text-size:bold;} O p {font-weight:bold;} O Oarrow_forwardDefine a function named createBorders that selects // the table inside the "myPage" section. The function should add a CSS border to the table cells that is 2 pixels thick and solid black (use #000 for black). The function should also return the table element. //////////// Hint: You can build a selector from the result of another selector.arrow_forwardProvide html and css seperately <!DOCTYPE html> <html lang="en"> <style> body{ margin: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #556271; color: white; } h1{ color: #fe6a67; text-align: center; font-weight: normal; text-transform: uppercase; border-top: 1px dotted #d4dccd; margin-top: 30px; } h2{ font-size: 1em; text-align: center; } body{ margin: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } h1{ width: 2px; border-top: 1px dotted; border-top-color: #506D84; } h2{ text-align: center; } </style> <head> <link rel="stylesheet" href="style.css"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .first>h2, .second>h2, .third>h2 { margin-top: 10px; margin-bottom: 10px; } .image { width: 200px; }…arrow_forward
- HTML/CSS JAVASCRIPT please help me answer this question I will give you a good rating Thank you! Given the following html dynamic application What is the output when the button is clicked ?( describe the visual effect when the button is clicked) Modify the output from the original web page, so that the html will create and place a new red div as illustrated inside the existing grey div and then transfers the paragraph inner content at run-time ( inside the javascript function ) from the paragraph inside the grey div into the red div as illustrated. DO NOT DO this by placing the paragraph content inside the div within the static HTML page, use the document object model to access elements from the paragraph and transfer content into the div element as illustrated <! DOCTYPE html> <html> <head> <title> First Illustration</title> <link rel="stylesheet" type="text/css" href="first_ill_RRR.css"> <script src="project_6p.js"…arrow_forwardBased on the following specification, code one webpage using HTML5, CSS and JavaScript. HTML5: Three label elements with IDs lblTarget1, lblTarget2 and lblTarget3 Two buttons with IDs btnA and btnB. Both buttons invoke function fManipulate when clicked JavaScript: Code a function named fManipulate that Accepts one parameter containing an object that represents the clicked button Check to see which of the two buttons invoked this function If fManipulate function was invoked by btnA then change the text color of lblTarget1 to red by using the getElementById method If fManipulate function was invoked by btnB then change the font of ALL three labels by first using the getElementsByTagName method to return a collection of labels then use a for loop to iterate through the collection of labels to change the font of each label to calibriarrow_forwardCSS and HTML Improve my code to look exactly like the picture. <!DOCTYPE html><html lang="en"><head><title>The Stuff Shop</title><meta charset="utf-8"></head><body><style> body { font-family:Verdana, Arial, sans-serif; background-color: #800000; text-align: center;} #wrapper { background-color: #000000; color: #ffffff; width: 80%; margin: auto; min-width: 960px; max-width: 1200px;} nav { float: left; width: 150px;} main { margin-left: 0px; padding: 200px; background-color: #000000; color: #fffff;} header { color: #fffff; font-size: 200%; padding: 10px 10px 10px 155px; }h1 { margin-bottom: 20px; } } #floatright { margin: 10px; float: right;} footer { font-size:70%; text-align: center; clear: right; padding: 20px; background-color: #869dc7; }nav ul {…arrow_forward
- HTML/CSS JAVASCRIPT please help me answer this question I will give you a good rating Thank you! Given the HTML, css below , and original output below for a table, modify the application so that it Produces the second output, below the first illustrated output. <html> <head> <title>TABLE with STYLE SHEET</title> <meta charset="utf-8" /> <meta name="description" content="How to form a table and apply styling." /> <link href="table1.css" type="text/css" rel="stylesheet" /> </head> <body> <table border = "1"> <col class ="product" /> <colgroup class = "facts"> <col/> <col/> <col class = "fat" /> </colgroup> <tr> <th> Product </th> <th> Size (oz) </th> <th> Caffeine (mg) </th> <th> Fat (g)…arrow_forwardImprove my HTML and CSS Code to look like the picture: <!DOCTYPE html><html lang="en"><head> <title>Trillium Media Design</title><meta charset="utf-8"> <style> body { background-color: #e6e6fa; color: #191970; font-family: Arial, Verdana, sans-serif; } h1 { background-color: #191970; color: #e6e6fa; line-height: 200%; font-family: Georgia, "Times New Roman", serif; text-indent: 1em; text-shadow: 3px 3px 5px #CCCCCC; } h2 { background-color: #aeaed4; color: #191970; } font-family: Georgia, "Times New Roman", serif; text-align: center; } nav { font-weight: bold; font-size: 1.25em; word-spacing: 1em; } p { font-size: .90em; text-indent: 3em; } ul { font-weight: bold; } </style> </head> <body> <header> <h1>Trillium Media Design</h1> </header><nav> <a…arrow_forwardHTML/CSS: Need help in creating a sidebar header canvas for the love and hate buttons. Below are the codes and attached is image of how the sidebar header canvas must look like. Make sure to involve the correct code with the output: index.html: <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Summer School</h1> <ulclass="content home"> <li><a href="/index.html" >Summer School Info</a></li> <li><a href="/summerschool.html">Mainpage</a></li> </ul> </body> </html> summerschool.html: <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,…arrow_forward
arrow_back_ios
SEE MORE QUESTIONS
arrow_forward_ios
Recommended textbooks for you
COMPREHENSIVE MICROSOFT OFFICE 365 EXCEComputer ScienceISBN:9780357392676Author:FREUND, StevenPublisher:CENGAGE L
COMPREHENSIVE MICROSOFT OFFICE 365 EXCE
Computer Science
ISBN:9780357392676
Author:FREUND, Steven
Publisher:CENGAGE L