jatin33/100daysofcode

Purpose and Shape

This is a learning repository for JavaScript30-style browser exercises within a broader 100 Days of Code effort. It is not a unified application: each directory is an independently runnable static page focused on one DOM, CSS, or browser-API behavior. The root README.md documents the exercise sequence; there is no central router, shared application layer, or build output.

Paths: README.md, package.json, _config.yml

Entry Points and Execution Model

Open each exercise HTML file directly in a browser or serve its containing directory as static content. Most behavior is embedded in each HTML entry point; where separated, page-specific JavaScript and CSS are colocated. “START” filenames indicate challenge/starter variants rather than a common bootstrap.

Paths: JS and CSS Clock/index-START.html, ArrayCardio1/index-START.html, Flex Panel Gallery/index.html

DOM Interaction Exercises

A major component group demonstrates event-driven DOM updates: keyboard/mouse input, selection state, propagation, scrolling, and geometry-based presentation. Browser events are the primary control boundary: listeners transform event state into direct DOM/CSS changes.

Paths: Hold Shift and Check Checkboxes/index.html, Event Capture, Propagation, Bubbling and Once/index.html, Slide in on Scroll/index.html

UI State and Layout Demos

Several isolated pages couple JavaScript with CSS for interactive visual behavior, including draggable scrolling, dynamic CSS variables, navigation/highlighting, panels, timers, and shadows. State is generally ephemeral in the page runtime, except where browser storage is used.

Paths: Click and Drag/index.html, CSS Variables/index-START.html, Stripe Follow Along Nav/script.js

Data Transformation and Rendering

Array-method exercises process in-page datasets, while search/sorting examples render or reorder browser-visible results. This is client-only data flow: source data or markup → JavaScript array/string transformations → DOM output.

Paths: Array Cardio Day 2/index.html, Type Ahead/index.html, Sort Without Articles/index.html

Browser Media, Canvas, and Speech Boundaries

The repository directly integrates browser-provided capabilities that require runtime support and, for camera/microphone access, user permission. Media/player controls operate on a bundled video; webcam work captures stream imagery through canvas; speech pages depend on Web Speech APIs.

Paths: Custom Video Player/index.html, Custom Video Player/652333414.mp4, Webcam Fun/scripts.js, Speech Detection/index-START.html, Speech Synthesis/script.js

Persistence, External Services, and Deployment

LocalStorage is the principal client persistence boundary, serializing page state in the browser. The README references prior static hosting on Amazon S3 and identifies an external Cornify script for key-sequence effects. No backend service implementation is present. Per-exercise package.json files exist for speech/webcam directories, but the visible architecture remains static browser pages.

Paths: LocalStorage/index.html, Key Sequence Detection/index.html, Speech Detection/package.json, Webcam Fun/package.json