dominikkaegi

const TIME_JUMP_SECONDS = 15
const VOLUME_JUMP = 0.1

function moveInVideoTime(seconds) {
	document.querySelector('video').currentTime += seconds
}

function changeVolume(change) {
	document.querySelector('video').volume += change
}

dominikkaegi

// When we fetch data we get a readable stream as a response in the body.
// To receive the data we can call the `json()` function on the response.
// That reads out the full response and returns us a json object instead of a stream object.

fetch('https://api.coindesk.com/v1/bpi/currentprice.json')
    .then(res => res.json())
    .then(data => console.log(data))

dominikkaegi

React Introduction: https://bit.ly/3cM7Acj

Setup

WIFI: Penguine House

Password: Penguin2019

1. Have a recent version of node installed or download it now from nodejs

dominikkaegi

🎒Tab Challenge:

Background:

In react we like to build components that we can then stick together. Tabs to switch between content is a component which can be found used in many applications. Let's build one ourselves :).

Your mission:

Build a tab component like this https://bwir2.csb.app/. It should indicate which tab is currently active by changing the background color of the active tab. When a tab is active the content of that tab is displayed.

dominikkaegi

🎒Calculator Challenge:

Background:

Creating reusable components that we can use in different parts of our application can give us a big benefit to keep our functionality and styling consistent within our application and can increase the speed of development. Therefore it is important to understand how we can create components and modify them with props.

Your mission:

Build a calculator from scratch like this: https://vs7w3.csb.app/. The goal of this challenge is to build reusable components, passing date down up and through components and to handle events. Focus on the functionality not on the styles when building your calculator. It does not have to look the same.

dominikkaegi

🎒Jokes on you:

Background:

When building a frontend application we usually want to interact with some data from a server. Let's build an application which loads jokes from a server and display them for our users.

Your mission:

Create an application which loads jokes from the backend and display them in the browser. We can random jokes from this joke api. Create an application that has three Tabs, one for "General" jokes, one for "Programming" jokes and one for "Knock-knock" jokes.

dominikkaegi

React - Day 2 : https://bit.ly/37zIJEx

Agenda:

• Checkin
  • Review Submission
  • Counter
  • Tab Component
• Kahoot Quiz
• Input Declarative vs Imperative

dominikkaegi

React Day 3 - https://bit.ly/2HJGzrn

Agenda:

• Checkin
  • Review Submission
  • Counter
  • Tab Components
  • Form Validation
  • Calculator

dominikkaegi

React Day 4 - https://bit.ly/32cOabu

Agenda:

• Checkin
  • Review Submission
  • Counter
  • Tab Components
  • Calculator
• Routing

dominikkaegi

React Day 5 - https://bit.ly/2V9Vi76

Agenda:

• Checkin
  • Review Submission
  • Counter
  • Tab Components
  • Calculator
  • Routing