Chris Najman's repositories
react-layout-template
App template with layout component. Includes simple theme-switcher
markdown-notes-app-localstorage
Create, edit, preview, save, and delete Markdown notes.
markdown-notes-app-firestore
Create, edit, preview, save, and delete Markdown notes. Save notes to a Firestore database.
git-pages-index
Filter Git Pages by category
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.
code-snippets
A collection of loosely-grouped code fragments.
react-form
Form built with React. Extension of Scrimba React Forms tutorials.
scrimba-airbnb
A simple Scrimba React project, practising passing props from a parent to a child component.
react-router-tutorial
A contacts demo built from the React Router tutorial - link in the README.md
vite-basic-with-routing
Vite routing setup with easy publish to Git Pages. Includes a custom 404 page, and dynamic sub-routes.
choose-language-dictionary
Choose a language then create a dictionary. You can add, edit and delete entries.
frontend-practice-project-webpack-5
A page built from the Abstract Project design at Frontend Practice using Webpack 5
webpack5-basic-setup
Basic Webpack 5 Setup
one-page-site-template
One-page site template with multiple elements, including accordion, carousel, modal and slide-in.
css-horizontal-media-scroller
Scroll images and other media using CSS grid. Accessible.
costs-calculator-v2
Record and save your daily spend and see the average over a number of days.
to-do-list-v2
Edit, complete or delete to-do tasks. You can also reorder to-dos, if they get out of synch.
twenty-four-hour-timer
Add a time in hours/minutes/seconds and launch a countdown timer.
custom-video-player
Accessible video player with custom controls.
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.
styling-svgs
CSS limitations when styling SVGs
sortable-dictionary-v2
Sortable dictionary with edit and delete functionality.
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.
loader
CSS and JavaScript page loader which displays a loading animation or message, depending on the user's preferences.
sticky-nav-page-anchor-links
Page navigation via anchor links in fixed nav. No set height required on the nav.
filter-items
Filter items by category.
accessible-mobile-menu
A responsive mobile menu with accessibility features designed for both screen reader users and keyboard-based navigation.
accessible-darkmode-lightmode-toggle-buttons
Choose the default state (Light Mode or Dark Mode) of a page. Toggle between states.
set-current-page-menu-item
Dynamically highlight the primary menu link for the current page using the 'aria-current' attribute.