Weather API 天气应用 API调用分享

写什么都火不了

已于 2023-01-23 13:05:05 修改

阅读量3.7k

点赞数 2

文章标签： javascript css 前端 html

于 2023-01-23 13:04:00 首次发布

原文链接：https://github.com/hosseinnabi-ir/Advanced-Weather-App-using-CSS-and-JavaScript

版权

Weather API 分享
链接：https://openweathermap.org/api
在这里插入图片描述
注册默认是One Call API 3.0 适合学生项目练手
提供以下天气数据：

当前天气
每小时、分钟预报
48小时每小时预报
8天每日预报
国家天气警报
历史天气数据（自 1979 年 1 月 1 日起）

如何调用API？

// 步骤如下：
// 1. 注册账号，获得API Key
// 2. 粘贴下方 API Calls
// 3. {API key} 更改为自己的API key即可
https://api.openweathermap.org/data/3.0/onecall?lat={lat}&lon={lon}&exclude={part}&appid={API key}

如果您也想做类似网页版天气搜索，请继续往下看吧～

登录页面
搜索页面展示
404 NOT FOUND Page
如果不喜欢，您可以任意更改图片样式～

下面是 HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Fontawesome Icons v6.2.0 -->
    <script src="https://kit.fontawesome.com/7c8801c017.js" crossorigin="anonymous"></script>

    <!-- Roboto Font -->
    <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">
    
    <!-- CSS File -->
    <link rel="stylesheet" href="css/style.css">

</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" alt="...">
            <p>Oops! Invalid Location :/</p>
        </div>

        <div class="weather-box">
            <img src="" alt="...">
            <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>
    <!-- JS File -->
    <script src="js/script.js" type="text/javascript"></script>
</body>

</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: #678699;  <!-- 更改整体背景颜色--!>
   
}

.container {
    position: relative;
    width: 400px;
    height: 105px;
    background: #fff;
    padding: 28px 32px;
    overflow: hidden;
    border-radius: 18px;
    font-family: 'Roboto', sans-serif;
    transition: .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: 24px;
    font-weight: 500;
    text-transform: uppercase;
    padding-left: 32px;
}

.search-box input::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: 22px;
    transition: .4s ease;
}

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

.search-box i {
    position: absolute;
    color: #06283Ddc;
    font-size: 28px;
}

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

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

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

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

.weather-box .description {
    color: #06283Ddc;
    font-size: 22px;
    font-weight: 500;
    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-left: 20px;
    justify-content: flex-start;
}

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

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

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

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

.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: #06283Ddc;
    font-size: 22px;
    font-weight: 500;
    margin-top: 12px;
}

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

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

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

下面是 JavaScript 代码

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 APIKey = '输入APIKey;
    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=${APIKey}`)
        .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)}<span>°C</span>`;
            description.innerHTML = `${json.weather[0].description}`;
            humidity.innerHTML = `${json.main.humidity}%`;
            wind.innerHTML = `${parseInt(json.wind.speed)}Km/h`;

            weatherBox.style.display = '';
            weatherDetails.style.display = '';
            weatherBox.classList.add('fadeIn');
            weatherDetails.classList.add('fadeIn');

            container.style.height = '590px';

        });

});