A collection of interactive JavaScript mini projects for practice and portfolio use.
All projects are built with HTML, CSS, and vanilla JavaScript, fully responsive and keyboard-friendly.
💡 Each project is available online through GitHub Pages.
Click the blue button above or visit:
👉 https://lilarosa.github.io/javaScript-practice/
| # | Project | Description | Core Concepts |
|---|---|---|---|
| 01 | 🎯 Number Guessing | Guess a number between 1–100 with hints. | DOM, Events, Game logic |
| 02 | 🗒️ To-Do List | Add / complete / delete tasks (saved in localStorage). | Array, localStorage |
| 03 | ⏱️ Stopwatch / Timer | Dual-mode timer with laps and countdown beep. | setInterval, Date |
| 04 | ✅ Form Validator | Email, password strength, confirm match. | Regex, Input validation |
| 05 | 🧮 Calculator | + − × ÷, AC/C, backspace, %, decimal, keyboard. | Math logic, State handling |
| 06 | 🖼️ Image Gallery | Thumbnails + Lightbox with keyboard nav. | DOM, Lightbox, UX |
| 07 | 🐹 Whack-a-Mole | Hit the mole within 60 s to score points. | Random, Events, Game loop |
| 08 | 📝 Survey System | Client-side form + bar chart summary. | Forms, localStorage, Canvas |
Eine Sammlung von interaktiven JavaScript-Mini-Projekten, ideal zum Üben und als Portfolio-Beispiele.
Alle Projekte sind mit HTML, CSS und reinem JavaScript erstellt, vollständig responsiv und tastaturfreundlich.
💡 Alle Projekte sind online über GitHub Pages verfügbar:
👉 https://lilarosa.github.io/javaScript-practice/
| Nr. | Projekt | Beschreibung | Kernkonzepte |
|---|---|---|---|
| 01 | 🎯 Zahlenraten | Zahl 1–100 erraten, mit Tipps höher/tiefer. | DOM, Events, Spiel-Logik |
| 02 | 🗒️ Aufgabenliste | Aufgaben hinzufügen / abhaken / löschen (localStorage). | Array, localStorage |
| 03 | ⏱️ Stoppuhr / Timer | Zwei Modi, Rundenzeiten, Countdown-Signalton. | setInterval, Zeitsteuerung |
| 04 | ✅ Formular-Validierung | E-Mail, Passwortstärke, Bestätigung. | Regex, Input-Prüfung |
| 05 | 🧮 Taschenrechner | + − × ÷, AC/C, Rücktaste, %, Dezimal, Tastatur. | Rechenlogik, Zustände |
| 06 | 🖼️ Bildergalerie | Thumbnails mit Lightbox-Vorschau. | DOM, Lightbox, UX |
| 07 | 🐹 Maulwurfspiel | Triff so viele Maulwürfe wie möglich in 60 Sek. | Zufall, Events, Spielschleife |
| 08 | 📝 Umfragesystem | Formular + Balkendiagramm-Auswertung lokal. | Formulare, localStorage, Canvas |
这是一个包含 8 个 JavaScript 互动小项目 的学习与展示合集。
所有项目均使用 HTML、CSS 与原生 JavaScript 编写，支持响应式设计与键盘操作。
💡 所有项目可在线访问（GitHub Pages 托管）：
👉 https://lilarosa.github.io/javaScript-practice/
| 编号 | 项目 | 简介 | 核心概念 |
|---|---|---|---|
| 01 | 🎯 猜数字 | 猜 1–100 之间的数字，提示高/低。 | DOM 操作、事件处理 |
| 02 | 🗒️ 待办清单 | 添加 / 完成 / 删除任务（localStorage 保存）。 | 数组操作、本地存储 |
| 03 | ⏱️ 秒表 / 倒计时 | 双模式计时器，支持圈速和倒计时提醒。 | 定时器、时间控制 |
| 04 | ✅ 表单验证 | 邮箱验证、密码强度、确认密码。 | 正则表达式、输入验证 |
| 05 | 🧮 计算器 | 加减乘除、清除、退格、百分比、小数、键盘输入。 | 运算逻辑、状态管理 |
| 06 | 🖼️ 图片库 | 缩略图 + 弹窗预览，支持左右键切换。 | DOM、Lightbox、交互 |
| 07 | 🐹 打地鼠 | 60 秒内尽量多击中地鼠，计分反馈。 | 随机数、事件、循环 |
| 08 | 📝 问卷系统 | 本地问卷统计 + 柱状图展示。 | 表单、localStorage、Canvas |
- Website / Live Demo: https://lilarosa.github.io/js-practice/
- Repository: https://github.com/lilarosa/javaScript-practice/
- Author: Tao
🧩 Responsive, multilingual, and built with pure JavaScript – ideal for study, showcase, or teaching use.