Template strings

Opgave 1

Opgaven går ud på at oprette en besked, som inkluderer navnet på en person og antallet af år, personen har arbejdet i en bestemt virksomhed.

Instruktioner

1. Opret to konstanter: en for navnet på personen og en for antallet af år, personen har arbejdet i virksomheden.
2. Brug en template string til at oprette en besked, der inkluderer både navnet på personen og antallet af år, personen har arbejdet i virksomheden. Beskeden skal have følgende format: "Hej [navn] du har nu arbejdet i vores virksomhed i [år] år."
3. Vis beskeden på skærmen ved hjælp af element.innerHTML.

Når du har lavet opgaven, skal resultatet blive vist i elementet med id "message" i din browser. Resultatet skal have følgende format:
<h2>Hej Keld</h2> du har nu arbejdet i vores virksomhed i 3 år."

message her

        const navn = "Alice";
        const aarIvirksomhed = 3;
        const besked = `Hej ${navn}
        du har arbejdet i vores virksomhed i ${aarIvirksomhed} år.`;
        console.log(besked);
    

Opgave 2

Du skal bygge en liste over produkter fra en fiktiv online butik. Hver produktlinje skal indeholde produktets navn, beskrivelse og pris, og disse oplysninger skal vises ved hjælp af template strings i JavaScript.
Applikationen skal oprette elementer i HTML elementet med id "produktListe" Applikationen skal hente produktdata fra et array, der indeholder objekter med produktinformation.
Produkterne vises på siden ved hjælp af en template string. Du kan bruge en HTML-template, hvor du indsætter dataene i passende steder ved hjælp af placeholders, som du kan erstatte med produktdata.

            const myData=[
            { "navn": "T-shirt",
            "beskrivelse": "En t-shirt lavet af bomuld",
            "pris": 99 },
            { "navn": "Jeans",
            "beskrivelse": "Blå denim jeans med straight fit",
            "pris": 299
            },
            { "navn": "Hættetrøje",
            "beskrivelse": "En grå hættetrøje med lynlås",
            "pris": 199 }
            ]             
        

        <article class="produkt">
            <h2>${produkt.navn}</h2>
            <p>${produkt.beskrivelse}</p>
            <p>Pris: ${produkt.pris} kr.</p>
        </article>
    

produkt liste her

Opgave 3

Opgave beskrivelse

Du skal oprette en webapplikation ved hjælp JavaScript, der giver brugeren mulighed for at indtaste en liste over navne og deres alder. Applikationen skal derefter sortere listen efter alder og vise den sorteret liste på siden ved hjælp af template strings i JavaScript.

Krav:

Applikationen skal have et HTML-formularfelt, hvor brugeren kan indtaste navne og aldre på personer.Når brugeren klikker på en knap, skal applikationen indsamle data fra formularfeltet og gemme dem i en JavaScript-variabel. Applikationen skal sortere listen efter alder ved hjælp JavaScript- array sorteringsfunktion. Den sorteret liste skal vises på siden ved hjælp af en template string i JavaScript.
Template stringen skal indeholde både navn og alder for hver person på listen.

Formular

    
        // array med person data
        const myPersons = [];

        // find form elementer
        const myForm = document.getElementById('formular');
        const submitButton = document.getElementById('indsend-knap');
        const personList = document.getElementById('person-liste');

        // submit button event listner med arrow function
        submitButton.addEventListener('click', (event) => {
        event.preventDefault();
        const myFormFelter = myForm.querySelectorAll('input');

        /* push resultatet fra formen ind på myPersons.
        vi ved der er 2 elementer derfor direkte adressering ved hjælp af []
        */
        myPersons.push({
        navn: myFormFelter[0].value,
        alder: myFormFelter[1].value,
        });
        
        // Sorter listen efter alder og vis den på siden
        const sorteretMyPersons = sorterEfterAlder(myPersons);
        showList(sorteretMyPersons);
        });

        // view code
        function showList(sorteretMyPersons) {
        let html = '';
        sorteretMyPersons.map((person) => {
        // html template.
        html += `<li>${person.navn} er ${person.alder} år gammel.</li>`;
        });
        personList.innerHTML = html;
        }

        // Funktion til at sortere listen efter alder
        function sorterEfterAlder(myPersons) {
        return myPersons.sort((a, b) => a.alder - b.alder);
        }