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 27930aba5c7b95986d1f0fea28c8b69cffee8698 Mon Sep 17 00:00:00 2001 From: atharvachavan289-gif Date: Thu, 30 Apr 2026 10:58:16 +0530 Subject: [PATCH 3/3] Revise README for Basic Background Generator Updated the README to enhance clarity and presentation of the Basic Background Generator project, including feature highlights and usage instructions. --- Basic Background Generator/Readme.md | 65 ++++++++++++++-------------- 1 file changed, 32 insertions(+), 33 deletions(-) diff --git a/Basic Background Generator/Readme.md b/Basic Background Generator/Readme.md index 1220baf54..cd30d9b8c 100644 --- a/Basic Background Generator/Readme.md +++ b/Basic Background Generator/Readme.md @@ -1,36 +1,35 @@ -

BASIC BACKGROUND GENERATOR

- -

A basic gradient Background Generator which allows you to create a background by selecting your required colors. This will make up a gradient mix and provide you the code line so that you can use it in your Website

-
- -

Tech Stack Used

-
- -

HTML -CSS -JS

- -

How to use:

-
- -
    -
  • Download or clone the repository
    • -
    
-  git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
-
    - -
  • Go to the directory
    • -
  • Run the index.html file in your browser
    • -
  • Start creating your own gradient background
    • -
- -

Use of the Project

- -

-This project aims to find the best looking background gradient for your project. You just have to select the colors you want from the color picker and then copy the code displayed and paste into your code as background color. -It's That Simple!! -

-

+๐ŸŽจ Basic Background Generator +A simple, interactive web tool that allows you to create custom CSS linear-gradient backgrounds. Select your desired colors, preview the gradient in real-time, and instantly copy the generated CSS code to use in your own web projects. + +โœจ Features +Real-Time Preview: Watch the background change instantly as you pick new colors. + +Easy Color Selection: Uses native HTML color pickers for a smooth experience. + +One-Click Code: Automatically generates the exact CSS background property you need. + +No Dependencies: Built with pure HTML, CSS, and Vanilla JavaScript. + +๐Ÿš€ How to Use +Follow these steps to run the project locally: + +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 project directory: +(Note: Adjust the folder name below to match the exact folder of this app within the repository) + +Bash +cd Web-dev-mini-projects/Background-Generator +Run the app: +Open the index.html file in your preferred web browser. + +Start creating: +Use the color pickers on the screen to choose your colors. Once you find a mix you like, copy the CSS code displayed on the screen and paste it directly into your stylesheet! + +๐Ÿ’ก Use Case +Finding the perfect gradient for your website can be tedious. This project aims to simplify that process. Instead of guessing hex codes, you can visually experiment with different color combinations and immediately get the ready-to-use CSS code. It's that simple!

image