Question

8- Develop a personal web page for yourself using HTML, CSS, and Javascript Use the following...

8- Develop a personal web page for yourself using HTML, CSS, and Javascript

Use the following HTML tags to design your webpage

<h1>…</h1> , <h3>… </h3> , <h6>… </h6> , <p>…</p> , <b> …</b> , <i>…</

i>, <a…..> </a>, <img…..> , <table>….</table> , <div> …</div>, <form>…</

form>, <input type=“text”>, and <input type=“submit”>

Use an external css to change the default style of your webpage. You must use

at least one element selector, one id selector, and one class selector

Using text input and submit button, allow the user to change the background color of your web page to red, blue, or yellow. When the user clicks the submit button to change the background color, you must first validate the user input to

make sure the entered color is valid (red, blue, and yellow are valid colors). Then,

you should change the background color of your web page. If the user didn’t enter a valid color, you should prompt the user to enter a valid color.

Engineering   Computer-Science   
0 0
Add a commentTranscribed image text
Next >

Homework Answers

Answer #1

<!--index.html-->

<!DOCTYPE html>

<html>

<head>

    <meta charset='utf-8'>

    <meta http-equiv='X-UA-Compatible' content='IE=edge'>

    <title>Change backgroud color on User Input</title>

    <meta name='viewport' content='width=device-width, initial-scale=1'>

    <link rel='stylesheet' type='text/css' media='screen' href='style.css'>

</head>

<body>

    <h1 id="heading">Input backgroud Color</h1>

    <input type="text" id="color" placeholder="Enter Backgroud Color : ">

        <input type="submit" value="Submit" onclick="backchange()">

    <br>

    <div class="divselect">

        <h2>Simple Web Page</h2>

        <h3>For Changing Backgroud Color in</h3>

        <h4>Red, Blue or Yellow</h4>

        <h5>External link are not provided</h5>

        <p>Using External <b>CSS</b> and a bit of <i>JavaScript</i> for validation and backgroundColor change</p>

        <a href="#color">Refresh</a><br>

        <img src="#" >

        <br>

        <table>

            <tr>

                <th>Table Heading 1</th>

                <th>Table Heading 2</th>

                <th>Table Heading 3</th>

            </tr>

            <tr>

                <td>temp 1</td>

                <td>temp 2</td>

                <td>temp 3</td>

            </tr>

            <tr>

                <td>temp 4</td>

                <td>temp 5</td>

                <td>temp 5</td>

            </tr>

            <tr>

                <td>temp 7</td>

                <td>temp 8</td>

                <td>temp 9</td>

            </tr>

        </table>

    </div>

    <script>

        function backchange() {

            var col = document.getElementById("color").value;

            colorss = col.toLowerCase();

            if (colorss === "red" || colorss == "blue" || colorss == "yellow") {

                document.body.style.backgroundColor = colorss;

            }

            else {

                var col = prompt("Please Enter a valid Backgroud Color : ");

                colorss = col.toLowerCase();

                if (colorss === "red" || colorss == "blue" || colorss == "yellow") {

                    document.body.style.backgroundColor = colorss;

                } else {

                    backchange();

                }

            }

        }

    </script>

</body>

</html>

/*style.css*/

body {

    text-align: center;

    margin: 10%;

}

a {

    text-decoration: none;

}

input[type="submit"] {

    border: 2px solid rgb(0, 0, 0);

    padding: 5px;

    font-size: 18px;

    cursor: pointer;

    margin: 12px 0;

    padding: 10px;

}

input[type="submit"]:hover, input[type="text"]:hover {

    border-color: #646464;

}

input[type="text"] {

    font-size: 18px;

    padding: 10px;

    border: 2px solid rgb(0, 0, 0);

}

table {

    width: 110%;

}

table, th, td {

    border: 2px solid teal;

}

.divselect {

    background: #d4d4d471;

    padding: 13%;

    border-radius: 50px;

}

#heading {

    color: rgba(0, 0, 0, 0.678);

}

5 index.html Change Background by user input index.html html, body div.divselect\ table <td>temp 1</td> <td>temp 2</td> ----<td>temp 3</td> </tr> <tr> ----<td>temp 4</td> <td>temp 5</td> -----<td>temp 5</td> </tr> <tr> -- ---<td>temp 7</td> -<td>temp 8</td> -- ---<td>temp 9</td> - - - - </tr> ----/table] -- </div> - <script> function backchange() { ...var col = document.getElementById("color").value; colorss = col.toLowerCase(); if (colorss === "red" || colorss == "blue". Il colorss == -"yellow") { document.body.style.backgroundColor = colorss; } else { var col = prompt("Please Enter a valid Backgroud Color: "); colorss = col.toLowerCase(); if (colorss === - "red" || colorss == "blue". Il colorss == "yellow") { document.body.style.backgroundColor = colorss; -----} else { --- backchange(); ----</script> </body> </html> AO HTML Port : 5500 41

3 style.css Change Background by user input style.css\ s input[type="submit"], body { ---- text-align: center; ----margin: 10%; a { --- text-decoration: none; input[type="submit"] { border: 2px solid Orgb(0, 0, 0); padding: 5px; font-size: 18px; cursor: pointer; margin: 12px ; padding: 10px; input[type="submit"]:hover, input[type="text"]:hover { ---border-color: #646464; input[type="text"] { font-size: 18px; padding: 10px; ---- border: 2px solid Orgb(0, 0, 0); table { ----width: 110%; table, th, td { ---- border: 2px solid teal; .divselect { 0AO CSS Port : 5500 41

3 style.css Change Background by user input style.css 3 input[type="submit"] input[type="text"] { font-size: 18px; padding: 10px; ---- border: 2px solid Orgb(0, 0, 0); table { ----width: 110%; table, th, td { ---- border: 2px solid teal; .divselect { ---- background: #d4d4d471; ---padding: 13%; ---border-radius: 50px; #heading { ----color: rgba(0, 0, 0, 0.678); 0AO CSS Port : 5500 41

0 0
Know the answer?
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for?
Ask your own homework help question
Similar Questions
Create a webpage with CSS Box Model: Create a basic web page using the 5 required...
Create a webpage with CSS Box Model: Create a basic web page using the 5 required html tags. Add paragraph tags and enclosed them with a div element. Using the CSS Box Model, style the div element to have a total width of 350px and a height of 250px. It should have 10px padding on all sides, a gray border of 5px on all sides, and 15px margins on both sides but none on the top and bottom. Add a...
using HTML JAVA AND CSS all embeded on one page. create a page with some black...
using HTML JAVA AND CSS all embeded on one page. create a page with some black paragraph text against a white background, on the page pu a button labeled night mode. when the button is clicked the backgrournd should turn black all text should be white. when the button is initially clicked, the text should change to say "day mode"
Please linked both files. For this assignment you need to create a ToDo list using Javascript,...
Please linked both files. For this assignment you need to create a ToDo list using Javascript, along with HTML and CSS. Begin by creating a HTML page called todo.html. Then create a Javascript file called todo.js and link it in to the HTML page using a script tag. All Javascript for the assignment must be in the separate file. (For CSS, feel free to include styles in a style block at the top of the HTML page, or to link...
PART B- Javascript Using a text editor (VS Code or Notepad) and a web browser, you...
PART B- Javascript Using a text editor (VS Code or Notepad) and a web browser, you will demonstrate how to create an HTML file, externally link a JavaScript file, and write some source code in the JavaScript file. a..Create two blank files to be an HTML file and a JavaScript file. The file names should be partA.html and partA.js. b.. Create a basic HTML webpage structure. c..Link the JavaScript file to the HTML file using the <script> tag. d.. Prompt...
<!doctype html> <html lang=”en”>   <head>     <title>Principal Calculation Form</title>     <meta charset="utf-8"/>         
<!doctype html> <html lang=”en”>   <head>     <title>Principal Calculation Form</title>     <meta charset="utf-8"/>                   <script src="code.js"></script>   </head>      <body onload="setFocus();">     <div class="container">                                       <div class="main">                                                                                <form action="#" method="post" name="form_name" id="form_id" class="form_class" >                                                                           <h2>--Principal Loan Form--</h2>                                                                                                                                                      <h5>Disclaimer: This software by no mean will precisely predict your mortgage through your lender company.  This Software will only assume the four items below in order to make an educated guess or prediction to your exact mortgage interests amount and the duration of your loan from your lender. <img...
This will be my third time submitting this question. THERE SHOULD BE NO USE OF CSS...
This will be my third time submitting this question. THERE SHOULD BE NO USE OF CSS OR SWITCH STATEMENTS IN THE JAVASCRIPT. Even though there is stylesheet in the HTML file do no create a new one. Project Standards: Students will use click events to capture user input. Students will use variables to store information needed by their application and keep track of their program’s state. Students will use conditionals to control project flow. Project Task You will be building...
use CSS, java and HTML to make a charity admin page. It's a web page after...
use CSS, java and HTML to make a charity admin page. It's a web page after you log in to your account. I can have personal information, the amount of money donated, the children who have received charity, and some blogs. In fact, all the things are what I want. But you are free to do whatever You like, even if you don't say what I say. I just need a charity Admin page for charity User.Don't ask me for...
Please provide HTML code for the following: • Change the color of all <p> elements to...
Please provide HTML code for the following: • Change the color of all <p> elements to “blue" • Change the 3 border properties, so that they only show the border on the top side • Use the padding property to set the top and bottom paddings for <p> to "25px", and left and right paddings to "50px" • Style text in <h1> to uppercase letters, and text in <p> to capitalized letters • Remove the bullets/markers from the list items...
You must implement a dynamic webpage the provides a basic task-list functionality. In particular, you page...
You must implement a dynamic webpage the provides a basic task-list functionality. In particular, you page should provide a user an interface to add and remove a task as well as mark a task as completed. For this version of the assignment, the tasks will be added directly in the HTML page by manipulating the DOM. Moreover, you should maintain an array that stores task details. Each task comprise of three fields: task-title: which is a one-line description of the...
TASK 2: Open numberic-variable_problem.js file in a text editor (e.g., NotePad++). What is the syntax error...
TASK 2: Open numberic-variable_problem.js file in a text editor (e.g., NotePad++). What is the syntax error in the JavaScript file? Find error message in console in a browser’s developer tool. Fix that error and reload the web page in browser. What is the change in the content displayed in the web page after fix the syntax error in the JavaScript code? Replace the line#18 statement (el.textContent = '$' + total;) in the JavaScript code with    el.textContent = '$' + total.toFixed(3);...
ADVERTISEMENT
Need Online Homework Help?

Get Answers For Free
Most questions answered within 1 hours.

Ask a Question
ADVERTISEMENT