Mine projekter
Her kan i se nogle af de projekter jeg har arbejdet på i løbet af studietiden
Portfolio Website
Denne hjemmeside er fra mit 1. semester eksamenprojekt. Det gik ud på at jeg skulle lave en hjemmeside til mennesker på 60+ som har til funktion at hjælpe dem med at spotte fake news.
Technologies: HTML5, CSS, Responsive Design, Bootstrap, Javascript
Gæstebog
Jeg har personliggjort gæstebogen ved at opdatere teksterne og ændre designet, så den passer bedre til mig. Derudover har jeg tilføjet et ekstra felt, som både valideres, gemmes i databasen og huskes via en cookie. Jeg har også udvidet visningen, så det nye felt vises sammen med beskederne. Til sidst har jeg lavet en funktion, der automatisk konverterer tekstbaserede smileys til emojis, når beskederne vises.
Technologies: HTML, CSS, PHP, MySQL, Cookies
Style switcher
Jeg har tilføjet et nyt tema ved at oprette .theme-ocean med egne farvevariabler og knap-styling samt registreret temaet i JavaScript. Derudover har jeg lavet et nyt HTML-element, som skifter farver efter det aktive tema ved hjælp af CSS-variablerne. Elementet følger således sidens tema og kan også indeholde sin egen custom styling. Til sidst har jeg tilføjet en tæller i JavaScript, som holder styr på, hvor mange gange temaet er blevet skiftet.
Technologies: HTML, CSS og JavaScript
A/B test
Jeg har lavet en A/B-test på knapperne, så de vises i forskellige udgaver med varieret farve og tekst. I en normal browser gemmes den viste udgave i en cookie, men i inkognito kan der vises en anden version, fordi der ikke lagres cookies.
Technologies: HTML, CSS, PHP, JavaScript
UI-widget
Jeg har udskiftet den oprindelige widget med min egen knap-widget og lavet min egen HTML-markup til den. I Tweakpane har jeg tilføjet simple indstillinger, så man kan ændre knappens tekst, baggrundsfarve, tekstfarve og hjørneradius. Generatoren indsætter automatisk den genererede knap i preview-området, hver gang man ændrer en indstilling. Derudover har jeg tilføjet en kontrol, der gør det muligt også at ændre størrelsen på knappen.
Technologies: HTML, CSS, JavaScript, Tweakpane
Storyboard fremviser
Jeg har udvidet storyboardet, så brugeren nu kan skifte mellem 1, 2, 3 og 4 kolonner direkte i UI’et, og layoutet opdaterer korrekt i både CSS og JavaScript. Derudover har jeg gjort, at storyboardet gemmer det valgte antal kolonner i localStorage, så layoutet automatisk gendannes næste gang siden åbnes. De rigtige kolonne-knapper markeres også som aktive ud fra den gemte værdi. Til sidst har jeg tilføjet en toast-popup, som kort viser beskeden “Layout gemt”, når brugerens valg bliver lagret.
Technologies: HTML, CSS, JavaScript, LocalStorage