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 0a6d435698e7c42b57a1dca77e7a68032098fb82 Mon Sep 17 00:00:00 2001 From: atharvachavan289-gif Date: Mon, 11 May 2026 20:04:25 +0530 Subject: [PATCH 3/3] Revise README for clarity and detail Updated the README to enhance the project description, features, usage instructions, and future improvements. --- solarsystem3d/README.MD | 100 +++++++++++++++++++++++----------------- 1 file changed, 57 insertions(+), 43 deletions(-) diff --git a/solarsystem3d/README.MD b/solarsystem3d/README.MD index dc6f59a12..f9195c6b6 100644 --- a/solarsystem3d/README.MD +++ b/solarsystem3d/README.MD @@ -1,62 +1,76 @@ -## A Brief of the Prototype: -# Solar System Visualization +# ๐ŸŒŒ 3D Solar System Visualization -This project is an interactive, web-based visualization of our solar system, created using HTML5 Canvas and JavaScript. It provides an engaging and educational experience for users to explore the planets, asteroid belts, and other celestial bodies in our solar system. +**Welcome to the Solar System Visualization!** This project is an interactive, web-based journey through our solar system, built beautifully using HTML5 Canvas and JavaScript. It provides a highly engaging and educational experience, allowing users to explore planets, asteroid belts, and other celestial bodies right in their browser! -## Features +## โœจ Features -- Realistic representation of the Sun, planets, and their orbits -- Animated planetary motion with varying speeds -- Asteroid belts (Main Asteroid Belt, Earth's Asteroid Belt, and Kuiper Belt) -- Earth's moon (satellite) -- Saturn's rings -- Interactive zoom functionality -- Click-to-view planet information -- Responsive design that adapts to different screen sizes +* **Realistic Rendering:** Features the Sun, planets, Earth's Moon, and beautiful details like Saturn's rings. +* **Dynamic Animations:** Watch planets orbit at varying, realistic speeds. +* **Asteroid Belts:** Accurately features the Main Asteroid Belt, Earth's Asteroid Belt, and the distant Kuiper Belt. +* **Interactive Zoom:** Easily zoom in and out to explore the massive scale of the solar system. +* **Informative Popups:** Click on any planet to instantly view its name and orbit radius! +* **Responsive Design:** Smoothly adapts to fit different screen sizes. -## How to Use +## ๐Ÿ› ๏ธ Technical Details -1. Open the index.html file in a modern web browser. -2. The solar system will automatically start animating. -3. Use the zoom controls in the top-right corner to zoom in and out: - - Click the "+" button to zoom in - - Click the "-" button to zoom out -4. Click on any planet to view its name and orbit radius. -5. Click anywhere else to close the planet information popup. -##Just install live server extension on vs code and run the index.htmnl file on it and enjoy +* **HTML5 Canvas:** Powers the high-performance rendering of the space environment. +* **Vanilla JavaScript:** Handles all the complex math, orbital animations, and user interactivity. +* **Dynamic Assets:** Planet images are loaded dynamically from an `images` folder to keep the code clean. +* **Custom Zoom Engine:** Built from scratch to allow users to dive deep into the details of the solar system. +## ๐Ÿš€ How to Run It on Your Computer -## Technical Details +**The Easiest Way (Using VS Code):** +1. Open the project folder in Visual Studio Code. +2. Install the **Live Server** extension. +3. Right-click the `index.html` file and select **"Open with Live Server"**. The animation will start automatically! -- The visualization is built using HTML5 Canvas for rendering. -- JavaScript is used for animation and interactivity. -- Planet images are loaded dynamically (ensure the images folder is present with appropriate planet images). -- The project uses a custom zoom implementation to allow users to explore the solar system in detail. +**The Standard Way:** +1. Clone the repository: + ```bash + git clone [https://github.com/atharvachavan289-gif/Web-dev-mini-projects.git](https://github.com/atharvachavan289-gif/Web-dev-mini-projects.git) + +Navigate to the solarsystem3d folder. -## Customization +Make sure the images folder is present with the appropriate planet images. -You can easily customize various aspects of the visualization: +Double-click index.html to open it in any modern web browser (Chrome, Firefox, Safari, or Edge). -- Adjust planet sizes, colors, and orbit radii in the planets array. -- Modify the number and properties of asteroids in the asteroidBelt, earthAsteroidBelt, and kuiperBelt arrays. -- Change the appearance of Saturn's rings by modifying the saturnRings object. -- Adjust the zoom limits by changing the maxZoom and minZoom variables. +๐ŸŽฎ How to Use & Explore +Zoom In/Out: Use the "+" and "-" zoom controls located in the top-right corner of the screen. -## Browser Compatibility +Get Info: Click directly on any planet to reveal a popup with its details. -This visualization should work in all modern web browsers that support HTML5 Canvas. For the best experience, use the latest version of Chrome, Firefox, Safari, or Edge. +Close Info: Click anywhere else in the empty space background to close the planet info popup. -## Known Issues +โš™๏ธ Customization +Want to make your own universe? You can easily tweak the JavaScript code to customize the visualization: -- The background space sound may not autoplay in some browsers due to autoplay restrictions. Users may need to interact with the page first to start the audio. +Planets: Adjust sizes, colors, and orbit radii directly in the planets array. -## Future Improvements +Asteroids: Modify the density and properties inside the asteroidBelt, earthAsteroidBelt, and kuiperBelt arrays. -- Add more detailed information for each planet -- Implement touch controls for mobile devices -- Add options to adjust animation speed -- Include more celestial bodies like dwarf planets and comets +Saturn's Rings: Change their appearance via the saturnRings object. -## Credits +Zoom Limits: Tweak the maxZoom and minZoom variables to restrict or expand how far users can zoom. -This Solar System Visualization was created as an educational project. Planet images and astronomical data are based on publicly available information from NASA and other space agencies. +โš ๏ธ Known Issues & Compatibility +Browser Support: Works perfectly in all modern web browsers supporting HTML5 Canvas. + +Audio Autoplay: Modern browsers often block audio from playing automatically. If you don't hear the background space ambiance, simply click anywhere on the page to start the audio! + +๐Ÿ”ฎ Future Improvements +We are always looking to expand the universe! Planned updates include: + +Adding more detailed astronomical information for each planet. + +Implementing touch controls for seamless mobile device exploration. + +Adding a slider to adjust the animation speed of the orbits. + +Including more celestial bodies like dwarf planets (Pluto!) and comets. + +๐Ÿ™Œ Credits +This Solar System Visualization was created as a fun, educational project. The planet images and astronomical data are inspired by publicly available information from NASA and other amazing space agencies. + +Happy Exploring! ๐Ÿ’ป๐Ÿš€