behöver hjälp med att skapa en darkmode function.
hejsan. har suttit o följt en yt-video. allt fungerar förutom det enda som jag vill ska fungera, själva funktionen.
mitt darkmode funkar ej och jag vet inte varför. kommer lägga ut 3 spalter under (html, css, js)
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="testdark.css">
</head>
<div>
<input type="checkbox" class="checkbox" id="checkbox">
<label for="checkbox" class="label">
<i class="fas fa-moon" ></i>
<i class="fas fa-sun" src=moon.jpg.svg></i>
<div class="ball"></div>
</label>
</div>
<body>
</body>
</html>
css
* {
box-sizing:border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
body.dark {
background-color: #292C35;
}
.checkbox {
opacity: 0;
position: absolute;
}
.label {
background-color: #111;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 50px;
position: relative;
padding: 5px;
height: 26px;
width: 50px;
}
.ball {
background-color: #fff;
border-radius: 50%;
position: absolute;
top: 2px;
left: 2px;
height: 22px;
width: 22px;
transition: transform 0.2s linear;
}
.checkbox:checked + .label .ball{
transform: translateX(24px);
}
.fa-moon{
color: #f1c40f;
}
.fa-sun{
color: #f39c12;
}
JavaScript
const checkbox = document.getElementById('checkbox');
checkbox.addEventListener('change', () => {
// change the theme of the website
document.body.classList.toggle('dark');
});
får även denna felkod från js(gick ej visa ss (sceen shot))
felkod:
expected identifier and instead saw 'const' (linje 1)
är det något med json att göra? för har fått denna typ av felkod innan. när det ska funka men inte funkar.
(edit)
såg att jag ej lagt in mitt script i min html men det funkade ej ändå