weather-report/index.html at bfb6f784dc862ea34f9d3ef4d09f74d541f23bef · AdaGold/weather-report · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weather Report</title>
    <link href="./styles/index.css" rel="stylesheet">
</head>
<body>
    <header>
        <h1>WEATHER REPORT</h1>
    </header>
    <!-- <section> -->
        <div class="left-column box" id="temp-input">
            <h2 id="temperature-text">TEMPERATURE</h2>

            <button type="button" id="increase-temp">⬆️</button>
            <p id="temp">72</p>
            <button type="button" id="decrease-temp">⬇️</button>
            <button type="button" id="realtime-temp">Get Realtime Temperature</button>
        </div>
        <div class="left-column box" id="sky-input">
            <h2 id="sky-text">SKY</h2>
            <!-- dropdown source: https://www.w3schools.com/howto/howto_js_cascading_dropdown.asp -->
            <form id="dropdown"> <!-- Not sure what this is supposed to look like -->
                <select name="sky" id="sky-select">
                <option value="sunny">Sunny</option>
                <option value="cloudy">Cloudy</option>
                <option value="rainy">Rainy</option>
                <option value="snowy">Snowy</option>
                </select>
                <br><br>
            </form>
        </div>
        <div class="left-column box" id="city-input">
            <h2>CITY NAME</h2>
            <!-- blank field source: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_form_target-->
            <form action="/action_page.php" method="get" target="_blank">
                <input type="text" id="city-name-input" name="city-name-input">
            </form>
            <button id="reset-city-name-2">Reset</button>
        </div>
        <div class="right-column" id="city-container">
            <h2 id="city-display">✨ Seattle ✨</h2>
        </div>
        <div id="weather-text">
            <h2>WEATHER GARDEN</h2>
        </div>
        <div class="right-column box" id="emoji-display">
            <p id="sky-container">☁️ ☁️ ☁️ ☀️ ☁️ ☁️</p>
            <p id="landscape">🌸🌿🌼__🌷🌻🌿_☘️🌱_🌻🌷</p>
        </div>
    <!-- </section> -->
    <script src="src/index.js" type="text/javascript"></script>
    <script src="./node_modules/axios/dist/axios.min.js"></script>
</body>
</html>