<!DOCTYPE html>
<html>
<head>
<title> EXERCISE 1 </title>
<style>
#c {
background-color: #3e181b;
border: 3px solid #db1d2d;}
#d {
background-color: #422018;
border: 3px solid #f0421c;}
#e {
background-color: #45391b;
border: 3px solid #fec02d;}
body{
background:black;}
.para {color:white;font-size:22pt; background

urple;margin-left: 1%;margin-top: 1%; padding:1%;}
.box {
width: 10vw; /*(1/10th) viewport width */
height: 10vw;
margin-left: 1%;
margin-top: 1%;
display:inline-block;
}
.wrapper{
margin-left:30%;
margin-top:15%;
}
</style>
<script>
window.onload = function(){
console.log("testing");
let handleClick = function (event){
// let cBox = document.getElementById("c");
// let dBox = document.getElementById("d");
//let eBox = document.getElementById("e");
if(document.getElementById("c")){
console.log("This is Text For Box C");
}
else if(document.getElementById("d")){
console.log("This is Text For Box D");
}
else if(document.getElementById("e")){
console.log("This is Text For Box E");
}
}
let cBox = document.getElementById("c");
cBox.addEventListener("click", handleClick);
let dBox = document.getElementById("d");
dBox.addEventListener("click", handleClick);
let eBox = document.getElementById("e");
eBox.addEventListener("click", handleClick);
}
//on load
</script>
</head>
<body>
<div class = "wrapper">
<div id = "c" class = "box"></div>
<div id = "d" class = "box"></div>
<div id = "e" class = "box"></div>
<br />
<p style = "display:inline-block;" id = "displayText" class = "para"></p>
</div>
</body>
</html>
mata one me box thuna click karapuwama console eke watenna C box eka click kara D box eka click kara E box eka click kara kiyala..puluwan nm kiya diyan loku udawuwak.