HTML, CSS, and JavaScript Cookbook

Recipes

These are fully baked and ready to go

• Calculate Color Contrast Ratios In JavaScript
• Change Content Based On Basic Scroll Position
• Dynamically Load External Fonts
• Live Code Documentation Maker Experiment Alpha
• Prevent A Form From Submitting To View Its Data
• Step-By-Step Code Example - Prototype v01 - Basic Buttons
• Step-By-Step Code Example - Prototype v02 - Update to Button Test
• Step-By-Step Code Example - Prototype v03 - Highlight Test
• Step-By-Step Code Example - Prototype v04 - Side By Side Notes
• Step-By-Step Code Example - Prototype v05 - Added Line Numbers
• Step-By-Step Code Example - Prototype v06 - Added headers and refined design
• Step-By-Step Code Example - Prototype v07 - Text In Code Area
• Step-By-Step Code Example - Prototype v08 - Refined Notes In Code Editor
• Step-By-Step Code Example - Prototype v09 - Slider Tets
• Step-By-Step Code Example - Prototype v10 - Slider With Notes
• Step-By-Step Code Example - Prototype v11 - Slider With Notes And Only Active Lines
• Step-By-Step Code Example - Prototype v12 - Intersection Observer Scrolling Content Area
• Step-By-Step Code Example - Prototype v13 - Scroll Event Test
• Step-By-Step Code Example - Prototype v14 - Scrolling On Side
• Step-By-Step Code Example - Prototype v15 - Scrolling In Panel With Ace Editor
• Step-By-Step Code Example - Prototype v16
• SVG Image Mask
• A Web Component Hello World Example

Under Construction (and probably broken)

This is my active scratchpad area where I'm figuring things out. Each item is likely scuffed in some manner between not being feature complete and being fully broken

• Absolutely Position Elements Over A Specific Letter
• Apply CSS Styles To A Web Component
• Audio Webform
• Autocomplete Selection Menu
• Back Button With history.pushState()
• Calculate What Percentage One Number Is Of Another Number
• Center A <pre> Tag
• Center Vertically With A Header And A Footer
• Change The Browser's URL Without Reloading The Page
• Web Component - [Not Currently Possible] - Custom Input Form Control Element
• Create And Send Events From A Web Component
• CSS - Make A Select Menu Float Above Other Content
• CSS Grid - Basic Grid
• CSS Grid Responsive Columns
• CSS Offset Sidebar Column
• CSS Grid With Two Columns Including One That Scrolls
• Details Element Example
• Detecting Enter/Return Key Presses
• Detecting A Key Press Anywhere On The Page
• Web Components - Document Click Listener
• Doulbe Encode Commas And Slashes For Cloudinary Text Overlays
• ffmpeg WebP Tests
• WARNING: This downloads 1,455 Fonts (Font Download Test)
• Get All Document Elements With IDs
• Get And Use Attribute Values In A Web Component
• HEX to RGB and HSL Color Converter
• howler.js test
• HSL Color Picker Web Component
• HSL to RGB Converter
• HTML Canvas - Draw A Rectangle With The Cursor
• HTML Canvas - Simulate An Animated GIF
• HTML Input Range Type With Floating Point Number
• JavaScript Class Example
• JavaScript: Populate An Array Of A Given Length With Ranges Of Values
• Mdash Input Select Autocomplete Test
• Photo And Image Scroll Gallery Dynamic Sizing
• Search Input Example
• Send A Web Component Value When Submitting A Form
• Sticky Code Area
• Stream Chat CRT Overlay
• Strict Selection Menu Form Control
• Using System Preferences To Set Dark/Light Mode
• Web Component - Use Internal Elements
• Using Mutation Observers To Setup Communication Between Web Components And Their Parent Page In Vanilla JS