JS Project Ideas Once Past Beginner Level

Let’s say you just finished some beginner-level javascript tutorials and you’d like to learn more.

Here’s a list of functionalities to pick from.

Below the functionalities, you’ll fine some extra constraints: approaches, toolchains, syntaxes, and optimizations.

Happy Learning!

1. Choose a Functionality

User Interfaces (UIs)

  • Basic Calculator
  • Questionnaire
  • Multi-range slider field
  • Copy to clipboard button
  • Side-scrolling game
  • Element re-ordering
  • HTML5 audio player controls
  • A canvas to draw on

Animations

  • Make a box resize on hover
  • Add a fade on loading a different part of the page
  • Bounce on object inside a box
  • Animate a splash animation inside a button on click

Data Consumption

  • Display Weather Data from a public API
  • Perform Extract-Transform-Load: Modify data from one form to another
  • Update a server via a GraphQL mutation

DOM Traversal/Manipulation

  • Insert an element at the end of a list
  • Insert an element at the beginning of a list
  • Wrap elements inside a wrapper
  • Find an ancestor of an element

Event Handling

  • Perform validation on leaving a field, on changing field content (with delay)
  • Upon one page component capturing user input, communicate the change to another component using a custom event handler
  • Ensure that an event handler is removed when element is removed from page, re-added when the element is re-added

2. Choose an Approach

  • Vanilla JS / Native Browser APIs / CSS
  • Vue.js SPA (Single-Page Application)
  • In-spot Vue.js (just for that section of the page)
  • React SPA (Single-Page Application)
  • Stimulus JS

3. Choose a Toolchain

For transpiling, concatenation and minification.

  • No toolchain - Scripts in the footer in global namespace
  • Gulp
  • Grunt
  • Webpack

4. Choose a Syntax

  • Common JavaScript
  • ES6

5. Choose an Optimization

  • Minimize JS use (opt for CSS methods, minimize external packages)
  • Maximize use of npm packages (don't re-invent the wheel)
  • Minimize first-load time
  • Make it accessible for people with a visual disability

Hope this helps!

If you're finding yourself in a team of folks who too quickly reach for heavy JavaScript methods, consider checking out the Modest JS Works web book right here on this site for free.