27- Develop Weather App….

Introduction

Today’s internship task was to develop a Weather App using only Frontend technologies — that means no backend, no API, just HTML, CSS, and JavaScript.
This project helped me understand how to design a beautiful user interface and display weather information dynamically using JavaScript.

The main goal was to make the design beginner-friendly, colorful, and simple — so that anyone can easily understand the code structure.

Technologies Used

i- HTML: for structure

ii- CSS: for styling

Get Haleema Kashmiri’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

iii- JavaScript: for dynamic behavior

Features of the App

i- User can enter a city name.
ii- Displays fake (sample) weather data for cities like Karachi, Lahore, Islamabad, Quetta, and Peshawar.
iii- Beautiful background with hover effects.
iv- 100% frontend — no API or backend used

HTML Code

The HTML part creates the structure of the weather app.
It includes a title, input box, button, and a section to show weather details.

<div class="weather-container">
  <h2>🌦️ Weather App</h2>
  <input type="text" id="cityInput" placeholder="Enter city name">
  <br>
  <button onclick="showWeather()">Show Weather</button>

  <div class="weather-info" id="weatherBox" style="display:none;">
    <div class="city" id="cityName"></div>
    <div class="temp" id="temperature"></div>
    <div class="desc" id="description"></div>
    <img id="weatherIcon" src="" alt="Weather icon">
  </div>
</div>

HTML Output

Here’s how the interface looks after adding HTML structure (before styling):

2. CSS Code

CSS adds beauty to our app — colors, background, hover effects, and font styling.
I used soft blue and aqua colors to give a real weather-like feeling.

body {
  margin: 0;
  font-family: 'Poppins’, sans-serif;
  background: linear-gradient(to bottom right, #74b9ff, #81ecec);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.weather-container {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  padding: 30px;
  text-align: center;
  width: 320px;
  transition: 0.3s;
}

.weather-container:hover {
  transform: scale(1.03);
}

h2 {
  color: #0984e3;
  margin-bottom: 15px;
}

input {
  padding: 10px;
  width: 80%;
  border: 1px solid #dfe6e9;
  border-radius: 8px;
  font-size: 14px;
}

button {
  background-color: #0984e3;
  color: white;
  border: none;
  padding: 10px 18px;
  margin-top: 10px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}

button:hover {
  background-color: #74b9ff;
}

.weather-info {
  margin-top: 20px;
}

.city {
  font-size: 22px;
  color: #2d3436;
}

.temp {
  font-size: 45px;
  color: #0984e3;
  margin-top: 10px;
}

.desc {
  font-size: 18px;
  color: #636e72;
  text-transform: capitalize;
}

img {
  width: 90px;
  margin-top: 15px;
}

CSS Output

After applying CSS, the app becomes colorful and modern-looking.

3. JavaScript Code

JavaScript adds interactivity — when a user types a city name and clicks the button, it shows that city’s weather (from fake data).

function showWeather() {
  const city = document.getElementById("cityInput").value.trim();
  const box = document.getElementById("weatherBox");
  const cityName = document.getElementById("cityName");
  const temp = document.getElementById("temperature");
  const desc = document.getElementById("description");
  const icon = document.getElementById("weatherIcon");

  if (city === "") {
    alert("Please enter a city name!");
    return;
  }

  // Fake weather data (no backend)
  let weatherData = {
    Karachi: { temp: "30°C", desc: "Sunny", icon: "https://cdn-icons-png.flaticon.com/512/869/869869.png" },
    Lahore: { temp: "27°C", desc: "Cloudy", icon: "https://cdn-icons-png.flaticon.com/512/414/414825.png" },
    Islamabad: { temp: "25°C", desc: "Rainy", icon: "https://cdn-icons-png.flaticon.com/512/1163/1163624.png" },
    Quetta: { temp: "22°C", desc: "Windy", icon: "https://cdn-icons-png.flaticon.com/512/1779/1779940.png" },
    Peshawar: { temp: "28°C", desc: "Partly Cloudy", icon: "https://cdn-icons-png.flaticon.com/512/252/252035.png" },
  };

  if (weatherData[city]) {
    cityName.textContent = city;
    temp.textContent = weatherData[city].temp;
    desc.textContent = weatherData[city].desc;
    icon.src = weatherData[city].icon;
    box.style.display = "block";
  } else {
    alert("Sorry! Weather data not available for " + city);
    box.style.display = "none";
  }
}

Final Output

After running the app, you can type a city name (like Karachi) and see:

City: Karachi  
Temperature: 30°C  
Weather: Sunny ☀️

City: islamabad  
Temperature: 25°C  
Weather:Rainy ☁️

What I Learned

From this task, I learned:

i- How HTML, CSS, and JavaScript work together

ii- How to design a clean and responsive layout

iii- How JavaScript can make a webpage interactive

iv- Importance of UI design in frontend development

Conclusion

This beginner-friendly project helped me gain confidence in frontend development.
It was simple but effective — and a perfect way to practice JavaScript and CSS layout design.

I’ll keep improving it by adding real-time API data and dark mode in the future.