IT-Teknik, Webudvikling

Teknik, Webudvikling

Ny baggrund til vores smart boards

Design og implementer et nyt AspIT inspireret baggrundstema til vores…

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>

Webudvikling

Videoproduktion til AspIT Facebook

Lav en videocollage af stemningen eller et arrangement på AspIT…

Webudvikling

Redesign af toiletrulle.dk

Download filerne der udgør toiletrulle.dk. Gem filerne lokalt og redesign…

Webudvikling

wordpress

WordPress multisite

Der skal opsætte en WordPress på et sub-domæne til aspitesbjerg.dk….

OpgaveBank

Ny baggrund til vores smart boards

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 💀

Videoproduktion til AspIT Facebook

Redesign af toiletrulle.dk

WordPress multisite