Learn To Code

Practice time 🕺

June 08, 2021

Table of Contents

Array Cardio

Read the comments and solve the exercises:

LocalStorage

Persist the items from the form so they still exists when the page refreshes:

Sort without articles

Use the .sort method without taking articles into account:

Adding up times with reduce

Use the .reduce method on arrays to sum up all time:

Key Sequence detection

Attach an event listener that checks if keys are pressed in a certain order:

Hold Shift and check checkboxes

Select multiple checkboxes all at once while holding down the shift key:

Speech detection

Use the speech API in the browser to transcribe what you are saying right on the page:

Listen to transition events with javascripts and open and collapse content positioned with flex:

Type Ahead

Fetch cities from an api and show them in a dropdown, effectively creating an autocomplete:

Make the webpage highlight a tags based on the position of your mouse:

Handle the scrolling of long webpage while showing the header at the top of the page:

Drum kit

Bind keys to audio sounds and create a digital drum kit:

Display Products

You have been given a list of products with their details, such as name, price, and category. You’re tasked with creating a webpage that allows users to filter products based on a price threshold, transform the product names to uppercase, and finally display the total price of the filtered products.

Interactive Task Management Tool

You are building a simple task management tool. Users should be able to:

  1. Add new tasks.
  2. Mark tasks as completed.
  3. Filter tasks to view either all, completed, or pending tasks.
  4. See the number of tasks completed and the average length of the task descriptions.

Fun with Promises

Build a little guessing game where you can enter a number and see if it is the correct one!

Counting events

Create a counter using the countapi to show how many times a button has been clicked:

Superheroes are cool

Use the marvel API to show heroes and some extra information:

Chuck Norris API

Use the Chuck Norris API to show a random joke:

Validate Credit Card IBAN

Validate the IBAN number entered in this form:

Build a small trivia app

Emoji Picker

Simple chat application

Using the raspberry pi as a server, build a simple chat application:

Weather App

Build a weather map that checks what the weather is for a given city:

Wordle

Build the famous wordle game, which was sold to NY Times for several millions of dollars:

Todo App

Build a todo app with all the basic CRUD operations using promises: