Skip to content

Instantly share code, notes, and snippets.

View zocom-christoffer-wallenberg's full-sized avatar

zocom-christoffer-wallenberg

102 followers · 0 following
View GitHub Profile
@zocom-christoffer-wallenberg
zocom-christoffer-wallenberg / lorem-ipsum.html
Created August 28, 2020 13:30
<!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>
@zocom-christoffer-wallenberg
zocom-christoffer-wallenberg / index.html
Last active August 31, 2020 13:58
CSS - Intro
<!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>
<body>
<header class="wrapper">
@zocom-christoffer-wallenberg
zocom-christoffer-wallenberg / instablam.md
Last active October 8, 2020 12:40

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!

@zocom-christoffer-wallenberg
zocom-christoffer-wallenberg / media-devices.md
Created May 15, 2020 12:50

Ö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

@zocom-christoffer-wallenberg
zocom-christoffer-wallenberg / cache-api.md
Created May 6, 2020 09:21

Ö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

@zocom-christoffer-wallenberg
zocom-christoffer-wallenberg / service-worker-exercice.md
Created May 4, 2020 11:31

Service Worker övning

Instruktioner

  1. Skapa en index.html och lägg till lite innehåll och en tom index.js.
  2. Skapa en tom sw.js.
  3. Registrera din service worker och installera samt aktivera den.
  4. Kolla om internetanslutningen försvinner och i så fall skicka tillbaka ett meddelande om att användaren är offline.
  5. Lägg till en service worker på en existerande webb app som gjorts i Vue.
@zocom-christoffer-wallenberg
zocom-christoffer-wallenberg / shakespeare-insult-generator-api.md
Last active February 11, 2021 10:48

Shakespeare insult generator

Have you no wit, manners, nor honesty but to gabble like tinkers at this time of night? - Twelfth Night

I denna övning ska du få bygga ett API som returnerar en förolämpning från Shakespeare. En "sick burn" från Shakespeare ger en bra start på dagen!

Nedanför har du 10 förolämpningar från olika pjäser att använda dig av. Skapa ett objekt för varje förolämpning som har två egenskaper. Den första som heter insult som innehåller en sträng med förolämpningen och den andra som heter play med pjäsen namn. Lägg sedan alla objekt i en array. Du kan spara detta direkt som en variabel i din NodeJS - applikation eller i en JSON-fil likt det vi gjorde med childrensbooks.json.

@zocom-christoffer-wallenberg
zocom-christoffer-wallenberg / vue-component-todo-exercise.md
Last active February 15, 2021 13:20

Första steget i att skapa en dynamisk web app med Vue.js är att koda upp den med statiska komponenter och innehåll.

Koda upp nedanstående Todo App skiss med dessa komponenter ( håll CSS:en enkel, behöver inte vara lika grafisk som skissen, dock samma funktionalitet och struktur. Notera att todo-header har en komponent ( counter) inuti sig. Glöm inte att hårdkoda in innehållet också i todo-items etc.

Komponenter

  • header
    • counter ( du har 3 todos kvar att göra )
  • todos ( inkl 4 todos, en är avbockad/done )
  • new-todo
@zocom-christoffer-wallenberg
zocom-christoffer-wallenberg / password-generator-exercise.md
Last active February 24, 2021 15:33

Lösenordsgenerator

I denna övning ska du bygga en lösenordsgenerator med flera nivåer.

Level 1

Skapa en enklare lösenordsgenerator i form av en function passwordGenerator(length) där enda argumentet är längd på lösenordet. Funktionen ska returnera ett slumpat lösenord som visas på skärmen.

Du får inte använda dig av regex.

@zocom-christoffer-wallenberg
zocom-christoffer-wallenberg / hacking-exercise.md
Last active March 3, 2021 22:58

HACK THE SITE

Vad

Du ska i denna övning ge dig på att hacka en sida där du kan logga in, se ditt konto och posta kommentarer i en gästbok.

Du ska göra följande:

  • Gör en XSS där du injectar kod som sparas som en kommentar i gästboken och körs för alla som kommer in.
  • Postar en kommentar som Ada men är inloggad med användaren Chris.
  • Sno en annan användares session och logga in med denna utan att kunna användarnamn och lösenord.