DEV Community: Van_mai

#Weather App with fantastic animations Tutorial for Beginners

Van_mai — Sat, 01 Mar 2025 01:28:21 +0000

Weather App Tutorial for Beginners

Hey everyone! Today, I will teach you how to create a weather app with some fantastic animations using JavaScript. Let’s dive in step by step!

Step 0: Setting Up the Weather API

This app will use the OpenWeatherMap API. So, make sure your API key is ready. You can visit the OpenWeatherMap website to get your free API key.

Step 1: Create the Weather App HTML

Here’s a simple structure for your weather app:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link
        href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=Roboto:wght@300;400;500;700;900&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="weather-app.css">
    <title>Weather App</title>
</head>
<body>
</body>
<script src="https://kit.fontawesome.com/7c8801c017.js" crossorigin="anonymous"></script>
<script src="weather-app.js"></script>
</html>

We create the following divs: .container, .search-box, .not-found, .weather-box, and .weather-details.

<div class="container">
    <div class="search-box">
        <i class="fa-solid fa-location-dot"></i>
        <input type="text" placeholder="Enter your location">
        <button class="fa-solid fa-magnifying-glass"></button>
    </div>

    <div class="not-found">
        <img src="images/404.png">
        <p>Oops! Invalid location</p>
    </div>

    <div class="weather-box">
        <img src="">
        <p class="temperature"></p>
        <p class="description"></p>
    </div>

    <div class="weather-details">
        <div class="humidity">
            <i class="fa-solid fa-water"></i>
            <div class="text">
                <span></span>
                <p>Humidity</p>
            </div>
        </div>

        <div class="wind">
            <i class="fa-solid fa-wind"></i>
            <div class="text">
                <span></span>
                <p>Wind Speed</p>
            </div>
        </div>
    </div>
</div>

Step 2: Create the Weather App CSS

Here’s the basic CSS to get you started:

* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #06283D;
}

.container {
    position: relative;
    width: 400px;
    height: 105px;
    background: #fff;
    padding: 28px 32px;
    overflow: hidden;
    border-radius: 18px;
    font-family: Arial, sans-serif;
    transition: 0.6s ease-out;
}

.search-box {
    width: 100%;
    height: min-content;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.search-box input {
    color: #06283d;
    width: 80%;
    font-size: 25px;
    font-weight: 500;
    text-transform: uppercase;
    padding-left: 32px;
}

.search-box ::placeholder {
    font-size: 20px;
    font-weight: 500;
    color: #06283d;
    text-transform: capitalize;
}

.search-box button {
    cursor: pointer;
    width: 50px;
    height: 50px;
    color: #06283D;
    background: #dff6ff;
    border-radius: 50%;
    font-size: 25px;
    transition: 0.4s ease;
}

.search-box button:hover {
    color: #fff;
    background: #06283D;
}

.weather-box {
    text-align: center;
}

.weather-box img {
    width: 60%;
    margin-top: 30px;
}

.weather-box .temperature {
    font-size: 4rem;
    font-weight: 800;
    color: #06283D;
    position: relative;
    margin-top: 30px;
    margin-left: -16px;
}

.weather-box .temperature span {
    position: absolute;
    margin-left: 4px;
    font-size: 1.5rem;
}

.weather-box .description {
    font-size: 22px;
    font-weight: 500;
    color: #06283D;
    text-transform: capitalize;
}

.weather-details {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}

.weather-details .humidity, .weather-details .wind {
    display: flex;
    align-items: center;
    width: 50%;
    height: 100px;
}

.weather-details .humidity {
    padding-right: 20px;
    justify-content: flex-start;
}

.weather-details .wind {
    padding-right: 20px;
    justify-content: flex-end;
}

.weather-details i {
    color: #06283D;
    font-size: 26px;
    margin-right: 10px;
    margin-top: 6px;
}

.weather-details span {
    font-size: 22px;
    font-weight: 500;
    color: #06283D;
}

.weather-details p {
    font-size: 14px;
    font-weight: 500;
    color: #06283D;
}

.not-found {
    width: 100%;
    text-align: center;
    margin-top: 50px;
    scale: 0;
    opacity: 0;
    display: none;
}

.not-found img {
    width: 70%;
}

.not-found p {
    color: #06283D;
    font-size: 22px;
    font-weight: 500;
    margin-top: 12px;
}

Important:

To add animation, you can use the fadeIn animation to make the app more dynamic:

.weather-box, .weather-details {
    scale: 0;
    opacity: 0;
}

.fadeIn {
    animation: 0.5s fadeIn forwards;
    animation-delay: 0.5s;
}

@keyframes fadeIn {
    to {
        scale: 1;
        opacity: 1;
    }
}

Step 3: Create the Weather App JavaScript

Now it’s time to bring the app to life with JavaScript. You’ll need to integrate with the OpenWeatherMap API. Below is the starting point for your JS:

const container = document.querySelector('.container');
const search = document.querySelector('.search-box button');
const weatherBox = document.querySelector('.weather-box');
const weatherDetails = document.querySelector('.weather-details');
const error404 = document.querySelector('.not-found');

Next, you’ll need to set up the fetch API to get weather data:

search.addEventListener('click', () => {
    const key_API = `f62b1ae7f33dea18b1279c2e658a1d63`;
    const city = document.querySelector('.search-box input').value;

    if (city === ``) return;

    fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${key_API}`)
        .then(response => response.json())
        .then(json => {
            if (json.cod === `404`) {
                container.style.height = `400px`;
                weatherBox.style.display = `none`;
                weatherDetails.style.display = `none`;
                error404.style.display = `block`;
                error404.classList.add(`fadeIn`);
                return;
            }

            const image = document.querySelector('.weather-box img');
            const temperature = document.querySelector('.weather-box .temperature');
            const description = document.querySelector('.weather-box .description');
            const humidity = document.querySelector('.weather-details .humidity span');
            const wind = document.querySelector('.weather-details .wind span');

            switch (json.weather[0].main) {
                case `Clear`:
                    image.src = `images/clear.png`;
                    break;
                case `Rain`:
                    image.src = `images/rain.png`;
                    break;
                case `Snow`:
                    image.src = `images/snow.png`;
                    break;
                case `Clouds`:
                    image.src = `images/cloud.png`;
                    break;
                case `Haze`:
                    image.src = `images/mist.png`;
                    break;
                default:
                    image.src = ``;
            }

            temperature.innerHTML = `${parseInt(json.main.temp)}&deg;C`;
            description.innerHTML = `${json.weather[0].main}`;
            humidity.innerHTML = `${json.main.humidity}%`;
            wind.innerHTML = `${json.wind.speed} Km/h`;

            weatherBox.style.display = ``;
            weatherDetails.style.display = ``;
            weatherBox.classList.add(`fadeIn`);
            weatherDetails.classList.add(`fadeIn`);
            container.style.height = `590px`;
        });
});

Conclusion

That’s it! You now have a fully functional weather app. Keep improving it by adding more features like more detailed forecasts, custom icons, or even a background image that changes based on the weather conditions.

If you found this tutorial helpful, feel free to connect with me for more web development tips and tricks.

Here are the full code.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link
        href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=Roboto:wght@300;400;500;700;900&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="weather-app.css">
    <title>Weather-App</title>

</head>
<body>

    <div class="container">
        <div class="search-box">
            <i class="fa-solid fa-location-dot"></i>
            <input type="text" placeholder="Enter your location">
            <button class="fa-solid fa-magnifying-glass"></button>             
        </div>
        <div class="not-found">
            <img src="images/404.png">
            <p>Oops! Invalid location</p>
        </div>

        <div class="weather-box">
            <img src="">
            <p class="temperature"></p>
            <p class="description"></p>
        </div>

        <div class="weather-details">
            <div class="humidity">
                <i class="fa-solid fa-water"></i>
                <div class="text">
                    <span></span>
                    <p>Humidity</p>
                </div>
            </div>

            <div class="wind">
                <i class="fa-solid fa-wind"></i>
                <div class="text">
                    <span></span>
                    <p>Wind Speed</p>
                </div>
            </div>



        </div>



    </div>





</body>

<script src="https://kit.fontawesome.com/7c8801c017.js" crossorigin="anonymous"></script>
<script src="weather-app.js"></script>
</html>

CSS

*{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    box-sizing: border-box;

}

body{
    height: 100vh;
    display: flex;
    align-items:center;
    justify-content:center;
    background: #06283D

}

.container{
    position: relative;
    width: 400px;
    height: 105px;
    background: #fff;
    padding: 28px 32px;
    overflow: hidden;
    border-radius: 18px;
    font-family: Arial, sans-serif;
    transition: 0.6s ease-out; 
}

.search-box{
    width: 100%;
    height: min-content;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.search-box input{
    color: #06283d;
    width: 80%;
    font-size: 25px;
    font-weight: 500;
    text-transform: uppercase;
    padding-left: 32px;

}

.search-box ::placeholder{
    font-size: 20px;
    font-weight: 500;
    color: #06283d;
    text-transform: capitalize;

}

.search-box button{
    cursor: pointer;
    width: 50px;
    height: 50px;
    color: #06283D;
    background: #dff6ff;
    border-radius: 50%;
    font-size: 25px;
    transition: 0.4s ease;

}

.search-box button:hover{
    color: #fff;
    background: #06283D;
}

.weather-box{
    text-align: center;
}

.weather-box img{
    width: 60%;
    margin-top: 30px;
}

.weather-box .temperature{
    font-size: 4rem;
    font-weight: 800;
    color: #06283D;
    position: relative;
    margin-top: 30px;
    margin-left: -16px;
}

.weather-box .temperature span{
    position: absolute;
    margin-left: 4px;
    font-size: 1.5rem;

}

.weather-box .description{
    font-size: 22px;
    font-weight: 500;
    color: #06283D;
    text-transform: capitalize;
}

.weather-details{
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 30px;

}

.weather-details .humidity, .weather-details .wind{
    display: flex;
    align-items: center;
    width: 50%;
    height: 100px;
}

.weather-details .humidity{
    padding-right: 20px;
    justify-content: flex-start;
}

.weather-details .wind{
    padding-right: 20px;
    justify-content: flex-end;
}

.weather-details i{
    color: #06283D;
    font-size: 26px;
    margin-right: 10px;
    margin-top: 6px;

}

.weather-details span{
    font-size: 22px;
    font-weight: 500;
    color: #06283D;
}

.weather-details p{
    font-size: 14px;
    font-weight: 500;
    color: #06283D;
}


.not-found{
    width: 100%;
    text-align: center;
    margin-top: 50px;
    scale: 0;
    opacity: 0;
    display: none;
}

.not-found img{
    width: 70%;

}

.not-found p{
    color: #06283D;
    font-size: 22px;
    font-weight: 500;
    margin-top: 12px;

}

.weather-box, .weather-details{
    scale: 0;
    opacity: 0;
}

.fadeIn{
    animation: 0.5s fadeIn forwards;
    animation-delay: 0.5s;

}

@keyframes fadeIn{
    to {
        scale: 1;
        opacity: 1;
    }
}

JS


const container = document.querySelector('.container');
const search = document.querySelector('.search-box button');
const weatherBox = document.querySelector('.weather-box');
const weatherDetails = document.querySelector('.weather-details');
const error404 = document.querySelector('.not-found');

search.addEventListener('click', () => {
    const key_API=`f62b1ae7f33dea18b1279c2e658a1d63`
    const city = document.querySelector('.search-box input').value;

    if (city === ``)
        return;

    fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${key_API}`)
    .then(response => response.json()).then(json => {

        if (json.cod === `404`){
            container.style.height = `400px`;
            weatherBox.style.display = `none`;
            weatherDetails.style.display = `none`;
            error404.style.display = `block`;
            error404.classList.add(`fadeIn`);
            return;

        }

        error404.style.display = `none`;
        error404.classList.remove(`fadeIn`);

        const image = document.querySelector(`.weather-box img`);
        const temperature = document.querySelector(`.weather-box .temperature`);
        const description = document.querySelector(`.weather-box .description`);
        const humidity= document.querySelector(`.weather-details .humidity span`);
        const wind = document.querySelector(`.weather-details .wind span`);

        switch (json.weather[0].main){
            case `Clear`:
                image.src = `images/clear.png`;
                break;
            case `Rain`:
                image.src = `images/rain.png`;
                break;
            case `Snow`:
                image.src = `images/snow.png`;
                break;
            case `Clouds`:
                image.src = `images/cloud.png`;
                break;
            case `Haze`:
                image.src = `images/mist.png`;
                break;
            default:
                image.src = ``; 
        }

        temperature.innerHTML = `${parseInt(json.main.temp)}&deg;C`;
        description.innerHTML = `${json.weather[0].main}`;
        humidity.innerHTML = `${json.main.humidity}%`;
        wind.innerHTML = `${json.wind.speed}Km/h`;

        weatherBox.style.display = ``;
        weatherDetails.style.display = ``;
        weatherBox.classList.add(`fadeIn`);
        weatherDetails.classList.add(`fadeIn`);
        container.style.height = `590px`;

    })

})

Scraping NHK News Web Easy with Python: A Step-by-Step Guide

Van_mai — Sat, 15 Feb 2025 09:37:38 +0000

🚀 Scraping NHK News Web Easy with Python

If you are learning Japanese. NHK News Web Easy is a very nice. Want to extract real-time news from NHK News Web Easy using Python?** In this tutorial, we'll use Selenium + BeautifulSoup to scrape the latest articles, save them in a structured format, and even export them as a Word document. 📝

📌 By the end of this tutorial, you will learn how to:

Fetch and parse dynamic web pages using Selenium
Extract news titles, links, and content with BeautifulSoup
Export data into a structured Word document
Avoid getting blocked and optimize your scraper 🚀

🌍 Demo: What We Are Building

Before we dive into the code, here’s what our scraper will do:

Visit NHK News Web Easy 🔍
Extract the latest news headlines & links 📄
Scrape the full article content 📰
Save the data into a structured Word file 📝

💡 Here’s an example of the output file:

🛠️ Step 1: Install Required Packages

We will use the following Python libraries:

requests: To fetch webpage content
selenium: To handle dynamic JavaScript-loaded content
bs4 (BeautifulSoup): To parse HTML
docx: To save news articles into a Word document

👉 Install them using (Mac):

pip install requests selenium bs4 python-docx webdriver-manager

**🛠️ Step 2:Fetching the NHK News Web Easy Homepage

Since NHK News Web Easy loads content dynamically using JavaScript, we need Selenium to handle the page rendering.

Here’s how to launch a headless Chrome browser and fetch the homepage:


from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.chrome.options import Options
from webdriver_manager.chrome import ChromeDriverManager
import time

# Configure Selenium WebDriver
chrome_options = Options()
chrome_options.add_argument("--headless")  # Run in background
chrome_options.add_argument("--disable-gpu")
chrome_options.add_argument("--no-sandbox")

# Launch the WebDriver
service = Service(ChromeDriverManager().install())
driver = webdriver.Chrome(service=service, options=chrome_options)

# Visit NHK News Web Easy
NHK_URL = "https://www3.nhk.or.jp/news/easy/"
driver.get(NHK_URL)

# Wait for JavaScript to load content
time.sleep(5)

# Get the HTML source code
html = driver.page_source
driver.quit()

print(html[:500])  # Display first 500 characters of the HTML

✅ What this does:
• Starts a headless Chrome browser to load JavaScript content
• Fetches the entire rendered webpage (including dynamically loaded articles)

🔍 Step 3: Extracting News Links

Once we have the full page source, we use BeautifulSoup to extract all news articles.

from bs4 import BeautifulSoup

# Parse HTML with BeautifulSoup
soup = BeautifulSoup(html, "html.parser")

# Extract news article links
articles = soup.select("article.news-list__item a")
news_links = ["https://www3.nhk.or.jp" + a["href"] for a in articles]

print(f"Found {len(news_links)} news articles.")
print(news_links[:5])  # Preview first 5 links

✅ This code:
• Finds all article links on the homepage
• Extracts absolute URLs for further scraping

📰 Step 4: Scraping Full Article Content

Now, let’s fetch each article and extract title + content.

import requests

headers = {
    "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36"
}

for news_url in news_links[:5]:  # Limit to 5 articles
    response = requests.get(news_url, headers=headers)
    response.encoding = "utf-8"

    news_soup = BeautifulSoup(response.text, "html.parser")
    title = news_soup.find("h1", class_="article-title").text.strip()
    content_blocks = news_soup.find("div", class_="article-body")

    content = "\n".join([p.text.strip() for p in content_blocks.find_all("p")]) if content_blocks else "No content available."

    print(f"📌 {title}\n{content[:200]}...\n")

🚀 Conclusion

✅ This script:
• Fetches each news page
• Extracts the title and article body
• Prints a preview of the first 200 characters

📂 Step 5: Saving News to Word

Finally, let’s store the scraped articles in a structured Word document.

from docx import Document

doc = Document()
doc.add_heading("NHK News Web Easy Articles", level=1)

for news_url in news_links[:5]:  # Limit to 5 articles
    response = requests.get(news_url, headers=headers)
    response.encoding = "utf-8"
    news_soup = BeautifulSoup(response.text, "html.parser")

    title = news_soup.find("h1", class_="article-title").text.strip()
    content_blocks = news_soup.find("div", class_="article-body")
    content_jp = "\n".join([p.text.strip() for p in content_blocks.find_all("p")]) if content_blocks else "No content."

    doc.add_heading(title, level=2)
    doc.add_paragraph(f"Japanese Text:\n{content_jp}")
    doc.add_paragraph("-" * 50)

doc.save("NHK_News.docx")
print("✅ NHK_News.docx saved successfully!")

🎯 Now you have a fully automated news scraper!

🚀 Conclusion

• 📡 Selenium fetches dynamically loaded content
• 🔍 BeautifulSoup extracts articles
• 📝 python-docx saves content in Word format

“This is the final code. You can change the number 5 in for news_url in news_links[:5]: to any other number to adjust the number of news articles you want to generate.”

import requests
from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.chrome.options import Options
from webdriver_manager.chrome import ChromeDriverManager
import time
from bs4 import BeautifulSoup
from docx import Document

# Fake browser request to prevent NHK from blocking
headers = {
    "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36"
}

# Launch Selenium
chrome_options = Options()
chrome_options.add_argument("--headless")  # Run in the background
chrome_options.add_argument("--disable-gpu")
chrome_options.add_argument("--no-sandbox")
chrome_options.add_argument("start-maximized")
chrome_options.add_argument("disable-infobars")
chrome_options.add_argument("--disable-extensions")
service = Service(ChromeDriverManager().install())
driver = webdriver.Chrome(service=service, options=chrome_options)

# Access NHK Easy News
NHK_URL = "https://www3.nhk.or.jp/news/easy/"
driver.get(NHK_URL)

# Wait 5 seconds for JavaScript to load
time.sleep(5)

# Get the page HTML
html = driver.page_source
driver.quit()  # Close the browser

# Parse the HTML
soup = BeautifulSoup(html, "html.parser")

# Extract news links
articles = soup.select("article.news-list__item a")
news_links = ["https://www3.nhk.or.jp" + a["href"] for a in articles]

print(f"Retrieved {len(news_links)} news articles")
if not news_links:
    print("❌ No news found, please check the HTML structure!")
    exit()

# Create a Word document
doc = Document()
doc.add_heading("NHK News Web Easy Article Collection", level=1)

for news_url in news_links[:20]:  # Scrape only the first 20 news articles
    print(f"Fetching: {news_url}")

    # Retrieve the news page
    response = requests.get(news_url, headers=headers)
    response.encoding = "utf-8"  # Ensure UTF-8 decoding
    news_soup = BeautifulSoup(response.text, "html.parser")

    # Get news title (updated class)
    title_tag = news_soup.find("h1", class_="article-title")
    title = title_tag.text.strip() if title_tag else "No Title"

    # Get news content (updated class)
    content_blocks = news_soup.find("div", class_="article-body")
    if content_blocks:
        content_jp = "\n".join([p.text.strip() for p in content_blocks.find_all("p")])
    else:
        content_jp = "No Content"

    print(f"✅ Successfully retrieved: {title}")

    # Write to Word document
    doc.add_heading(title, level=2)
    doc.add_paragraph(f"Original Japanese Text:\n{content_jp}")
    doc.add_paragraph("-" * 50)

# Save Word file
doc.save("NHK_News.docx")
print("✅ Article collection completed, saved as NHK_News.docx")