zocom-christoffer-wallenberg

Pendlaren

Vad

Du är en skicklig webbutvecklare som arbetar på ett innovativt techföretag vid namn "TravelEase Solutions". Företaget har fått i uppdrag att utveckla en ny webbapp för en stor transportfirma, "CityTransit", som vill förbättra sina tjänster för resenärer i staden. CityTransit har märkt att många av deras kunder har svårt att hitta närmaste busshållplats och önskar en lösning som gör det enklare att navigera i stadens kollektivtrafik.

Din uppgift är att skapa en webbapp, kallad "Pendlaren", som hjälper användarna att snabbt och enkelt hitta närmaste busshållplats baserat på deras aktuella position. Genom att använda GPS-teknologi kan appen exakt lokalisera användarens longitud och latitud. Efter att ha fått användarens position, ska appen hämta data om närliggande hållplatser och visa dessa för användaren.

När användaren väljer en specifik hållplats, ska appen visa de närmaste avgångarna för att hjälpa resenären att planera sin resa effektivt. Med "Pendlaren" vill CityTransit göra det enke

Service Worker övning

Instruktioner

Skapa en index.html och lägg till lite innehåll och en tom index.js.
Skapa en tom sw.js.
Registrera din service worker och installera samt aktivera den.
Kolla om internetanslutningen försvinner och i så fall skicka tillbaka ett meddelande om att användaren är offline.
Lägg till en service worker på en existerande webb app som gjorts i Vue.

Övning med Cache API

Vad

Du ska göra en webbsida som använder sig av valfri endpoint från denna sida. Användaren får fylla i ett namn eller det som krävs för denna endpoint och sedan görs det ett anrop och svaret visas på sidan.

Ex. ifall man använder endpoint /awesome/:from så fyller användaren i en inputfält in namnet på :from och svaret blir ex. This is Fucking Awesome. - Christoffer

Hur

Övning med MediaDevices

Vad

Skapa en sida där du ber om tillåtelse från användaren att visa innehållet från webbkameran på din webbsida. Användaren ska sedan kunna ändra ett CSS filter på videon dynamiskt. Tips! Använd en slider <input type="range" min="1" max="100" value="50" class="slider" id="myRange">

Dokumentation: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

Inlämningsuppgift Instablam

Vad

Du ska göra en PWA där användaren kan använda sig av sin kamera för att ta ett kort och sedan ändra detta kort med lite olika inställningar. Det ska finnas minst 5 olika inställningar att använda sig av.

Hur

Ingen vue-pwa!

A Study in Programming

En stor del av att lära sig programmering handlar om ens tankesätt och att bygga upp mentala modeller. I denna guide ska vi titta på hur vi kan använda Sherlock Holmes "Science of deduction" som ett arbetssätt för att lösa olika programmeringsproblem. Du kanske ställer dig frågan varför Sherlock Holmes har något med programmering att göra? Se detta som ett sätt att tänka och som en hjälp när du ska analysera och lösa olika programmeringsproblem.

Sherlock Holmes "Science of deduction" består av tre delar: Observe, Theorize, Test, som beskrivs mer i detalj nedanför. Bra att ha i åtanke är att även om dessa görs i ordning är de även individuellt bra att ha i åtanke konstant när man programmerar.

Observe

Övning - Ada Lovelace

I denna övning ska du skapa en webbsida om Ada Lovelace, du finner lite längre en text du ska använda. Design får du själv bestämma men nedan finns ett antal krav som du ska följa.

Minst två bilder

https://commons.wikimedia.org/wiki/File:Ada_Byron_aged_seventeen_(1832).jpg

https://commons.wikimedia.org/wiki/File:Ada_Lovelace_portrait.jpg

Nyhetssidan

Instruktioner

Märk upp delarna av texten med rätt element för att bygga upp hela HTML-sidan.

HTML-dokumentet

Börja med att skapa grundstommen i ett HTML-dokument. Lägg också till <!DOCTYPE html> längst upp i dokumentet.

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	</head>

	<body>

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="style.css">
	<title>Document</title>
	</head>