Softwarekonstruktion, Webudvikling

javascript, v2

Amerikansk tid til dansk tid omformer

En hjemmeside eller et program, hvori man kan skrive “7am”,…

Webudvikling

javascript, python

Domæneninja 🌐

På denne side kan du se en liste over nyligt…

Webudvikling

javascript

Hvilke er under 10? 🕙

Skriv JavaScript-kode, der tilføjer class’en “underTi” til de <td>-elementer, hvis…

Hvilke er under 10? 🕙

Skriv JavaScript-kode, der tilføjer class’en “underTi” til de <td>-elementer, hvis tal er under 10.

Lav en variabel med alle <td>-elementer: querySelectorAll
Led i dem efter tal under 10: .forEach() + if (tal < 10)
Tilføj class’en: if (…) + classList.add(“underTi”)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        .underTi {
            color: red;
        }
    </style>
    <h1>Antal fisk fanget 🐟</h1>
    <table width="500" border="1">
        <tr>
            <th>Asger</th>
            <th>John</th>
            <th>Tine</th>
            <th>Louise</th>
            <th>Bettina</th>
        </tr>
        <tr>
            <td>3</td>
            <td>14</td>
            <td>0</td>
            <td>23</td>
            <td>5</td>
        </tr>
        <tr>
            <td>7</td>
            <td>13</td>
            <td>15</td>
            <td>0</td>
            <td>1</td>
        </tr>
        <tr>
            <td>3</td>
            <td>7</td>
            <td>10</td>
            <td>23</td>
            <td>4</td>
        </tr>
        <tr>
            <td>17</td>
            <td>2</td>
            <td>6</td>
            <td>5</td>
            <td>0</td>
        </tr>
        <tr>
            <td>11</td>
            <td>22</td>
            <td>4</td>
            <td>7</td>
            <td>10</td>
        </tr>
    </table>
    <script>
        
    </script>
</body>
</html>

Webudvikling

javascript

Hvorfor altid lommeregnere? 🧮

Opgave 1: Få følgende kode til at give resultatet for…

Hvorfor altid lommeregnere? 🧮

Opgave 1: Få følgende kode til at give resultatet for a + b

Opgave 2: Udvid HTML og JS med disse regnefunktioner: Minus, Gange, Divider

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lommeregner</title>
</head>
<body>
    <div>
        <input type="number" class="a">
    </div>
    <div>
        <input type="number" class="b">
    </div>
    <div>
        <button class="plus">+</button>
    </div>
    <div class="result">

    </div>
</body>
<script>
    let a = document.querySelector(".a").value;
    let b = document.querySelector(".b").value;
    let plus = document.querySelector(".plus");
    let result = document.querySelector(".result");

    plus.addEventListener("click", function() {
        // vis resultatet af a + b i div'en "result"
    });
</script>
</html>

Webudvikling

javascript

X er fejl ❌

I følgende kode, tjek om <li>-elementerne indeholder “X”. Hvis de…

X er fejl ❌

I følgende kode, tjek om <li>-elementerne indeholder “X”. Hvis de gør, så tilføj class’en “fejl”.

Lav en variabel med alle <li>-elementer: querySelectorAll
Led i dem efter en specifik karakter: .forEach() + .find()
Tilføj class’en: if (…) + classList.add(“fejl”)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        .fejl {
            color: red;
        }
    </style>
    <ul>
        <li>✔</li>
        <li>✔</li>
        <li>✗</li>
        <li>✔</li>
        <li>✔</li>
        <li>✔</li>
        <li>✔</li>
        <li>✗</li>
        <li>✔</li>
        <li>✔</li>
        <li>✔</li>
        <li>✗</li>
        <li>✔</li>
        <li>✔</li>
        <li>✗</li>
        <li>✔</li>
        <li>✔</li>
        <li>✗</li>
        <li>✗ fejl</li>
        <li>✔</li>
    </ul>
    <script>

    </script>
</body>
</html>

Webudvikling

javascript

Mit navn er Efternavn. Fornavn Efternavn. 🔫🤵

Når man klikker på knappen, skal fornavn og efternavn i…

Mit navn er Efternavn. Fornavn Efternavn. 🔫🤵

Når man klikker på knappen, skal fornavn og efternavn i de to input-felter vises i div’en “result” på denne måde:
My name is last. first last.

Strengen skal skrives med en template literal.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>What is your name?</div>
    <input type="text" class="first">
    <input type="text" class="last">
    <input type="submit" value="✔">
    <div class="result"></div>
    <script>

    </script>
</body>

</html>

Webudvikling

javascript

Emoji-viseren 🍔🍟🌭🍿🍕🥞🥐🥪

Opgave 1: Knappen “Show emoji from number in array” skal…

Emoji-viseren 🍔🍟🌭🍿🍕🥞🥐🥪

Opgave 1: Knappen “Show emoji from number in array” skal vise den emoji der er for valgte array-position i div’en “result”

Opgave 2: Knappern “Show random emoji” skal vise en tilfældig emoji i div’en “result”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Food emoji</title>
</head>
<body>
    <input type="number" min="0" max="7">
    <button type="submit" class="show-emoji">Show emoji from number in array</button>
    <button type="submit" class="show-random-emoji">Show random emoji</button>
    <div class="result"></div>
    <script>
        const emojiArray = ["🍔","🍟","🌭","🍿","🍕","🥞","🥐","🥪"]
        // show-emoji click: In div.result --> Show the emoji from written array place [0] to [7]
        // show-random-emoji click: In div.result --> Show a random emoji from [0] to [7]
    </script>
</body>

Webudvikling

javascript

Slet-sig-selv-knapper 💀

Denne kode laver en hjemmeside, hvori der er en kasse…

Slet-sig-selv-knapper 💀

Denne kode laver en hjemmeside, hvori der er en kasse med en knap der laver flere kasser.

Få X-knappen til at slette den kasse hvorfra den trykkes.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        .container {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            max-width: 600px;
            margin: 0 auto;
        }

        .item {
            margin: 10px;
            border: 1px solid silver;
            border-radius: 2px;
            padding: 10px;
            font-family: 'Courier New', Courier, monospace;
        }
    </style>
    <div class="container">
        <div class="item">test <button onclick="remove()">X</button> <button onclick="add()">+</button></div>
    </div>
</body>
<script>
    let container = document.querySelector(".container");
    let item = document.querySelector(".item");
    let i = 0;

    function add() {
        i++;
        container.innerHTML +=
            `<div class="item">test ${i} <button onclick="remove()">X</button> <button onclick="add()">+</button></div>`;
    }

    function remove() {
        console.log("remove");
    }
</script>

</html>

OpgaveBank

Amerikansk tid til dansk tid omformer

Domæneninja 🌐

Hvilke er under 10? 🕙

Hvorfor altid lommeregnere? 🧮

X er fejl ❌

Mit navn er Efternavn. Fornavn Efternavn. 🔫🤵

Emoji-viseren 🍔🍟🌭🍿🍕🥞🥐🥪

Slet-sig-selv-knapper 💀