PDF

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

AI Translator and Tone Converter in Google Sheets

by

🌍 Build an AI Translator & Tone Converter in Google Sheets (with Gemini & Apps Script) Github https://github.com/lsvekis/Google-Apps-Script-Gemini-Projects 🚀 Overview In this exercise, you’ll learn how to connect Google Sheets to Gemini’s REST API using Apps Script, enabling you to automatically translate text and rewrite it in different tones — all directly from your spreadsheet. … Read more

AI Grammar and Clarity Enhancer in Google Sheets

by

Github https://github.com/lsvekis/Google-Apps-Script-Gemini-Projects/tree/main/AI%20Grammar%20and%20Clarity%20Enhancer%20in%20Google%20Sheets 🎯 Learning Objectives By completing this exercise, learners will: 🧠 What You’ll Build You’ll create an AI-powered Grammar and Clarity Enhancer directly in Google Sheets.This app will: 🧾 Step 1: Create the Files In Apps Script, create: 📂 gemini-sheets-grammar/ ├── Code.gs ├── Sidebar.html ├── appsscript.json 💻 Step 2: Code.gs Paste the following code: … Read more

Build an AI Text Rewriter in Google Sheets Using Gemini and Apps Script

by

Artificial intelligence is no longer limited to chat interfaces — you can now embed powerful AI tools directly into your favorite Google Workspace apps. In this tutorial, we’ll walk through how to build an AI Text Rewriter inside Google Sheets using Google Apps Script and the Gemini REST API. GitHub https://github.com/lsvekis/Google-Apps-Script-Gemini-Projects/tree/main/AI%20Text%20Rewriter%20in%20Google%20Sheets By the end, you’ll … Read more

Build an AI-Powered Text Summarizer in Google Sheets Using Gemini

by

Github Repo https://github.com/lsvekis/Build-an-AI-Powered-Text-Summarizer-in-Google-Sheets-Using-Gemini Get your Gemini API Key https://aistudio.google.com/app/api-keys 🗓️ Overview You’ll learn how to connect Google Sheets with Gemini AI, create custom menu options, build a sidebar UI, and summarize text automatically — all powered by Google Apps Script and the Gemini REST API. At the end, you’ll have a working app that looks … Read more

Google Apps Script Dynamic Sheets Data Survey

by

Code at GitHub https://github.com/lsvekis/Apps-Script-Survey/tree/main Build a Data-Driven Survey Web App with Google Sheets + Apps Script If you’ve ever wished Google Forms gave you more control over styling, page flow, and your data model, this pattern is for you. Below is a practical, beginner-friendly recipe for building a custom, multi-page survey that reads questions from … 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

Learn JavaScript 10 Exercises with Code

by

Download PDF Download Source Code 21) DOM Traversal Visualizer Build: Click any nested element to highlight the target, its ancestors, and its siblings, and show the path to root.Objectives: closest, parents/children/siblings, DOM introspection.Steps: Open file → click around the left “tree” → watch highlights and path update.Code (save as exercise21_traversal.html) <!doctype html> <html lang=”en”> <head> … Read more