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 7, Problem 14CP3
a)
Program Plan Intro
To insert a field set with the legend colors, alabel for theFont Color (hexadecimal)followed by an input box with the data type set to color, the field name and ID name set to color, and the default value set to #000000 in the wm_demo.html file under the form element.
b)
Program Plan Intro
To insert a label for the Background color (hexadecimal) followed by an input box with the data type set to color, the field name and ID name set to backgroundcolor, placeholder value of #rrggbb, and the default value set to #FFFFFF.in the wm_demo.html file under the form element.
Expert Solution & Answer
Want to see the full answer?
Check out a sample textbook solution
Students have asked these similar questions
Create an interactive sign-up sheet.● Make the sign-up sheet interactive for the user.● Add a selection element to ask the user for their gender. Add the options “Male,” “Female,” and “Prefer not to mention.”● Use onblur and onfocus to add red borders to the input elements when the user leaves without any input, and a green border if a value is typed and the user is done with the input element.● Upon submission of the form, print all the information that the user has provided on a div or p tag at the bottom of the page.● Use fieldset and legend tag to separate the input part from the output part of the form.● Include a reset button to clear users input and also the information displayed at the bottom of the page.● Feel free also to design your own version and add other features.
Below the main element, add a comment with the text Footer. Below the comment, add a footer element that includes a class attribute with a value to make a fluid jumbotron, center align text, and padding of 5.
Nest the following div element within the footer element:
<div class="container text-white"> <p>© Copyright 2021. All Rights Reserved.</p> <p><a href="mailto:contact@wildrescues.net" class="text-white">contact@wildrescues.net</a></p> <a href="https://www.facebook.com" target="_blank"><img src="images/facebook-logo.png" alt="white Facebook logo" class="pr-4"></a> <a href="https://twitter.com" target="_blank"><img src="images/twitter-logo.png" alt="white Twitter logo"></a> </div>
Need to Add the footer element with the required class selectors. The index.html is:
<footer> <!-- Footer --> <footer…
Using React create a header component that displays a logo and company name. It should be able to welcome a user to the site or ask them to sign in, depending on boolean input. Create a landing page component that tells the user about the company. Create a product component that displays information about the products that the company sells. Edit your existing App.js file so that it displays the header component, the landing page component and at least three product components. Use an array of values and props to do this. Pass props to the header component to specify whether the user is logged in or not.
Chapter 7 Solutions
New Perspectives on HTML5, CSS3, and JavaScript
Ch. 7.1 - Prob. 1QCCh. 7 - Prob. 1RACh. 7 - Prob. 2RACh. 7 - Prob. 3RACh. 7 - Prob. 4RACh. 7 - Prob. 5RACh. 7 - Prob. 7RACh. 7 - Prob. 9RACh. 7 - Prob. 11RACh. 7 - Prob. 16RA
Ch. 7 - Prob. 17RACh. 7 - Prob. 20RACh. 7 - Prob. 1CP1Ch. 7 - Prob. 2CP1Ch. 7 - Prob. 3CP1Ch. 7 - Prob. 4CP1Ch. 7 - Prob. 5CP1Ch. 7 - Prob. 6CP1Ch. 7 - Prob. 7CP1Ch. 7 - Prob. 8CP1Ch. 7 - Prob. 9CP1Ch. 7 - Prob. 10CP1Ch. 7 - Prob. 11CP1Ch. 7 - Prob. 1CP2Ch. 7 - Prob. 2CP2Ch. 7 - Prob. 3CP2Ch. 7 - Prob. 4CP2Ch. 7 - Prob. 5CP2Ch. 7 - Prob. 6CP2Ch. 7 - Prob. 7CP2Ch. 7 - Prob. 8CP2Ch. 7 - Prob. 9CP2Ch. 7 - Prob. 10CP2Ch. 7 - Prob. 11CP2Ch. 7 - Prob. 12CP2Ch. 7 - Prob. 13CP2Ch. 7 - Prob. 14CP2Ch. 7 - Prob. 15CP2Ch. 7 - Prob. 16CP2Ch. 7 - Prob. 17CP2Ch. 7 - Prob. 18CP2Ch. 7 - Prob. 20CP2Ch. 7 - Prob. 21CP2Ch. 7 - Prob. 22CP2Ch. 7 - Prob. 23CP2Ch. 7 - Prob. 1CP3Ch. 7 - Prob. 2CP3Ch. 7 - Prob. 3CP3Ch. 7 - Prob. 4CP3Ch. 7 - Prob. 5CP3Ch. 7 - Prob. 6CP3Ch. 7 - Prob. 7CP3Ch. 7 - Prob. 8CP3Ch. 7 - Prob. 9CP3Ch. 7 - Prob. 10CP3Ch. 7 - Prob. 11CP3Ch. 7 - Prob. 12CP3Ch. 7 - Prob. 13CP3Ch. 7 - Prob. 14CP3Ch. 7 - Prob. 15CP3Ch. 7 - Prob. 16CP3Ch. 7 - Prob. 17CP3Ch. 7 - Prob. 19CP3Ch. 7 - Prob. 20CP3Ch. 7 - Prob. 21CP3Ch. 7 - Prob. 22CP3Ch. 7 - Prob. 23CP3Ch. 7 - Prob. 1CP4Ch. 7 - Prob. 2CP4Ch. 7 - Prob. 3CP4Ch. 7 - Prob. 4CP4Ch. 7 - Prob. 5CP4Ch. 7 - Prob. 6CP4
Knowledge Booster
Similar questions
- Note: The remaining buttons and paragraphs do not have id attributes. You will need to construct selectors to meet these challenges. For the following I need the Javascript code not the HTML code. In the "myPage" section, select the third button and assign a "click" listener. When clicked, it should change the text content of the third paragraph in the "myPage" section to "Third button clicked." ///////// // HINT: You should look at the HTML carefully to // make your selectors. In the "myPage" section, select the fourth button and assign a "click" listener. When clicked, it should add a class named "fourthPara" to the fourth paragraph in the "myPage" section. In the "myPage" section, select the fifth button and assign a "click" listener. When clicked, it should toggle the class named "fourthPara" for the fifth paragraph in the "myPage" section. In the "myPage" section, select the sixth button and assign a "click" listener. When clicked, it should change the text content of the sixth…arrow_forwardThe Demo page should have similar items grouped together. The controls and input fields should all do something. Entry fields and Password fields should print to a text box and/or a set of labels. Slider controls should show the values selected. A slider could set the level of a progress bar. etc. Half the elements need to be included: Buttons Buttons with graphics Buttons with images Labels Labels with graphics Labels with images TextField PasswordField TextArea as both entry and output. Scroll Bars on the TextArea two or more separate sets of RadioButtons two or more separate sets of CheckBoxes ComboBox ListView Sliders MenuBar (not in the text book, here is an example: https://www.geeksforgeeks.org/javafx-menubar-and-menu/ (Links to an external site.)) Tabs Spinners Colors Drop shadowsarrow_forwardEvent 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.…arrow_forward
- Create a form having number of elements (textboxes, Radio button, Checkboxes, and so on)Write javascript code to count the number of elements in a form.arrow_forwardQ6/ You have a power point presentation with name of "Petroleum Engineering" consists of 8 slides, do the following: a. Insert a new slide between the second and the third slide. b. Open this power point presentation then save it under a new name of "Chemical Engineering" on the same location. c. Delete the fourth slide. d. Move the third slide to a new location between the seventh slide and the eighth slide.arrow_forwardMake sure that the heading that starts with “Children’s Lessons” does not float to the right of the image by clearing the float at that element. In the ski.html file, add the following attribute/value pair to the opening tag that marks the Children’s Lessons heading: class="clearfloat"arrow_forward
- ***Please show steps on how to create the "userform" box" Create a userform with two sets of option boxes. Each set should be within a frame (Select frame element from the toolbox). The first frame should have 4 option buttons Basketball, Baseball, Football, and Soccer. The second frames should have two option buttons "watch on TV" and "go to games". The userform should have Submit and Cancel Button. Write a sub to show the userform When a user selects one option each from frame 1 and frame 2, you should have appropriate displays such as "Your favorite sports is Soccer and you usually watch on TV" if you selected Soccer and Watch on TV options, after you hit the Submit button. The userform should be hidden after submit button is clicked If the user clicks Cancel, you should display "You don't want to play this game" and hides the userformarrow_forward1. 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_forwardIn your HTML file, please do the following: Add an h1 tag with a class of text-center and add the text of "Lesson 13 Project". Create a div class of container Inside the container, create a div id of test-input Inside the test-input, add the following: input box with an id of isValidInput button with an id of isValidBtn Outside of the test-input, but inside the container, create a paragraph tag with an id of isValidMsg CSS In your stylesheet, please add the following: Set an asterisk with a property of box sizing equal to border box.Set the body with the following properties:set a property of font-family and set it equal to sans-serif.set a minimum height of 100%.set a vertical overflow of hidden.Set a class called text-center and set it to align the text to the center.Create a container class, and add the following properties:set the display property to flexjustify the content to centeralign the items to centerset the height to 100 viewport heightset the flex direction to…arrow_forward
- Add an event listener to the button with an id of "button2". Listen for the click event. The button should change the text content of the paragraph with an id of "p2" to: "This button toggles text content." If the button is clicked a 2nd time, the text content should change back to: "Paragraph Two."The button should switch the text back and forth, so 3rd and 4th clicks willdo the same, etc. NOTE: Questions 2 and 5 are about toggling. While Part 1 is wrong, Part 2 will be correct. This is not an error. You should try to make both parts correct.arrow_forwardWhich of the following statement will create a figure whose dimensions measure 10 inches x 5 inches? The commas separate one line from another. * a) Import matplotlib. pyplot as plt, plt.figure(figure = (10,5)) b) Import pyplot as plt, plt.figure(figure = (10,5)) c) Import matplotlib. pyplot as plt, plt.figure(size =(10,5)) d) Import matplotlib.pyplot as plt, plt.figure(fig = (10,5))arrow_forward1) Create a histogram of the TOUCH_TIME variable. Set the number of bins to 25, remove the density curve (HINT: Use the "kde" argument), and change the color. 2) Create a boxplot of the SHOT CLOCK variable. Change the color, add a title, and adjust the x-axis label to say "Shot Clock". 3) Create a bar plot of the SHOT RESULT variable. Add a title, set the x-axis label to "Shot Result" and the y-axis label to "Count", and change the font size of the title to 18.arrow_forward
arrow_back_ios
SEE MORE QUESTIONS
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