CODE
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Light Bulb On/Off</title>
<style>
.bulb {
width: 100px;
height: 150px;
background-color: lightblue;
border-radius: 50% 50% 45% 45%;
margin: 50px auto;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
transition: background-color 0.3s;
}
.off {
background-color: #333;
}
button {
display: block;
margin: 20px auto;
padding: 10px 20px;
font-size: 16px;
}
</style>
</head>
<body>
<div class=”bulb” id=”bulb”></div>
<button onclick=”toggleBulb()”>Toggle Bulb</button>
<script>
function toggleBulb() {
const bulb = document.getElementById(‘bulb’);
bulb.classList.toggle(‘off’);
}
</script>
</body>
</html>
CSS Statement 1
button {
Copilot included this statement because it was necesary to the functionality of the light bulb. This function made the button display on the screen
CSS Statement 2
.bulb {
“bulb” is not an CSS function but the term “bulb” is the term selected for the HTML element. This piece of code is what helped the lightbulb display
CSS Statement 3
border- radius
this element provided the roundedness of the bulb. If the numbers following this element changed, it would impact the shape of the bulb
CSS Statement 4
margin:
In this context “margin” is being used to create space around the light bulb
CSS Statement 5
background-color
This element is what is providing color to the light bulb. In our code it is displayed as background-color: lightblue; which in turn is why the lightbulb has appeared as light blue. If “lightblue” were removed and replaced with another HTML color or hex code it would alter the hue reflected