Answered step by step
Verified Expert Solution
Link Copied!

Question

1 Approved Answer

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

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 divs 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 dont 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

If possible can you make it simple as possible and do the css and javascript in it own file, not in the html file. Thanks!

Step by Step Solution

There are 3 Steps involved in it

Step: 1

blur-text-image

Get Instant Access with AI-Powered Solutions

See step-by-step solutions with expert insights and AI powered tools for academic success

Step: 2

blur-text-image

Step: 3

blur-text-image

Ace Your Homework with AI

Get the answers you need in no time with our AI-driven, step-by-step assistance

Get Started

Students also viewed these Databases questions