Knot Very Useful

Getting Started

1. Clone the repo to your local machine
2. cd into the directory
3. open index.html to open the app in your browser

Description

This is a simple knot making instruction app that was made for four main reasons:

• As someone in the early stages of learning software development, it was a purposeful and practical way to practice my skills.
• As someone in the early stages of learning software development, this was a playful exploration of the possibilities of DOM manipulation and CSS.
• As a Forest School Leader, it was very helpful to have a quick reference for knots that I could use to teach the children and that they could use independently.
• As a Forest School Leader this app became a part of my own Forest School portfolio, above and beyond the requirements of the Forest School Leader level 3 qualification.

Screenshot of the navbar, app knot selection and descriptions:

The app itself shows a range of knots in the navbar and the same range displayed as tiles. Beneath the tiles is a video display window that can be used to play a video of the currently selected knot.

Hovering over either the knot tile or the navbar link will display a description of the knot. Clicking on either the knot tile or the navbar link will make the screen scroll smoothly down to the video window and display the video of the knot being tied.

Screenshot of the video window:

Technologies Used

• Vanilla JavaScript
• HTML
• CSS

The app in action

As a little extra playful touch, all knots fade to description and the title turns green when you hover over the navbar app logo.

Knot descriptions when hovering over tiles of nav links:

Selecting a knot and playing the video: