https://github.com/pranavhendre02/javascript_project
JavaScript Projects - Learn JS Through Hands-on Mini Projects This repository contains beginner-friendly JavaScript projects designed to help you learn and practice core JavaScript concepts. Each project is built with HTML, CSS, and JavaScript, focusing on real-world applications.
https://github.com/pranavhendre02/javascript_project
javascript javascript-library javascriptes6
Last synced: 7 days ago
JSON representation
JavaScript Projects - Learn JS Through Hands-on Mini Projects This repository contains beginner-friendly JavaScript projects designed to help you learn and practice core JavaScript concepts. Each project is built with HTML, CSS, and JavaScript, focusing on real-world applications.
- Host: GitHub
- URL: https://github.com/pranavhendre02/javascript_project
- Owner: PranavHendre02
- Created: 2025-02-15T20:00:55.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-17T20:59:26.000Z (12 months ago)
- Last Synced: 2025-05-17T21:30:28.121Z (12 months ago)
- Topics: javascript, javascript-library, javascriptes6
- Language: HTML
- Homepage: https://pranavhendre02.github.io/Javascript_Project/
- Size: 3.2 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# JavaScript Projects
🔗 Live Demo: [Click Here](https://pranavhendre02.github.io/Javascript_Project/)
## 📌 Overview
This repository contains **beginner-friendly JavaScript projects** designed to help you **learn and practice core JavaScript concepts**. Each project is built with **HTML, CSS, and JavaScript**, focusing on real-world applications.
---
## 🚀 Projects Included
### 🌍 **Currency Converter API-Based Project**
🔗 Live Demo:[Currency Convertor]( https://pranavhendre02.github.io/Javascript_Project/currency%20convertor/index.html)
- Fetches and displays **dynamic data** using JavaScript APIs.
- Demonstrates **fetch() API**, JSON handling, and asynchronous JavaScript.
- Interactive UI for seamless user experience.
---
### ⏰ **Digital Clock**
🔗 Live Demo: [Digital Clock](https://pranavhendre02.github.io/Javascript_Project/digital%20clock/)
- A stylish **analog + digital clock** that updates in real-time.
- Uses **JavaScript's Date object** to display accurate time.
- Features a glowing **3D effect UI**.
---
### ➕ **Calculator**
🔗 Live Demo: [Calculator]( https://pranavhendre02.github.io/Javascript_Project/calculator/index.html)
- A **modern interactive calculator** with:
- Basic arithmetic operations: **+, -, *, /**
- **Trigonometric functions**: sin, cos, tan
- **Square root calculation** using `Math.sqrt()`
- Stylish **3D button effects** for an enhanced user experience.
---
### 📱 **QR Code Generator**
🔗 Live Demo: [QR CODE ]( https://pranavhendre02.github.io/Javascript_Project/QR%20code%20genrator/index.html)
- Users can enter any **text or URL**, and the QR code is generated dynamically.
- Uses the **QRCode() method** from **QRCode.js**.
- **Highest error correction level** (H - 30%) ensures accuracy even with distortions.
- **Blurry Glass UI** with a **linear gradient background**.
- **Fully responsive design** with **auto-resizing QR codes**.
---
### 🎤 **Text-To-Speech Converter**
🔗 Live Demo: [Text-To-Speech](https://pranavhendre02.github.io/Javascript_Project/Text%20to%20Speech/index.html)
- Converts user-entered **text into speech** using JavaScript's built-in `SpeechSynthesisUtterance` API.
- Provides **play, pause, and stop** controls for user convenience.
- Supports **multiple voices and languages** (depending on the browser).
- Simple and responsive UI for seamless interaction.
---
## 🛠️ Technologies Used
- **HTML5** - Page structure and elements.
- **CSS3** - Styling, layout, UI effects, filters, and responsive design.
- **JavaScript (ES6)** - Core logic, event handling, and API interactions.
- **QRCode.js** - External JavaScript library for generating QR codes.
---
## 📌 How to Use
1. **Clone the repository**:
```sh
git clone https://github.com/PranavHendre02/Javascript_Project.git
```
2. **Navigate to the project folder** and open the respective project files (`index.html`) in a browser.
3. **Experiment and learn JavaScript through hands-on coding!** 🚀
---
### 🤝 Contributing
If you'd like to contribute, feel free to **fork** the repository and submit a **pull request**!
---
### 👨💻 Author
Developed by **Pranav Hendre** 🚀