In 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
- Inside the test-input, add the following:
- Inside the container, create a div id of test-input
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 flex
justify the content to center
align the items to center
set the height to 100 viewport height
set the flex direction to column
Create an id of test-input
add a property of flex direction, and set it to row
Create an input selector (type of text) and combine it with a button selector. Then add the following:
set the padding to 10 pixels
set the font size to 18 pixels
Create an id of isValidMsg and add the following properties:
set the color to red
set the margin to 1 em
set the font style to italic
set the font weight to bold
Step by stepSolved in 2 steps
- HTML/CSS JAVASCRIPT please help me answer this question I will give you a good rating Thank you! Given the following word search application, which searches for words in paragraphs, modify it so that it Adds two spans tab within the HTML within the designated new "Illustate" text segments as shown below. Has a new click event which searches the occurrence of the word within all span tabs residing within the first div container , then highlights the text in the span tab which contains the word c) In the same routine, count the number of times ( using a global variable) that the word is found Within the object array loop for span tabs ( where the indexOf statement is located) and after all span tabs are highlighted, send that number to a new html element ( a div, h1, span, p choice is up to you). The count should be continually accumulated and should show the total number of times a word is found in a span tab for all user activated clicks of the search button for…arrow_forwardWrite a for-loop that will write to the HTML document the value of each element in the array called myArray. Note: You only need to write a for-loop. Code on the outside of the for-loop is not necessary as we will assume that myArray has been declared and initialized with a series of array elements.arrow_forwardWrite a JavaScript code with the following three different conditions: • Create the HTML document containing an element with id="myImage" for any images you want. • Use the HTML DOM to get the element with id="myImage". • Write a JavaScript function to change the JavaScript src attribute of element from " pet.gif" to " cat.jpg" when clicking on a button. Note: Students can use any gif and jpg files according to their choice. Important notes: 1. You should have to copy and paste the script as your answer to this question. DON’T take a screenshot for your script. It must be an editable script. 2. Take a screenshot of your output web page and paste it as a part of your answer.arrow_forward
- Event Listeners Go to the co_credit.js file in your editor. Create an event listener for the window load event that retrieves the field values attached to the query string of the page’s URL. Add the following to the event listener’s anonymous function: Create the orderData variable that stores the query string text from the URL. Slice the orderData text string to remove the first ? character, replace every occurrence of the + character with a blank space, and decode the URI-encoded characters. Split the orderData variable at every occurrence of a & or = character and store the substrings in the orderFields array variable. Write the following values from the orderFields array into the indicated fields of the order form: orderFields[3] into the modelName field orderFields[5] into the modelQty field orderFields[7] into the orderCost field orderFields[9] into the shippingType field orderFields[13] into the shippingCost field orderFields[15] into the subTotal field orderFields[17]…arrow_forwardThere are times as a web developer when you need to interact with different data types and file types. The textbox below represents a Comma-separated values file, which is typically referred to as a CSV file. Username, Identifier, First name, Last name booker12,9012, Rachel,Booker grey07, 2070, Laura, Grey johnson81, 4081, Craig, Johnson jenkins46,9346, Mary, Jenkins smith79,5079, Jamie, Smith Your job is to represent the CSV data using a tabular format in csv_to_table.html. You need to use following HTML elements: 1 x Table element 1 x Caption element 1 x Table Head element () 1 x Table Body element () 4 x Table Header elements 6 x Table Row elements ? x Table Data elements (the number of Table Data elements is up to you to work out!)arrow_forwardPlease help me with this. I am not understanding what to do. So the code below is supposed to display images when the checkboxed are clicked and display nothing when they are unclicked,. Dont worry about the css code JS function p01Func() { document.getElementById("description").innerHTML = "<p>A mother joins an underground band of vigilantes to try to rescue her daughter from a state-run institution.</p>"; document.getElementById("poster").src = "images/night_raiders_poster.jpg"; document.getElementById("poster").style.display = "block"; document.getElementById("director").src = "images/night_raiders_director.jpg"; document.getElementById("director").style.display = "none"; document.getElementById("actors").src = "images/night_raiders_actors.jpg"; document.getElementById("actors").style.display = "none"; document.getElementById("check1").checked = false; document.getElementById("check2").checked = false; document.getElementById("check3").checked = false;}…arrow_forward
- Choose: ANY keyboard event ANY mouse event and either Scroll, Resize, Focus, Blur, Select, or Change Make sure it's clear in the HTML what the user (aka ME) should be doing to trigger your events.Make 3 HTML/JavaScript files (use embeded aka <script> tags to make it easier) one for the old HTML method, the DOM Event Handler method, and the Event Listener method. They should look all the same just have the events coded differently.Subject matter can be whatever you want, the assignment is not dependent on content as it is functionality. Just make it PG, obviously! You can have fun with it. Silly is fine.arrow_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_forwardI'm trying to learn CSS and it isn't easy. Can someone help me with this problem? Modify or add one CSS rule for each requirement below to change the text color property as specified. By color name: change the text color for byname class elements from black to blue. By RGB values: change the text color for byrgb class elements from black (rgb(0, 0, 0)) to green by modifying the second number to be 255. By HSL values: change the text color for byhsl class elements from black (hsl(0, 0%, 0%)) to cyan by modifying the first number to be 200, the second number to 100%, and the third number to 50%. Code: <p class="byname">The text is blue</p> <p class="byrgb">The text is green</p> <p class="byhsl">The text is cyan</p>arrow_forward
- Please rewrite this animation code below so that it performs the same functions in a java file instead of the files .css,.js, and .html in visual studios. You would need to import javaFX and include your images for creature.png,forestbackground.png,human.png, and human2.png. Also attach a screenshot of the running animation in java. script.js const dialogue = [ { character: 'Narrator', text: "In the dead of night, beneath a moon veiled by misty clouds, a lone figure trudged along a desolate forest path." }, { character: 'Narrator', text: "Unknown to her, she was not alone." }, { character: 'Human', text: "Who's there? Show yourself!" }, { character: 'Creature', text: "You venture into realms unknown, mortal. What brings you to these woods?" }, { character: 'Human', text: "I seek passage to the village beyond. I mean no harm." }, { character: 'Creature', text: "Harm is but a shadow in these woods, mortal." }, { character: 'Human', text: "What do you mean?…arrow_forwardHands-On Project 10-2 (I need help specifically with the JavaScript Portion) Use your code editor to open the project10-02_txt.html and project10-02_txt.js files from the js10 ▶ project02 folder. Enter your name and the date in the comment section of each file and save them as project10-02.html and project10-02.js, respectively. Go to the project10-02.html file in your code editor. Add a script element linked to the project10-02js file. Defer the loading of the script until after the page is loaded. Close the file, saving your changes. Go to the project10-02.js file in your code editor. Below the rotateTan() function add a for loop that iterates through all the pieces in the tans node list. For each piece add an event listener that runs the grabTan() function in response to the pointerdown event. Create the grabTan() function. Within the function do the following: If the Shift key has been pressed down, call the rotateTan() function using the event target and a value of 15 as…arrow_forward
- Computer Networking: A Top-Down Approach (7th Edi...Computer EngineeringISBN:9780133594140Author:James Kurose, Keith RossPublisher:PEARSONComputer Organization and Design MIPS Edition, Fi...Computer EngineeringISBN:9780124077263Author:David A. Patterson, John L. HennessyPublisher:Elsevier ScienceNetwork+ Guide to Networks (MindTap Course List)Computer EngineeringISBN:9781337569330Author:Jill West, Tamara Dean, Jean AndrewsPublisher:Cengage Learning
- Concepts of Database ManagementComputer EngineeringISBN:9781337093422Author:Joy L. Starks, Philip J. Pratt, Mary Z. LastPublisher:Cengage LearningPrelude to ProgrammingComputer EngineeringISBN:9780133750423Author:VENIT, StewartPublisher:Pearson EducationSc Business Data Communications and Networking, T...Computer EngineeringISBN:9781119368830Author:FITZGERALDPublisher:WILEY