diff --git a/AdobeStock_101203484.2e16d0ba.fill-1200x500-c100.jpg b/AdobeStock_101203484.2e16d0ba.fill-1200x500-c100.jpg new file mode 100644 index 00000000..fd4d46a9 Binary files /dev/null and b/AdobeStock_101203484.2e16d0ba.fill-1200x500-c100.jpg differ diff --git a/README.md b/README.md index d8afa5cf..a7a3cbea 100644 --- a/README.md +++ b/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:
+Ankit Shah
+Github: https://github.com/ankeet15
+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 - - ``` - ---- - -## πŸ“– Usage - -Add instructions or examples for how users can utilize your project: -```bash - -``` - -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
+Github: https://github.com/itsAmulyaDsouza
+LinkedIn: https://www.linkedin.com/in/amulya-dsouza-631120327/ \ No newline at end of file diff --git a/astronomy-background.jpg b/astronomy-background.jpg new file mode 100644 index 00000000..c38757a5 Binary files /dev/null and b/astronomy-background.jpg differ diff --git a/bg.jpg b/bg.jpg new file mode 100644 index 00000000..b39c740e Binary files /dev/null and b/bg.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..cbb632d4 --- /dev/null +++ b/index.html @@ -0,0 +1,42 @@ + + + + + + Weather App + + + + +
+
+ + +
+
+ +
+

+

+
+
+
+ +
+

%

+

Humidity

+
+
+
+ +
+

Km/hrs

+

Wind Speed

+
+
+
+
+
+ + + \ No newline at end of file diff --git a/lospadresmilkyway-credit-prestondyches-cc-by-nc-2.0-jpg.webp b/lospadresmilkyway-credit-prestondyches-cc-by-nc-2.0-jpg.webp new file mode 100644 index 00000000..3dbf5fb2 Binary files /dev/null and b/lospadresmilkyway-credit-prestondyches-cc-by-nc-2.0-jpg.webp differ diff --git a/main-icon.gif b/main-icon.gif new file mode 100644 index 00000000..27c135af Binary files /dev/null and b/main-icon.gif differ diff --git a/noun-humidity-4472270.png b/noun-humidity-4472270.png new file mode 100644 index 00000000..ca15a6c4 Binary files /dev/null and b/noun-humidity-4472270.png differ diff --git a/noun-wind-7432029.png b/noun-wind-7432029.png new file mode 100644 index 00000000..acd400be Binary files /dev/null and b/noun-wind-7432029.png differ diff --git a/premium_photo-1686050878751-89499d28d153.jpg b/premium_photo-1686050878751-89499d28d153.jpg new file mode 100644 index 00000000..ab9a72a0 Binary files /dev/null and b/premium_photo-1686050878751-89499d28d153.jpg differ diff --git a/script.js b/script.js new file mode 100644 index 00000000..e242c20d --- /dev/null +++ b/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(); \ No newline at end of file diff --git a/search-icon.gif b/search-icon.gif new file mode 100644 index 00000000..3a1bcbc3 Binary files /dev/null and b/search-icon.gif differ diff --git a/style.css b/style.css new file mode 100644 index 00000000..52bc592d --- /dev/null +++ b/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; +} diff --git a/wired-outline-19-magnifier-zoom-search.gif b/wired-outline-19-magnifier-zoom-search.gif new file mode 100644 index 00000000..710c7e42 Binary files /dev/null and b/wired-outline-19-magnifier-zoom-search.gif differ