Komponentdriven webbdesign

Välkommen till Pär Erikssons delar av kursen. Min enkla pedagogiska ide' och erfarenhet är att man lär sig mycket genom att lägga ner tid ca 2-4 timmar varje dag på att läsa i kursboken, titta på inspelningar samt skriva av befintlig kodexempel ur boken, inspelningar etc. Gör små förändringar i och av den för att sen testköra och se vad som händer. Ta paus varje timme. Ha en tänkt app för företag, klubb eller förening som du använder dina nya kunskaper på. Där du tänker, hur kan jag tillämpa det nya jag lärt mig på deras app? Jag kör ofta en tänkt liten bilfirma som jag applicerar nya koncept/kunskaper på och skriver koden för.

Veckoplanering - Vad titta på? Vad läsa? Vad göra?

Att läsa
  • Från w3schools om Bootstrap 5 så som:
  • Getting started with boostrap
  • Containers
  • Typography
  • Colors
  • Tables
  • Images
  • Cards
  • Grids basics
  • Grids examples
  • W3schools quiz Välj de avsnitt ur quizzet som speglar denna veckas bootstrap's innehåll och koncept.
  • Fetch api:et
  • Ur kursboken som finns som gratis pdf
  • Skumläsa detta för att få en överblick. Gå tillbaka till dessa kapitel och sidor när du behöver det. Tex efter att du kollat mina inspelningar och behöver mer förståelse och kunskaper.
  • Kap 2 om Functions sid 24-26
  • Kap 2 om Conditionals execution sid 26-28
  • Kap 2 om Loops sid 28-32
  • Kap 3 om Functions sid 38-43
  • Kap 4 om Data structures sid 55-60, 62-63
  • Kap 4 om Array loops och arrayology sid 65-68
  • Kap 4 om JSON sid 75-76
  • Kap 14 om Document Object Model(DOM) sid 214-215
  • Kap 14 om Finding elements sid 218-219
  • Kap 14 om Changing document and creating nodes sid 219-221
  • Kap 14 om Attributes sid 222
  • Kap 14 om Styling sid 224-225
  • Kap 14 om Query Selectors sid 227
  • Kap 15 om Event Handlers och Event objects sid 233-235
  • Kap 15 om Default Actions objects sid 237
Att titta på
  • Filezilla och Webbservern och VScode - Under kursen har du tillgång till en webbserver. Du kan ladda upp dina HTML-, JS- och eventuella PHP-filer till den med hjälp av Filezilla FTP-program. Sedan kan du besöka dem i webbläsaren för att se att de fungerar som de ska. Du har också tillgång till VSCode direkt i webbläsarfönstret, så du kan koda dina HTML-, JS- och PHP-filer direkt på webbservern. Du kan även koda lokalt på din dator och sedan ladda upp filerna hemifrån via FTP.
  • Likheter och skillander Python och Javascript - Visar vanliga likheter och skillnader mellan python och javascript när det gäller: variabler och datatyper, if satser och loopar, listor och arrayer, funktioner, dicts och objekt samt felhantering.,
  • 1 Grunder javascript - Grunder javascript - bygger på texter och kodxempel från w3schools js tutorial
  • 2 Grunder javascript - var lägg js koden - I head, body eller som extern js fil som har fil ändelsne .js och inkluder sen via script taggen och dess src attribut
  • 3 Grunder javascript - Göra olika outputs - Hör gör output på olika sätt med bla innerHTML, innerText, document.write() alert() och console.log()
  • 4 Grunder javascript - variabler - Hur deklarera och använda variabler. Vad är nyckelorden let och const
  • 5 Grunder javascript- operatorer och funktioner - Går snabbt igenom ett urval av operatorer som finns samt mer om funktioner och arrow funktioner
  • 5-1 Löneberäkningsprogram del 1 - Har lär du dig använd variabler och konstanter samt prompt för inmating från användare. Samt operator för enklare beräkningen av lön.
  • 5-2 Löneberäkning del 2. - Vi gör om löneberäkningen så att vi använder egen funktion som gör beräkningen genom att hämta data från textfälten när vi trycker på en knappen.
  • 5-3 Löneberäkning del 3. - Vi gör om löneberäkningen så att vi använder ännu fler egen funktion för input, process och output.
  • 5-4 Löneberäkning del 4. - Vi gör om löneberäkningen så att vi kan hanterar övertid. Använder if else satser.
  • 6 Grunder javascript - if satser och loopar - Går igenom selection satser som if och switch samt olika typer av for loopar samt while resp do while loopar.
  • 7-1 Grunder javascript - arrayer - Går igenom grunder i arrayer som att skapa och lägg till samt hämta ut värden. Gör också igenpm forEach och push metoderna.
  • 7-2 Grunder javascript - Arrayer fler metoder. - Hur gör man json array. Går igenom vanlig metoder som finns för array objektet som forEach, map, filter, find, sort, reduce
  • 8 Grunder javascript - DOM - Gör igenom grunder i DOM med huvuddokumentet documet samt metoderna addEventListener, querySelector, getElementById, createElement och appendChild
  • Ex_01 Komma igång med boostrap 5.x - Komma igång med bootstrap: Ger en grund html sida med inkludering av boostarps CSS och Javascript som du kan anvädna som mall. Visar även resta api:et som vi ska hämta user data ifrån. Samt även bootstraps container klass. Visar också hur man inkluderar min egen js.fil som innehåller egen gjorda funktioner för att kunna hämta och visa data från REST api:et.
  • Ex02 - fetch api:et - Går igenom de två egen gjorda funktionerna; fetchUserData och displayUserData. Visar hur man gör ett anrop till rest api med javascripts fetch funktion. Gör då också igenom async och await nyckelorden för att kunna göra asynkron funktioner och anrop. Vidare visas hur man använder document objekt och några av dess metoder som createElement(), getElementById(), appendChild() samt egenskapen textContent för att bla kunna dynamiskt lägg till li taggar till ul listan.
  • Ex03 - fetch tabeller - Gör om displayUserData funktionen så den visar data i bootstrap 5 tabell i stället. Förklar även querySelector() funktionen. Samt hur man skapar upp tr och td taggar dynamiskt och fyller dem med data för att kunna lägg till dem i tabellen. Går även igenom dessa boostrap klasses för tabeller: table, table-hover, table-striped, table-bordered, table-responsive-sm
  • Ex04 - fetch cards och grid systemet - Gör om displayUserData funktionen så den visar data i bootstrap 5 cards och gridsystem i stället. Hur man sätt css klasser dynamiskt med className egenskapen.
  • Ex05 - fetch Images och färger grid systemet - Gör om displayUserData funktionen så den visar hur man använder bootstrap klasser för att i ett kort sätt bakgrundsfärg, textfärg samt visa bilder.
Övningar
  • Finn inspiration från olika recepet siter ute på nätet som tex https://www.koket.se/recept och https://www.ica.se/recept/ för att skapa en egen receptsida med hjälp av bootstrap 5.x
  • Skapa och använd olika typografiska klasser för text- och bakgrundsfärger för att stilisera recept från detta api: https://dummyjson.com/docs/recipes
  • Skapa en bootstraptabell för recept från detta api: https://dummyjson.com/docs/recipes
  • Skapa en mer komplex layout gridlayout med flera rader och kolumner, cards, images för recept från detta api: https://dummyjson.com/docs/recipes
Inlämningar
  • Se kursrummet för detaljer om vad som ska göras, hur och när det ska lämnas in. I stort går det ut på att skapa en hemsida för fastighetsmäklaren Blge Estates där du använder Bootstrap 5.x och javascript. Hämta inspiration från hemsidor som Svenska fastighetsförmedling, Fastighetsbyrån, Husman Haberg, Bjurfors för att se vad som vanligtvis finns med på fastighetsmäklares hemsidor. Det mesta av datat och texterna som visas på Blge Estates hemsidas olika bootstrap komponenter ska ligga i egna json filer och läsa in från dem och presenteras. Inkludera följande Bootstrap-komponenter: Navigationsmeny (Navbar), Grid-system med kolumner, Kort (Cards), Accordion, Karusell (Carousel), Modaler (Modals), Formulär (Forms), Tooltip och javascript för att fylla dem med data/texter från egengjorda json filer med hjälp av fetch. Använd också egengjorda js klasser, lämpliga datastrukturer (array, map) samt localstorage. Deadline: Fredag vecka 40 kl17:00.
Frågor och svar

Formulera ditt svar. Tryck sen på frågan för att se mitt svar. Jämför svaren. Vad för likheter och skillnander ser du? Vad saknas i mitt respektive ditt svar?

  • Hur många sätt finns det att deklarera variabler i JavaScript och vilka är de?
  • Vad är en identifierare i JavaScript och vilka regler gäller för att namnge dem?
  • Vad är skillnaden mellan en variabel deklarerad med const och en med let
  • Hur definieras en JavaScript-funktion?
  • Vad är skillnaden mellan funktionsparametrar och funktionsargument?
  • Vad händer när JavaScript når ett return-uttalande i en funktion?
  • Vad är Bootstrap?
  • Vilka är de två huvudsakliga container-klasserna i Bootstrap 5?
  • Vad är en fördel med att använda Bootstrap 5 från en CDN?
  • Hur skapar man randiga rader i en tabell med Bootstrap 5? Hur lägger man till en hovringseffekt på tabellrader i Bootstrap 5? Hur gör man en tabell mindre i Bootstrap 5?
  • Hur gör man en tabell responsiv i Bootstrap 5?
  • Vad är Bootstrap 5:s grid-system byggt med?
  • Hur kan man gruppera kolumner i Bootstrap 5:s grid-system?
  • Vilka är de sex grid-klasserna i Bootstrap 5?
  • Vad är skillnaden mellan att använda specifika kolumnklasser i bootstrap jämfört med att låta Bootstrap hantera layouten automatiskt?
  • Hur kan man kontrollera hur många kolumner som ska visas bredvid varandra med Bootstrap 5?

Att läsa
  • Från w3schools om Bootstrap 5 komponenter så som:
  • Navigations meny
  • Accordion
  • Karusell
  • Modaler
  • Pop over
  • Toast
  • W3schools quiz Välj de avsnitt ur quizzet som speglar denna veckas bootstrap's innehåll och koncept.
  • Repetera ur kursboken från förra veckan
  • Kap 2 om Functions sid 24-26
  • Kap 2 om Conditionals execution sid 26-28
  • Kap 2 om Loops sid 28-32
  • Kap 3 om Functions sid 38-43
  • Kap 4 om Data structures sid 55-60, 62-63
  • Kap 4 om Array loops och arrayology sid 65-68
  • Kap 4 om JSON sid 75-76
  • Kap 14 om Document Object Model(DOM) sid 214-215
  • Kap 14 om Finding elements sid 218-219
  • Kap 14 om Changing document and creating nodes sid 219-221
  • Kap 14 om Attributes sid 222
  • Kap 14 om Styling sid 224-225
  • Kap 14 om Query Selectors sid 227
  • Kap 15 om Event Handlers och Event objects sid 233-235
  • Kap 15 om Default Actions objects sid 237
Att titta på
  • Navigations meny - del 1 - Hur man skapar upp en navigation meny (navbarmenu) med menyer och submenyer och hamburgericon. Visa dess html grundstruktur
  • Navigations meny - del 2 Alla anställd - Hur man skapar upp dropdown meny dynamiskt med js för att visa alla användare/anställda i en samt även dropmeny för kön. Visar hur man fyller dess från rest api med fetch. Samt hur man sen använder Set objekt och dess add metod för att få unika värden dvs egentligen få ut bara det två orden female och male från arrayen av all users för att visa de två i submenyn. Visar också hur man skapar upp klickhändelser för vad som ska ske när man trycker, väljer en anstäldl eller kön ur resp menyn. Då visas mer info i en alert om vald anställd eller om man valt kön så visas all anställda av det valda könet. Visar hur man använder filter metoden för arrayobjektet för att filter ut anställda på kön.
  • Navigations meny - del 3 Anställda på avdelningar - Hur man skapar upp dropdown meny dynamiskt med js för att visa alla avdelningar. Visar hur man fyller den från rest api med fetch. Samt hur man sen använder Set objekt och dess add metod för att få unika värden dvs egentligen få ut bara de unika avdelningar som anställda jobbar på. Visar också hur man skapar upp klickhändelser för vad som ska ske när man trycker, väljer en avdelning, då visas mer info i en alert om anställd på vald avdelning. Visar hur man använder filter metoden för arrayobjektet för att filter ut anställda på vilken avdelning de jobbar.
  • Accordion - Hur man skapar upp och fyller en accordion med user data från rest api.
  • Karusell - Visa hur man dynamiskt fyller upp, från rest api data, en karusell (carousel) med carousel items där varje item är i form av ett kort(cards).
  • Modal - Visar hur man skapar upp en modal. Den öppnas och visar mer info om en användare när man trycker på en knapp i en tabell. Går också igenom hur använder querySelectorAll för att hämta in alla knappar så att man för varje knapp kan sätta en klick händelse, samt för varje knappa sätta attributet data-user-id som används för att kunna hämta mer info om vald användare när man klickar på knappen.
  • Popover - Visar hur man skapar upp en poperovers. Den öppnas och visar mer info om en användare när man ”hovrar” över knapp i en tabell. Går också igenom hur använder querySelectorAll för att hämta in alla knappar så att man för varje knapp kan sätta en händelsen, shown.bs.popover Som visar i sin popover mer info om vald användare, samt för varje knappa sätta attributet data-user-id som används för att kunna hämta mer info om vald användare när man hovrar över knappen.
  • Toast - Visar hur man skapar upp toast. Den öppnas och visar under 3 sekunder mer info om en användare när man klickar på knapp i en tabell. Går också igenom hur använder querySelectorAll för att hämta in alla knappar så att man för varje knapp kan sätta en händelsen, som visar toast:en. För varje knappa sättas också attributet data-user-id som används för att kunna hämta mer info om vald användare och visa den i en toast.
Övningar
  • Finn inspiration från olika recepet siter ute på nätet som tex https://www.koket.se/recept och https://www.ica.se/recept/ för att skapa en egen receptsida med hjälp av bootstrap 5.x
  • Navigationsmeny: Skapa en lämplig navigationsmeny för siten 'Mina recept' och fyll den med lämpligt data från detta api: https://dummyjson.com/docs/recipes. Gör menyn responsiv så att den kollapsar till en hamburgermeny på mindre skärmar.
  • Accordion: Skapa lämpliga accordions för siten 'Mina recept' och fyll den med lämpligt data från detta api: https://dummyjson.com/docs/recipes.
  • Karusell: Skapa en karusell för siten 'Mina recept' och fyll den med lämpligt data från detta api: https://dummyjson.com/docs/recipes.
  • Modal: Skapa modaler för siten 'Mina recept' som visa recepet när man trycker på en knappar. Fyll dem med lämpligt data från detta api: https://dummyjson.com/docs/recipes.ett recept.
  • Popover: Skapa en popovers för siten 'Mina recept' som lämpligt data från detta api: https://dummyjson.com/docs/recipes när användaren hovrar över
  • Toast: Skapa lämpligt toasts för siten 'Mina recept' som fylls med lämpligt data från detta api: https://dummyjson.com/docs/recipes.
Inlämningar
  • Börja kolla upp inlämningsuppgiften om fastighetsmäklarfirman Blge Estates. Deadline för inlämning Fredag vecka 40 kl17:00
Frågor och svar

Formulera ditt svar. Tryck sen på frågan för att se mitt svar. Jämför svaren. Vad för likheter och skillnander ser du? Vad saknas i mitt respektive ditt svar?

Att läsa
Att titta på
  • Ex01 CRUD appen - Går igenom html strukturen för vårt GUI som hanterar CRUD operationer och sökfunktionalitet för att hantera vår bilar på lager. Visar hur användaren jobbar med GUI. Går där efter igenom local storage för att kunna spar bil data även efter att man slagit ner webbläsaren. Därefter gås igenom hur man skapar en egen klass Car som har privata instans variabler och hur man använder set och get funktionalitet för dem. Sen visas hur man använder new operatorn och Car klassen konstruktor för att instansiera ett nytt objekt ur Car klassen.
  • Ex02 Klassen CarCRUDHandler - Börjar att gå igenom klassen CarCRUDHandler och dess konstruktor som bl a sätter upp händelsehanterare för vad som ska ske när vi trycker på knapparna söker i söktextfältet. Samt hur man laddar in bilar från localstorage för att fylla listgruppen med bil data.
  • Ex03 CarCrudHandler's add metod - Går igenom add metoden för CarCRUDHandler. Hur den läser in data från textfälten, för att skapa upp ett bil objekt som ska läggas till arrayen av bilar, cars, med hjälp av arrayens push metod, samt att arrayen även läggs till localstorage som json sträng. Om det finns dubbletter av bilar med samma regnr så läggs den inte till arrayen och ett felmeddelade visas. Till sist så renders lista om med nytt bil data från arrayen.
  • Ex04 CarCrudHandler's delete metod - Den kontrollerar först om en bil är vald. Om inte, avbryts raderingen. Annars visas en bekräftelseruta där användaren måste godkänna borttagningen. Om användaren accepterar, tas bilen bort från arrayen this.cars, ändringarna sparas i localStorage, bilistan uppdateras. Tar bort den valda bilens uppgifter från formuläret Återställer knapparna till sitt ursprungliga läge t.ex. inaktiverar uppdaterings- och raderingsknappar
  • Ex05 CarCrudhandler's update metod - Först kontrollerar metoden om det finns en vald bil. Om ingen bil är vald, avslutas metoden direkt. Försöker skapa ett nytt bilobjekt med de värden som användaren har angett i formuläret. Söker efter indexet för den bil som har samma registreringsnummer som den valda bilen som ska uppdateras. Om bilen hittas i arrayen, ersätts den gamla bilen med den uppdaterade bilen. Därefter sparas arrayen i localstorage, listan renderas om och formuläret rensas. Om något går fel, fångas felet och ett meddelande visas.
  • Ex06 CarCrudhandler's sortByBrand metod - Sorterar bilarna i arrayen i alfabetisk ordning baserat på deras märke, från Audi till Zheeker. Efter sorteringen sparas den uppdaterade listan till lokal lagring och listan visas i den sorterade ordningen.
  • Ex01 Module design pattern - Ett desigg mönster i js för att följa inkapslings principen utan att använda en klass. Vad är och hur använder man module design pattern. Visar grundstrukturen och tanken för detta design mönster. Viktig att hållla reda på parenteser.
  • Ex02 Module Design pattern för CarModulen's CRUD operationer - Gör en CarModule där vi följer inkapslingprincipen för att ha privat data, cars array, och hjälpmetoder _findCarByReg samt publikt exponerade CRUD operationer.
Övningar
Inlämningar
  • Kom ihåg att börja jobba med inlämningsuppgiften om mäklarfirman Blge Estates. Deadline Fredag vecka 40 kl17:00
Frågor och svar

Formulera ditt svar. Tryck sen på frågan för att se mitt svar. Jämför svaren. Vad för likheter och skillnander ser du? Vad saknas i mitt respektive ditt svar?

Att läsa
  • Jobba mer focuserat med inlämningsuppgiften om fastighetsmäklarfirman Blge Estates.
Att titta på
  • -
Övningar
Inlämningar
  • Kom ihåg att lämna in inlämningsuppgiften om mäklarfirman Blge Estates. Deadline Fredag vecka 40 kl17:00
Frågor och svar

Formulera ditt svar. Tryck sen på frågan för att se mitt svar. Jämför svaren. Vad för likheter och skillnander ser du? Vad saknas i mitt respektive ditt svar?

Att läsa
  • En webbkomponent är en samling tekniker som möjliggör för utvecklare att skapa återanvändbara och isolerade komponenter för webbapplikationer. Komponenten är en JS klass i vilken det används HTML, CSS och JavaScript för att skapa komponentens layout och funktionalitet. Den kan importeras och integreras i befintliga webbsidor. Vilket gör den återanvändbara, ökar modulariteten och underlättar underhåll och utveckling av webbapplikationer.
  • Webbkomponenter
  • Använda webbkomponenter
Att titta på
  • Filezilla och Webbservern och VScode - Under kursen har du tillgång till en webbserver. Du kan ladda upp dina HTML-, JS- och eventuella PHP-filer till den med hjälp av Filezilla FTP-program. Sedan kan du besöka dem i webbläsaren för att se att de fungerar som de ska. Du har också tillgång till VSCode direkt i webbläsarfönstret, så du kan koda dina HTML-, JS- och PHP-filer direkt på webbservern. Du kan även koda lokalt på din dator och sedan ladda upp filerna hemifrån via FTP.
  • Fö1 Intro Webbkomponenter - Genomgång vad är webbkomponenter? Varför använda dem? Fördelar med dem. Nyckelkoncept och begrepp. Kodexempel på hur du skapar och använder sin första webbkomponent. Callback metod för att fylla webbkomponent med data från Rest API
  • Fö2 SumCalculator Webcomponent - Vi visar hur du skapar en enkel webbkomponent i JavaScript som summerar två tal. Denna komponent importeras och används som en tagg i en HTML-sida.
  • Fö2_2 UserName webcomponent - Hur du sätter och hämtar attribut värde till egen gjorda webkomponent. Du använder set och get metoder för samt observedAttributes() i klassen. Visar också hur du med javascript dynamiskt skapar upp denna webbkomponent och sätter dess attribut värden.
  • Fö3 Google books api webcomponent - Visar hur du skapar och använder en egengjord webbkomponent som gör ett http anrop mot googlebooks api:et med hjälp av fetch api:et. Funna böcker baserat på sökningen presenteras i som en ul lista
  • Fö4 Weather webcomponent - Webbkomponent som hämtar och visar väder för viss stad. Den har attributet, city, som bestämmer vilken stad man hämtar väderdata för.
  • Fö5 Customevents - Hur du i en sender webbkomponent skapar upp och dispatchar ett customevent med data i som en receiver webbkomponent ligger och lyssnar på för att hämta ut dess data.
  • Fö6 Cars webcomponent - Sender - Visar hur två webbkomponenter samarbetar genom att sender komponenten skapar och dispatchar ett custom event med bil data som receivern komponenten lyssnar på för att hämta ut bil data och presentera det.
  • Fö7 Cars webcomponent - Receiver - Receiver webbkomponenten ligger och lyssnar på ett customevent från sendern. När det sker så hämtar receivern ut det eventets bil data och presentera det.
  • Fö8 Leaflet karta med jordbävningar - Hämta jordbävningsdata från API för att presentera det data på en karta med marker och popup med data för var jordbävningen skedd, dess magnitud samt länk till var du kan läsa mer om denna jordbävning.
  • Fö10 Chart.js för att visa vin priser i ett diagram. - Lär dig använda Chart.js för att visa data i linjediagram. Ett EU API för vin priser används.
  • Fö11 Chart.js Hur rendera linjediagram med vin priser för viss kategori - Försättning hur vi skapar upp själva linje diagrammet och fyller det med data så vi kan rita ut det. Visar även hur du söker efter högsta resp. lägsta priset för att presentera det.
  • Fö Vue javascript ramverk - frivillig - Hur använda Vue javascript ramverk för att söka och presentera bok data från googlebooks api:et. Vi kommer att gå igenom Vue.js ramverket mer i en annan kurs men här får du en 'teaser' hur du kan använda det i en egengjord webbkomponent
  • Youtube: Learn Web Components In 25 Minutes - Grunder i hur du gör webbkomponenter.
  • Youtube: How to create a Web Component using Vanilla JS - Grunder i hur du gör webbkomponenter.
  • Kort intro till projektarbetet - Metal for all - Kort beskrivning av Metal for all, som är ett, av de två projektarbeten du kan välja mellan.
  • Kort intro till projektarbetet - Shop 'til u die - Kort beskrivning av Shop 'til u die, som är ett, av de två projektarbeten du kan välja mellan.
Övningar
  • Finn en bra förklarande video på Youtube om hur man implementerar egen webbkomponent. Gör det exemplet/en som visa i videon och få den att funka.
  • Skapa en enkel webbkomponent som visar ditt namn och epostadress.
  • Gör om den tidigare webbkompentent så att den har två attribut namn och epost som läser dessa två attributvärden och visar namnet och eposten
  • Skapa en webbkomponent med en knapp. När den klickas på visas ett slump tal mellan 1 och 100.
  • Skapa en webbkomponent med en knapp. När den klickas på visas en slumpad bild.
  • Gör om min sum-calculator från föreläsningsvideon så att den får med de övriga räknesätt som subtraktion, multiplikation och division.
  • Gör en webkomponent för en lånekalkylator som beräknar månadskostnaden för ett lån. Använd formel för annuitetslån, där man betalar av med samma månadskostnad hela låneperioden.
  • Gör två webkomponenter en sender som dispatchar ett customevent med data som den andra webkomponent en receiver lyssnar på för att plocka ut det data och presentera det.
  • Gör en egen webbkomponent som hämtar data från ett API på nätet, tex Disney api, med hjälp av fetch, async och await för att presentera det på ett snyggt sätt med hjälp av Bootstrap 5.
  • Gör en egen webkomponent som presenterar brott på en karta med marker och popup med hjälp av Leaflet.js ramverket. Använd polisens API om brott.
  • Gör en egen webkomponent som använder Chart.js ramverk för att presentera data i valfritt diagram. Finn eget lämpligt API, eller Covid, på nätet för att hämta data som kan presenteras i ett diagram.
Inlämningar
  • Görs som ett större projekt, ShopTilUDie, i grupp under vecka 43–44. Börja kolla redan nu. Se instruktioner i kursrummet under uppgifter. Deadline fredag vecka 44 kl17:00.
Frågor och svar

Formulera ditt svar. Tryck sen på frågan för att se mitt svar. Jämför svaren. Vad för likheter och skillnander ser du? Vad saknas i mitt respektive ditt svar?

  • What is the purpose of Web Components?
  • Why is reusing custom markup structures traditionally difficult?
  • What are the three main technologies that Web Components consist of?
  • What do Custom Elements enable developers to do?
  • What is the Shadow DOM used for in Web Components?
  • What is the first step in creating a web component?
  • How do you register a new custom element?
  • What method is used to attach a shadow DOM to a custom element?
  • How do you define a custom element named my-custom-element?
  • Which lifecycle callback is called each time the custom element is added to the document?

Att läsa
  • Jobba mer focuserat på ert projektet.
Att titta på
Övningar
Inlämningar
  • Kom ihåg inlämning av projektet ShopTilUDie fredag vecka 44 kl 17:00. Onlineredovisning sker vecka 45. Se instruktioner i kursrummet under uppgifter.
Frågor och svar

Formulera ditt svar. Tryck sen på frågan för att se mitt svar. Jämför svaren. Vad för likheter och skillnander ser du? Vad saknas i mitt respektive ditt svar?

Att läsa
  • Online redovisning av projektuppgiften. Se schemat och kursrummet för när din/er grupp har er redovisning.
Att titta på
Övningar
Inlämningar
  • Online redovisning av projektuppgiften. Se schemat och projektuppgiften i kursrummet för när din/er grupp har er redovisning.
Frågor och svar

Formulera ditt svar. Tryck sen på frågan för att se mitt svar. Jämför svaren. Vad för likheter och skillnander ser du? Vad saknas i mitt respektive ditt svar?

Charlie Lindgren

chg@du.se

Pär Eriksson

pei@du.se

Grunder js från W3Schools
Se spellista
Javascript grunder
Se spellista
Javascript bootstrap
Se spellista
Webbkomponenter
Se spellista

Kursnamn: Komponentdriven webbdesign

Program: Digitala tjänster - program för högskoleexamen

Beskrivning: Kursen behandlar tekniker inom DOM-manipulation av webbsidors struktur och funktionalitet. Du lär dig grunder i Javascript och Bootstrap. Komponentdriven webbdesign behandlas som helhet i ett projektarbete där du använder Bootstrap, Javascript och egengjorda webbkomponenter för att uppfylla designkrav.

Se kursplan