TABLE OF CONTENTS Page
INTRODUCTION .................................................................................................
SCOPE…….......................................................................................................... 4
LIMITATIONS ..................................................................................................... 5
SYSTEM REQUIREMENTS ................................................................................ 6
FUNCTIONAL REQUIREMENTS ..................................................................... 7-8
USE CASES ........................................................................................................ 9
SYSTEM DESIGN ..............................................................................................10
TECHNOLOGY STACK ..................................................................................... 11
CODE SNIPPETS.......................................................................................... 12-15
TESTING ....................................................................................................... 16-17
RESULT AND DISCUSSIONS ....................................................................... 18-19
CONCLUSION .................................................................................................... 20
REFRENCES ...................................................................................................... 21
Introduction
▪ The Weather Prediction Model is a fully functional web application designed to provide accurate, real-
time weather information for any location.
▪ In today's fast-paced world, quick access to reliable weather information is crucial for daily planning,
travel, and outdoor activities.
▪ This webpage provides quick access to current weather and next day forecasts for any location.
▪ This project simplifies weather retrieval through a user-friendly interface, allowing searches by city
name (e.g., "Mumbai," "Delhi").
Scope
This project covers the design, development, and
testing of a web-based weather forecast. Specifically, it
includes:
● Location search (via city name input).
● Display of current weather data (Temperature,
Humidity, Pressure, Condition).
● Presentation of a next day forecast (daily
temperature, pressure, humidity).
● A user-friendly and responsive web interface.
Technical Scope:
● Developed using C++ (OOPS concepts) alongside
HTML, CSS, and JavaScript for the frontend.
Platform Compatibility:
● Designed to work seamlessly on both mobile and desktop platforms.
Limitations
Limitations of the Project
1. Limited Prediction Accuracy
o The model is not highly accurate for large-
scale or long-term forecasts due to the use of
basic parameters and limited historical data.
2. Small-Scale Application
o Designed primarily for small-scale personal
use such as travel planning or basic farming
decisions. Not suitable for industrial or
commercial weather analysis.
3. Simplified Data Analysis
o The weather predictions are based on simple
comparisons of temperature, humidity, and
pressure. It does not incorporate advanced
meteorological algorithms or machine learning
models.
4. User Interface Constraints
o Though responsive, the design and
interaction options may be minimal or basic
compared to professional weather platforms.
System Requirements
Software Requirements
● Operating System: Windows 7/10/11, Linux, or
macOS
● Compiler: C++ Compiler (e.g., GCC, Turbo C++ or
Code::Blocks IDE with C++ support)
● Web Browser: Any modern browser (Chrome,
Firefox, Edge)
Dependencies and Libraries
● Frontend:
o HTML5, CSS3, JavaScript
● Backend (if any):
o Basic C++ OOPS principles applied (no
mention of heavy back-end frameworks).
Use Cases
● Check Current Weather: A user wants to know the current weather in their city. They open the app, and the
current conditions are displayed.
● Plan a Trip: A user is planning a trip and wants to check the weather forecast for their destination. They
search for the city name and view the 5-day forecast.
● Decide on Outdoor Activities: A user wants to know if it's a good day for a walk. They check the app to see
the temperature, wind speed, and current weather condition.
Functional Requirements
1. Location Search: Users enter a city name (e.g., "Paris"). The app validates the input and handles cases
where the city is not found (displays an error message like "City not found").
2. Enter the data: Users enter the previous days temperature, humidity and pressure (Maximum = 7 Days
and Minimum= 3 Days) data.
3. Weather Data Display
● The system shall display real-time weather information, including:
o Temperature
o Humidity
o Wind Speed
3. Next Day Forecast: A table or card format displays
the forecast. Each day shows:
● Temperature (High/Low): "28°C / 22°C"
● Pressure: "10 km/h"
● Humidity: "55%"
Technology Stack
Front-end API Back-end
● HTML 1 ● OpenWeatherMap ● C++ Core
logic and
decision-
making for
weather
prediction
● CSS 1 ● WeatherAPI).
● JavaScript 1
Code Snippets
1. HTML5 – (Structure of the page)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,
initial-scale=1.0"/>
<title>Weather Form Visualizer</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></
script>
<link href="https://fonts.googleapis.com/css2?
family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="form-container">
<h2> Weather Forecast Form</h2>
<form id="weatherForm"
onsubmit="handleSubmit(event)">
<label for="locationName">Location Name:</label>
<input type="text" id="locationName"
placeholder="e.g., Mumbai" required />
<label for="weatherData">7 Days of Weather Data:</
label>
<textarea id="weatherData" rows="7"
placeholder="Format: temp humidity pressure (e.g., 25
70 1010 26 75 1008 ...)" required></textarea>
<button type="submit">Generate Forecast</button>
</form>
<div id="result" class="results" style="display:
none;"></div>
<canvas id="weatherChart"></canvas>
</div>
<script src="script.js"></script>
</body>
</html>
2. CSS (Styling the webpage)
body {
font-family: 'Roboto', sans-serif;
background: #e3f2fd;
margin: 0;
padding: 0;
}
.form-container {
max-width: 600px;
margin: 40px auto;
background: #fff;
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
margin-bottom: 25px;
color: #1565c0;
}
label {
display: block;
margin-bottom: 6px;
font-weight: bold;
color: #0d47a1;
}
input, textarea {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 15px;
}
button {
background-color: #1976d2;
color: white;
padding: 12px;
border: none;
width: 100%;
font-size: 16px;
border-radius: 6px;
cursor: pointer;
transition: 0.3s;
}
button:hover {
background-color: #1565c0;
}
.results {
margin-top: 30px;
padding: 20px;
border: 2px solid #bbdefb;
background: #e3f2fd;
border-radius: 10px;
}
.condition-tag {
display: inline-block;
padding: 4px 10px;
margin-left: 10px;
border-radius: 12px;
font-size: 0.9em;
color: white;
}
.Sunny { background-color: #fbc02d; }
.Cloudy { background-color: #90a4ae; }
.Rainy { background-color: #4fc3f7; }
canvas {
margin-top: 30px;
}
ul {
padding-left: 18px;
}
3. JavaScript
function parseWeatherData(raw) {
const lines = raw.trim().split('\n');
const temps = [], hums = [], press = [], days = [];
lines.forEach((line, index) => {
const [t, h, p] = line.trim().split(/\s+/).map(Number);
if (!isNaN(t) && !isNaN(h) && !isNaN(p)) {
temps.push(t);
hums.push(h);
press.push(p);
days.push("Day " + (index + 1));
}
});
return { temps, hums, press, days };
}
function classifyCondition(temp, hum, press) {
if (hum > 80 && press < 1000) return "Rainy";
if (hum > 50) return "Cloudy";
return "Sunny";
}
function predictNextCondition(temps, hums, press) {
const avgTemp = temps.slice(-3).reduce((a, b) => a + b, 0) / 3;
const avgHum = hums.slice(-3).reduce((a, b) => a + b, 0) / 3;
const avgPress = press.slice(-3).reduce((a, b) => a + b, 0) / 3;
return {
temp: avgTemp.toFixed(1),
hum: avgHum.toFixed(1),
press: avgPress.toFixed(1),
condition: classifyCondition(avgTemp, avgHum, avgPress)
};
}
function handleSubmit(event) {
event.preventDefault();
const loc = document.getElementById("locationName").value.trim();
const rawData = document.getElementById("weatherData").value;
const { temps, hums, press, days } = parseWeatherData(rawData);
if (temps.length < 3) {
alert("Please enter at least 3 valid days of data.");
return;
}
const forecast = predictNextCondition(temps, hums, press);
let html = `<h3> Location: ${loc}</h3>
<p><strong>Predicted Tomorrow:</strong><br>
Temperature: ${forecast.temp}°C<br>
Humidity: ${forecast.hum}%<br>
Pressure: ${forecast.press} hPa<br>
Condition: <span class="condition-tag ${forecast.condition}">${forecast.condition}</span></p>
<h4> Day-by-Day Summary:</h4><ul>`;
for (let i = 0; i < temps.length; i++) {
const cond = classifyCondition(temps[i], hums[i], press[i]);
html += `<li>${days[i]}: ${temps[i]}°C, ${hums[i]}%, ${press[i]} hPa
<span class="condition-tag ${cond}">${cond}</span></li>`;
}
html += "</ul>";
const resultEl = document.getElementById("result");
resultEl.innerHTML = html;
resultEl.style.display = 'block';
const ctx = document.getElementById("weatherChart").getContext("2d");
if (window.weatherChartInstance) window.weatherChartInstance.destroy();
window.weatherChartInstance = new Chart(ctx, {
type: 'line',
data: {
labels: days,
datasets: [
{ label: 'Temperature (°C)', data: temps, borderColor: 'tomato', fill: false },
{ label: 'Humidity (%)', data: hums, borderColor: '#2196f3', fill: false },
{ label: 'Pressure (hPa)', data: press, borderColor: '#4caf50', fill: false }
]
},
options: {
responsive: true,
plugins: {
title: {
display: true,
text: ` Weather Trends for ${loc}`,
font: { size: 18 }
}
}
}
});
}
Testing (Test Cases / Results)
Results & Discussions
Results
● Developed a working weather prediction web app using HTML, CSS, JavaScript, and C++ logic.
● Displays real-time input-based predictions for temperature, humidity, and pressure.
● Shows next-day forecast and trends using charts.
● The UI is responsive and adapts well to different screen sizes.
● Challenges encountered during development included handling API errors and asynchronous data
fetching.
Discussion
● Useful for small-scale applications like trip planning and farming.
● Easy to use and visually clear.
● Prediction is based on simple logic; accurate only for basic scenarios.
● Can be improved with live API integration or machine learning in the future.
Conclusion
● A simple and interactive weather prediction model was successfully developed.
● Utilizes C++ (OOPS concepts) along with HTML, CSS, and JavaScript for implementation.
● Predicts weather conditions based on user input of temperature, humidity, and pressure.
● Displays forecasts clearly with visual charts and categorized weather conditions.
● Useful for small-scale applications like trip planning and farming decisions.
● Easy to use, responsive, and works across devices.
● Can be enhanced further with real-time API data and advanced prediction algorithms.
References
1. HTML5 Documentation:
2. CSS3 Documentation:
