Intermediate Web Apps

What You'll Learn

API Integrations

Learn to fetch and display data from external APIs in your web applications.

Dynamic UI

Create responsive and interactive user interfaces with JavaScript.

Error Handling

Implement error handling and data validation in your web apps.

Project Setup

Organize your codebase with proper file structure and dependencies.

Let's Build a Weather App

In this tutorial we'll create a weather application that fetches current weather data using the OpenWeatherMap API.

What You'll Need:

HTML, CSS, and JavaScript basics
A text editor like VS Code
A web browser for testing
OpenWeatherMap API key

We'll be using plain HTML/CSS/JavaScript with no frameworks for this intermediate example. Let's set up our project structure:


weather-app/
├── index.html
├── style.css
├── script.js
└── config.js

index.html


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Weather App</title>
</head>
<body>
    <div class="container">
        <h1>Current Weather</h1>
        <form id="weather-form">
            <input type="text" id="city-input" placeholder="Enter city..." required>
            <button type="submit">Get Weather</button>
        </form>
        <div id="weather-result"></div>
    </div>
    <script src="script.js"></script>
<body>
</html>

Add Styling

Let's add modern styling to our weather application interface.

Key Design Elements

Responsive form layout
Animated weather icons
Conditional styling by weather code
Loader while fetching data

Add these styles to your style.css file for the weather app:

style.css


body {
    font-family: 'Segoe UI', sans-serif;
    background: linear-gradient(to right, #fffde7,  #fff9c4);
    display: flex;
    justify-content: center;
    min-height: 100vh;
}

.container {
    max-width: 500px;
    margin: 2rem auto;
    padding: 2rem;
    background: white;
    border-radius: 1rem;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
}

form {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

input[type="text"] {
    flex-grow: 1;
    padding: 1rem;
    border: 2px solid #fff9c4;
    border-radius: 0.5rem;
    font-size: 1rem;
}

button {
    padding: 0.75rem 1.5rem;
    background: #fbc02d;
    color: white;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

button:hover {
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

#weather-result {
    text-align: center;
    border-top: 2px solid #ffeeba;
    padding-top: 2rem;
}

Add JavaScript Logic

Now let's add JavaScript to fetch and display weather data dynamically.

Key Functional Elements

Form submission handler
API request with fetch()
Dynamic DOM updates
Error message display

Add this JavaScript to your script.js file to make the weather app work:

script.js


document.addEventListener('DOMContentLoaded', () => {
    const form = document.getElementById('weather-form');
    const input = document.getElementById('city-input');
    const weatherResult = document.getElementById('weather-result');

    form.addEventListener('submit', async function(e) {
        e.preventDefault();
        const city = input.value.trim();
        
        if (!city) return;

        weatherResult.innerHTML = `
        
            
        `;

        fetch(`https://api.openweathermap.org/data/2.5/weather?q=${encodeURIComponent(city)}&appid=YOUR_API_KEY&units=metric`)
            .then(response => {
                if (!response.ok) {
                    throw new Error('City not found');
                }
                return response.json();
            })
            .then(data => {
                const weather = data;
                const description = weather.weather[0].description;
                const temp = weather.main.temp;
                const humidity = weather.main.humidity;
                const wind = weather.wind.speed;

                weatherResult.innerHTML = `
                    
                        
                            ${weather.name}
                            ${data.weather[0].main}
                        
                        
                    
                    
                        Temperature: ${temp}°C
                        Humidity: ${humidity}%
                        Wind: ${wind} m/s
                    
                `;
                input.value = '';
            })
            .catch(error => {
                weatherResult.innerHTML = `
                    
                        ${error.message} - Try checking the city spelling
                    `;
            });
    });
});

Intermediate Web App Development