Discover Q&A generated by AI Answer Generator

Discover all public questions answered by AI Answer Generator

GPT-4o mini
Simple HTML Weather App Code Example

Certainly! Below is a simple HTML code snippet that creates a basic weather display. This example uses HTML, CSS, and a bit of JavaScript to fetch weather data from a public API (OpenWeatherMap). You'll need to sign up for an API key from OpenWeatherMap to use this code.

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weather App</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .weather-container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
        input {
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        button {
            padding: 10px 15px;
            border: none;
            background-color: #007BFF;
            color: white;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
        .weather-info {
            margin-top: 20px;
        }
    </style>
</head>
<body>

<div class="weather-container">
    <h1>Weather App</h1>
    <input type="text" id="city" placeholder="Enter city name">
    <button onclick="getWeather()">Get Weather</button>
    <div class="weather-info" id="weather-info"></div>
</div>

<script>
    async function getWeather() {
        const city = document.getElementById('city').value;
        const apiKey = 'YOUR_API_KEY'; // Replace with your OpenWeatherMap API key
        const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;

        try {
            const response = await fetch(url);
            if (!response.ok) {
                throw new Error('City not found');
            }
            const data = await response.json();
            const weatherInfo = `
                <h2>${data.name}, ${data.sys.country}</h2>
                <p>Temperature: ${data.main.temp} °C</p>
                <p>Weather: ${data.weather[0].description}</p>
                <p>Humidity: ${data.main.humidity}%</p>
                <p>Wind Speed: ${data.wind.speed} m/s</p>
            `;
            document.getElementById('weather-info').innerHTML = weatherInfo;
        } catch (error) {
            document.getElementById('weather-info').innerHTML = `<p>${error.message}</p>`;
        }
    }
</script>

</body>
</html>

Instructions

  1. Get an API Key: Sign up at OpenWeatherMap and get your API key.
  2. Replace the API Key: In the JavaScript code, replace 'YOUR_API_KEY' with your actual API key.
  3. Run the Code: Save the code in an HTML file (e.g., weather.html) and open it in a web browser.

How It Works

  • The user enters a city name and clicks the "Get Weather" button.
  • The JavaScript function getWeather() fetches weather data from the OpenWeatherMap API.
  • The weather information is displayed on the page, including temperature, weather description, humidity, and wind speed.

Feel free to customize the styles and layout as per your needs!

Created By Khmani White With AI Answer Generator
GPT-4o mini
School Bell Schedule with Countdown Timer

Sure! Below is a simple HTML and CSS implementation of a school bell schedule from Monday to Friday, along with a countdown timer that shows the time remaining until the next class starts.

HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>School Bell Schedule</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>School Bell Schedule</h1>
        <div id="countdown" class="countdown"></div>
        <table>
            <thead>
                <tr>
                    <th>Day</th>
                    <th>Class</th>
                    <th>Start Time</th>
                    <th>End Time</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Monday</td>
                    <td>Math</td>
                    <td>8:00 AM</td>
                    <td>9:00 AM</td>
                </tr>
                <tr>
                    <td>Monday</td>
                    <td>Science</td>
                    <td>9:15 AM</td>
                    <td>10:15 AM</td>
                </tr>
                <tr>
                    <td>Monday</td>
                    <td>History</td>
                    <td>10:30 AM</td>
                    <td>11:30 AM</td>
                </tr>
                <tr>
                    <td>Monday</td>
                    <td>English</td>
                    <td>11:45 AM</td>
                    <td>12:45 PM</td>
                </tr>
                <tr>
                    <td>Monday</td>
                    <td>Art</td>
                    <td>1:00 PM</td>
                    <td>2:00 PM</td>
                </tr>
                <!-- Repeat for Tuesday to Friday -->
                <tr>
                    <td>Tuesday</td>
                    <td>Math</td>
                    <td>8:00 AM</td>
                    <td>9:00 AM</td>
                </tr>
                <tr>
                    <td>Wednesday</td>
                    <td>Science</td>
                    <td>9:15 AM</td>
                    <td>10:15 AM</td>
                </tr>
                <tr>
                    <td>Thursday</td>
                    <td>History</td>
                    <td>10:30 AM</td>
                    <td>11:30 AM</td>
                </tr>
                <tr>
                    <td>Friday</td>
                    <td>English</td>
                    <td>11:45 AM</td>
                    <td>12:45 PM</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
}

.container {
    max-width: 800px;
    margin: auto;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
    text-align: center;
    color: #333;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

th, td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

th {
    background-color: #4CAF50;
    color: white;
}

.countdown {
    font-size: 24px;
    text-align: center;
    margin: 20px 0;
    color: #d9534f;
}

JavaScript (script.js)

function updateCountdown() {
    const now = new Date();
    const day = now.getDay(); // 0 = Sunday, 1 = Monday, ..., 6 = Saturday
    const timeSlots = [
        { start: "08:00", end: "09:00" },
        { start: "09:15", end: "10:15" },
        { start: "10:30", end: "11:30" },
        { start: "11:45", end: "12:45" },
        { start: "13:00", end: "14:00" }
    ];

    let nextClass = null;

    for (let i = 0; i < timeSlots.length; i++) {
        const [startHour, startMinute] = timeSlots[i].start.split(':').map(Number);
        const classStartTime = new Date(now.getFullYear(), now.getMonth(), now.getDate(), startHour, startMinute);

        if (classStartTime > now) {
            nextClass = classStartTime;
            break;
        }
    }

    if (nextClass) {
        const timeDiff = nextClass - now;
        const hours = Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((timeDiff % (1000 * 60)) / 1000);

        document.getElementById('countdown').innerText = `Next class starts in: ${hours}h ${minutes}m ${seconds}s`;
    } else {
        document.getElementById('countdown').innerText = "No more classes today!";
    }
}

setInterval(updateCountdown, 1000);
updateCountdown();

Explanation:

  1. HTML: The structure includes a title, a countdown display, and a table for the bell schedule.
  2. CSS: Basic styling for the body, container, table, and countdown display.
  3. JavaScript: The script calculates the time remaining until the next class starts and updates the countdown every second.

Usage:

  1. Create three files: index.html, styles.css, and script.js.
  2. Copy the respective code into each file.
  3. Open index.html in a web browser to see the schedule and countdown in action.

Feel free to modify the schedule and styles as needed!

Created By Khmani White With AI Answer Generator