New Perspectives on HTML5, CSS3, and JavaScript
6th Edition
ISBN: 9781305503922
Author: Patrick M. Carey
Publisher: Cengage Learning
expand_more
expand_more
format_list_bulleted
Question
Chapter 8, Problem 2CP2
Program Plan Intro
To insert the ba_animate.css style sheets link to the document head section in the ba_physics.html file and study the content of the div element having ID animBox in the ba_physics.html file
Expert Solution & Answer
Want to see the full answer?
Check out a sample textbook solutionStudents have asked these similar questions
Event Listeners
Go to the co_cart.js file in your editor. Directly below the initial comment section, add an event listener for the window load event that does the following when the page is loaded:
Runs the calcCart() function.
Add an event handler to the modelQty field in the cart form that runs the calcCart() function when the field value is changed.
A for loop that loops through every option in the group of shipping option buttons, adding an event handler to run the calcCart() function when each option button is clicked.
JavaScript Functions
Create the calcCart() function to calculate the cost of the customer’s order using field values in the cart form. Within the calcCart() function do the following:
Create a variable named orderCost that is equal to the cost of the espresso machine stored in the modelCost field multiplied by the quantity of machines ordered as stored in the modelQty field. Display the value of the orderCost variable in the orderCost field, formatted as U.S.…
You have been provided with the html file domjs,html that represents the data entry form shown below. Examine this file in your browser.
You will notice that some of the form elements have the CSS class hilightable specified in their class attribute. Add listeners to the focus and blur events of all elements that have this hilightable class. In your event handlers for these two events, simply toggle the class highlight (which is in the provided CSS file). This will change their styling of the current form element. Be sure to setup these listeners after the page has loaded.
You will notice that some of the form elements have the CSS class required specified in their class attribute. We will not submit the form if these elements are empty. Add an event handler for the submit event of the form. In this handler, if any of the required form elements are empty, add the CSS class error to any of the empty elements. As well, cancel the submission of the form (hint: use the preventDefault ()…
in the index.html file, add a class attribute with the value tablet-desk to the second div element within the main element.
Add a class attribute with the value corner to the image element. Remove the height and width attributes from the image element.
<body>
<div id="container">
<!-- Use the nav area to add hyperlinks to other pages within the website -->
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">W3C</a></li>
</ul>
</nav>
<!-- Use the header area for the website name or logo -->
<header>
<h1>Responsive Design</h1>
</header>
<!-- Use the main area to add the main content of the webpage -->
<main>…
Chapter 8 Solutions
New Perspectives on HTML5, CSS3, and JavaScript
Ch. 8.2 - Prob. 1QCCh. 8.2 - Prob. 5QCCh. 8.2 - Prob. 7QCCh. 8.2 - Prob. 8QCCh. 8 - Prob. 1RACh. 8 - Prob. 2RACh. 8 - Prob. 3RACh. 8 - Prob. 4RACh. 8 - Prob. 7RACh. 8 - Prob. 8RA
Ch. 8 - Prob. 9RACh. 8 - Prob. 10RACh. 8 - Prob. 11RACh. 8 - Prob. 12RACh. 8 - Prob. 13RACh. 8 - Prob. 14RACh. 8 - Prob. 15RACh. 8 - Prob. 16RACh. 8 - Prob. 17RACh. 8 - Prob. 18RACh. 8 - Prob. 19RACh. 8 - Prob. 2CP1Ch. 8 - Prob. 3CP1Ch. 8 - Prob. 4CP1Ch. 8 - Prob. 5CP1Ch. 8 - Prob. 6CP1Ch. 8 - Prob. 7CP1Ch. 8 - Prob. 8CP1Ch. 8 - Prob. 9CP1Ch. 8 - Prob. 11CP1Ch. 8 - Prob. 1CP2Ch. 8 - Prob. 2CP2Ch. 8 - Prob. 3CP2Ch. 8 - Prob. 4CP2Ch. 8 - Prob. 5CP2Ch. 8 - Prob. 6CP2Ch. 8 - Prob. 7CP2Ch. 8 - Prob. 8CP2Ch. 8 - Prob. 9CP2Ch. 8 - Prob. 10CP2Ch. 8 - Prob. 2CP3Ch. 8 - Prob. 3CP3Ch. 8 - Prob. 5CP3Ch. 8 - Prob. 6CP3Ch. 8 - Prob. 7CP3Ch. 8 - Prob. 8CP3Ch. 8 - Prob. 9CP3Ch. 8 - Prob. 10CP3Ch. 8 - Prob. 11CP3Ch. 8 - Prob. 12CP3Ch. 8 - Prob. 13CP3Ch. 8 - Prob. 14CP3Ch. 8 - Prob. 15CP3Ch. 8 - Prob. 16CP3Ch. 8 - Prob. 17CP3Ch. 8 - Prob. 18CP3Ch. 8 - Prob. 1CP4Ch. 8 - Prob. 2CP4Ch. 8 - Prob. 3CP4Ch. 8 - Prob. 4CP4Ch. 8 - Prob. 5CP4Ch. 8 - Prob. 6CP4Ch. 8 - Prob. 7CP4Ch. 8 - Prob. 9CP4Ch. 8 - Prob. 10CP4
Knowledge Booster
Similar questions
- 1. Open the code5-2_flex.css file. Display the section element as a flexbox. Set the flow of items within the flexbox to go in row order with reverse wrapping so that the first item (Facebook) appears in the bottom-left corner and the last item (E-mail) appears in the top-right corner. Complete this task in conjunction with the following task: "Apply flex layout styles to card class's div elements". 2. Set the growth and shrink rate of the div elements of the card class to 1 and 1. Set the flex basis of those elements to 200 pixels. Display each div element of the card class itself as a flexbox. Next, apply the following flex layout to the items within the card div elements: Lay out the items in column order with no wrapping. Justify the content of the items within the flexbox with space between. Center each of the items with respect to the cross axis. Complete this task in conjunction with the previous task: "Style the section element as a flexbox".arrow_forwardOpen the code5-2_flex.css file. Display the section element as a flexbox. Set the flow of items within the flexbox to go in row order with reverse wrapping so that the first item (Facebook) appears in the bottom-left corner and the last item (E-mail) appears in the top-right corner. Complete this task in conjunction with the following task: "Apply flex layout styles to card class's div elements".arrow_forwardNext, set the display of the section element with class ID of tips as a flexbox. Have the content of the flexbox flow in the row direction with row wrapping enabled.arrow_forward
- Create a link element that loads the myprint.css style sheet file but only for printed output.arrow_forwardCSS question Add another div element to the web form containing the following code: Insert an input element to create an option button for the orderType field with the ID delivery. Make the option button checked by default. After the option button, insert a label associated with the delivery control containing the text Delivery. Add an input element to create a second option button for the orderType field with the ID pickup, followed by a label associated with the pickup control containing the text Pickup.arrow_forward
arrow_back_ios
arrow_forward_ios
Recommended textbooks for you
- New Perspectives on HTML5, CSS3, and JavaScriptComputer ScienceISBN:9781305503922Author:Patrick M. CareyPublisher:Cengage Learning
New Perspectives on HTML5, CSS3, and JavaScript
Computer Science
ISBN:9781305503922
Author:Patrick M. Carey
Publisher:Cengage Learning