-
Notifications
You must be signed in to change notification settings - Fork 0
/
test2.html
82 lines (72 loc) · 2.21 KB
/
test2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Set the overall styles for the bar */
#horizontalBar {
display: flex;
height: 20px; /* Adjust the height as needed */
width: 100%; /* Fills the entire width of the page */
}
/* Define the individual sections with different colors and black borders */
.section1, .section2, .section3, .section4, .section5 {
flex: 1; /* Equal distribution of space */
border: 1px solid black; /* Add a black border */
}
.section1 {
background-color: #FF5733; /* Orange color */
}
.section2 {
background-color: #3498DB; /* Blue color */
}
.section3 {
background-color: #27AE60; /* Green color */
}
.section4 {
flex: 1;
background-color: #E74C3C; /* Red color */
}
.section5 {
flex: 1;
background-color: #9B59B6; /* Purple color */
}
/* Initial background color for the words */
.word {
background-color: white;
padding: 5px;
margin: 5px;
}
</style>
</head>
<body>
<p>here</p>
<div id="horizontalBar">
<div class="section1"></div>
<div class="section2"></div>
<div class="section3"></div>
<div class="section4"></div>
<div class="section5"></div>
</div>
<p>there</p>
<!-- Five words in a line -->
<div class="word" id="word1">Apple</div>
<div class="word" id="word2">Banana</div>
<div class="word" id="word3">Cherry</div>
<div class="word" id="word4">Date</div>
<div class="word" id="word5">Fig</div>
<!-- Five buttons elsewhere -->
<button onclick="changeColor('word1')">Apple</button>
<button onclick="changeColor('word2')">Banana</button>
<button onclick="changeColor('word3')">Cherry</button>
<button onclick="changeColor('word4')">Date</button>
<button onclick="changeColor('word5')">Fig</button>
<script>
function changeColor(wordId) {
const wordElement = document.getElementById(wordId);
wordElement.style.backgroundColor = 'gray';
}
</script>
</body>
</html>