Dashboard Temp Share Shortlinks Frames API

HTMLify

index.html
Views: 20 | Author: cody 
  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
<!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>Document</title>
    <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" />
    <link rel="stylesheet" href="styles.css">
</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="sub-container grant-location-container">
                <img src="./assets/location.png" 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-container-->
            <form class="form-container" data-searchForm>
                <input placeholder="Search for City..." data-searchInput>
                <button class="btn" type="submit">
                    <img src="./assets/search.png"  width="20" height="20" loading="lazy">
                </button>
            </form>

            <!--- loading screen container -->
            <div class="sub-container loading-container">
                <img src="./assets/loading.gif" width="150" height="150">
                <p>Loading</p>
            </div>

            <!-- show weather info -->
            <div class="sub-container user-info-container">

                <!--city name and Flag-->
                <div class="name">
                    <p data-cityName></p>
                    <img data-countryIcon>
                </div>

                <!-- weather descriptuion-->
                <p data-weatherDesc></p>
                <!--weather Icon-->
                <img data-weatherIcon>
                <!--temperature-->
                <p data-temp></p>

                <!--3 cards - parameters-->
                <div class="parameter-container">

                    <!--card 1-->
                    <div class="parameter">
                        <img src="./assets/wind.png" >
                        <p>windspeed</p>
                        <p data-windspeed></p>
                    </div>

                    <!--card 2-->
                    <div class="parameter">
                        <img src="./assets/humidity.png" >
                        <p>humidity</p>
                        <p data-humidity></p>
                    </div>

                    <!--card 3-->
                    <div class="parameter">
                        <img src="./assets/cloud.png" >
                        <p>Clouds</p>
                        <p data-cloudiness></p>
                    </div>

                </div>


            </div>



        </div>


    </div>


    <script src="index.js"></script>
</body>
</html>

Share this file: