Harshil Chovatiya's 100DaysOfCode Journey: Day 39 - Exploring the ClimaCare Weather App.

on
Harshil Chovatiya's 100DaysOfCode Journey: Day 39 - Exploring the ClimaCare Weather App.

Harshil Chovatiya's 100DaysOfCode Journey: Day 39 - Exploring the ClimaCare Weather App.

ClimaCare Weather App.

Introduction:

In today's fast-paced world, having access to up-to-date weather information is essential for planning our daily activities. Whether you're a traveler, an outdoor enthusiast, or simply someone who wants to be prepared for the day ahead, the "ClimaCare Weather App" has you covered. In this blog, we'll dive deep into this versatile weather application, exploring its features, functionality, and how to make the most of it.

ClimaCare Weather App:

File Structure:

Before we delve into the application's details, let's take a look at its file structure. Understanding how the ClimaCare Weather App is organized behind the scenes can help you navigate and customize it effectively.

The app's file structure typically consists of the following components:

                  whether/
                  
                  ├── images/
                  │   │   └── ...
                  │   │
                  └── index.html
                  └── style.css
                  └── index.js
  • index.html: This is the main HTML file that serves as the entry point for the application. It contains the structure of the app's user interface.
  • styles.css: The stylesheet file, where the app's visual design is defined. You can customize the app's appearance by modifying this file.
  • app.js: The JavaScript file responsible for handling the app's logic. It fetches weather data, processes it, and updates the user interface accordingly.

Code Snippets:

Here are code snippets for the three main files:

index.html (UI Creation):

                
                
<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
    <link rel="stylesheet" href="style.css">
    <script src="index.js"></script>
    <style>

    </style>
</head>

<body>


    <div class="container">

        <div class="left-side">
            <div class="left-part">
                <div class="search-bar">
                    <div class="search-input-container">
                        <input type="text" 
                        placeholder="Search City" class="search-input" id="search-input">
                        <button class="search-button"
                         id="search-button">
                            <img src="images/search.png" 
                            alt="Search Icon">
                        </button>
                    </div>
                </div>
                <div class="left-side-top">
                    <div class="city-name">Surat</div>
                    <div class="date">Today's Date</div>
                </div>

                <div class="part">
                    <div class="content">
                        <img src="images/clouds.png" alt="Weather Icon" class="weather-icon">
                        <div class="temperature">25°C</div>
                    </div>

                    <div class="right-part">
                        <div class="humidity">Humidity: 60%</div>
                        <div class="wind">Wind: 10 km/h</div>
                    </div>
                </div>
            </div>

        </div>
        <div class="right-side">
            <h1>ClimaCare Weather by <br> Harshil Chovtiya</h1>


            <div class="social">
                <a href="https://www.instagram.com/harshilchovatiyaa">
                <i class="fab fa-instagram"></i></a>
                <a href="https://twitter.com/harshilbmk">
                <i class="fab fa-twitter"></i></a>
                <a href="https://github.com/harshilchovatiya">
                <i class="fab fa-github"></i></a>
                <a href="https://www.linkedin.com/in/harshilbmk">
                <i class="fab fa-linkedin-in"></i></a>
            </div>
        </div>
</body>

</html>

style.css (Visual Design):

                
                
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');


body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f0f0;
}

.btn {
    width: 50px;
    height: 50px;
    margin: 10px;
    outline: none;
    border: none;
    background: #d6d6d6;
    box-shadow: 5px 5px 10px #b6a9a9, -5px -5px 10px #ffffff;
    border-radius: 50%;
    transition: 0.2;
}

.btn:hover {
    cursor: pointer;
    animation-name: pulse;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

@keyframes pulse {
    from {
        transform: scale(1);
    }

    50% {
        transform: scale(1.21);
    }

    to {
        transform: scale(1);
    }
}


.container {
    display: flex;
    flex-direction: row;
    width: 90%;
    max-width: 800px;
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}


.search-input-container {
    display: flex;
    align-items: center;
    background-color: #fff;
    border: 1px solid #ccccccc9;
    border-radius: 30px;
    /* padding: 5px; */
}

.search-input {
    border: none;
    outline: none;
    padding: 10px;
    font-size: 14px;
}

.search-button {
    color: #17e1da;
    border: none;
    border-radius: 40px;
    padding: 5px 10px;
    margin-right: 10px;
    cursor: pointer;
}

.search-button img {
    width: 16px;
    height: 20px;
    vertical-align: middle;
}


.left-side {
    flex: 2;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.left-part {
    flex: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
}



.right-side {
    flex: 1;
    padding: 20px;
    background-color: #f0f0f0;
    text-align: center;
}

.city-name {
    font-size: 24px;
    font-weight: bold;
}

.date {
    font-size: 14px;
    color: #888888;
}

.weather-icon {
    width: 50px;
    height: 50px;
    margin-top: 10px;
}

.temperature {
    font-size: 36px;
    font-weight: bold;
    margin-top: 10px;
}

.humidity {
    font-size: 14px;
    margin-top: 5px;
}

.wind {
    font-size: 14px;
    margin-top: 5px;
}

.next-days {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.next-day-card {
    flex: 1;
    padding: 10px;
    text-align: center;
    background-color: #f0f0f0;
    border-radius: 8px;
    margin: 0 5px;
}

.day-name {
    font-weight: bold;
}

.day-temperature {
    font-weight: bold;
    margin-top: 5px;
}

.day-weather-type {
    margin-top: 5px;
}

.left-side-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    max-width: 100%;
    gap: 140px;
}

.part {
    display: flex;
    justify-content: space-around;
    gap: 80px;
}

.content {
    flex: 1;
}

.right-part {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }

    .left-side,
    .right-side {
        flex: 1;
        padding: 20px;
    }

    .next-days {
        flex-direction: column;
        align-items: center;
        margin-top: 20px;
    }

    .next-day-card {
        margin: 10px 0;
    }
}

.social{
    /* display: flex; */
    display: list-item;
    overflow: hidden;
}

.social a {
    width: 50px;
    height: 50px;
    text-align: center;
    text-decoration: none;
    color: #000;
    box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.05);
    margin: 0 10px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    transition: transform 0.5s;
}

.social a .fab {
    font-size: 30px;
    line-height: 50px;
    position: relative;
    z-index: 10;
    transition: color 0.5s;
}

.social a::after {
    content: '';
    width: 100%;
    height: 100%;
    top: -90px;
    left: 0;
    background: #000;
    background: linear-gradient(-45deg, #ed1c94, #ffec17);
    position: absolute;
    transition: 0.5s;
}

.social a:hover::after {
    top: 0;
}

.social a:hover .fab {
    color: #fff;
}

.social a:hover {
    transform: translateY(-10px);
}

index.js (Logic and Data Handling):

                
                
document.addEventListener("DOMContentLoaded", function () {
    // JavaScript code here

    const apikey = 'YOUR_API_KEY'
    const city_name = 'surat'
    const url = `https://api.openweathermap.org/data/2.5/weather?units=metric&q=`;


    const searchInput = document.getElementById("search-input");
    const searchBtn = document.getElementById("search-button");
    const weathericon = document.querySelector(".weather-icon");
    const todayDate = document.querySelector(".date");

    // Date object
    const date = new Date();

    let currentDay = String(date.getDate()).padStart(2, '0');

    let currentMonth = String(date.getMonth() + 1).padStart(2, "0");

    let currentYear = date.getFullYear();

    let currentDate = `${currentDay}-${currentMonth}-${currentYear}`;

    console.log("The current date is " + currentDate);
    todayDate.innerHTML = currentDate;


    async function checkeather(city) {
        const responce = await fetch(url + city + `&appid=${apikey}`)
        var data = await responce.json();

        console.log(data);

        document.querySelector(".city-name").innerHTML = data.name;
        document.querySelector(".temperature").innerHTML = Math.round(data.main.temp) + '°C';
        document.querySelector(".humidity").innerHTML = data.main.humidity + '%';
        document.querySelector(".wind").innerHTML = data.wind.speed + "km/h";

        if (data.weather[0].main = 'Clouds') {
            weathericon.src = 'images/clouds.png'
        }
        else if (data.weather[0].main = 'Rain') {
            weathericon.src = 'images/rain.png'
        }
        else if (data.weather[0].main = 'Drizzle') {
            weathericon.src = 'images/drizzle.png'
        }
        else if (data.weather[0].main = 'Clear') {
            weathericon.src = 'images/clear.png'
        }
        else if (data.weather[0].main = 'Mist') {
            weathericon.src = 'images/mist.png'
        }
    }

    searchBtn.addEventListener("click", function () {
        checkeather(searchInput.value);
    });
    searchInput.addEventListener("keyup", function (event) {
        if (event.key === "Enter") {
            checkeather(searchInput.value);
        }
    });

});

If you'd like to use the ClimaCare Weather App and access weather data, you'll need an API key from OpenWeatherMap. Here's how you can obtain your API key:

  1. Visit openweathermap.org.
  2. Create an account if you don't already have one.
  3. Explore the Weather Services API section on the website.
  4. Follow the instructions to obtain your unique API key.
  5. Once you have your API key, you can use it in any project to access weather data for various locations.

Live Example

Here is the Live Preview of the above code

If you're interested in accessing the source code for this Whether application, simply click on this link to visit the repository: Click Here. To get a feel for how the application works, you can check out the live preview by clicking here.

Conclusion:

In conclusion, the ClimaCare Weather App is a versatile tool that can keep you informed about weather conditions at a glance. Its simple file structure allows for easy customization, making it an excellent choice for developers looking to create a weather application tailored to their needs. Whether you're a developer or a weather enthusiast, this app offers a user-friendly experience and accurate weather data to help you plan your day. So, why wait? Install/Check It Out the ClimaCare Weather App today and stay one step ahead of the elements.

This is just the beginning of our journey through the ClimaCare Weather App. In the upcoming sections, we'll explore its features in more detail and provide insights on how to get the most out of this application.

Social Media

Comments

Post a Comment