JavaScript DOM lessons

JavaScript DOM & Canvas Mini-Games — Exercises 91–100 (Pure JavaScript Edition)

by

Github https://github.com/lsvekis/JavaScript-DOM-Exercises/ Welcome back to the next chapter of the 100-exercise JavaScript DOM & Canvas series! If you’ve been following along, you already know the mission: ✨ Learn real JavaScript by building small, visual, interactive projects — with no frameworks and no complexity. Just vanilla JS, DOM APIs, Canvas 2D, and Web APIs, the way … Read more

JavaScript DOM & Canvas Games — Exercises 81–90

by

Github https://github.com/lsvekis/JavaScript-DOM-Exercises/ If you’ve ever tried to learn JavaScript and thought, “I get the syntax, but I’m not sure how to actually build things,” this set of mini-games is for you. Exercises 81–90 are part of a larger “JavaScript DOM Games” series: self-contained, vanilla JS projects that live in a single HTML file. No build … Read more

JavaScript DOM & Canvas Games — Exercises 51–60

by

🎮 JavaScript DOM & Canvas Games — Exercises 51–60 Github https://github.com/lsvekis/10-JavaScript-DOM-Coding-Games-Learn-by-Building-Fun-Mini-Projects/tree/main/Games%2051-60 Where Code Meets Creativity The DOM is your playground, and JavaScript is the tool that brings it to life.In this latest collection of interactive exercises (51–60), you’ll take your front-end skills to the next level — blending DOM manipulation, Canvas drawing, motion physics, and … Read more

JavaScript DOM Games — Exercises 31–40

by

🎮 Hands-On DOM Coding for Creative Front-End Learners Learning JavaScript is best done by doing — especially when it’s fun.This new set of 10 DOM-based mini-games (Exercises 31–40) builds on previous collections, pushing your understanding of interactivity, animation, and user input even further. Github https://github.com/lsvekis/10-JavaScript-DOM-Coding-Games-Learn-by-Building-Fun-Mini-Projects/tree/main/Games%2031-40 Each mini-project explores a different concept through code you can … Read more

10 More JavaScript DOM Games — A Hands-On Guide (Exercises 11–20)

by

Github https://github.com/lsvekis/10-JavaScript-DOM-Coding-Games-Learn-by-Building-Fun-Mini-Projects 🕹️ Exercise 11 – Moving Target Goal: click a moving dot as many times as you can in 15 seconds. How it works: Concepts practiced: timed animation loops, random positioning, updating DOM text. Learning outcome: working with layout geometry (offsetWidth, getBoundingClientRect()), intervals, and event listeners. 🎯 Exercise 12 – Number Guess (1–100) Goal: … Read more

10 More JavaScript DOM Games — Learn by Building (Vanilla JS)games 21 -30

by

🎮 10 Even More JavaScript DOM Games — Learn by Building (Vanilla JS) Get code https://github.com/lsvekis/10-JavaScript-DOM-Coding-Games-Learn-by-Building-Fun-Mini-Projects/ Miss the joy of learning JavaScript by making tiny interactive things? This sequel brings 10 new DOM mini-games (Exercises 21–30) you can run by simply opening an index.html. They’re built with vanilla JavaScript, HTML, and a dash of CSS—no … Read more

10 JavaScript DOM Coding Games — Learn by Building Fun Mini Projects

by

Github https://github.com/lsvekis/10-JavaScript-DOM-Coding-Games-Learn-by-Building-Fun-Mini-Projects/ https://discoveryvip.com/games.html see them live JavaScript and the Document Object Model (DOM) form the foundation of every interactive web page. The best way to truly master them is to build something — and that’s exactly what these ten small games are designed to help you do. Each exercise is fully self-contained, runs right in … Read more

JavaScript DOM Coding Exercises

by

41) Canvas Signature Pad + Save PNG — exercise41_signature_pad.html <!doctype html> <html lang=”en”> <head> <meta charset=”utf-8″> <title>Signature Pad — Canvas + Pointer Events</title> <!– Build: Simple signature/drawing pad using <canvas> + Pointer Events with Save PNG. Objectives: – Use pointerdown/move/up/cancel to draw smooth lines on a canvas. – Handle DPR (devicePixelRatio) for crisp rendering. – … Read more

JavaScript DOM Coding Exercises

by

31) MutationObserver: Live DOM Change Log Build: A playground that logs DOM changes (add/remove nodes, attribute/text changes) from a target container in real time.Objectives: 32) IntersectionObserver: Lazy Images + Sentinels Build: A grid of 60 images that load only when they approach the viewport; a sentinel at the end indicates “end reached.”Objectives: 33) Drag & … Read more

JavaScript DOM Coding Exercises with code and images

by

11) Tabs Component (ARIA) Build: Keyboard-accessible tab interface with ARIA roles/states and panels.Objectives: 12) Accordion (ARIA) Build: Single-expand/collapse FAQ-style accordion with semantic buttons and ARIA linkage.Objectives: 13) Live Search with Debounce Build: Product cards filtered by a debounced input; matches highlighted.Objectives: 14) Countdown + Progress Bar Build: 10-second timer that updates a <progress> bar and … Read more