WeatherApp/index.html at main · agrim712/WeatherApp · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html>
    <head>
        <title>Weather API</title>
        <link rel="stylesheet" href="style.css">
        <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Merriweather+Sans:wght@300;400;500;600;700&display=swap"
    rel="stylesheet" />
    <meta charset="UTF-8">
    </head>
    <body>
        <div class="wrapper">
            <h1>Weather App</h1>
            <div class="tab-container">
                <p class="tab" data-user>Your Weather</p>
                <p class="tab" data-search>Search Weather</p>
            </div>
            <div class="weather-container">
                <div class="sub-container grant-location-container">
                    <img src="./assets/location.png" width="80" height="80" loading="lazy">

                    <h3>Grant Location Access</h3>
                    <p>Allow access to get weather information</p>
                    <button class="btn" data-grantAccess>Grant Access</button>
                </div>
                <form class="form-container" data-SearchForm>
                    <input placeholder="Search for city..." data-searchInput>
                    <button class="btn">
                        <img src="./assets/search.png" width="20" height="20" loading="lazy">
                    </button>
                </form>
                <div class="loading-container">
                    <img src="./assets/loading.gif" width="150" height="150">
                    <p>Loading</p>
                </div>
                <div class="err">
                <img src="./assets/not-found.png" width="250" height="250" class="errors">
                <p class="para">City Not Found</p>
                </div>
                <div class="sub-container user-info-container">
                    <div class="name">
                        <p data-cityName></p>
                        <img data-countryIcon>
                    </div>
                    <p data-weatherDesc></p>
                    <img data-weatherIcon>
                    <p data-temp></p>
                    <div class="parameter-container">
                        <div class="parameter">
                            <img src="./assets/wind.png">
                            <p>windspeed</p>
                            <p data-windspeed></p>
                        </div>
                        <div class="parameter">
                            <img src="./assets/humidity.png">
                            <p>humidity</p>
                            <p data-humidity></p>
                        </div>
                        <div class="parameter">
                            <img src="./assets/cloud.png">
                            <p>Clouds</p>
                            <p data-cloudiness></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="code.js"></script>
    </body>
</html>