weatherApp/index.html at main · samwich11/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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!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>
    <link rel="stylesheet" href="style.css">
    <!-- IMPORT GOOGLE ICONS -->
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
</head>

<body>

    <main class="main-container">

        <header class="input-container">
            <!-- <input class="city-input" placeholder="Search City"> -->
            <input class="city-input" placeholder="Buscar Ciudad">
            <button class="search-btn">
                <span class="material-symbols-outlined">
                    search
                </span>
            </button>
        </header>

        <section class="weather-info" style="display: none;">
            <div class="location-date-container">
                <div class="location">
                    <span class="material-symbols-outlined">
                        location_on
                    </span>
                    <h4 class="country-txt">Peru</h4>
                </div>
                <h5 class="current-date-txt regular-txt">Wed, 25 Sep</h5>
            </div>

            <div class="weather-summary-container">
                <img src="assets/weather/clouds.svg" alt="" class="weather-summary-img">
                <div class="weather-summary-info">
                    <h1 class="temp-txt">29 °C</h1>
                    <h3 class="condition-txt regular-txt">Clouds</h3>
                    <h5 class="feels-like-txt regular-txt">Sensación real: </h5>
                </div>
            </div>

            <div class="weather-conditions-container">
                <div class="condition-item">
                    <span class="material-symbols-outlined">
                        water_drop
                    </span>
                    <div class="condition-info">
                        <h5 class="regular-txt">Humedad</h5>
                        <h5 class="humidity-value-txt">55%</h5>
                    </div>
                </div>

                <div class="condition-item">
                    <span class="material-symbols-outlined">
                        air
                    </span>
                    <div class="condition-info">
                        <h5 class="regular-txt">Velocidad</h5>
                        <h5 class="wind-value-txt">2 m/s</h5>
                    </div>
                </div>

                <div class="condition-item">
                    <span class="material-symbols-outlined">
                        compress
                    </span>
                    <div class="condition-info">
                        <h5 class="regular-txt">Presión</h5>
                        <h5 class="pressure-value-txt">1015 hPa</h5>
                    </div>
                </div>

            </div>

            <div class="forecast-items-container">
                <div class="forecast-item">
                    <h5 class="forecast-item-date regular-txt">23 Sep</h5>
                    <img src="assets/weather/thunderstorm.svg" class="forecast-item-img">
                    <h5 class="forecast-item-temp">29 °C</h5>
                </div>
                <div class="forecast-item">
                    <h5 class="forecast-item-date regular-txt">23 Sep</h5>
                    <img src="assets/weather/thunderstorm.svg" class="forecast-item-img">
                    <h5 class="forecast-item-temp">29 °C</h5>
                </div>
                <div class="forecast-item">
                    <h5 class="forecast-item-date regular-txt">23 Sep</h5>
                    <img src="assets/weather/thunderstorm.svg" class="forecast-item-img">
                    <h5 class="forecast-item-temp">29 °C</h5>
                </div>
                <div class="forecast-item">
                    <h5 class="forecast-item-date regular-txt">23 Sep</h5>
                    <img src="assets/weather/thunderstorm.svg" class="forecast-item-img">
                    <h5 class="forecast-item-temp">29 °C</h5>
                </div>
            </div>

        </section>

        <section class="search-city section-message">
            <img src="assets/message/search-city.png" alt="">
            <div>
                <h1>Buscar Ciudad</h1>
                <h4 class="regular-txt">
                    Encuentra las condiciones meteorológicas de tu ciudad
                </h4>
            </div>
        </section>

        <section class="not-found section-message" style="display: none;">
            <img src="assets/message/not-found.png" alt="">
            <div>
                <h1>Oops! 🤕</h1>
                <h4 class="regular-txt">
                    No encontramos esa ciudad/país. Quizás está escondido en un mapa antiguo. ¡Intenta con otro!
                </h4>
            </div>
        </section>

    </main>

    <script src="script.js" defer></script>
</body>

</html>