Creating a simple Weather App Using HTML CSS & Javascript
Crafting the Framework:
Let's dive into the creation of our weather app by laying down the groundwork with HTML. The core structure of our web page is like setting the stage for a captivating play. It's here that we define the elements and structure that will breathe life into our application.
HTML Blueprint: Building the Foundation:
As we initiate our coding journey, the HTML serves as the blueprint for our weather app. Just as an architect plans the layout of a building, our HTML establishes the foundation, outlining the essential elements that will shape the user interface. From the city name display to the forecast details, every component finds its place in this digital canvas.
Now, let's unravel the magic within the HTML structure, unlocking the potential to seamlessly integrate CSS and JavaScript. This initial step is akin to preparing the canvas before an artist applies the brush strokes that bring a painting to life.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Weather Explorer</title>
<link rel="stylesheet" href="custom-style.css">
</head>
<body>
<div class="weather-card">
<div class="search-bar">
<input type="text" id="locationInput" spellcheck="true">
<button> <img src="/MySite/Assets/images/search-icon.png" alt=""></button>
</div>
<div class="current-weather">
<img src="/MySite/Assets/images/cloudy.png" class="weather-icon">
<h1 class="temperature">32°C</h1>
<h2 class="city-name">Serene Springs</h2>
<div class="weather-details">
<div class="weather-col">
<img src="/MySite/Assets/images/humidity-icon.png" alt="">
<div>
<p class="humidity-percentage">50%</p>
<p>humidity</p>
</div>
</div>
<div class="weather-col">
<img src="/MySite/Assets/images/wind-icon.png" alt="">
<div>
<p class="wind-speed">15km/ph</p>
<p>wind speed</p>
</div>
</div>
</div>
</div>
</div>
<script src="weather-script.js"></script>
</body>
</html>
Code Explaination:
The foundational HTML structure establishes the groundwork for our webpage.
The <link> tag facilitates the connection to an external stylesheet named "style.css," which plays a crucial role in crafting the visual aesthetics of our application.
Delving into the <body> section, we've meticulously organized the content to feature a dynamic search bar, a visually engaging weather presentation, and placeholder images/icons that add a touch of visual appeal.
To enhance user interaction, an <input> field is thoughtfully integrated, inviting users to input their preferred city for weather information.
A stylized <button> element, adorned with a distinctive search icon, serves as an intuitive trigger, prompting users to initiate the search process seamlessly.
The weather presentation area takes center stage, incorporating essential elements such as a weather icon, temperature reading, city name, and supplementary weather details.
Styling the Atmosphere: CSS Magic Unleashed:
Within the vast landscape of web development, styling serves as the artist's brush, weaving the visual tapestry of user interfaces. Cascading Style Sheets (CSS) stand as the enchanting medium, possessing the transformative ability to elevate a mere assembly of elements into a captivating and fully functional web application. This article invites you on a captivating expedition, delving into the lines of CSS code that breathe life into a weather app. As we traverse through the intricacies of defining layouts, orchestrating colors, and perfecting alignments, you'll witness firsthand the enchanting magic that CSS bestows upon the canvas of a user interface.
/* Resetting default margin, padding, font-family, and box-sizing for consistency */
* {
margin: 0;
padding: 0;
font-family: sans-serif;
box-sizing: border-box;
}
/* Setting the background color of the entire page */
body {
background-color: #222;
}
/* Styling for the card container */
.card {
width: 85%; /* Adjusted width for responsiveness */
max-width: 480px; /* Setting a maximum width for better layout control */
background: linear-gradient(50deg, #4fa3bb, #4a2fa3); /* Gradient background for a dynamic appearance */
color: #ffffff; /* Text color */
margin-top: 90px; /* Top margin for positioning */
margin-left: 470px; /* Left margin for positioning */
border-radius: 20px; /* Rounded corners for a modern look */
padding: 38px 34px; /* Padding for internal spacing */
text-align: center; /* Center-aligning text content */
}
/* Styling for the search bar */
.search {
display: flex; /* Flexbox for layout control */
align-items: center; /* Aligning items vertically in the center */
justify-content: space-between; /* Distributing space evenly between elements */
}
/* Styling for the input field within the search bar */
.search input {
border: 0; /* Removing border */
outline: 0; /* Removing outline */
background: #d5f7f4; /* Background color for input */
color: #555; /* Text color */
border-radius: 25px; /* Rounded corners for a polished appearance */
}
/* Styling for the button within the search bar */
.search button {
border: 0; /* Removing border */
outline: 0; /* Removing outline */
background: #d5f7f4; /* Background color for the button */
border-radius: 40%; /* Rounded corners for a circular button */
}
/* Styling for the weather icon */
.weather-icon {
width: 160px; /* Adjusted width for balance */
margin-top: 25px; /* Top margin for spacing */
}
/* Styling for the temperature (h1) within the weather display */
.weather h1 {
font-size: 75px; /* Font size for emphasis */
font-weight: 500; /* Font weight for prominence */
}
/* Styling for the city name (h2) within the weather display */
.weather h2 {
font-size: 40px; /* Font size for a balanced appearance */
font-weight: 400; /* Font weight for a lighter feel */
margin-top: -5px; /* Slight adjustment for vertical alignment */
}
/* Styling for the additional weather details section */
.details {
display: flex; /* Flexbox for layout control */
align-items: center; /* Aligning items vertically in the center */
justify-content: space-between; /* Distributing space evenly between elements */
padding: 0px 18px; /* Padding for internal spacing */
margin-top: 40px; /* Top margin for spacing */
}
Bringing the Weather to Life: JavaScript Enchantment:
As we venture into the realm of JavaScript, we open the door to a world of interactivity and dynamic functionality for our weather app. JavaScript, the language of the web, will empower us to fetch real-time data, update the user interface seamlessly, and add that extra layer of responsiveness. In this section, we'll delve into the code that breathes life into our weather application, turning it from a static display to a dynamic and user-friendly experience. Let the JavaScript enchantment begin!
const weatherKey = "YOUR_WEATHER_KEY";
const userInput = document.querySelector('.search input');
const searchButton = document.querySelector('.search button');
const weatherApiUrl = `https://api.openweathermap.org/data/2.5/weather?&units=metric&q=`;
async function fetchWeatherData(city) {
const weatherResponse = await fetch(weatherApiUrl + city + `&appid=${weatherKey}`);
const weatherData = await weatherResponse.json();
document.querySelector(".city-name").innerHTML = weatherData.name;
document.querySelector(".temperature").innerHTML = Math.round(weatherData.main.temp) + "°C";
document.querySelector(".humidity-percentage").innerHTML = weatherData.main.humidity + "%";
document.querySelector(".wind-speed").innerHTML = Math.round(weatherData.wind.speed) + " km/h";
}
function initiateSearch() {
searchButton.addEventListener('click', () => {
fetchWeatherData(userInput.value);
});
}
initiateSearch();
API Setup: The code initializes an API key for fetching weather data from OpenWeatherMap.
Element Selection: It selects HTML elements, including the search input field and button.
Weather Fetching Function: An asynchronous function fetchWeatherData is defined to fetch and display weather information for a given city using the OpenWeatherMap API.
Event Listener: An event listener is set on the search button, triggering the weather fetching function when the button is clicked.
Initialization: The initiateSearch function is called to set up the event listener, ensuring that the weather data is fetched when the user interacts with the search button.
Conclusion:
In conclusion, this project seamlessly integrates HTML, CSS, and JavaScript to create an interactive weather web app. The HTML structure forms the foundation, CSS styles elevate the visual appeal, and JavaScript dynamically fetches and displays real-time weather data. The user-friendly interface allows users to input a city, triggering an API call to OpenWeatherMap. This collaborative synergy among the three languages results in a polished, responsive, and aesthetically pleasing weather application, bringing the forecast to life with just a click.