Programmeren 3 & 4

 Week 3 & 4

Omdat ik aan de loading / buffer page aan het werken was waar bewegende tips over het scherm moesten komen hebben Justin en ik daar samen naar gekeken. Ik was eerst zelf met de tips bezig maar dat ging heel lastig, ik had al wel een box frame geanimeerd gekregen maar stopte dan niet aan het einde van de pagina. Justin had later er ook nog naar gekeken en die had toen op het internet een react-multi-carousel gevonden. Dit is een library die je kan importeren in je react project. Toen we de react-multi-carousel hadden geïmporteerd was hij nog niet perfect en moesten er nog bepaalde dingen aangepast worden zoals de positie, snelheid, klik baar of niet en als je je muis er op houd dat hij dan stopt met bewegen.

 <div id="tip-container">

                <Carousel

                    additionalTransfrom={0}

                    centerMode={false}

                    partialVisible={true}

                    swipeable={false}

                    draggable={false}

                    showDots={false}

                    responsive={responsive}

                    ssr={true} // means to render carousel on server-side.

                    infinite={true}

                    autoPlay

                    autoPlaySpeed={1}                    

                    keyBoardControl={false}

                    customTransition="all 8s linear"

                    transitionDuration={8000}

                    containerClass="carousel-container"

                    arrows={false}

                    slidesToSlide={1}                    

                >

                    {renderedOutput}

                </Carousel>

            </div>

Zoals je hierboven kan zien zijn dit de settings voor de carousel die we hebben gebruikt. voor in de carousel hadden we tips nodig deze hebben we in een array gezet en laten laden in de tip containers. Hieronder is de array te zien.

let tips = [

    'Windmolens staan maar 5% van de tijd stil. 95% van de tijd draaien de windmolens om energie op te wekken',

    '1.400 huishoudens krijgen energie door 1 windmolen. Een windmolen kan 1.400 huishoudens van energie voorzien.',

    'Een windmolen geeft u geen geluidsoverlast. Wanneer u op 500 meter staat van de windmolen dan hoort u maar 35 decibel aan geluid.',

    'Windmolens op zee zijn duurder dan op het land. Maar deze windmolens leveren wel meer stroom op dan de windmolens op het land.',

    'test1', 'test2', 'test3', 'test4', 'test5',

]

Natuurlijk hebben we hiervoor niet alleen met JSX moeten werken maar ook veel met CSS waarbij ik weer wat nieuwe dingen heb geleerd zoal bijvoorbeeld padding, float en span. Paddig is er voor bedoeld om weg te drukken van de randen af. Float is dat hij het alligned naar link of rechts dus als ik een knop / tekst aan de rechter kant wil hebben van mijn scherm doe je in CSS float: right;. Als laatste de span dat wordt gebruikt om teksten te markeren en dan kun je die in CSS een andere style geven dan de rest van de zin.

#tip-container{

    order: 2;

    width: 100%;

}

span.green-text {

    color:#0CC18B;

    background: none;

}

.tip-box {    

    width: 338px;

    height: 193px;

    /* margin: 0% 1.5%; */

    background: #0CC18B;

    border-radius: 40px;

    padding: 0% 5%;

    display: flex;

    align-items: center;

}

.tip-text {

    text-align: center;

    

    font-family: 'Nunito', sans-serif;

    font-size: 17px;

    color: #ffffff;

    font-weight: bold;

}