https://github.com/Mavitopia/frontend-playground
🚀 A collection of small, fun, and experimental projects 🎨💡
https://github.com/Mavitopia/frontend-playground
angular angularjs bootstrap css css-flexbox css-grid html html-css-javascript html5 javascript jquery projects projects-list responsive training website
Last synced: 6 months ago
JSON representation
🚀 A collection of small, fun, and experimental projects 🎨💡
- Host: GitHub
- URL: https://github.com/Mavitopia/frontend-playground
- Owner: Mavitopia
- License: mit
- Created: 2025-03-05T19:17:25.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-15T19:07:23.000Z (about 1 year ago)
- Last Synced: 2025-05-15T20:23:23.642Z (about 1 year ago)
- Topics: angular, angularjs, bootstrap, css, css-flexbox, css-grid, html, html-css-javascript, html5, javascript, jquery, projects, projects-list, responsive, training, website
- Language: HTML
- Homepage: https://mavitopia.github.io/mini-projects/
- Size: 18.3 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Frontend Playground 🎨💻
A compact collection of small, hands-on front-end projects for learning and experimentation with **HTML, CSS, and JavaScript** — practical, responsive.
[](https://mavitopia.github.io/frontend-playground/)
---
## Projects (short)
A concise list — each project folder contains the source.
- **BreatheFlow** — guided inhale/hold/exhale breathing trainer (minimal UI, responsive).
- **Breakout** — classic paddle-and-bricks arcade game (score, controls).
- **Custom Video Player** — jQuery-based player with playback, fullscreen, speed, progress.
- **RichList Manager** — generate users, simulate wealth operations (double, filter, sort, total).
- **CurrencyX** — simple currency converter (uses randomized/live rates depending on build).
- **Expense Tracker** — basic income/expense recorder (UI-focused).
- **Form Validator** — registration form with live validation and TOS modal.
- **Ageify** — age calculator (years/months/days).
- **BuyCoin** — simulated crypto buy/sell/transfer with random prices.
- **Pricing Table** — static, responsive pricing table demo (UI only).
- **Functional Calendar** — JS calendar with functionality.
- **QuizApp** — multiple-choice quiz with score/results. - Not fully responsive
> Tip: For testing and seeing each project open them in site provided in this repo
---
## Important Note 📝
> **From now on, all new JavaScript projects will be added to the newly created [JS Projects](add later) repository.**
This repo will remain as a showcase of existing front-end experiments.
---
## Quick start
> Best viewed in landscape on mobile.
```bash
git clone https://github.com/Mavitopia/frontend-playground.git
# then open the project's index.html (or each project's folder) in your browser
```
## Tech stack
```
HTML5 · CSS3 · JavaScript (ES6+) · optional jQuery for a few demos
```