Javascript x Webflow

+

Module 1

Band Name Generator

Create a form with two text inputs. Prompt the user for clothing color and last food eaten then generate a band name based on these inputs and display it on screen.

Module 2

Stopwatch

Create a simple stopwatch that counts up from 00:00. The interface will have three buttons, start, pause, and reset. The timer initial state is 00:00. Pressing start will start the stopwatch. Pressing pause will pause it. Pressing start again will restart the stopwatch from the current time. At any point, pressing reset will set the timer back to 00:00

Module 3

ToDo List

Create a todo list application to understand array and object datastructures in Javascript. Users will be able to create new todo items and delete todo items.

Module 4

Filter and Sum Product List

Create a dashboard from CMS data and perform operations like filtering and dynamic calculation using what we've learned about higher order functions like filter() and reduce().

Module 5

CMS Flashcards App

Create an app that can be used to quiz yourself on whatever you want. And it's all powered by Webflow CMS! We'll learn a new way to pull CMS data client-side (i.e. using Javascript) which will then be used in two Javascript classes that we will write: FlashCardDeck and Flashcard. This lesson introduces you to object oriented programming, a timeless technique for structuring modular code that tracks its own state and is maintainable at scale.

Module 6

Match Game

Create a card matching game utilizing principles of modular code by leveraging ESM Modules and reuseable Javascript classes.

Module 7

Random Quotes App

Create a mini fullstack app using Xano as a backend that can perform basic CRUD operations.

Module 8

Custom Video Player

Use the browser Video API to create a custom video player

Drawing Applet

Use the Canvas API to create a whimsical little drawing application in the browser. This introduces a very powerful API typically used in advanced animations on web, leveraged by libraries like PixiJS, p5, Paper.js, and Three.js

Module 9-1

Compound Interest Calculator

Use Chart.js and the browser Form Data API to create a custom interest rate calculator

Module 9-2

GSAP Intro

Use the popular Greensock Animation Platform library (GSAP) to create complex animations programatically.