Opgavebeskrivelse
I dette gruppeprojekt skulle vi re-implementere en allerede eksisterende kommerciel hjemmeside med HTML, CSS og JavaScript. Det handlede ikke om at genskabe hele siden, men om at udvælge specifikke funktioner, hvor vi kunne bruge JavaScript aktivt og vise, at vi forstod pensum.
Der skulle afleveres tre ting:
- En fælles video, hvor vi gennemgår dele af vores kode og forklarer dem
- En online prototype af vores løsning
- Kildekoden på GitHub
Idésamling of Forberedelse
Vi valgte at tage udgangspunkt i pandaplanner.com, fordi den havde et minimalistisk, funktionelt design med flere interaktive elementer, som gjorde det oplagt at bruge JavaScript. Samtidig var det et site, der var realistisk at arbejde med inden for projektets rammer.
Vi fordelte opgaverne sådan her:
Jeg lavede navigationen med JavaScript
Helena lavede en back-to-top-knap
Sandra lavede en pop-up
Anja lavede et slideshow
Proces
Jeg gik i gang med at kode navigationen. Jeg arbejdede med at få menuen til at fungere både på desktop og mobil, så den var responsiv.
Vi mødtes næsten hver dag i starten og lavede en del sammen, men hen ad vejen blev det sværere at samle alle, da nogle havde sygdom eller andre private ting. Det gjorde, at vi nogle gange arbejdede lidt hver for sig og brugte Discord og delte kode via GitHub.
Der var også lidt udfordringer i forhold til samarbejdet omkring videoen, da ingen rigtigt havde lyst til at lave den. Til sidst tog Anja initiativ til at lave den. Hun endte med at fokusere på slideshowet, som hun selv havde kodet.
Produkt
Min Javascript kode:
const navLinks = document.querySelector(".nav-links"); //laver at nav kan sees somehow
// Menu data
const menuItems = [
{ name: "New Arrivals", link: "#" },
{ name: "Best Sellers", link: "#", dropdown: [
{ name: "Panda Classic - 3 Month Daily Planner", link: "#" },
{ name: "Panda Pro - 6 Month Daily Planner", link: "#" },
{ name: "Panda Planner - 12 Month Weekly Planner", link: "#" }
] },
{ name: "Planners", link: "#", dropdown: [
{ name: "Classic Productivity Planners", link: "#" },
{ name: "Business Planners", link: "#" },
{ name: "Diet & Fitness Planners", link: "#" },
{ name: "Student Planners", link: "#" }
]},
{ name: "More Products", link: "#", dropdown: [
{ name: "Bundles", link: "#" },
{ name: "Password Keeper", link: "#" },
{ name: "Apparel", link: "#" },
{ name: "Accessories", link: "#" },
{ name: "Digital Course", link: "#" },
{ name: "Gift Card", link: "#" }
]},
{ name: "About Us", link: "about.html" }
];
function generateMenu() {
navLinks.innerHTML = ""; // Rens menuen først
menuItems.forEach(item => {
const li = document.createElement("li");
if (item.dropdown) {
li.classList.add("dropdown");
const a = document.createElement("a");
a.href = item.link;
a.textContent = item.name;
li.appendChild(a);
const dropdownMenu = document.createElement("ul");
dropdownMenu.classList.add("dropdown-menu");
item.dropdown.forEach(subItem => {
const subLi = document.createElement("li");
const subA = document.createElement("a");
subA.href = subItem.link;
subA.textContent = subItem.name;
subLi.appendChild(subA);
dropdownMenu.appendChild(subLi);
});
li.appendChild(dropdownMenu);
} else {
const a = document.createElement("a");
a.href = item.link;
a.textContent = item.name;
li.appendChild(a);
}
navLinks.appendChild(li);
});
}
// Generer menu ved load
generateMenu();
Link til prototypen: https://jkayser.dk/Java/
Link til Github: https://github.com/JinxitNow/Javascript.git
Reflektion
Jeg synes, det var et spændende og udfordrende projekt. Det var fedt, at vi selv skulle vælge en JavaScript-funktion og få det til at fungere på en rigtig hjemmeside – det gav virkelig noget praksis, og jeg blev mere tryg ved at arbejde med JavaScript.
Jeg arbejdede med navigationen, og selvom det var lidt bøvlet indimellem, så lærte jeg en hel del. Jeg havde især problemer med at få headeren til at blive synlig, og det var lidt af en kamp at få tingene til at spille sammen med de andres kode. Vi brugte forskellige navne i flere forskellige CSS’er, og det skabte forvirring – nogle gange hed ting det samme, men betød noget forskelligt. Og når vi så brugte jQuery, kunne koden fra én person komme til at overrule en andens, hvilket gav en del problemer.
Samarbejdet i gruppen fungerede ikke altid helt optimalt. Der var sygdom og personlige ting, som gjorde det svært at holde en god rytme, og kommunikationen haltede lidt. Også online.
Hvis jeg skulle gøre noget anderledes en anden gang, ville jeg helt klart være med til at skabe mere struktur fra starten og sige noget tidligere, hvis jeg kan mærke, at samarbejdet er ved at glide. Jeg ville også gerne have nået at lave en funktionel burger-menu, da jeg i dag godt kan se, at min kode ikke dækkede pensum helt. Desuden vil jeg også sørge for, at siden er ordentligt responsiv næste gang, da vores produkt halter lidt på det punkt.
Men alt i alt er jeg faktisk stolt af, hvad vi fik lavet. Jeg lærte meget om både om JavaScript og om samarbejde.