lejonmanen

// Copy and paste this code into your main script file
// The purpose is to register the service worker
// The browser will load sw.js for us if you do this

if ('serviceWorker' in navigator) {
	// Assumes your service worker has file name "sw.js"
    navigator.serviceWorker.register('sw.js')
    .then(reg => {
        console.log('Registration succeeded. Scope is ' + reg.scope);
    });

lejonmanen

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

lejonmanen

Lösenordsgenerator

I denna övning ska du bygga en lösenordsgenerator i flera steg.

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. Använd Math.random() för att skapa slumptal.

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

lejonmanen

import { useEffect, useRef } from 'react'

/*
Safely send and cancel one AJAX request at the time. If you need to send multiple requests at the same time, call this hook several times.

Usage:
const [cancelRef, doAjax] = useCancellableAjax()

Fetch data. Tip: use a setState function as callback.
doAjax(url, fetchOptions, dataCallback)

lejonmanen

import { useRef } from 'react'

const MediaDevice = () => {
	const videoRef = useRef(null)

	const handleVideoOn = () => assignStream(videoRef.current)
	const handleVideoOff = () => videoRef.current.srcObject = null

	return (
		<div>

lejonmanen

import { useState, useEffect } from 'react'

// Be aware that notifications are fickle creatures. You may have to jump through some hoops to get them working on your desired browsers and platforms. The following code is tested on Firefox for Windows. But you should be able to modify it to work in other environments.

const Notis = () => {
	const [canUse, setCanUse] = useState(false)
	const [clicks, setClicks] = useState(0)
	const [fromNotification, setFromNotification] = useState(null)

	useEffect(() => {

lejonmanen

import { useState } from 'react'

/*
"Lifting state up" is useful when several components need to share state.
In this example, both Parent and Child needs to display the value of
"clicks". Child needs to update the value as well. We are lifting the
state up, out of the child component, into its parent.

1. Move the shared state to the common component - the component that
contains all of the components that needs to share state. Here, Parent is

lejonmanen

const prompt = require('prompt-sync')()

/*
Before running this code, make sure to create an npm project:
npm init -y
npm install prompt-sync
node input.js
*/

// How to get input from user

lejonmanen

/*
console.log('Hello world')  // apostrof (enkelfnutt)
console.log("Hello world")  // citattecken (dubbelfnutt)
console.log(`Hello world`)  // grav accent, backtick
*/
const exempel = 15  // global, gäller i hela filen
console.log(exempel)

// definiera funktionen sayName
function sayName(name) {

lejonmanen

import { createContext, useState, useContext } from 'react'


// Create the context in a separate file. Import it to every component that needs it.
const CounterContext = createContext(0)


const ContextDemo = () => {
	const [count, setCount] = useState(2)
	const contextValue = { count, setCount }