Merge pull request #55 from PritamSarbajna/improve-ui-weather

improve weatherApp UI
Shweta2024 · Dec 11, 2022 · 128a162 · 128a162
2 parents 21dc2fb + 4e1b17c
commit 128a162
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 7 deletions.
diff --git a/Weather-App/.gitignore b/Weather-App/.gitignore
@@ -0,0 +1 @@
+node_modules/
diff --git a/Weather-App/app.js b/Weather-App/app.js
@@ -38,4 +38,4 @@ app.listen(5000, function () {
     console.log("server started at port : 5000");
 });
 
-
+app.use('/static', express.static('static'))
diff --git a/Weather-App/index.html b/Weather-App/index.html
@@ -4,16 +4,21 @@
 <head>
     <meta charset="utf-8">
     <title>WeatherApp</title>
+    <link rel="stylesheet" href="/static/css/style.css">
 </head>
 
 <body>
-    <h1>Weather App</h1>
+    <div class="container">
 
-    <form action="/" method="post">
-        <label for="cityInput">Enter any city : </label>
-        <input id="cityInput" type="text" name="cityName">
-        <button type="subimt">Submit</button>
-    </form>
+        <div class="city">
+            <h1>Weather App</h1>
+            <form action="/" method="post">
+                <label for="cityInput">Enter any city : </label>
+                <input id="cityInput" type="text" name="cityName">
+                <button type="subimt">Submit</button>
+            </form>
+        </div>
+    </div>
 </body>
 
 </html>
diff --git a/Weather-App/static/css/style.css b/Weather-App/static/css/style.css
@@ -0,0 +1,58 @@
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    background: #222;
+    font-family: 'Open Sans', sans-serif;
+    background-image: url('https://source.unsplash.com/1600x900/?landscape');
+    font-size: 120%;
+}
+
+body {
+    background-color: black;
+    color: #fff;
+}
+
+button {
+    margin: .7em;
+    padding: 0.5rem;
+    border-radius: 1rem;
+    border: none;
+    outline: none;
+    background: #393232d7;
+    color: whitesmoke;
+    cursor: pointer;
+    transition: 0.2s ease-in-out;
+}
+
+.container {
+    display: flex;
+    padding: 2rem;
+    background: #000000d0;
+    border-radius: 30px;
+    width: 100%;
+    max-width: 420px;
+}
+
+.container .city {
+    justify-content: center;
+    align-items: center;
+}
+
+.container .city h1 {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.container .city #cityInput {
+    border: none;
+    outline: none;
+    padding: 0.4em;
+    border-radius: 24px;
+    background: #7c7c7c2b;
+    color: whitesmoke;
+    font-family: inherit;
+}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -38,4 +38,4 @@ app.listen(5000, function () {
		console.log("server started at port : 5000");
		});


		app.use('/static', express.static('static'))