Weather-App-JavaScript/weather.html at master · 2022bit002/Weather-App-JavaScript · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Know your Weather</title>
    <link rel="stylesheet" href="font/Rimouski.css">
    <link rel="stylesheet" href="weather.css">
</head>

<body>

    <div class="container" id="mainbox">
        <div class="app-title">
          <h2><p >Know Your Weather</p></h2>
        </div>
        <div class="notification"> </div>
        <!-- Add this to your HTML file -->
        <center>
            <div class="c">
                <div class="k">
        <select id="locationSelector">
            <option value="current">Current Location</option>
            <option value="mumbai">Mumbai, India</option>
            <option value="delhi">Delhi, India</option>
            <option value="kolkata">Kolkata, India</option>
            <option value="chennai">Chennai, India</option>
            <option value="bangalore">Bangalore, India</option>
            <option value="nagpur">Nagpur, India</option>
            <option value="vizag">Visakhapatnam, India</option>
            <option value="jammu">Jammu, India</option>
            <option value="ahmedabad">Ahmedabad, India</option>
            <option value="bhopal">Bhopal, India</option>
            <option value="lucknow">Lucknow, India</option>
            <option value="tokyo">Tokyo, Japan</option>
            <option value="newyork">New York, USA</option>
            <option value="paris">Paris, France</option>
            <option value="sydney">Sydney, Australia</option>
            <option value="beijing">Beijing, China</option>
            <option value="rio">Rio de Janeiro, Brazil</option>
            <option value="london">London</option>
            <option value="berlin">Berlin</option>
            <option value="rome">Rome</option>
            <option value="madrid">Madrid</option>
            <option value="sydney">Sydney</option>
            <option value="tokyo">Tokyo</option>
            <option value="cairo">Cairo</option>
            <option value="toronto">Toronto</option>
            <option value="moscow">Moscow</option>
            <option value="rio">Rio de Janeiro</option>
            <option value="singapore">Singapore</option>
            <option value="dubai">Dubai</option>
        </select><!-- Add this element in your HTML where you want to display wind speed -->
        <p class="wind-speed"></p>
    </div>        <div id="aw">
        <img id="earth" src="earth-1303628_640.png" alt=""></div>
    </center>

        <!-- Add this to your HTML file -->
     <div class="a">

        <div class="weather-container" id="box1">
            <center>
                <h3>Today's Weather</h3>
                </center>
            <div class="weather-icon">
                <img src="icons/unknown.png" alt="">
            </div>
            <div class="temperature-value">
                 <p>- °<span>C</span></p>
            </div>
            <div class="temperature-description">
                <p> - </p>
            </div>
            <div class="location">
                <p>-</p>
            </div>
        </div>
        <!-- Add this to your HTML file -->
        <center>
            <div class="tomorrow-weather" id="box2" style="background-color: rgb(255, 210, 168);">
              <div class="q">  <h3>Tomorrow's Weather</h3></div>
                <div class="tomorrow-icon"></div>
                <p class="tomorrow-temperature"></p>
                <p class="tomorrow-description"></p>
                <div class="location">
                    <p>same as above</p>
                </div>
            </div>
        </center>
    </div>
    <div class="rain">
        <p class="rain-today"></p>
        <p class="rain-tomorrow"></p>

    </div>


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

</html>