Build a Simple Weather Website from Scratch: A Beginner-Friendly Guide to HTML, CSS, and JavaScript

Building a website from scratch can seem daunting, especially if you're new to web development. But don't worry! This step-by-step guide will walk you through the entire process of creating a simple weather app, from setting up your project to deploying it online. Learn how to develop a basic website with our help.

What We'll Build: A Simple Weather App

We're going to build a weather app that displays the current weather conditions for a specific city. Our app will have the following features:

• Search by city name: Users can type in a city name to find the weather.
• Display weather information: The app will show temperature, weather condition, and wind speed.
• Error handling: Clear error messages will appear if something goes wrong.

This project is designed to be easy to follow, even if you're just starting your web development journey.

Project Setup: Laying the Foundation

Let's get started by setting up our project files. Create a folder named "weather-app" and inside it, create three files:

• index.html: This will hold the structure of our webpage.
• style.css: This file will handle the styling and visual appearance.
• script.js: This file will contain the JavaScript code that makes our app interactive.

Here's the basic structure:

weather-app/
│── index.html
│── style.css
│── script.js

Getting Weather Data: Using the Open-Meteo API

To fetch weather data, we'll use the Open-Meteo API. This API is free and doesn't require an API key, making it perfect for our project. We'll use it to get the temperature, wind speed, and weather conditions for a given city.

Install Git and Initialize Your Repository

Make sure you have Git installed on your system. If not, refer to the Git SCM website for installation instructions. Git is crucial for version control, allowing you to track changes and collaborate effectively.

Once Git is installed, initialize a local repository in your project directory using the command git init. Also, create a new repository on GitHub with the same name as your project.

HTML Structure: Building the User Interface

Let's start building the website layout with HTML. Add the following code to your index.html file:

<div class="container">
  <h1>Weather App</h1>
  <div class="searchContainer">
    <input
      class="inputField"
      id="cityField"
      placeholder="Enter city name..."
      type="text"
    />
    <button id="searchBtn">Search</button>
  </div>
  <div id="weatherContainer">
    <h2 id="cityName"></h2>
    <p id="temperature"></p>
    <p id="condition"></p>
    <p id="windSpeed"></p>
  </div>
  <p id="errorMessage"></p>
</div>
<script src="script.js"></script>

This code creates a container for our app, a search bar for entering the city name, and a section to display the weather information.

CSS Styling: Making it Look Good

Now, let's add some style to our website using CSS. Add the following code to your style.css file:

.container {
  max-width: 400px;
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  margin: auto;
}
.searchContainer {
  margin: 20px 0;
}
.inputField {
  padding: 10px;
  width: 70%;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.searchBtn {
  padding: 10px;
  background: #007bff;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}
#weatherContainer {
  display: none; /* Hide until data is available to display */
}
#errorMessage {
  color: red;
  font-weight: bold;
}

This CSS code styles the container, search bar, and weather information section. It also hides the weather container until the data is available.

JavaScript Functionality: Bringing it to Life

Now comes the exciting part – adding functionality to our weather website with JavaScript. In your script.js file, add the following code:

document.getElementById("searchBtn").addEventListener("click", () => {
  const city = document.getElementById("cityField").value.trim();
  if (city) {
    getCoordinates(city);
  } else {
    showError("Please enter a city name");
  }
});

async function getCoordinates(city) {
  showError("");
  try {
    const response = await fetch(
      `https://geocoding-api.open-meteo.com/v1/search?name=${city}&count=1`
    );
    if (!response.ok) {
      throw new Error("City not found");
    }
    const data = await response.json();
    if (!data.results || data.results.length === 0) {
      throw new Error("Location not found");
    }
    const { latitude, longitude, name, country } = data.results[0];
    getWeather(latitude, longitude, name, country);
  } catch (error) {
    showError(error.message);
  }
}

async function getWeather(latitude, longitude, city, country) {
  try {
    const response = await fetch(
      `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&current_weather=true`
    );
    if (!response.ok) {
      throw new Error("Weather data not available");
    }
    const data = await response.json();
    displayWeather(data.current_weather, city, country);
  } catch (error) {
    showError(error.message);
  }
}

function displayWeather(weather, city, country) {
  const weatherContainer = document.getElementById("weatherContainer");
  const cityHeader = document.getElementById("cityName");
  const temp = document.getElementById("temperature");
  const condition = document.getElementById("condition");
  const windSpeed = document.getElementById("windSpeed");
  const weatherCondition =
    weatherDescriptions[weather.weathercode] || "Unknown Condition";
  weatherContainer.style.display = "block";
  cityHeader.textContent = `${city}, ${country}`;
  temp.textContent = `Temperature: ${weather.temperature} °C`;
  condition.textContent = `Condition: ${weatherCondition}`;
  windSpeed.textContent = `Wind Speed: ${weather.windspeed} km/h`;
}

function showError(message) {
  const weatherContainer = document.getElementById("weatherContainer");
  weatherContainer.style.display = "none";
  const errorPara = document.getElementById("errorMessage");
  errorPara.textContent = message;
}

This code adds an event listener to the search button. When clicked, it fetches the city coordinates and weather data from the Open-Meteo API and displays it on the page. It also handles errors and displays appropriate messages. If you are looking for a method for basic website development, this is a good example.

Testing Your Code: Ensuring it Works

Testing is a crucial part of web development. Let's test our weather app to make sure it works as expected.

• Valid city name: Enter a valid city name and click "Search." The app should display the weather information.

• Invalid city name: Enter some gibberish or an invalid city name. The app should display an error message.

Testing ensures that your website functions correctly in different scenarios.

Version Control: Pushing Your Code to GitHub

Before deploying our website to the internet, let's push our code to GitHub. This allows us to track changes and collaborate with others.

Run the following commands in your terminal:

git add .
git commit -m "Added weather information with API calls"
git push origin main

Deployment and Hosting with Netlify

Now it's time to deploy our weather app to the internet. We'll use Netlify, a beginner-friendly platform that allows us to deploy websites directly from our GitHub repository. To host your website, follow these steps:

1. Sign up for a free account at netlify.com.
2. Click on "Add new site" and then "Import an existing project".
3. Connect your GitHub account and select your repository.
4. Click "Deploy site".

Netlify will deploy your site in a few minutes. Your weather app will be live on the internet!

Conclusion: You Did It!

Congratulations! You've successfully built a simple weather app from scratch and deployed it to the internet. Remember that developing a website from scratch involves continuous learning and refinement. This is just the beginning of your web development journey!