Chris Najman's repositories
costs-calculator
A simple calculator that tracks how much you spend per day over a number of days. An average spend is given for the period.
journal-with-local-storage
A simple journal that stores entries in local storage. Entries can be edited or deleted.
journal-with-local-storage-v2
A simple journal that stores entries in local storage. Entries can be edited or deleted. V2 adds image uploading to a journal entry.
twenty-four-hour-timer
Add a time in hours/minutes/seconds and launch a countdown timer.
code-snippets
A collection of loosely-grouped code fragments.
css-horizontal-media-scroller
Scroll images and other media using CSS grid. Accessible.
git-pages-index
Filter Git Pages by category
accessible-darkmode-lightmode-toggle-buttons
Choose the default state (Light Mode or Dark Mode) of a page. Toggle between states.
accessible-mobile-menu
A responsive mobile menu with accessibility features designed for both screen reader users and keyboard-based navigation.
choose-language-dictionary
Choose a language then create a dictionary. You can add, edit and delete entries.
costs-calculator-v2
Record and save your daily spend and see the average over a number of days.
custom-video-player
Accessible video player with custom controls.
filter-items
Filter items by category.
frontend-practice-project-webpack-5
A page built from the Abstract Project design at Frontend Practice using Webpack 5
grid-flexbox-page-layouts
Three-row template using CSS Grid or Flexbox for laying out header, main and footer.
meme-generator
Built from Scrimba's 'Build a meme generator' tutorials. Dynamically add text to the top and bottom of the image. Click the button to generate a new image.
one-page-site-template
One-page site template with multiple elements, including accordion, carousel, modal and slide-in.
react-form
Form built with React. Extension of Scrimba React Forms tutorials.
react-layout-template
App template with layout component. Includes simple theme-switcher
react-router-tutorial
A contacts demo built from the React Router tutorial - link in the README.md
scrimba-airbnb
A simple Scrimba React project, practising passing props from a parent to a child component.
scroll-page-watcher
If your browser supports 'animation-timeline: scroll()' CSS, a horizontal line will appear at the top of the screen as you scroll, indicating how far you have travelled down the page.
set-current-page-menu-item
Dynamically highlight the primary menu link for the current page using the 'aria-current' attribute.
sortable-dictionary-v2
Sortable dictionary with edit and delete functionality.
sticky-nav-page-anchor-links
Page navigation via anchor links in fixed nav. No set height required on the nav.
styling-svgs
CSS limitations when styling SVGs
to-do-list-v2
Edit, complete or delete to-do tasks. You can also reorder to-dos, if they get out of synch.
vite-basic-with-routing
Vite routing setup with easy publish to Git Pages. Includes a custom 404 page, and dynamic sub-routes.
webpack5-basic-setup
Basic Webpack 5 Setup