Practice Projects Collection

This repository contains a collection of web development practice projects showcasing various technologies and concepts. Each project demonstrates different aspects of frontend development, from simple HTML/CSS/JavaScript applications to React-based projects.

📁 Projects Overview

1. 🔗 Link2QR - QR Code Generator

Location: Link2QR/
Technology: React.js
Description: A modern React application that generates QR codes from URLs.

Features:

• Convert any valid URL into a QR code
• Input validation for proper URL format
• Customizable QR code size
• Clean, responsive user interface
• Real-time QR code generation

How to Run:

cd Link2QR
npm install
npm start

2. 🔐 Password Analyzer

Location: Password_Analyzer/
Technology: HTML, CSS, JavaScript (with zxcvbn library)
Description: A client-side password strength analyzer that evaluates password security.

Features:

• Real-time password strength analysis
• Uses the zxcvbn library for accurate scoring
• Provides detailed feedback on password weaknesses
• Clean, user-friendly interface
• No server-side processing (privacy-focused)

How to Run: Simply open pass.html in your web browser.

3. 🌡️ Temperature Converter

Location: Temp converter/
Technology: HTML, CSS, JavaScript
Description: A simple temperature conversion tool with an elegant interface.

Features:

• Convert between Celsius, Fahrenheit
• Real-time conversion calculations
• Clean, centered layout with shadow effects
• Input validation

How to Run: Simply open index.html in your web browser.

4. 🌤️ Weather API Project

Location: weather_api_project/
Technology: HTML, CSS, JavaScript (with WeatherAPI integration)
Description: A weather application that fetches real-time weather data for any location.

Features:

• Real-time weather data fetching
• Location-based weather information
• Displays temperature, weather condition, humidity, and wind speed
• Error handling for invalid locations
• Clean, responsive interface
• Uses WeatherAPI for accurate data

How to Run:

1. Open index.html in your web browser
2. Enter any city or location name
3. Click "Get Weather" to fetch current weather data

Note: The project includes an API key for WeatherAPI. For production use, replace with your own API key.

🛠️ Technologies Used

• Frontend Frameworks: React.js
• Languages: HTML5, CSS3, JavaScript (ES6+)
• Libraries:
  • zxcvbn (password strength estimation)
  • React hooks (useState)
• APIs: WeatherAPI
• Build Tools: Create React App, npm
• Styling: CSS3 with Flexbox, responsive design

🎯 Learning Objectives

These projects demonstrate:

• React Development: Component-based architecture, hooks, state management
• API Integration: Fetching data from external APIs, error handling
• Form Validation: Input validation and user feedback
• Responsive Design: Mobile-friendly layouts and modern CSS
• JavaScript Fundamentals: DOM manipulation, event handling, async operations
• Third-party Libraries: Integration of external libraries and services