From 4aa79a3ea63c45cbf9bc50c1b0ba7513cc0bf094 Mon Sep 17 00:00:00 2001 From: atharvachavan289-gif Date: Wed, 22 Apr 2026 20:37:09 +0530 Subject: [PATCH 1/3] Revise README for Breaking Bad Characters project Updated project description, features, and usage instructions in README. --- breaking-bad-characters/README.md | 53 +++++++++++++++++++------------ 1 file changed, 32 insertions(+), 21 deletions(-) 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 From 22fd21b958065a6c72beba5fbed728864070ec8e Mon Sep 17 00:00:00 2001 From: atharvachavan289-gif Date: Thu, 23 Apr 2026 19:30:01 +0530 Subject: [PATCH 2/3] Revise readme with project details and setup instructions Expanded the readme to provide detailed project information, features, tech stack, and instructions for local setup. --- speed-distance-time-calculator/readme.md | 50 +++++++++++++++--------- 1 file changed, 31 insertions(+), 19 deletions(-) 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
-### How to get the website on your local machine: - ---- - -- Download or clone the repository - -``` -git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git -``` - -- Go to the directory -``` -cd speed-distance-time-calculator -```` - - Run the index.html file and see the results - -
## Happy Coding! From 8d252d70738c37d640b78cd588acbf34fe425276 Mon Sep 17 00:00:00 2001 From: atharvachavan289-gif Date: Sun, 10 May 2026 15:54:06 +0530 Subject: [PATCH 3/3] Revise README for Text to Speech Converter Updated README to enhance clarity and add features. --- text to speech/README.md | 45 +++++++++++++++++++++------------------- 1 file changed, 24 insertions(+), 21 deletions(-) diff --git a/text to speech/README.md b/text to speech/README.md index 956ae07bf..d10f73b59 100644 --- a/text to speech/README.md +++ b/text to speech/README.md @@ -1,35 +1,38 @@ -# Welcome πŸ– to Text to Speech converter -It a simple text to speech converter where you can write can listen to it.. +# πŸ—£οΈ Text to Speech Converter +**Welcome πŸ– to the Text to Speech Converter!** This is a simple, intuitive web application that brings your words to life. Just type in whatever you want to hear, and the app will read it out loud to you! It is a great mini-project to learn about web accessibility and browser APIs. -## πŸ’»Tech Stack -
+## ✨ Features -![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white) -![CSS](https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white) -![JS](https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) +* **Instant Audio:** Converts your written text into spoken audio instantly. +* **Easy to Use:** A simple and clean interfaceβ€”just type and listen! +* **Beginner Friendly:** A great showcase of how to use JavaScript to interact with built-in browser speech functionalities. -
+## πŸ’» Tech Stack -### How to get the game on your local machine: +This project is built using the core technologies of the web: ---- +* **HTML5:** To build the structure and the text input area. +* **CSS3:** To style the application and make the interface look great. +* **JavaScript:** To capture the text and trigger the browser's Text-to-Speech API. -- Download or clone the repository +## πŸš€ How to Run It on Your Computer -``` -git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git -``` +It is very easy to get this app running locally. No special software or server is needed! -- Go to the directory -- Run the index.html file -- Write the text and then click on submit to listen to the audio. +**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. Open the project folder: Navigate into the main repository folder and find the Text to Speech directory. -
+3. Run the app: Find the index.html file inside the folder and double-click it. It will open right up in your default web browser (like Chrome, Firefox, or Edge). -### How to use -1. Write the text which you want to listen in audio. -2. Click submit. +🎧 How to Use +Write your text: Click on the text box and type or paste the text you want to listen to. + +Submit: Click the "Submit" button. + +Listen: Make sure your volume is up and listen to the audio playback! The web app looks some how like this: ![txt to speech](https://user-images.githubusercontent.com/76838660/126274006-189a20c0-9176-4d71-9224-5f6e6a82e11e.PNG)