Write 30 projects in JavaScript-CSS then React-TS-Tailwind

Create a JavaScript version of a QR code generator that uses an external API to render the QR code from text input, with HTML structure and script setup.

Create a base.css with shared styles for inputs and buttons, set a font family, and implement hover effects; include the stylesheet in the index file to apply across projects.

Grab elements by id, add a click listener, and read the input. Validate input and render a QR code with the QR code JS library, clearing previous output with innerHTML.

Learn to build a React version by creating a TSX QR code generator, organizing components, and mapping through a component array with on click buttons to render component by index.

Learn to build a React and TypeScript QR code generator by wiring text input to state with useState, handling onChange, and rendering a QR code canvas from the react-qr-code package.

Build a password generator in a React project with lowercase, uppercase, numbers, and special characters, using a range 16–32 and a generate button to display the password.

Develop a client-side password generator with JavaScript, HTML, and CSS that includes lowercase, uppercase, numbers, and special characters, with a 16–32 length range and live password rendering.

Build a password generator in React by creating a reusable input component, wiring four inputs to shared useState, and updating option booleans like lowercase, uppercase, and numbers on change.

Learn to implement a range slider in React with state management, on change handling, and number parsing, then build a password generator interface with a button.

Build a password generator in a React project by selecting character types, wiring the generate function, and updating the displayed password based on user options.

Learn to build a password strength meter using a labeled input, a dynamic meter fill, and status text, with JavaScript and css to update strength as the user types.

create a dedicated style.css, define a class with height, width 100%, background color, border radius 5px, and margins, import in index, and style the fill element.

Develop a JavaScript password strength meter by selecting DOM elements, handling input events, computing strength, and updating the UI with classes, width percentages, and strength text.

Define a check password function that evaluates strength from zero to five using length, letters, uppercase, lowercase, numbers, and special characters with regex, then update weak, medium, and strong states.

Learn how to integrate a password strength component into a React project using TSX, Tailwind, and custom styles, including an input and a dynamic strength meter with a text label.

Define four levels with percentage, color, and text, initializing the level to zero with black. Update the level on input change and apply its color and width to the UI.

Create a text-to-speak feature by typing text into a text area and clicking a button to hear it spoken, while wiring up HTML elements and JavaScript to trigger speech.

Build a simple JavaScript interface with a text area and speak button. Use a click listener and the speech synthesis utterance API, with cancel to restart speech when needed.

In this React version, build a text-to-speech component by creating a controlled textarea, updating state on change, and wiring a speak button with Tailwind-styled elements.

Learn how to manage text input with useState in React TypeScript, update state on textarea changes, and trigger speech synthesis on button click with proper typing for React change events.

Build a circular progress component with CSS and JavaScript, featuring a data-value progress bar, simulate button actions, reset, and size options (small, medium, big) with CSS variables set from JavaScript.

Build a circular progress bar with a red background using a conic gradient, center content with a grid, and size it with a reusable size property ready for JavaScript-driven updates.

Learn to control a circular progress with vanilla JavaScript by selecting buttons, syncing a data-value attribute, mapping 0–100 to 0–360 degrees, and updating a CSS progress variable.

Implement button actions with click event listeners to set sizes (60, 100, 130 px) and a reset. Create a simulate download that increments by ten every 400 ms until 100.

Copy and adapt a circular progress component into a React project, wiring up useRef to control the progress element’s size with small, medium, and large presets.

Learn to implement a reset and simulated download progress in React using useState, useRef, and an interval, with cleanup on unmount and safe interval handling.

Implement a dark mode toggle in plain JavaScript, switch between light and dark themes, respect system preferences, apply transitions, and remember the last chosen theme on refresh.

Learn to implement a dark/light theme toggle with a click event, using the body class list, localStorage persistence, and browser preference via matchMedia to determine the initial theme.

Build a dark mode in React by creating a dark mode component, wiring a toggle on click, applying body styles, and centering content to demonstrate the toggle.

Develop a math captcha feature by generating two random numbers, validating user input, and displaying correct or retry feedback in a React setup.

Generate a dynamic captcha in JavaScript by creating two random numbers, display a question, verify input with parseInt, update messages, and regenerate on failure.

Learn to build a math captcha in React by generating two numbers, managing input and result state, and validating user answers with a dynamic render.

Create a dynamic shadow generator that uses sliders for horizontal and vertical offsets, blur and spread radii, a color picker, and an inset option to output CSS box-shadow values.

Build an interactive JavaScript shadow editor by wiring inputs with listeners, computing h-offset, v-offset, blur, spread, color, and inset, and updating the box shadow display and preview box.

Build a shadow generator in React with a custom hook and a range group component that renders sliders for horizontal and vertical offset, blur, and spread radius using unique ids.

Add and style color picker controls and shadow options, using inputs with specific IDs and class names, and a 400px width. Prepare to apply slider values to the box shadow.

Learn to manage shared state for multiple range groups in a React component by implementing a single state object, a centralized onChange handler, and proper typing for React change events.

Refactor a large component by extracting stateful logic into a custom hook that returns state and onChange, using the rest operator to pass remaining props for cleaner React code.