Build a feature

This is an open-ended project where you’ll create a feature to include on your website.

The requirements are that the feature takes some user input and updates the DOM based on that input. In this case, user input refers to an event which can be listened for in the DOM.

Steps to build a feature

When building a feature for your site, you’ll want to follow a process. Diving straight into coding can lead to the feature taking longer to complete or having untidy structure. We suggest following these steps:

  1. Plan out the feature
  2. Break it down into smaller parts
  3. Write pseudocode
  4. Write JavaScript
  5. Test each part as you build
  6. Refactor

Building an image carousel used to be a requirement to apply to our programme. We removed it as a requirement to give space for creativity when building features.

Although this isn’t required, it is still an interesting thing to build and involves interesting JavaScript functionality.

An image carousel shows one image at a time, with buttons to move between a set of images.

Complexity can be added to the carousel with any or all of the following additions:

  • An autoplay feature and a button to pause and unpause the carousel
  • Reponding to the user pressing arrow keys to move between slides
  • A set of dots which tell the user which image is showing and can be clicked to skip to a particular image

The tortoise race

This is a simple game triggered by clicking a button to start a race across the screen between a set of tortoises. When the user clicks a button, the race should begin. Once the race is over, the user should be told which tortoise won.

Complexity can be added with the following features:

  • Variable speeds for each racer
  • Ability to add more tortoises to the race
  • Tortoises moving based on key presses from the user

Build something you find exciting

The above examples give you a sense of the kind of feature we’re looking for. It’s up to you to build something that you find interesting.

We’re looking for creative features that you have built yourself. Is there something you’ve always wanted to see on a website? A type of game you enjoy? Something that would add additional functionality to your site?

Finding help

Looking up tutorials and following code you’ve seen written online is perfectly ok. However, it’s important to make sure you understand the code.

Copy and pasting or following a tutorial without thinking about what the code is doing won’t help your learning. When you’re finding help elsewhere, make notes as you follow the tutorial and aim to rebuild the feature within your own skillset.

Change the code and observe the outputs, think about other ways to achieve the same effect, restructure the code so it makes sense to you.