Upload 3 files
Browse files- index.html +6 -1
- script.js +7 -0
index.html
CHANGED
|
@@ -19,10 +19,15 @@
|
|
| 19 |
</head>
|
| 20 |
|
| 21 |
<body>
|
|
|
|
| 22 |
<div id="music-widget">
|
| 23 |
-
<button id="music-toggle" aria-label="Play / Pause music">
|
|
|
|
|
|
|
|
|
|
| 24 |
<span id="music-text">sound off</span>
|
| 25 |
</div>
|
|
|
|
| 26 |
<!-- Liquid BG -->
|
| 27 |
<div class="liquid-bg">
|
| 28 |
<div class="orb orb-1"></div>
|
|
|
|
| 19 |
</head>
|
| 20 |
|
| 21 |
<body>
|
| 22 |
+
<!-- music widget -->
|
| 23 |
<div id="music-widget">
|
| 24 |
+
<button id="music-toggle" aria-label="Play / Pause music">
|
| 25 |
+
<!-- default = OFF state -->
|
| 26 |
+
<img src="./media/speaker-off.svg" id="speaker-icon" width="20" height="20" alt="speaker">
|
| 27 |
+
</button>
|
| 28 |
<span id="music-text">sound off</span>
|
| 29 |
</div>
|
| 30 |
+
|
| 31 |
<!-- Liquid BG -->
|
| 32 |
<div class="liquid-bg">
|
| 33 |
<div class="orb orb-1"></div>
|
script.js
CHANGED
|
@@ -539,3 +539,10 @@ const io = new IntersectionObserver(entries => {
|
|
| 539 |
});
|
| 540 |
}, { threshold: .6 });
|
| 541 |
document.querySelectorAll('.stat-card').forEach(c => io.observe(c));
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 539 |
});
|
| 540 |
}, { threshold: .6 });
|
| 541 |
document.querySelectorAll('.stat-card').forEach(c => io.observe(c));
|
| 542 |
+
/* toggle SVG icon */
|
| 543 |
+
const spIcon = document.getElementById('speaker-icon');
|
| 544 |
+
function updateSpeakerIcon() {
|
| 545 |
+
spIcon.src = musicOn ? './media/speaker-on.svg'
|
| 546 |
+
: './media/speaker-off.svg';
|
| 547 |
+
}
|
| 548 |
+
musicToggle.addEventListener('click', updateSpeakerIcon);
|