diff --git a/Geography Table/README.md b/Geography Table/README.md index c2a1af0c2..a8ab47783 100644 --- a/Geography Table/README.md +++ b/Geography Table/README.md @@ -1,35 +1,35 @@ -# Geography Table +# ๐ŸŒ Geography Table -This project displays a table of countries and their respective capitals and continents. The table is styled with CSS to improve readability and visual appeal. +**Welcome to the Geography Table project!** This is a simple and beautifully styled web page that displays a neat table of countries along with their respective capitals and continents. It is a great example of how to use CSS to take plain data and make it visually appealing and easy to read. -## Features +## โœจ Features -- Displays country information including S.NO, Name, Capital, and Continent. -- Styled with CSS to enhance readability. -- Alternating row colors for better visual distinction. -- Hover effect on rows for easier navigation. +* **Clear Data Display:** Shows well-organized information including S.NO, Country Name, Capital, and Continent. +* **Alternating Row Colors:** Uses a "zebra-striping" effect for better visual distinction between rows. +* **Hover Effects:** Rows highlight when you hover over them, making it much easier to read across the table. +* **Centered & Padded:** Data is neatly aligned and spaced out for a clean, modern look. -## Usage +## ๐Ÿ› ๏ธ Code Structure & Technologies -To view the table, simply open the `index.html` file in any web browser. The table will be displayed with the predefined styles. +This project keeps things simple and lightweight by using a single file: -## Code Structure +* **HTML (`index.html`):** + * The `` section contains the webpage title and all the embedded CSS styles. + * The `` section contains the actual table wrapped inside a neat container `
`. +* **CSS (Embedded):** Handles all the styling, including table borders, header background colors, padding, center alignment, and interactive hover effects. -The project consists of a single HTML file with embedded CSS for styling. +## ๐Ÿš€ How to View the Table on Your Computer -### HTML Structure +It is incredibly easy to view this project. You do not need to install anything! -The HTML file is structured as follows: +**1. Download the code:** Open your terminal and 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) +2. Open the project folder: Move into the main folder, then open the specific project folder: -- ``: Contains the title and embedded CSS styles. -- ``: Contains the table wrapped inside a `
`. - -### CSS Styling - -The CSS styles include: - -- Borders for the table, headers, and cells. -- Padding and center alignment for table headers and cells. -- Background colors for headers and alternating rows. -- Hover effect for table rows. +Bash +cd Web-dev-mini-projects +cd "Geography Table" +3. Open in Browser: Find the index.html file inside the folder and double-click it. It will open right up in your favorite web browser (like Chrome, Firefox, or Safari), and you can see the table immediately! +Happy Coding! ๐Ÿ’ปโœจ 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
-### 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!