terug naar lessen overzicht

Zelfstudie 9: Week 5 voorbeeld en opdracht bouwen Fanpage reeks 2

In deze zelfstudie serie:
checkmark simple
Portfolio opdracht bouwen Fanpage: deel 8
checkmark simple
Portfolio opdracht bouwen Fanpage: deel 9
checkmark simple
Portfolio opdracht bouwen Fanpage: deel 10
checkmark simple
Portfolio opdracht bouwen Fanpage: deel 11
checkmark simple
Portfolio opdracht bouwen Fanpage: deel 12
checkmark simple
checkmark simple
checkmark simple

Alle lessen in deze reeks bekeken?

Je hebt alle lessen in deze reeks afgerond!

checkmark simple
Oops! Something went wrong while submitting the form.

Je hebt alle lessen afgerond!

checkmark simple

Portfolio opdracht bouwen Fanpage: deel 7

Volg de video en codeer mee

function loadSingles() {

    const singlesJson =

    [

        {

            "naamSingle": "Viva La Vida",

            "naamAlbum": "Viva La Vida",

            "imgLink": "../img/fanpage/coldplay-album-cover-1.jpg",

            "youtubeLink": "https://www.youtube.com/watch?v=dvgZkm1xWPE"

        },

        {

            "naamSingle": "The Scientist",

            "naamAlbum": "Rush of Blood to the Head",

            "imgLink": "../img/fanpage/coldplay-album-cover-2.jpg",

            "youtubeLink": "https://www.youtube.com/watch?v=RB-RcX5DS5A"

        },

        {

            "naamSingle": "Paradise",

            "naamAlbum": "Mylo Xyloto",

            "imgLink": "../img/fanpage/coldplay-album-cover-3.jpg",

            "youtubeLink": "https://www.youtube.com/watch?v=dvgZkm1xWPE"

        },

        {

            "naamSingle": "Fix you",

            "naamAlbum": "X&Y",

            "imgLink": "../img/fanpage/coldplay-album-cover-4.jpg",

            "youtubeLink": "https://www.youtube.com/watch?v=RB-RcX5DS5A"

        },

        {

            "naamSingle": "Yellow",

            "naamAlbum": "Yellow",

            "imgLink": "../img/fanpage/coldplay-album-cover-5.jpg",

            "youtubeLink": "https://www.youtube.com/watch?v=dvgZkm1xWPE"

        },

        {

            "naamSingle": "Hymn for the weekend",

            "naamAlbum": "Rush of Blood to the Head",

            "imgLink": "../img/fanpage/coldplay-album-cover-6.jpg",

            "youtubeLink": "https://www.youtube.com/watch?v=RB-RcX5DS5A"

        },

        {

            "naamSingle": "Clocks",

            "naamAlbum": "Rush of Blood to the Head",

            "imgLink": "../img/fanpage/coldplay-album-cover-7.jpg",

            "youtubeLink": "https://www.youtube.com/watch?v=dvgZkm1xWPE"

        },

        {

            "naamSingle": "Up & up",

            "naamAlbum": "A head full of dreams",

            "imgLink": "../img/fanpage/coldplay-album-cover-8.jpg",

            "youtubeLink": "https://www.youtube.com/watch?v=RB-RcX5DS5A"

        }

    ]

    

    const singlesID = document.getElementById("load-singles");

    let singlesString = "";

    

    for (var x = 0; x < singlesJson.length; x++) {

        console.log("in for loop singles");

        singlesString +=

        `

            <a data-text="Afspelen" class="singles-item follow-action" href="${singlesJson[x].youtubeLink}" target="blank">

            <img src="${singlesJson[x].imgLink}" alt="Album cover ${singlesJson[x].naamSingle}">

            <div class="singles-text-wrapper">

                <h4>${singlesJson[x].naamSingle}</h4>

                <div>${singlesJson[x].naamAlbum}</div>

            </div>

            </a>

        `

    }

    

    singlesID.innerHTML = singlesString;

}

Portfolio opdracht bouwen Fanpage: deel 8

Volg de video en codeer mee

Portfolio opdracht bouwen Fanpage: deel 9

Volg de video en codeer mee

Portfolio opdracht bouwen Fanpage: deel 10

Volg de video en codeer mee

Portfolio opdracht bouwen Fanpage: deel 11

Volg de video en codeer mee

Portfolio opdracht bouwen Fanpage: deel 12

Volg de video en codeer mee

*Er zijn geen links bij deze video reeks.
icon: files
Project files
* De link hierboven download een bestand via dropbox dit kan een zip of rar bestand zijn. Weet je niet hoe je dit type bestand kan gebruiken? Volg deze instructie voor zip bestanden. Of download WinRar voor rar bestanden.
* Er zijn geen project files om te downloaden voor deze zelfstudie.

Stel vragen en help medestudenten

Tijdens de live lessen zijn er opdrachten waarbij je zult samenwerken met jouw studiegenoten. Hiervoor gebruiken wij Discord. Daarnaast kun je ook jouw vragen stellen, de docenten zullen je vervolgens verder helpen.

Het kanaal voor deze cursus op onze discord: HTML CSS JS beginners course

portfolio-cursus

logo - discord

#code-cafe

100+ leden