diff --git a/Loan Calculator/readme.md b/Loan Calculator/readme.md index 34a8b98cb..67aa68568 100644 --- a/Loan Calculator/readme.md +++ b/Loan Calculator/readme.md @@ -1,33 +1,33 @@ -# Loan Calculator using JS +# ๐ฐ Loan Calculator -## About the Project -
User enters three values - Loan Amount, interest and number of months. After that, EMI and total payment will be displayed on the screen
+**Welcome to the Loan Calculator!** This is a simple and useful web application that helps you calculate your Equated Monthly Installment (EMI). Just enter your loan amount, interest rate, and the number of months, and the app will instantly show you your monthly EMI and total payment! -## Use of the Project: +## โจ Features -To Calculates the Loan EMI (Equated Monthly Installment)
+* **Quick Calculations:** Instantly calculates your Loan EMI based on your inputs. +* **Clear Results:** Displays both the monthly installment and the total payment required. +* **Default Values:** Starts with sample values so you can see exactly how it works right away. -## Tech Stacks Used +## ๐ ๏ธ Technologies Used +This project is built using standard web technologies: - - - +* **HTML:** To build the structure of the calculator. +* **CSS:** To style the application and make it look clean. +* **JavaScript:** To handle the math and update the screen instantly. -## Steps to Use: +## ๐ How to Run It on Your Computer ---- +It is very easy to run this project. You do not need to install any special software! -- Download or clone the repository +**1. Download the code:** Open your terminal and clone the repository: +```bash +git clone [https://github.com/Ayushparikh-code/Web-dev-mini-projects.git](https://github.com/Ayushparikh-code/Web-dev-mini-projects.git) +2. Go to the directory: Move into the main folder and find the Loan Calculator project. -``` -git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git -``` - -- Go to the directory -- Run the index.html file -- Start Calculating! +3. Run the app: Double-click the index.html file to open it in your default web browser (like Chrome, Firefox, or Edge). +4. Start Calculating: Enter your loan details and see the results instantly! ## Screenshots Initially, the calculator have some default values: @@ -40,4 +40,4 @@ After entering the values, UI looks like: ## Live Demo -
\ No newline at end of file
+
diff --git a/breaking-bad-characters/README.md b/breaking-bad-characters/README.md
index b80369463..f44212945 100644
--- a/breaking-bad-characters/README.md
+++ b/breaking-bad-characters/README.md
@@ -1,33 +1,44 @@
-# Breaking Bad Characters - React Application
+# ๐งช Breaking Bad Characters Explorer
-## About the Project
-A single page web application that uses the breaking bad API to display and filter characters from the show
+A sleek, single-page React application that fetches and displays character data from the Breaking Bad universe. Users can easily browse and dynamically filter through their favorite characters using real-time API data.
-## Technologies Used
+This project is part of the `Web-dev-mini-projects` collection.
-- React
- - Hooks
- - Components
-- CSS
- - CSS Grid
-- Javascript
- - Axios
- - ES6
-- API
- - Breaking Bad API
+## โจ Key Features
+* **Dynamic Grid Layout:** Displays character profiles in a highly responsive CSS Grid.
+* **Live Filtering:** Instantly search and filter characters by name.
+* **API Integration:** Asynchronously fetches character details (like name, nickname, and portrait) from an external endpoint.
+## ๐ ๏ธ Tech Stack
+* **Frontend Framework:** React (Functional Components & Hooks)
+* **Styling:** CSS3 (focused on CSS Grid for layout)
+* **JavaScript:** ES6+ syntax
+* **Data Fetching:** Axios for handling asynchronous HTTP requests
-## API Used
-Breaking Bad Character API
+## ๐ก API Reference
+This project relies on the Breaking Bad Character API to populate the user interface.
+* **Endpoint Used:** `https://www.breakingbadapi.com/api/characters`
-Link : https://www.breakingbadapi.com/api/characters
+## ๐โโ๏ธ How to Run Locally
-## How to use the Project
+To get this React application running on your local machine, follow these steps:
-1. Download or clone the repository `git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git`
-2. Go to the directory
-3. Open the terminal, and type `npm start`
+1. **Clone the repository:**
+ ```bash
+ git clone [https://github.com/Ayushparikh-code/Web-dev-mini-projects.git](https://github.com/Ayushparikh-code/Web-dev-mini-projects.git)
+Navigate to the directory:
+Open your terminal and change into the specific Breaking Bad project folder.
+Install dependencies:
+Because this project uses React and Axios, you must install the Node modules first:
+
+Bash
+npm install
+Start the development server:
+
+Bash
+npm start
+The application will automatically compile and open in your default browser at http://localhost:3000
## Screenshots
diff --git a/speed-distance-time-calculator/readme.md b/speed-distance-time-calculator/readme.md
index f45819b1b..ed56c50e0 100644
--- a/speed-distance-time-calculator/readme.md
+++ b/speed-distance-time-calculator/readme.md
@@ -1,5 +1,34 @@
-# Welcome ๐ to the Speed-Distance-Time Calculator Website
-It is a multi pager Speed Distance Time Calculator with simple but user-friendly design.
+# โฑ๏ธ Speed-Distance-Time Calculator
+
+A clean, multi-page web application designed to instantly calculate speed, distance, or time. Featuring a simple and user-friendly interface, this tool provides dedicated calculation pages for each specific metric to ensure a frictionless user experience.
+
+This project is part of the `Web-dev-mini-projects` collection.
+
+## โจ Key Features
+* **Multi-Page Architecture:** Dedicated pages tailored specifically for calculating Speed, Time, and Distance individually.
+* **Instant Results:** Performs mathematical conversions and calculations in real-time.
+* **Intuitive UI:** A straightforward, accessible design that makes navigation and data entry effortless.
+* **No Dependencies:** Built entirely with pure web technologies for rapid load times.
+
+## ๐ ๏ธ Tech Stack
+* **HTML5:** Semantic structure and multi-page routing.
+* **CSS3:** Custom styling for a clean, responsive layout.
+* **Vanilla JavaScript:** Mathematical logic and DOM manipulation.
+
+## ๐โโ๏ธ How to Run Locally
+
+Getting this project running on your machine takes just a few seconds:
+
+1. **Clone the repository:**
+ ```bash
+ git clone [https://github.com/Ayushparikh-code/Web-dev-mini-projects.git](https://github.com/Ayushparikh-code/Web-dev-mini-projects.git)
+Navigate to the correct directory:
+Open your terminal and change into the specific calculator folder:
+
+Bash
+cd Web-dev-mini-projects/speed-distance-time-calculator
+Run the application:
+Simply double-click the index.html file to open the Homepage in your default web browser. (Alternatively, use the "Live Server" extension in VS Code for a better development experience).
## Default view of the website
HOMEPAGE
@@ -25,23 +54,6 @@ Distance Calculator