Submission From Monkey-coders

README.md

@@ -1,127 +1,32 @@
-# Tech-Winter-Break-SJEC
+# Weather App 🌦️
 
-## 🚀 Introduction
+## Description
 
-Welcome to the Tech Winter Break Challenge repository!
+A simple weather app built using HTML, CSS, and JavaScript. This app fetches real-time weather data using a public API and displays:  
+- Current temperature  
+- Humidity  
+- Wind speed  
 
-This is your space to showcase your creativity and technical prowess. Whether you're building an application or a web app, this platform will help you collaborate, innovate, and share your project with others.
+## Features
 
-### What problem does your project solve?
-Think about the issue your project addresses.
+- Real-Time Weather Data: Fetches accurate weather details for the user’s desired location.  
+- Humidity & Wind Speed: Displays additional weather parameters for better insights.  
 
-### Who is it for?
-Identify your target audience.
+[Sample Image](https://github.com/user-attachments/assets/d519d290-2701-4cc1-abf7-d9536045cdbc)
 
-### Why is it useful?
-Explain the impact and utility of your project.
 
----
+## Live Demo
 
-## ✨ Features
+Check out the live version here:
+https://monkey-coders.vercel.app/
 
-- List the main features of your project.
-- Highlight any unique or standout aspects.
 
----
+## Contact
+For feedback or inquiries:<br>
+Ankit Shah<br>
+Github: https://github.com/ankeet15 <br>
+LinkedIn: https://www.linkedin.com/in/ankitscreation/
 
-## 🤝 Contributing
-
-Contributions are welcome! To get started:
-
-1. **Organize Your Project**:
-   - For applications, create a folder named `apps`.
-   - For web apps, create a folder named `web`.
-   - Add your project files inside the respective folder.
-
-2. **Showcase Your Work**:
-   - Include a `README.md` file within your folder, detailing your project and a YouTube link demonstrating its features.
-
-3. **Follow the Steps Below**:
-
-   - Fork this repository.
-   - Clone your forked repository locally:
-     ```bash
-     git clone https://github.com/yourusername/Tech-Winter-Break-SJEC.git
-     ```
-   - Navigate to the repository directory:
-     ```bash
-     cd Tech-Winter-Break-SJEC
-     ```
-   - Create a new branch:
-     ```bash
-     git checkout -b feature/your-feature-name
-     ```
-   - Commit your changes:
-     ```bash
-     git commit -m 'Add [your project name] in [apps/web]'
-     ```
-   - Push to your branch:
-     ```bash
-     git push origin feature/your-feature-name
-     ```
-   - Open a Pull Request with a clear description of your project.
-
-4. **Report Issues**:
-   If you encounter any problems or bugs, let us know by sharing:
-   - What you were trying to achieve.
-   - The steps you followed.
-   - Any error messages or unexpected behaviors.
-
-This helps us improve the project for everyone!
-
----
-
-## 🛠️ Installation
-
-To run the project locally, follow these steps:
-
-1. Clone this repository:
-   ```bash
-   git clone https://github.com/yourusername/Tech-Winter-Break-SJEC.git
-   ```
-2. Navigate to the project directory:
-   ```bash
-   cd Tech-Winter-Break-SJEC
-   ```
-3. Install dependencies:
-   ```bash
-   <add your installation steps here>
-   ```
-
----
-
-## 📖 Usage
-
-Add instructions or examples for how users can utilize your project:
-```bash
-<add example usage commands or snippets>
-```
-
-Link to more detailed documentation if available.
-
----
-
-### 🆘 Need Help? Ask it in GDG discord Server
-
-**How to get help:**
-1. Clearly describe your issue or question.
-2. Share relevant details (e.g., error messages, code snippets, or steps you've taken).
-3. Be respectful and patient while waiting for responses.
-
-We’re here to support you! 😊
-
-
----
-
-## 🌟 Acknowledgments
-
-- Mention any tools, libraries, or resources you used.
-- Give credit where it’s due.
-
----
-
-## 📜 License
-
-This project is licensed under the MIT License.
-
----
+Amulya D'souza<br>
+Github: https://github.com/itsAmulyaDsouza <br>
+LinkedIn: https://www.linkedin.com/in/amulya-dsouza-631120327/

index.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Weather App</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
+</head>
+<body>
+    <div class="card">
+        <div class="search">
+            <input type="text" placeholder="Enter City Name" spellcheck="false" required>
+            <span><button><img src="search-icon.gif" ></button></span>
+        </div>
+        <div class="weather">
+            <img id="weather-icon" src="main-icon.gif"></i>
+            <div class="info">
+                <h1 class="temp"></h1>
+                <h2 class="city"></h2>
+            </div>
+            <div class="details">
+                <div class="col">
+                    <img id="weather-icon" src="noun-humidity-4472270.png">
+                    <div>
+                        <p class="humidity">%</p>
+                        <p>Humidity</p>
+                    </div>
+                </div>
+                <div class="col">
+                    <img id="weather-icon" src="noun-wind-7432029.png">
+                    <div>
+                        <p class="wind">Km/hrs</p>
+                        <p>Wind Speed</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+<script src="script.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,19 @@
+const apikey = '88c75e04b05e5c0fac2aab1b5c53c26e';
+const apiURL = 'https://api.openweathermap.org/data/2.5/weather?units=metric&q=';
+const searchbox = document.querySelector(".search input");
+const searchbtn = document.querySelector(".search button");
+const weatherIcon = document.querySelector(".weather-icon");
+async function checkWeather(city = 'Mangalore') {
+    const response = await fetch(apiURL + city + `&appid=${apikey}`);
+    var data = await response.json();
+    console.log(data);
+    document.querySelector(".city").innerHTML = data.name;
+    document.querySelector(".temp").innerHTML = data.main.temp + "°C";
+    document.querySelector(".humidity").innerHTML = data.main.humidity + "%";
+    document.querySelector(".wind").innerHTML = data.wind.speed + "Km/hrs";
+}
+
+searchbtn.addEventListener('click', ()=>{
+    checkWeather(searchbox.value);
+})
+checkWeather();

style.css

@@ -0,0 +1,89 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
+body {
+    background-image: url(astronomy-background.jpg);
+}
+* {
+    margin: 0;
+    padding: 0;
+}
+.card {
+    width: 90%;
+    max-width: 470px;
+    background: linear-gradient(0deg, #003049, #a2d2ff);
+    color: #fff;
+    margin: 100px auto 0;
+    border-radius: 20px;
+    padding: 40px 35px;
+    text-align: center;
+}
+
+.search {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+}
+.search input {
+    border: 0;
+    outline: 0;
+    padding: 10px 25px;
+    height: 60px;
+    border-radius: 30px;
+    flex: 1;
+    margin-right: 16px;
+    font-family: Open Sans;
+    font-size: 30px;
+}
+
+.search button {
+    border: 0;
+    outline: 0;
+    border-radius: 50%;
+    margin-top: 6px;
+    width: 60px;
+    height: 60px;
+    cursor: pointer;
+    font-size: 25px;
+
+}
+
+#weather-icon {
+    width: 100px;
+}
+
+.weather h1 {
+    font-size: 80px;
+    font-weight: 500;
+
+}
+
+.weather h2 {
+    font-size: 45px;
+    font-weight: 400;
+    margin-top: -10px;
+}
+
+.details {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 20px;
+    margin-top: 50px;
+
+}
+
+.col {
+    display: flex;
+    align-items: center;
+    text-align: left;
+
+}
+
+.search img {
+    border: 0;
+    outline: 0;
+    border-radius: 50%;
+    margin-top: 6px;
+    width: 40px;
+    height: 40px;
+    cursor: pointer;
+}