Initial commit-App working basically

R0N1n-dev · May 17, 2021 · 8fc34e5 · 8fc34e5
commit 8fc34e5
Show file tree

Hide file tree

Showing 5 changed files with 143 additions and 0 deletions.
diff --git a/austria.jpg b/austria.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <link rel="stylesheet" href="/main.css" />
+    <title>Weather App 2</title>
+</head>
+
+<body>
+    <div class="app-wrap">
+        <div class="app">
+            <main>
+                <section class="location">
+                    <div class="city">Kampala,UG</div>
+                    <div class="date"></div>
+                </section>
+                <div class="current">
+                    <div class="temp"><span>°C</span></div>
+                    <div class="weather"></div>
+                    <img alt="weather-icon" class="icon">
+                    <div class="description"></div>
+                </div>
+                <div class="tomorrow"><span>°C</span></div>
+            </main>
+        </div>
+    </div>
+
+    <script src="jquery-3.5.1.min.js"></script>
+    <script src="main.js"></script>
+</body>
+
+</html>
diff --git a/jquery-3.5.1.min.js b/jquery-3.5.1.min.js
diff --git a/main.css b/main.css
@@ -0,0 +1,89 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: "Sansation", sans-serif;
+    background-image: url("austria.jpg");
+    background-size: cover;
+    background-position: top center;
+}
+
+.app-wrap {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+.app {
+    display: flex;
+    border: 1px solid transparent;
+    border-radius: 20px;
+    width: 350px;
+    flex-direction: column;
+    margin: auto;
+    background: linear-gradient( 200deg, rgba(49, 50, 44, 0.71), rgb(139, 128, 212, 0.71));
+}
+
+main {
+    flex: 1 1 100%;
+    padding: 25px 25px 50px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+}
+
+.location .city {
+    color: white;
+    font-size: 32px;
+    font-weight: 500;
+    margin-bottom: 5px;
+}
+
+.location .date {
+    color: white;
+    font-size: 18px;
+}
+
+.current .temp {
+    color: white;
+    font-size: 4rem;
+    font-weight: 900;
+    margin: 30px 0px;
+    text-shadow: 3px 5px rgba(0, 0, 0, 0.7);
+}
+
+.current .temp span {
+    font-weight: 300;
+}
+
+.current .weather {
+    color: white;
+    font-size: 32px;
+    font-weight: 700;
+    font-style: italic;
+    margin-bottom: 15px;
+    text-shadow: 0px 3px rgba(0, 0, 0, 0.3);
+}
+
+.current .description {
+    color: white;
+    font-size: 32px;
+    font-weight: 700;
+    text-shadow: 0px 4px rgba(0, 0, 0, 0.4);
+}
+
+.tomorrow {
+    color: white;
+    font-size: 32px;
+    font-weight: 600;
+    margin: 10px 0;
+    text-shadow: 0px 4px rgba(0, 0, 0, 0.4);
+}
+
+img.icon {
+    filter: invert(1);
+}
diff --git a/main.js b/main.js
@@ -0,0 +1,17 @@
+$.getJSON(
+    "https://api.openweathermap.org/data/2.5/onecall?lat=32.5822&lon=0.3163&units=metric&exclude=minutely,hourly,alerts&appid=e6aea0474f2b4a44e1f0c3ddadc0b4ed",
+    function(data) {
+
+        var temp = Math.round(data.current.temp);
+        var main = data.current.weather[0].main;
+        var description = data.current.weather[0].description;
+        var tomorrow = data.daily[0].temp.day;
+        var icon = "http://openweathermap.org/img/wn/" + data.current.weather[0].icon + "@2x" + ".png";
+        $(".date").append(new Date());
+        $(".temp").prepend(temp);
+        $(".weather").append(main);
+        $(".icon").attr('src', icon);
+        $(".description").append(description);
+        $(".tomorrow").prepend(tomorrow);
+    }
+);