Weather Data Visualizer | HTML CSS JavaScript

Weather Data Visualizer with HTML, CSS & JavaScript

40 DAYS 40 PROJECT CHALLENGE

Day #24

Project Overview

The Weather Data Visualizer is a web application that displays weather forecast data through interactive charts. Users can load weather information, and the system retrieves temperature data from a public weather API and visualizes it using graphical representations. The project demonstrates frontend concepts such as API data fetching, chart visualization, and dynamic data rendering using JavaScript and Chart.js, making it a useful project for learning real-time data visualization techniques.

Key Features

Fetch real-time weather forecast data from a public API
Visualize temperature trends using interactive charts
Dynamic chart generation using Chart.js
Simple and clean user interface
Responsive layout for different screen sizes
No API key required for data access
Real-time data fetching using JavaScript
Easy-to-use weather visualization tool

HTML Code

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Weather Data Visualizer</title>

<link rel="stylesheet" href="style.css">

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

</head>

<body>

<div class="container">

<h1>Weather Data Visualizer</h1>

<button onclick="loadWeather()">Load Weather Forecast</button>

<canvas id="weatherChart"></canvas>

</div>

<script src="script.js"></script>

</body>
</html>

CSS Code

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial;
}

body{
background:#042354;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}

.container{
background:white;
padding:30px;
border-radius:12px;
width:700px;
text-align:center;
box-shadow:0 10px 30px rgba(0,0,0,0.2);
}

h1{
margin-bottom:20px;
}

button{
width:100%;
padding:12px;
background:#2563eb;
color:white;
border:none;
border-radius:6px;
cursor:pointer;
font-size:16px;
}

button:hover{
background:#1d4ed8;
}

canvas{
margin-top:20px;
}

Javascript Code

let chart;

async function loadWeather(){

const url = "https://api.open-meteo.com/v1/forecast?latitude=19.07&longitude=72.87&hourly=temperature_2m";

const response = await fetch(url);

const data = await response.json();

const labels = data.hourly.time.slice(0,12);
const temps = data.hourly.temperature_2m.slice(0,12);

createChart(labels,temps);

}

function createChart(labels,temps){

const ctx = document.getElementById("weatherChart");

if(chart){
chart.destroy();
}

chart = new Chart(ctx,{

type:"line",

data:{
labels:labels,
datasets:[{
label:"Temperature (°C)",
data:temps,
borderColor:"#2563eb",
backgroundColor:"rgba(37,99,235,0.2)",
fill:true,
tension:0.4
}]
},

options:{
responsive:true
}

});

}