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

🎒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

🎒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

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

// 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

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

function logIds() {
  function getDataTestIdElements() {
    return document.querySelectorAll('[data-test-id]')
  }
  function toArray(elementList) {
    return Array.from(elementList)
  }
  function toTagTestIdPair(item) {
    return {
      ref: item,

dominikkaegi

const fs = require('fs');
function jsObjectToJSON(filename, data) {
  const formattedString =JSON.stringify(data, null, 2)
  fs.writeFile(filename, formattedString, function(err) {
  ​
      if(err) {
          return console.log(err);
      }
  ​
      console.log("The file was saved!");

dominikkaegi

const AMOUNT_OF_DATES = 10;
const DURATION = 30;
var timeframes = []
var startDate = new Date("Fri Oct 18 2019 10:00:00 GMT+0200 (Central European Summer Time)")

for(let i = 0; i < AMOUNT_OF_DATES; i++) {
	let timeframe = {
		start: addMinutes(startDate, DURATION * i),
		duration: DURATION
	}

dominikkaegi

// Something to think about from this post :)
// https://stackoverflow.com/questions/55413162/how-to-use-function-chaining-with-async-function?noredirect=1#comment97547907_55413162

class Walker {
   constructor(t) {
     this.t = t;
     // set up a task queue for chaining
     this.task = Promise.resolve();
    }