make text button mode toggle when pressed

This commit is contained in:
Xaloc 2021-08-27 00:34:28 +02:00
parent f7a6b0e30a
commit 132524b1c7

View File

@ -28,7 +28,7 @@
<div style="text-align: center;">
<h1><span style='color: purple;'>D</span><span style='color: #FF47EB;'>a</span><span style='color: red;'>t</span><span style='color: #FF6600;'>a</span> <span style='color: orange;'>f</span><span style='color: #FFE200;'>r</span><span style='color: lightgreen;'>o</span><span style='color: darkgreen;'>m</span> <span style='color: turquoise;'>I</span><span style='color: #1ac6ff;'>R</span><span style='color: blue;'>F</span> <span style='color: grey;'>K</span><span style='color: #914724;'>i</span>r<span style='color: #9933ff;'>u</span><span style='color: #ff99cc;'>n</span><span style='color: #811a36;'>a</span></h1>
<div style="display: inline-block; padding: 10px;">
<button onclick="darkMode()" class="button-dark">Light Mode</button>
<button id="modeBtn" onclick="darkMode()" class="button-dark">Dark Mode: On</button>
<h3>Latest image from the All Sky camera</h3>
<img style='width: 90%;' src='https://www.irf.se/alis/allsky/krn/latest_small.jpeg'>
</div>
@ -65,7 +65,14 @@
function darkMode() {
var ele = document.body;
ele.classList.toggle("dark");
var x = document.getElementById("modeBtn");
if (x.innerHTML === "Dark Mode: Off") {
x.innerHTML = "Dark Mode: On";
} else {
x.innerHTML = "Dark Mode: Off";
}
}
async function api(){
const res = await fetch('https://www.spaceweather.se/forecast/kp/latest.json');
const data = await res.json();