K

Kareena

@kareena-opi·33 public vizzes

Loading thumbnail…

fun word search

A winter-themed word search game presents a 15x15 grid of letters containing 15 seasonal words placed horizontally or vertically in forward or backward directions. Players click and drag to select letter sequences, with valid straight-line selections highlighted and matched words turning green and appearing crossed out in the accompanying word list. The game is built with vanilla JavaScript, manipulating the Document Object Model to create interactive grid cells and track selections. Animated snowflake elements and a gradient background provide visual atmosphere, while the interface includes a new game button to regenerate puzzles.

Loading thumbnail…

Fork of CV: Clickable Circles

Five heart-shaped paths are rendered from static x/y coordinates stored in a data module. Clicking a heart selects it, changing its fill and stroke to a pink highlight via a React state callback. The visualization uses D3’s `select` and `join` to bind data to SVG `path` elements, while React manages the selected-circle state through a `useEffect` hook that re-renders the chart on every click.

Loading thumbnail…

Fork of Fork of Rainbow Piano

A piano keyboard rendered as a colorful SVG interface lets users play notes by clicking keys, with each key displaying its corresponding solfège number. The React app maps 24 notes to specific frequencies and uses the Web Audio API’s `OscillatorNode` and `GainNode` to generate short sine-wave tones. Each white key is filled with a pastel rainbow color based on its note letter, while pressed keys temporarily brighten or darken. The layout includes both white and black keys, with black keys positioned between the white ones at higher vertical offsets.

Loading thumbnail…

Rainbow Piano

This interactive piano visualization uses the Web Audio API to synthesize tones and features a colorful gradient background transitioning from teal to magenta. The piano displays both white keys and black keys, where the white keys are labeled with keyboard letters (A, S, D, F, G, H, J, K, L) alongside note names. Each key responds to mouse clicks and touch events, changing color and shifting downward when pressed. A button above the controls plays a pre-programmed melody, while the audio context is created dynamically on interaction.

Loading thumbnail…

Hearts

A cluster of eleven glossy pink heart-shaped balloons floats in dark space, each rotating independently while gently pulsing and bobbing. Three.js builds the hearts from a 2D bezier curve shape, extruded with bevels for a puffy volume, and applies a semi-transparent, emissive Phong material. OrbitControls enables viewer rotation. An animation loop adds continuous rotation, sinusoidal pulsing scale, and vertical drift, while a point light moves with the central heart to create a glowing effect.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Fork of Fork of Fork of HTML Starter

A children's crossword puzzle displays an 11-by-11 grid of letter cells with across and down clues listed alongside. The game uses plain JavaScript and the Document Object Model (DOM) to render the interactive grid, manage user input, and highlight words. Clicking a clue highlights the corresponding word in the grid, while the "Check Answers" and "Show Solution" buttons compare user entries against the embedded word list. The interface relies on CSS grid for layout and event listeners for navigation and validation.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Fork of Fork of HTML Starter

This interactive word search game displays a 15x15 grid of letters with a list of 15 hidden words. Users click and drag across the grid to highlight letters and form words, which are then checked against the target list. The game uses DOM manipulation, event listeners for mouse interactions, and JavaScript arrays to manage grid placement and selection logic. A "New Game" button regenerates the puzzle with a fresh random layout.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Fork of HTML Starter

This interactive word search game displays a 15x15 grid of letters containing 15 hidden words such as CAT, DOG, and STAR. Users click and drag across the grid to highlight letters, and the game checks selected sequences against the word list. The grid is generated using randomized placement of words horizontally or vertically, with remaining cells filled by random letters from the alphabet. The interface relies on the DOM API for element creation and event handling, while CSS Grid defines the layout and styling manages the visual presentation.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of HTML Starter

This interactive word search game displays a 15x15 grid of letters containing 15 hidden animal, nature, and food-themed words for children to find. Users select words by clicking and dragging horizontally or vertically across adjacent cells, with highlighted selections and visual feedback on the word list. The game uses vanilla JavaScript with DOM manipulation to generate the grid, place words using directional placement logic, and handle mouse event listeners for selection. Random letter filling completes the grid, styled with CSS grid layout and playful Comic Sans typography.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of HTML Starter

This interactive word search game generates a 15x15 grid of letters from a fixed list of 15 words, placing them horizontally or vertically and filling remaining cells with random letters. Players select words by clicking and dragging across the grid to highlight sequences of letters. The interface uses vanilla JavaScript DOM manipulation to handle grid rendering and mouse events, while CSS defines the playful visual style with colored borders, highlighted cells, and a word list display.

Loading thumbnail…

Fork of Fork of Fork of Fork of HTML Starter

This interactive word search game displays a 15x15 grid filled with letters and a list of fifteen hidden animal, nature, and food-related words. The JavaScript algorithm randomly places words horizontally or vertically before filling empty cells with random letters. Users select words by clicking and dragging across cells in straight lines, with the DOM `mousedown`, `mouseenter`, and `mouseup` events tracking the selection. The grid uses CSS Grid for layout, and a "New Game" button regenerates a fresh puzzle.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Fork of Fork of Fork of Fork of Fork of wordsearch fun

This interactive word search puzzle displays a 15x15 grid of letters containing fifteen themed words, such as "SUN" and "ICECREAM," which players find by dragging to highlight horizontal, vertical, or diagonal sequences. The game uses plain DOM elements and event listeners for mouse interaction, generating the grid with JavaScript arrays and random letter placement. Found words are marked in pink, crossed off the accompanying list, and a button resets the puzzle with a new layout.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Fork of Fork of Fork of Fork of wordsearch fun

This interactive word-search puzzle presents a 15×15 grid of letters containing 15 hidden words, which players find by dragging across adjacent cells in horizontal, vertical, or diagonal lines. The interface uses plain DOM manipulation with `document.createElement`, `addEventListener` for mouse events, and CSS Grid for layout. Words are randomly placed via a custom placement algorithm, with empty cells filled using `Math.random` from an alphabet string. Found words are highlighted in pink and marked as complete in the word list, while a “New Game” button regenerates the entire puzzle.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Fork of Fork of Fork of wordsearch fun

This interactive word search puzzle presents a 15×15 grid of letters with 15 hidden words to find. Players click and drag across adjacent letters to highlight words horizontally, vertically, or diagonally; correctly selected words are marked as found with a color change in both the grid and the word list. The code uses plain DOM manipulation with `getElementById`, `createElement`, and `querySelector` to build and update the grid. Word placement uses randomized logic with collision checking, while mouse events (`mousedown`, `mouseenter`, `mouseup`) drive the selection mechanism. A New Game button regenerates the puzzle with a fresh random layout.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Fork of Fork of wordsearch fun

This interactive word search puzzle displays a 15-by-15 letter grid with fifteen hidden words placed horizontally, vertically, or diagonally. The code uses plain DOM manipulation via `document.getElementById`, `createElement`, and `addEventListener` to render the grid, handle mouse selection through `mousedown`, `mouseenter`, and `mouseup` events, and highlight found words. A random word placement algorithm and letter-filling procedure generate each new game instance, with CSS grid layout and gradient styling providing the visual presentation.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Fork of wordsearch fun

This interactive word search puzzle displays a 15x15 grid of letters with a list of 15 themed words to find. The code uses plain JavaScript DOM manipulation, including `document.addEventListener`, `document.querySelector`, and `document.createElement`, to generate the grid and handle mouse events. Users select words by clicking and dragging across the grid, with the script validating horizontal, vertical, and diagonal selections against the word list. Found words are highlighted in pink, and a "New Game" button regenerates the puzzle with a new random letter placement.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of wordsearch fun

A web-based word search puzzle presents a 15x15 grid of letters with hidden seasonal and color-themed words. The game uses the Canvas-free approach of DOM manipulation with `document.createElement` and event listeners for `mousedown`, `mouseenter`, and `mouseup` to enable highlighting word selections. A custom grid generation algorithm places words randomly in horizontal, vertical, or diagonal directions, then fills empty cells with random letters. The interface displays a word list and a "New Game" button, with visual feedback through CSS classes for highlights and found words.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of wordsearch fun

This interactive word search puzzle displays a 15-by-15 grid of letters and a list of fifteen themed words. The code uses plain JavaScript and the DOM API to generate the grid, randomly place words horizontally, vertically, or diagonally, and fill empty cells with random letters. Users select words by dragging across cells, which highlights the path and marks matched words as found, using `addEventListener` for mouse interactions.

Loading thumbnail…

Fork of Fork of Fork of Fork of wordsearch fun

A word search puzzle displays a 15x15 grid of letters containing 15 hidden words. The game uses a pink and white gradient theme with a pink header and centered layout. The page is built with HTML, CSS, and JavaScript, using DOM manipulation to create the grid, handle mouse events for word selection, and manage the game state. Words are placed randomly in horizontal, vertical, or diagonal directions before remaining cells are filled with random letters.

Loading thumbnail…

Fork of Fork of Fork of wordsearch fun

This interactive word search puzzle displays a 15x15 grid of letters where players locate and highlight words from a themed list. The game uses JavaScript DOM events (mousedown, mouseenter, mouseup) for drag-selection across horizontal, vertical, or diagonal paths, with CSS grid for layout and styling. Words are placed randomly using a custom algorithm with up to 100 placement attempts, while empty cells are filled with random letters. Found words are visually marked in the grid and crossed out in the word list.

Loading thumbnail…

Fork of Fork of wordsearch fun

An interactive word search puzzle presents a 15x15 grid of letters containing fifteen themed words, including "SUMMER," "RAIN," and "HAPPY." Players select letters by clicking and dragging across horizontal, vertical, or diagonal paths to highlight and match words from the list. The code uses vanilla JavaScript DOM manipulation and event listeners (`mousedown`, `mouseenter`, `mouseup`) for selection logic, while CSS Grid defines the board layout. Successfully found words become highlighted pink in the grid and are struck through in the word list, with a "New Game" button regenerating the puzzle.

Loading thumbnail…

Fork of wordsearch fun

This interactive word search puzzle presents a 15x15 grid of letters where users select words by dragging across cells. The grid is generated by placing predefined words like "SUMMER" and "ICECREAM" in horizontal, vertical, or diagonal orientations, then filling remaining spaces with random letters. Users highlight letter sequences by clicking and dragging, with selection constrained to straight lines; matching a word from the display list marks it as found with a pink background. The interface uses DOM manipulation and event listeners for mouse interactions, with styling defined in CSS and logic implemented in JavaScript.

Loading thumbnail…

wordsearch fun

A word search puzzle presents a 15x15 grid of letters alongside a list of hidden words. Players click and drag across the grid to select letters, with valid horizontal, vertical, or diagonal selections highlighted as they are traced. The game uses vanilla JavaScript to generate the grid, placing words randomly and filling empty cells with random letters. Found words are marked in the grid and crossed off the list, with a "New Game" button resetting the puzzle for a fresh challenge.

Loading thumbnail…

Fork of Fork of wordsearch fun

This interactive word search puzzle displays 15 programming-related terms hidden in a 15×15 grid of letters. Users click and drag to select letters horizontally, vertically, or diagonally, and matching words become highlighted in the grid and crossed off in the word list. The implementation uses plain JavaScript DOM manipulation with `addEventListener` for mouse events, random placement with collision detection for word positioning, and CSS Grid for rendering the interactive letter cells. The "New Game" button regenerates the puzzle with fresh random placements.

Loading thumbnail…

Fork of wordsearch fun

This interactive word search puzzle displays a 15x15 grid of letters with 15 programming-related terms hidden horizontally, vertically, or diagonally. Players click and drag across the grid to select letter sequences, with valid words receiving permanent green highlighting and appearing crossed off in the word list. The JavaScript implementation uses DOM manipulation and event listeners for mouse interactions, while CSS grid layout structures the puzzle board. A "New Game" button regenerates the puzzle with randomly placed words and fills remaining cells with random letters.

Loading thumbnail…

Fork of Fork of Fork of HTML Starter

This interactive word search game presents a colorful, kid-friendly grid of letters where players select words from a provided list by dragging across adjacent cells. Built with plain JavaScript and the DOM API, the code generates a 15-by-15 grid, randomly places hidden words horizontally, vertically, or diagonally, and fills remaining cells with random letters. Mouse events (mousedown, mouseenter, mouseup) handle selection tracking, and found words are highlighted via CSS classes like `.highlight` and `.found`.

Loading thumbnail…

Fork of HTML Starter

Built with vanilla JavaScript, the example shows a 15-by-15 interactive crossword puzzle with clickable white cells, blocked black cells, and numbered clue lists for Across and Down entries. The `Crossword` class constructs the grid as a DOM grid of `div` and `input` elements, populating letter positions from a small hardcoded word list. Event listeners handle cell focus and letter input, while the CSS applies the layout and puzzle styling. The implementation uses standard DOM APIs such as `document.createElement` and `addEventListener` to manage interaction without external libraries.

Loading thumbnail…

Wave 2

An animated sine wave travels across the canvas, its phase advancing with each frame to create a smooth, continuous motion. The wave’s amplitude, frequency, and speed are fixed, and a static horizontal center line is drawn for reference. The animation relies on the Canvas `path` and `lineTo` API, with `requestAnimationFrame` driving the update loop. The code uses a simple sine function to map x-coordinates to y-positions, and the drawing is rendered in a teal stroke against a white background.

Loading thumbnail…

Fork of Fork of HTML Starter

This animated visualization demonstrates a sine wave traveling across an HTML5 Canvas, with a horizontal center reference line and adjustable wave parameters for amplitude, frequency, and speed. The code uses the Canvas API’s `getContext('2d')` for drawing, `requestAnimationFrame` for smooth animation, and `addEventListener` with the window resize event to maintain a responsive canvas. The wave’s phase updates each frame, creating the motion effect against a white background with a subtle border and shadow.

Loading thumbnail…

Fork of HTML Starter

This example displays a gallery of basic geometric shapes drawn on a responsive HTML5 Canvas, including filled and outlined rectangles, circles, triangles, lines, ellipses, rounded rectangles, and a star. The canvas uses the Canvas 2D API with methods like `fillRect()`, `arc()`, and `quadraticCurveTo()` to render each shape. The drawing routine redraws all shapes whenever the window is resized, adapting the layout to the available screen space.

Loading thumbnail…

Fork of HTML Starter

This interactive color generator displays harmonious color palettes based on color theory principles, presenting six color swatches per scheme with HEX, RGB, and HSL values. Using vanilla JavaScript, the application implements HSL-to-RGB conversion through custom mathematical functions and generates monochromatic, analogous, complementary, triadic, and tetradic schemes. Users click buttons to generate random colors or palettes, and click individual cards to copy hex values to the clipboard. The interface uses CSS grid for responsive layout and CSS transitions for hover effects and animations.

Loading thumbnail…

Fork of HTML Starter

This example renders a minimal HTML page that displays the message “Hello HTML!” in large, centered text. The page structure is defined in `index.html`, with styling supplied by `styles.css`. The included JavaScript file, `index.js`, executes a simple `console.log` output when the page loads, demonstrating a basic client-side script setup.

Loading thumbnail…

Fork of HTML Starter

This example renders a minimal HTML page that displays the message “Hello HTML!” in large, centered text. The page structure is defined in `index.html`, with styling supplied by `styles.css`. The included JavaScript file, `index.js`, executes a simple `console.log` output when the page loads, demonstrating a basic client-side script setup.