Whether_app Complete

deepakkumar55 · Jun 3, 2024 · 8aaa013 · 8aaa013
1 parent 313d155
commit 8aaa013
Show file tree

Hide file tree

Showing 4 changed files with 262 additions and 9 deletions.
diff --git a/Basic Projects/3-weather_app/README.md b/Basic Projects/3-weather_app/README.md
@@ -1,21 +1,79 @@
-# Weather App
+# Weather App [LiveRun](https://deepakkumar55.github.io/ULTIMATE-JAVASCRIPT-PROJECT/Basic%20Projects/3-weather_app)
 
 ## Description
 
-A brief description of the weather app project.
+This is a simple weather app that allows users to get current weather information for any location. The app uses an external weather API to fetch real-time weather data and displays it in a user-friendly interface. This project is ideal for learning how to work with APIs and building interactive web applications using JavaScript, HTML, and CSS.
 
 ## Features
 
-- Feature 1
-- Feature 2
-- Feature 3
+- **Real-time Weather Data**: Fetch and display current weather information for any location.
+- **Search Functionality**: Allow users to search for weather information by city name.
+- **Responsive Design**: Ensure the app works well on various devices, including mobile phones and tablets.
 
 ## Technologies Used
 
-- JavaScript
-- HTML
-- CSS
+- **JavaScript**: For fetching data from the weather API and updating the DOM.
+- **HTML**: For structuring the app's interface.
+- **CSS**: For styling the app and making it responsive.
 
 ## Setup
 
-Instructions to set up and run the project.
+Follow these steps to set up and run the project on your local machine:
+
+1. **Clone the repository**:
+   ```bash
+   git clone https://github.com/deepakkumar55/ULTIMATE-JAVASCRIPT-PROJECT.git
+   ```
+
+2. **Navigate to the project directory**:
+   ```bash
+   cd Basic Projects/3-weather_app
+   ```
+
+3. **Open `index.html` in your web browser**:
+   You can open the `index.html` file directly in your web browser by double-clicking on it or by using a live server extension in your code editor (like Live Server for VSCode).
+
+4. **Obtain an API Key**:
+   Sign up for a free API key from a weather service provider, such as OpenWeatherMap.
+
+5. **Add Your API Key**:
+   Update the JavaScript file with your API key in the appropriate place.
+
+## Contribution
+
+We welcome contributions to enhance the functionality and design of the weather app. Follow these steps to contribute:
+
+1. **Fork the repository**: Click on the 'Fork' button at the top right corner of the repository page.
+
+2. **Clone the forked repository**:
+   ```bash
+   git clone https://github.com/deepakkumar55/ULTIMATE-JAVASCRIPT-PROJECT.git
+   ```
+
+3. **Create a new branch**: Make sure your fork is up-to-date with the latest changes.
+   ```bash
+   git checkout -b feature-yourfeature
+   ```
+
+4. **Make your changes**: Implement your new feature or bug fix.
+
+5. **Commit your changes**:
+   ```bash
+   git add .
+   git commit -m "Description of your changes"
+   ```
+
+6. **Push to your branch**:
+   ```bash
+   git push origin feature-yourfeature
+   ```
+
+7. **Open a Pull Request**: Navigate to the original repository and open a pull request from your forked repository. Provide a detailed description of your changes and any relevant information.
+
+## Get in Touch
+
+If you have any questions or need further assistance, feel free to open an issue on GitHub or contact us directly. Your contributions and feedback are highly appreciated!
+
+---
+
+Thank you for your interest in the To-Do List project. Together, we can build a more robust and feature-rich application. Happy coding!
diff --git a/Basic Projects/3-weather_app/index.html b/Basic Projects/3-weather_app/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Weather App Project</title>
+    <link rel="stylesheet" href="styles.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="script.js" defer></script>
+  </head>
+  <body>
+    <h1>Weather Dashboard</h1>
+    <div class="container">
+      <div class="weather-input">
+        <h3>Enter a City Name</h3>
+        <input class="city-input" id="city" type="text" placeholder="E.g., Bhopal, Mehsi, Muzaffarpur, Patna">
+        <button class="search-btn" onclick="getWeather()">Search</button>
+        <div class="separator"></div>
+        <button class="location-btn" onclick="getWeatherByLocation()">Use Current Location</button>
+      </div>
+      <div class="weather-data">
+        <div class="current-weather">
+          <div class="details">
+            <h2 id="city-name">_______ ( ______ )</h2>
+            <h6 id="temp">Temperature: __°C</h6>
+            <h6 id="wind">Wind: __ M/S</h6>
+            <h6 id="humidity">Humidity: __%</h6>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/Basic Projects/3-weather_app/script.js b/Basic Projects/3-weather_app/script.js
@@ -0,0 +1,54 @@
+const apiKey = '04e6eadefb196fce9bf51eb29f053749'; // Replace with your actual API key
+
+async function getWeather() {
+    const city = document.getElementById('city').value;
+    if (city === '') {
+        alert('Please enter a city name');
+        return;
+    }
+
+    const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;
+
+    try {
+        const response = await fetch(url);
+        const data = await response.json();
+
+        if (data.cod === '404') {
+            alert('City not found');
+            return;
+        }
+
+        displayWeather(data);
+    } catch (error) {
+        alert('Failed to fetch weather data');
+    }
+}
+
+async function getWeatherByLocation() {
+    if (navigator.geolocation) {
+        navigator.geolocation.getCurrentPosition(async (position) => {
+            const lat = position.coords.latitude;
+            const lon = position.coords.longitude;
+            const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${apiKey}&units=metric`;
+
+            try {
+                const response = await fetch(url);
+                const data = await response.json();
+                displayWeather(data);
+            } catch (error) {
+                alert('Failed to fetch weather data');
+            }
+        }, () => {
+            alert('Geolocation not supported or permission denied');
+        });
+    } else {
+        alert('Geolocation not supported by this browser');
+    }
+}
+
+function displayWeather(data) {
+    document.getElementById('city-name').textContent = `${data.name}, ${data.sys.country}`;
+    document.getElementById('temp').textContent = `Temperature: ${data.main.temp} °C`;
+    document.getElementById('wind').textContent = `Wind: ${data.wind.speed} M/S`;
+    document.getElementById('humidity').textContent = `Humidity: ${data.main.humidity}%`;
+}
diff --git a/Basic Projects/3-weather_app/styles.css b/Basic Projects/3-weather_app/styles.css
@@ -0,0 +1,109 @@
+/* Import Google font - Open Sans */
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Open Sans', sans-serif;
+}
+body {
+  background: #E3F2FD;
+}
+h1 {
+  background: #5372F0;
+  font-size: 1.75rem;
+  text-align: center;
+  padding: 18px 0;
+  color: #fff;
+}
+.container {
+  display: flex;
+  gap: 35px;
+  padding: 30px;
+}
+.weather-input {
+  width: 550px;
+}
+.weather-input input {
+  height: 46px;
+  width: 100%;
+  outline: none;
+  font-size: 1.07rem;
+  padding: 0 17px;
+  margin: 10px 0 20px 0;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+}
+.weather-input input:focus {
+  padding: 0 16px;
+  border: 2px solid #5372F0;
+}
+.weather-input .separator {
+  height: 1px;
+  width: 100%;
+  margin: 25px 0;
+  background: #BBBBBB;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.weather-input .separator::before {
+  content: "or";
+  color: #6C757D;
+  font-size: 1.18rem;
+  padding: 0 15px;
+  margin-top: -4px;
+  background: #E3F2FD;
+}
+.weather-input button {
+  width: 100%;
+  padding: 10px 0;
+  cursor: pointer;
+  outline: none;
+  border: none;
+  border-radius: 4px;
+  font-size: 1rem;
+  color: #fff;
+  background: #5372F0;
+  transition: 0.2s ease;
+}
+.weather-input .search-btn:hover {
+  background: #2c52ed;
+}
+.weather-input .location-btn {
+  background: #6C757D;
+}
+.weather-input .location-btn:hover {
+  background: #5c636a;
+}
+.weather-data {
+  width: 100%;
+}
+.weather-data .current-weather {
+  color: #fff;
+  background: #5372F0;
+  border-radius: 5px;
+  padding: 20px 70px 20px 20px;
+  display: flex;
+  justify-content: space-between;
+}
+.current-weather h2 {
+  font-weight: 700;
+  font-size: 1.7rem;
+}
+.weather-data h6 {
+  margin-top: 12px;
+  font-size: 1rem;
+  font-weight: 500;
+}
+.current-weather .icon {
+  text-align: center;
+}
+.current-weather .icon img {
+  max-width: 120px;
+  margin-top: -15px;
+}
+.current-weather .icon h6 {
+  margin-top: -10px;
+  text-transform: capitalize;
+}