Javascript x Webflow

Module 1

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

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

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

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

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

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

Module 7

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

Module 8

Use the browser Video API to create a custom video player

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

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

Module 9-2

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