Description
A small web app created in order to collate and present my solutions to Scrimba's #JavaScriptmas Advent calendar, 2020. This app features a single accordion component, containing an overview of each problem and a pseudo code playground for the solution. The app was built with React and kept as simple as possible, since emphasis should remain on the solutions themselves.
Every day of December, up until Christmas Eve, there was a new JavaScript challenge. The challenges range from single line maths problems, to adding functionality to apps with existing HTML & CSS. Whenever there is no HTML & CSS provided for the challenge, I have added a basic template.
Features
- Each solution contains all the code used, as well as an embedded working version.
- The content is mostly contained within a single accordion component that allows for a single solution to be open at a time.
- An additional quality of life feature is related to the scroll behaviour when opening accordion tabs: The page will scroll to keep the tab's title position constant, whilst the default action would otherwise maintain the scroll position on the page. If unedited, only the bottom of the solution would be shown when a user expands a lower entry than the one currently open.
- Responsive.
Inspiration
The final part of the #JavaScriptmas Advent calendar was to publicly post about your solutions, with the intended mode being a simple blog post. This was my excuse to build something quick and (relatively) simple using React, focusing on a single component: an accordion.
Inspiration also came from online code playgrounds, such as Codepen, JSFiddle, and W3School's "try it yourself" feature. My initial intention was to make it so that a user could edit the code directly and have the embedded version update with their changes. The main barrier that ultimately prevented this was the extra time required to get the syntax highlighting to work on the fly. I don't think that the next step of getting the live version to update with the new code would have been so tricky after that.