JS Projects Collection

10 interactive JavaScript applications exploring APIs, the DOM, and browser features

Live Demo  •  GitHub Repo

---

Overview

A portfolio collection of 10 vanilla JavaScript projects — built without frameworks or libraries. Each project is a self-contained application focused on a specific concept, from consuming third-party APIs to working with native browser features and the DOM.

Projects

#	Project	Description	Live Demo
1	weather-app	Real-time weather data using the OpenWeather API	View
2	to-do-list-app	Add, complete, and delete tasks with local storage	View
3	quiz-app	Interactive quiz with score tracking and instant feedback	View
4	password-generator	Generates secure random passwords with one-click copy	View
5	form-validation	Real-time form validation with custom error handling	View
6	cryptocurrency-website	Live BTC, ETH, and DOGE prices via the CoinGecko API	View
7	qr-code-generator	Generates QR codes for text, links, or contact info	View
8	text-to-speech-converter	Converts typed text into spoken audio using the Web Speech API	View
9	drag-and-drop	Interactive drag-and-drop interface using native HTML5 drag events	View
10	dark-mode-toggle	Theme switcher with preference saved using localStorage	View

Built With

• HTML5 — semantic markup and structure
• CSS3 — responsive layouts, transitions, and theming
• Vanilla JavaScript (ES6+) — application logic, DOM manipulation, and async/await
• External APIs
  • OpenWeather API — live weather data
  • CoinGecko API — cryptocurrency prices
  • QR Server API — QR code generation
  • Web Speech API — text-to-speech synthesis

Running Locally

# Clone the repository
git clone https://github.com/aliza-dev/js-projects.git

# Navigate into the project
cd js-projects

# Open any project in your browser
# (e.g. open the weather app)
open weather-app/index.html

No build step or dependencies required — each project runs directly in the browser.

What I Learned

• Consuming and handling third-party REST APIs with fetch and async/await
• Manipulating the DOM and managing application state without a framework
• Persisting user data across sessions using localStorage
• Working with native browser APIs such as the Web Speech API and HTML5 Drag and Drop
• Writing clean, modular, and maintainable vanilla JavaScript (ES6+)

Author

Aliza Tariq