Forum Mjukvara Programmering och digitalt skapande Tråd

behöver hjälp med att skapa en darkmode function.

1
Skriv svar
Permalänk
Medlem
●

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å

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

JS koden borde vara i en funktion som man sen kallar.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av iknight:

JS koden borde vara i en funktion som man sen kallar.

Gå till inlägget

+1

Skulle vara snyggare ifall du skapade en funktion för att toggla klassen på bodyn och sen köra den på checkboxens "onSubmit"

<input type="checkbox" id="darkmodeCheck" onclick="toggleDark()">

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av TM23:

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å

Gå till inlägget 
<html>
<head>
     <link rel="stylesheet" type="text/css" href="testdark.css">
<style>
* {
    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;
}</style>
    </head>
<body>
   <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>
<script>
const checkbox = document.getElementById('checkbox');

checkbox.addEventListener('change', () => {
    // change the theme of the website
    document.body.classList.toggle('dark');
    
});
</script>
</html>

Den där koden ovan funkar. Antingen har du script-taggen i head med defer attributet så den läses in efter all HTML eller så lägger du script-taggen efter body-taggen som jag gjort här. Din div-tagg ligger inte inuti body-taggen!

Det är hugget som stucket huruvida du vill ha en egen funktion som anropas beroende på projektets storlek. En fördel med att ha separat funktion är att den då kan ta emot en parameter, t.ex. namn på klass som ska togglas av/på.

Alternativt kan den ta emot en array av alla klasser som du då loopar igenom för att toggla av/på så kan du stegvis lägga till saker som ska togglas av/på och så lägger du bara till den senaste klassen i din array som skickas till samma funktion för av/på-togglare.

Mvh,
WKL.

P.S. Lägg in CSS-koden i CSS-filen och radera sen style-taggen ur HTML-filen.

Visa signatur

<WKL:"En kodrad i taget!";/>

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara