Skip to content

Home

Jump to bottom
driezie edited this page Apr 2, 2024 · 2 revisions

Beschrijving

Beschrijf in eigen woorden wat dit component is, en wat de core functionaliteit is.

De core functionaliteit van deze functie is het bekijken van content doormiddel van scrollen, door een rij van blockquotes. Als enhancements heb je bijvoorbeeld scrollsnap de buttons maar ook de mooie opmaak ervan.

Ontwerpen Mijn breakdownschets van de carousel functie.

Ik wil doormiddel van scrollsnap door de verschillende articles kunnen scrollen. De articles zet ik in een section met flexbox waardoor deze horizontaal gaan staan, en door middel van overflow auto kunnen de articles buiten het scherm gaan staan.

HTML

Voor de html wil ik article, section, blockquote, en buttons gebruiken. Deze elementen zijn ook goed betrouwbaar omdat deze een hoge score hebben op can i use, en op het moment dat deze niet worden ondersteund rendert html de content alsnog!

Section image

Article image

Blockquote image

Button image

3. HTML

Laag 1: Voor laag 1 de html heb ik besloten article, section, blockquote, en buttons te gebruiken deze elementen scoren hoog op can i use en zijn semantisch.

<section>
    <article>
        “Websites leren bouwen, én praktijkervaring opdoen?”
    </article>

    <article>
        <blockquote>
            “FDND is de enige HBO-opleiding voor Frontend Development in Nederland, in twee jaar stomen wij jou klaar
            voor het werkveld”
        </blockquote>
    </article>

    <article>
        <blockquote>
            “Je werkt bij ons aan échte projecten voor échte opdrachtgevers”
        </blockquote>
    </article>

    <article>
        <blockquote>
            “In het studiomodel werken studenten onder begeleiding van coaches en experts uit het vakgebied aan
            praktijkgerichte opdrachten”
        </blockquote>
    </article>

    <article>
        <blockquote>
            “Bij FDND leer je websites bouwen en andere belangrijke skills die jij in de praktijk toe kan passen”
        </blockquote>
    </article>

    <article>
        <blockquote>
            “Een Associate degree-opleiding is een tweejarige hbo-opleiding op niveau 5”
        </blockquote>
    </article>
</section>
    <button id="previousButton">
        Vorige
    </button>

    <button id="nextButton">
        Volgende
    </button>

  1. HTML test Ik heb de html getest op arc, chrome en firefox. Deze zag er overal goed uit!

  2. CSS ALs basis css heb ik flex, scroll-snap-type, scroll-snap-align-center, media queries en overflow auto gebruikt. Ook heb ik @ supports gebruikt om zo de scrollbar uit te zetten op browsers die dit niet ondersteunen.

section {
				position: relative;
			}
			section .carrousel {
				display: flex;
				overflow: auto;	
				scroll-snap-type: x mandatory;
				scrollbar-width: none;
			}


			article {
				background-color: var(--yellow);
				padding: 3em;
				scroll-snap-align: center;
				width: 80vw;
				flex-basis: 80vw 0 0;
				flex-shrink: 0;

			}

			blockquote {
				font-size: 3em;
				font-style: italic;
				font-weight: bold;
			}

			article:nth-child(2n) {
				background-color: var(--purple);
			}
			article:nth-child(3n + 1) {
				background-color: var(--green);
			}

			.fdnd-nav {
				position: absolute;
				left: 1rem;
				right: 1rem;
				bottom: 1rem;
				width: calc(100% - 2rem);
				display: flex;
				justify-content: space-between;
			}

  1. CSS testen De css werkt goed op chrome en firefox. Op arc zie ik dat de scroll balk met overflow nog niet helemaal goed ondersteund wordt. Deze verdwijnt namelijk wanneer je buiten het carousel op de pagina drukt.

  2. Extra JS en CSS Ik heb de carousel laten werken doormiddel van de knoppen met deze funtie:

const previousButton = document.querySelector("button:first-of-type")
        const nextButton = document.querySelector("button:nth-of-type(2)")
        const carrousel = document.querySelector("section")

        previousButton.addEventListener('click', function () {
            scrollLeft()
        })

        nextButton.addEventListener('click', function () {
            scrollRight()
        })

        // functie voor naar rechts scrollen
        function scrollRight() {
            carrousel.scrollBy({
                left: carrousel.offsetWidth,
                behavior: 'smooth'
            })
        }

        //functie voor naar links scrollen
        function scrollLeft() {
            carrousel.scrollBy({
                left: -carrousel.offsetWidth,
                behavior: 'smooth'
            })
        }

Ook heb ik een extra enhancement gemaakt voor de scroll bar en de buttons. Ik heb er namelijk voor gezorgd dat wanneer er javascript wordt ondersteund / gedraait wordt er buttons verschijnen maar wanneer deze er niet zijn de buttons worden omgeruild door een scrollbar.

Dit is hoe ik het heb gedaan: .js class gemaakt voor de knoppen en de carousel, deze kan ik vervolgens adden.

section {
            display: flex;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scrollbar-width: auto;
        }

.js section {
            scrollbar-width: none;
        }

button {
            display: none;
            position: absolute;
            height: 3em;
            width: 8em;
            font-size: 1em;
            background-color: #050542;
            color: #66E5BF;
            border-radius: 10px;
        }

        .js button {
            display: block;
        }

Met deze regel voeg ik de class js toe wanneer het html document ingeladen wordt. Deze regel wordt alleen toegepast wanneer er javascript is waaroor de standaard css regels overschreven zullen worden.

Dit is hoe ik dat gedaan heb in js:

document.documentElement.classList.add('js');

Ook heb ik met tab index=0; ervoor gezorgd dat de carousel ook meegenomen wordt in het standaard tabindex van de browser waardoor je nu naar de carousel kunt tabben en deze vervolgens met pijltjes kunt gebruiken.

  1. Enhanced testen Ik heb op chrome firefox, en arc de js uitgezet, het resultaat is dat er op het moment dat de js uit is de scrollbar tevoorschijn komt en wanneer deze aanstaat de buttons tevoorschijn komen.
Clone this wiki locally