From 9431d9d0c731ac65e8b400e2ff04e585956367d7 Mon Sep 17 00:00:00 2001 From: LaneLR Date: Wed, 30 Apr 2025 16:01:23 -0500 Subject: [PATCH 1/3] added js to script.js --- index.html | 1 + script.js | 25 ++++++++++++++++++++++++- style.css | 1 + 3 files changed, 26 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 53b6a34..d767c79 100644 --- a/index.html +++ b/index.html @@ -19,4 +19,5 @@

You've clicked the lights 0 times

+ \ No newline at end of file diff --git a/script.js b/script.js index 7056c69..358585a 100644 --- a/script.js +++ b/script.js @@ -1 +1,24 @@ -// Write your code here \ No newline at end of file +const bulb1 = document.getElementById("lightbulb1"); +const bulb2 = document.getElementById("lightbulb2"); +const bulb3 = document.getElementById("lightbulb3"); +const counter = document.getElementsByClassName("subtitle"); +let count = 0; + + +bulb1.addEventListener('click', function() { + count++; + counter.innerHTML = `You've click the lights ${count} times` + bulb1.classList.toggle("active") +}) + +bulb2.addEventListener('click', function() { + count++; + counter.innerHTML = `You've click the lights ${count} times` + bulb2.classList.toggle("active") +}) + +bulb3.addEventListener('click', function() { + count++; + counter.innerHTML = `You've click the lights ${count} times` + bulb3.classList.toggle("active") +}) \ No newline at end of file diff --git a/style.css b/style.css index 4ee6777..461fca2 100644 --- a/style.css +++ b/style.css @@ -31,6 +31,7 @@ body { padding: 10px; margin: 20px; transition: 0.2s; + cursor: pointer; } .lightbulb { From 6e6009e154ac25cac26269ec8c3cb55407c7333a Mon Sep 17 00:00:00 2001 From: LaneLR Date: Wed, 30 Apr 2025 16:04:33 -0500 Subject: [PATCH 2/3] fixed line 4 of script.js to be a querySelector instead of getElementByClassName --- script.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/script.js b/script.js index 358585a..8f9549d 100644 --- a/script.js +++ b/script.js @@ -1,7 +1,7 @@ const bulb1 = document.getElementById("lightbulb1"); const bulb2 = document.getElementById("lightbulb2"); const bulb3 = document.getElementById("lightbulb3"); -const counter = document.getElementsByClassName("subtitle"); +const counter = document.querySelector(".subtitle"); let count = 0; From b05761fe38de394b09df9b405410b321ce549cf8 Mon Sep 17 00:00:00 2001 From: LaneLR Date: Wed, 30 Apr 2025 16:12:32 -0500 Subject: [PATCH 3/3] added forEach to check each bulb using one querySelectorAll --- index.html | 10 ++++----- script.js | 59 +++++++++++++++++++++++++++++++++++++----------------- 2 files changed, 45 insertions(+), 24 deletions(-) diff --git a/index.html b/index.html index d767c79..8e8d073 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,13 @@ - + -

Lightbulb Selectors

-

You've clicked the lights 0 times

+

Lightbulb Selectors

+

You've clicked the lights 0 times

💡
@@ -16,8 +16,6 @@

You've clicked the lights 0 times

- - - \ No newline at end of file + diff --git a/script.js b/script.js index 8f9549d..4328af3 100644 --- a/script.js +++ b/script.js @@ -1,24 +1,47 @@ -const bulb1 = document.getElementById("lightbulb1"); -const bulb2 = document.getElementById("lightbulb2"); -const bulb3 = document.getElementById("lightbulb3"); +// const bulb1 = document.getElementById("lightbulb1"); +// const bulb2 = document.getElementById("lightbulb2"); +// const bulb3 = document.getElementById("lightbulb3"); +const bulbs = document.querySelectorAll(".item") const counter = document.querySelector(".subtitle"); let count = 0; - -bulb1.addEventListener('click', function() { +bulbs.forEach((bulb) => { + bulb.addEventListener("click", function () { count++; - counter.innerHTML = `You've click the lights ${count} times` - bulb1.classList.toggle("active") -}) + if (count == 1) { + counter.innerHTML = `You've click the lights 1 time`; + } else { + counter.innerHTML = `You've click the lights ${count} times`; + } + bulb.classList.toggle("active"); + })}); -bulb2.addEventListener('click', function() { - count++; - counter.innerHTML = `You've click the lights ${count} times` - bulb2.classList.toggle("active") -}) +// bulb1.addEventListener("click", function () { +// count++; +// if (count == 1) { +// counter.innerHTML = `You've click the lights 1 time`; +// } else { +// counter.innerHTML = `You've click the lights ${count} times`; +// } +// bulb1.classList.toggle("active"); +// }); -bulb3.addEventListener('click', function() { - count++; - counter.innerHTML = `You've click the lights ${count} times` - bulb3.classList.toggle("active") -}) \ No newline at end of file +// bulb2.addEventListener("click", function () { +// count++; +// if (count == 1) { +// counter.innerHTML = `You've click the lights 1 time`; +// } else { +// counter.innerHTML = `You've click the lights ${count} times`; +// } +// bulb2.classList.toggle("active"); +// }); + +// bulb3.addEventListener("click", function () { +// count++; +// if (count == 1) { +// counter.innerHTML = `You've click the lights 1 time`; +// } else { +// counter.innerHTML = `You've click the lights ${count} times`; +// } +// bulb3.classList.toggle("active"); +// });