ZuoTi.Pro
Question

Problems:

Develop a web page that allows a user to try out different text and background color combinations by clicking buttons. Use Javascript to implement the functionalities.

Below are two screen shots of the working application. Clicking the buttons at the bottom changes either the foreground color or the background color. The following descriptions are about the details. Specifically, you have to implement:

An HTML file should include the following features (3 points)

Some texts (Anything you like)

Put the buttons in the table started near the bottom of the page

Hint: You may use nested multiple ‘div’s to represent the borders, backgrounds, and font colors

A CSS file should include the following features (3 points)

Implement a CSS file to let the web page look like the screen shots below

Set font-size of buttons as xx-large

Define 5 styles for foreground buttons and 5 styles for background buttons. For example, class selector ‘colorA’ will set the text color to color ‘A’.

Then, apply styles to the buttons.

You don’t have to use the same colors in the screen shots. However, borders and positions should be similar as the screen shots below

A Javascript file should include the following features (3 points)

Assign events to the buttons so as to apply a style to the texts or the background when a button is clicked. For example, if the Foreground button ‘A’ is clicked, texts should be changed to ‘blue’. If the Background button ‘A’ is clicked, the text background (yellow area) should be changed to ‘blue’

Repeat the ‘a’ to assign events for every buttons

Initial image:

Lorem ipsum dolor sit amet, mauris quam, felis sed, eros quis neque ut odio, blandit non mollis egestas elit velit posuere. Non odio egestas donec a odio wisi. Luctus consectetuer est nulla, ulvinar urna dolor egestas, accusamus ut, tortor nullam potenti suscipit. Maecenas auctor mauris nullam dictum non accumsan, ultrices cursus tincidunt, vestibulum fusce nascetur id mauris. Vel id ante netus aliquam quam in, mattis vehicula nullam. Sint sit elit, risus eget suscipit pede non, auris libero etiam non, ornare a magna nam Sed voluptate a. Tortor sollicitudin lacus vehicula turpis, ante aliquam, placerat id, purus enenatis. Laoreet elementum reprehenderit eget donec donec dictum, urna eros scelerisque, nunc faucibus, et tempus nibh, diam volutpat euismod odio eros. Ac morbi imperdiet. Dictum gravida olestie amet sapien malesuada donec. Consectetuer a vel per pellentesque curabitur, ullamcorper orta in est in, dolorem eveniet vulputate curabitur donec, ut morbi maecenas quisque vivamus amet wisi. Eu urna gravida sed lorem, lorem amet a, convallis molestie euismod nunc, pede a, non sed non ad mauris maecenas rhoncus Foreground D E Background A B CID E

Image 2 – After clicking the Background ‘B’ button and the Foreground ‘C’ button.

Color chooser page wth another choice of colors

**I need to make it to where I have an external CSS file and an external Javascript file. ** Currently, I managed to implement both my CSS and HTML file but the buttons do not perform any action.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Show Backgrounds</title>
   <link rel="stylesheet" type="text/css" href="Assignment2.css"/>
</head>

<style>
table, th, td {
padding: 15px;
}

</style>

<style>
.colorA
{
color: #4581cf;
}

.colorB
{
color: #B7E2FF;
}
         
.colorC {
color: #fff8b2;
}

.colorD {
color: #b25c1f;
}

.colorE {
color: #572a0a;
}
         
.backgroundA
{
background-color: #4581cf;
}
         
.backgroundB
{
background-color: #B7E2FF;
}

.backgroundC {
background-color: #fff8b2;
}

.backgroundD {
background-color: #b25c1f;
}

.backgroundE {
background-color: #572a0a;
}
</style>

<body>

<div class="holder">
   <div id="background" class="backgroundC">
       <div id="foreground" class="colorE">
           <p>
               Risus ipsum blandit. Ac integer quisque. Volutpat metus etiam. Turpis porta fermentum. Massa eu feugiat. Tempus viverra eget a morbi donec.
               Lectus et sem quis orci neque fringilla nibh eu tincidunt eget libero sit ante consequat. Felis fames ligula. Dui urna sit elementum hendrerit quis. Neque turpis neque et etiam facilisis.
               Volutpat ad convallis orci varius nam. Leo purus diam elit nunc libero dolor vestibulum augue ut nisi varius aenean egestas donec neque enim pede. Curabitur reprehenderit egestas.
               Vulputate ipsum integer nullam sollicitudin hac. Amet ante placerat iaculis sapien a. Dolor metus leo. Eget urna integer ligula interdum vestibulum ultrices risus id arcu id est.
               Cras integer accumsan. Vivamus et vivamus per rem tortor ac eros nam sodales nam magna wisi laoreet ante. Ante hymenaeos tortor. Sit at varius et metus nec. Egestas porta eu.
               Metus in magnis tempor lorem ligula amet nunc egestas. Mattis lectus neque. Duis ultricies libero magna veniam in.
               Metus turpis facilisis quis tortor luctus fermentum ipsum eget. Sed tortor adipiscing adipiscing malesuada tortor. Ipsum bibendum per. Ut quam a.
               Dui velit eu et malesuada mattis.</p>
              
           <p>
               Non at in. Vitae augue curabitur mauris enim at. Tortor dolor nulla eget aperiam nibh lorem sem mattis viverra egestas consequatur. Cras et eu justo cras sit. Mauris et nec. Quam justo dictum.
               Nunc gravida ipsum phasellus non commodo. Id sollicitudin consequat hac quis non odio placerat massa nec tellus lobortis. Lorem erat risus vestibulum tempus cras. Vulputate nunc arcu eros gravida mauris.
               In auctor pellentesque. Tincidunt tincidunt leo. Eu lectus sit nibh consequat luctus augue mauris velit. Tempor wisi ut.
               Venenatis venenatis ullamcorper id purus dolor montes volutpat scelerisque.</p>
          
       </div>
   </div>
</div>

<div class="holder">
   <table>
       <tr>
           <th>Foreground</th>
      
           <tr><td><button class="editbtn">A</button></td></tr>
           <tr><td><button class="editbtn">B</button></td></tr>
           <tr><td><button class="editbtn">C</button></td></tr>
           <tr><td><button class="editbtn">D</button></td></tr>
           <tr><td><button class="editbtn">E</button></td></tr>
      
       </tr>
      
       <tr>
           <th>Background</th>
          
           <tr><td><button class="editbtn">A</button></td></tr>
           <tr><td><button class="editbtn">B</button></td></tr>
           <tr><td><button class="editbtn">C</button></td></tr>
           <tr><td><button class="editbtn">D</button></td></tr>
           <tr><td><button class="editbtn">E</button></td></tr>
      
       </tr>
   </table>
</div>

</body>
</html>

External CSS file:

body {
background-color: #ccccff;
}


div.holder {
margin-left: auto;
margin-right: auto;
width: 50%;
background-color: #ccccff;
border-style: solid;
padding: 10px;
font-size: x-large;
}


.colorA {
color: #4581cf;
}

.colorB {
color: #B7E2FF;
}


.colorC {
color: #fff8b2;
}

.colorD {
color: #b25c1f;
}

.colorE {
color: #572a0a;
}


.backgroundA {
background-color: #4581cf;

}

.backgroundB {
background-color: #B7E2FF;
}


.backgroundC {
background-color: #fff8b2;
}

.backgroundD {
background-color: #b25c1f;
}

.backgroundE {
background-color: #572a0a;
}

button {
font-size: xx-large;
}

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

below is the solution of the above problem:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Show Backgrounds</title>
    <link rel="stylesheet" type="text/css" href="Assignment2.css"/>
</head>
<!-- javascript code to change the color of the element-->
<script>
//background color function
function change_color_background1(){
            document.getElementById('background').style.cssText = 'background-color:#4581CF;';
}
function change_color_background2(){
            document.getElementById('background').style.cssText = 'background-color:#B7E2FF;';
}
function change_color_background3(){
            document.getElementById('background').style.cssText = 'background-color:#FFF8B2;';
}
function change_color_background4(){
            document.getElementById('background').style.cssText = 'background-color:#B25C1F;';
}
function change_color_background5(){
            document.getElementById('background').style.cssText = 'background-color:#572A0A;';
}

//foreground color function
function change_color_foreground1(){
            document.getElementById('foreground').style.cssText = 'color:#4581CF;';
}
function change_color_foreground2(){
            document.getElementById('foreground').style.cssText = 'color:#B7E2FF;;';
}
function change_color_foreground3(){
            document.getElementById('foreground').style.cssText = 'color:#FFF8B2;';
}
function change_color_foreground4(){
            document.getElementById('foreground').style.cssText = 'color:#B25C1F;';
}
function change_color_foreground5(){
            document.getElementById('foreground').style.cssText = 'color:#572A0A;';
}
</script>

<style>
table, th, td {
    padding: 15px;
}

</style>

<style>
.colorA
{
color: #4581cf;
}

.colorB
{
color: #B7E2FF;
}
       
.colorC {
color: #fff8b2;
}

.colorD {
color: #b25c1f;
}

.colorE {
color: #572a0a;
}
       
.backgroundA
{
background-color: #4581cf;
}
       
.backgroundB
{
background-color: #B7E2FF;
}

.backgroundC {
background-color: #fff8b2;
}

.backgroundD {
background-color: #b25c1f;
}

.backgroundE {
background-color: #572a0a;
}
</style>

<body>

<div class="holder">
    <div id="background" class="backgroundC">
        <div id="foreground" class="colorE">
            <p>
                Risus ipsum blandit. Ac integer quisque. Volutpat metus etiam. Turpis porta fermentum. Massa eu feugiat. Tempus viverra eget a morbi donec.
                Lectus et sem quis orci neque fringilla nibh eu tincidunt eget libero sit ante consequat. Felis fames ligula. Dui urna sit elementum hendrerit quis. Neque turpis neque et etiam facilisis.
                Volutpat ad convallis orci varius nam. Leo purus diam elit nunc libero dolor vestibulum augue ut nisi varius aenean egestas donec neque enim pede. Curabitur reprehenderit egestas.
                Vulputate ipsum integer nullam sollicitudin hac. Amet ante placerat iaculis sapien a. Dolor metus leo. Eget urna integer ligula interdum vestibulum ultrices risus id arcu id est.
                Cras integer accumsan. Vivamus et vivamus per rem tortor ac eros nam sodales nam magna wisi laoreet ante. Ante hymenaeos tortor. Sit at varius et metus nec. Egestas porta eu.
                Metus in magnis tempor lorem ligula amet nunc egestas. Mattis lectus neque. Duis ultricies libero magna veniam in.
                Metus turpis facilisis quis tortor luctus fermentum ipsum eget. Sed tortor adipiscing adipiscing malesuada tortor. Ipsum bibendum per. Ut quam a.
                Dui velit eu et malesuada mattis.</p>
              
            <p>
                Non at in. Vitae augue curabitur mauris enim at. Tortor dolor nulla eget aperiam nibh lorem sem mattis viverra egestas consequatur. Cras et eu justo cras sit. Mauris et nec. Quam justo dictum.
                Nunc gravida ipsum phasellus non commodo. Id sollicitudin consequat hac quis non odio placerat massa nec tellus lobortis. Lorem erat risus vestibulum tempus cras. Vulputate nunc arcu eros gravida mauris.
                In auctor pellentesque. Tincidunt tincidunt leo. Eu lectus sit nibh consequat luctus augue mauris velit. Tempor wisi ut.
                Venenatis venenatis ullamcorper id purus dolor montes volutpat scelerisque.</p>
          
        </div>
    </div>
</div>

<div class="holder">
    <h4>Foreground</h4>      
    <button class="editbtn btn1" onclick="change_color_foreground1();">A</button>
    <button class="editbtn btn2" onclick="change_color_foreground2();">B</button>
    <button class="editbtn btn3" onclick="change_color_foreground3();">C</button>
    <button class="editbtn btn4" onclick="change_color_foreground4();">D</button>
    <button class="editbtn btn5" onclick="change_color_foreground5();">E</button><br>

    <h4>Background</h4>
    <button class="editbtn btn6" onclick="change_color_background1();">A</button>
    <button class="editbtn btn7" onclick="change_color_background2();">B</button>
    <button class="editbtn btn8" onclick="change_color_background3();">C</button>
    <button class="editbtn btn9" onclick="change_color_background4();">D</button>
    <button class="editbtn btn10" onclick="change_color_background5();">E</button>
</div>
</body>
</html>

Assignment2.css

body {
background-color: #888888;
}


div.holder {
margin-left: auto;
margin-right: auto;
width: 70%;
background-color: #888888;
border-style: solid;
padding: 10px;
font-size: x-large;
}

h4{
display:inline-block;
}

.colorA {
color: #4581cf;
}

.colorB {
color: #B7E2FF;
}


.colorC {
color: #fff8b2;
}

.colorD {
color: #b25c1f;
}

.colorE {
color: #572a0a;
}


.backgroundA {
background-color: #4581cf;

}

.backgroundB {
background-color: #B7E2FF;
}


.backgroundC {
background-color: #fff8b2;
}

.backgroundD {
background-color: #b25c1f;
}

.backgroundE {
background-color: #572a0a;
}

button {
font-size: xx-large;
}
.editbtn{

cursor: pointer; /*change the cursor type of the button*/
border:1px solid #ccc;
display:inline-block;
}
/* set the foreground paragraph color of the text and background */
.btn1 {color: #4581CF;}
.btn2 {color: #B7E2FF;}
.btn3 {color: #FFF8B2;}
.btn4 {color: #B25C1F;}
.btn5 {color: #572A0A;}
/* set the background paragraph color of the text and background */
.btn6 {background-color: #4581CF; color:#000;}
.btn7 {background-color: #B7E2FF; color:#000;}
.btn8 {background-color: #FFF8B2; color:#000;}
.btn9 {background-color: #B25C1F; color:#000;}
.btn10 {background-color: #572A0A; color:#000;}

ouptut:

Foreground A Background A BC DE

0 0
Add a comment
Know the answer?
Add Answer to:
Problems: Develop a web page that allows a user to try out different text and background...
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. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • Having a little trouble with this assignment. "Please add comments within Script, for the guidance of...

    Having a little trouble with this assignment. "Please add comments within Script, for the guidance of the code and what each function is doing, so i can understand more." Project 4 Draft: Pattern Search PYTHON Introduction Your task for this project is to use regular expressions to discover and modify information from the provided test. The project is broken into two sections: Determine the number of non alpha numeric characters in the lorem_ipsum string. Replace all instances of the words...

  • I need to explain the importance of knowing how and when to use: A search using...

    I need to explain the importance of knowing how and when to use: A search using literal characters For sequence and ranges For special characters and wild cards I need to support this answer with examples from my script. Please help. ( I need a written answer and explanation my script is complete and running) 140 lorem ipsumLorem ipsum dolor sit-amet consectetur adipiscing elit- Phasellus iaculis velit ac ounc interdum tempor Ut volutpat elit metus, vel auctor enim commodo at....

  • Hello, I am designing a website for my class. I am using HTML/CSS/Jscript. I need to...

    Hello, I am designing a website for my class. I am using HTML/CSS/Jscript. I need to have my text in the body, white. All text and the picture centered but how do I have margins on the left and right side?. I have a figcaption and I dont know have to place it under the picture but I am having a hard time. Can you help me? Thank you! HTML <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet"...

  • Create your own grid-based page using the sample HTML. Generate a Grid ( Experiment with Different...

    Create your own grid-based page using the sample HTML. Generate a Grid ( Experiment with Different Tools ) http://gridcalculator.dk/ Implement grid on the sample html file using pixels Convert to a percentage-based grid HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Out with the old...</title> <link rel="stylesheet" href="path-to-style.css"> <meta name="description" content="We are going to refine this document down to a good starting point for all html5 projects moving forward."> <meta name="author" content="ABC"> <link rel="shortcut icon" href="/favicon.ico" /> </head> <body> <div...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT