Scribd
Upload
4 views3 pages

Question 1 Color

The document outlines a task to complete a Color Palette Selector using HTML, CSS, and JavaScript. It requires adding two color boxes, changing their height, and implementing functionality to update a 'Selected Color' box upon clicking any color box. Constraints include maintaining the order of boxes and not altering existing element attributes.

Uploaded by

deekahanii
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views3 pages

Question 1 Color

The document outlines a task to complete a Color Palette Selector using HTML, CSS, and JavaScript. It requires adding two color boxes, changing their height, and implementing functionality to update a 'Selected Color' box upon clicking any color box. Constraints include maintaining the order of boxes and not altering existing element attributes.

Uploaded by

deekahanii
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

Question: Color Palette Selector

You are provided with an incomplete HTML, CSS, and JavaScript file that represents a simple Color
Palette Selector.
Currently, the page contains two color boxes and one “Selected Color” box.
Your task is to complete the code so that when a user clicks on any color box, the selected color is
displayed in the “Selected Color” area.

Objectives
1. Add two more color boxes with their names and HEX codes.
2. Change the height of all color boxes to 200px.
3. When a user clicks on a color box, it should update the background color of the “Selected
Color” box.

Constraints
 Do not change the order of the existing color boxes.
 Do not change the id or class attributes of any elements — they are used by the JavaScript
code.
 Ensure that the styling is applied correctly according to the provided CSS.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Palette</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 20px;
}

.palette {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 30px;
}

.color-box {
width: 150px;
height: 180px; /* TODO: ensure height is set correctly */
border: 2px solid #333;
cursor: pointer;
border-radius: 10px;
transition: transform 0.3s;
}

.color-box:hover {
transform: scale(1.05);
}

.color-name {
margin-top: 10px;
font-weight: bold;
}

#selected-color {
width: 200px;
height: 200px;
border: 3px solid #000;
margin: 30px auto;
border-radius: 10px;
}
</style>
</head>
<body>

<h1>Color Palette</h1>

<div class="palette">
<div class="color-item">
<div class="color-box" style="background-color: #FF5733;" data-color="#FF5733"></div>
<div class="color-name">Orange Red<br>#FF5733</div>
</div>

<div class="color-item">
<div class="color-box" style="background-color: #33C1FF;" data-color="#33C1FF"></div>
<div class="color-name">Sky Blue<br>#33C1FF</div>
</div>

<!-- TODO: Add two more color boxes here with their names and HEX codes -->
</div>

<h2>Selected Color</h2>
<div id="selected-color"></div>

<script>
const colorBoxes = [Link]('.color-box');
const selectedBox = [Link]('selected-color');

[Link](box => {
[Link]('click', () => {
// TODO: Change the color of selected-color div when a color is clicked
});
});
</script>

</body>
</html>

Existing Output

Excepted Output

You might also like