Eksempel s. 212 Nettbutikken

Her finner du kode til eksemplene i Kode 1. Husk at du må bruke generert kode fra ditt eget Firebase-prosjekt.

<!DOCTYPE html>
<html lang="nb">
    <head>
        <meta charset="UTF-8">
        <title>Nettbutikken</title>
    </head>
    <body>
        <header>
            <nav>
                <button onclick="visAlleVarer()">Alle varer</button>
                <button onclick="visBukser()">Bukser</button>
                <button onclick="visSkjorter()">Skjorter</button>
                <button>Handlekurv</button>
                <button>Tøm handlekurv</button>
                <input id="sokefelt" type="text">
            </nav>

        </header>
        <main></main>
        <!-- Erstatt de to script-elementene nedenfor med koden fra Firebase her -->

        <script src="https://www.gstatic.com/firebasejs/4.1.3/firebase.js"></script>
        <script>
            // Initialize Firebase
            var config = {
                apiKey: "AIzaSyA3bprSpIhgoezN2KCc1RGQ-S1_QLcmd9c",
                authDomain: "nettbutikken-ca649.firebaseapp.com",
                databaseURL: "https://nettbutikken-ca649.firebaseio.com",
                projectId: "nettbutikken-ca649",
                storageBucket: "nettbutikken-ca649.appspot.com",
                messagingSenderId: "325012157694"
            };
            firebase.initializeApp(config);
        </script>

        <script>
            let database = firebase.database();
            let bukser = database.ref("varer/bukser");
            let skjorter = database.ref("varer/skjorter");
            var sokefelt = document.getElementById("sokefelt");
            var søketekst ="";
            let main = document.querySelector("main");
            function visVare(snapshot) {
                let vare = snapshot.val();
                main.innerHTML += `
                    <article>
                        <img src="bilder/${vare.bilde}">
                        <h1>${vare.merke} ${vare.modell}</h1>
                        <p>${vare.pris}</p>
                    </article>
                `;
            }
            sokefelt.oninput = sok;
            function sok () {
                søketekst=sokefelt.value;
                visBukser();

            }
            function visAlleVarer() {
                bukser.on("child_added", visVare);
                skjorter.on("child_added", visVare);
            }
            visAlleVarer();
            function visAlleVarer() {
                main.innerHTML = " "; //Fjerner alt innhold i main
                bukser.on("child_added", visVare);
                skjorter.on("child_added", visVare);
            }
            function visBukser() {
                main.innerHTML = " ";
                //bukser.on("child_added", visVare);
                bukser
                    .orderByChild("merke")
                    .startAt(søketekst)
                    .endAt(søketekst + '\uf8ff')
                    .on("child_added", visVare);
            }
            function visSkjorter() {
                main.innerHTML = " ";
                skjorter.on("child_added", visVare);
            }
        </script>
    </body>
</html>