<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="/image/weather...jpeg">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
<title>Weather App</title>
</head>
<body>
<div class="wrapper">
<h1>Weather App</h1>
<div class="tab-container">
<p class="tab" data-userWeather>Your Weather</p>
<p class="tab" data-searchWeather>Search Weather </p>
</div>
<div class="weather-container">
<!-- grant location container -->
<div class="grant-location-container sub-container">
<img src="/image/location.png" alt="" width="80" height="80" loading="lazy">
<p>Grant Location Access</p>
<p>Allow Access to get weather Information</p>
<button class="btn" data-grantAccess>Grant Access</button>
</div>
<!-- Search form -->
<form class="form-container" data-searchForm>
<input placeholder="Search for city..." data-searchInput>
<button class="btn">
<img src="/image/search.png" alt="" width="20" height="20" loading="lazy">
</button>
</form>
<!-- Loading Screen -->
<div class="loading-container sub-container">
<img src="/image/loading.gif" alt="" width="150" height="150">
<p>Loading</p>
</div>
<!-- show weather Info -->
<div class="user-info-container sub-container">
<!-- city name and flag -->
<div class="name">
<p data-cityName></p>
<img data-countryIcon>
</div>
<!-- Weather description -->
<p data-weatherDesc></p>
<!-- Weather Icon -->
<img data-weatherIcon>
<!-- temperature -->
<!-- <div class="tempu">
<span data-temp></span>
<span>°C</span>
</div> -->
<p data-temp></p>
<!-- 3 cards -parameters -->
<div class="parameter-container">
<!-- card1 -->
<div class="parameter">
<img src="/image/wind.png" alt="">
<p >WINDSPEED</p>
<p data-windspeed></p>
</div>
<!-- card 2 -->
<div class="parameter">
<img src="/image/humidity.png" alt="">
<p>HUMIDITY</p>
<p data-humidity></p>
</div>
<!-- card 3 -->
<div class="parameter">
<img src="/image/cloud.png" alt="">
<p>CLOUDS</p>
<p data-cloudiness></p>
</div>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
WeatherSense 是一款提供您所在地区实时天气信息的 Web 应用程序。它允许您查看当前温度、风速、湿度和云量。此外，您还可以按城市名称搜索天气数据.zip （11个子文件） 
Weather-App-main 
style.css 4KB .github workflows generator-generic-ossf-slsa3-publish.yml 2KB image weather...jpeg 8KB
cloud.png 4KB
loading.gif 1.91MB search.png 2KB wind.png 1KB location.png 37KB humidity.png 13KB
index.html 3KB script.js 6KB资源评论
