Noormasarwa · Noormasarwa · Dec 4, 2020 · Dec 4, 2020 · Mar 25, 2021 · Mar 25, 2021
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/README.md b/README.md
@@ -0,0 +1 @@
+
diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
+        integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
+    <link rel="stylesheet" href="style.css">
+    <title>
+        Whethear App 
+    </title>
+</head>
+
+<body>
+
+    <script id="weather-template" type="text/x-handlebars-template">
+        {{#each cities}}
+        <div class="card">
+            <div class="city">{{name}}</div>
+            <div class="temperature">{{temperature}}<span>&#8451;</span></div>
+            <div class="condition">{{condition}}</div>
+            <img src="http://openweathermap.org/img/wn/{{conditionPic}}@2x.png">
+        </div>
+        {{/each}}
+    </script>
+
+    <div id="container">
+        <div id="inputSearchBar">
+            <input type="text" id ="textLine">
+            <i class="fas fa-search" id="searchBtn"></i>
+        </div>
+        <div id="weatherContainer"></div>
+
+
+    </div>
+    <script src="https://code.jquery.com/jquery-3.3.1.js" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.4/handlebars.js"></script>
+    <script src="Model.js"></script>
+    <script src="View.js"></script>
+    <script src="main.js"></script>
+
+</body>
+
+</html>
diff --git a/dist/main.js b/dist/main.js
@@ -0,0 +1,9 @@
+const model = new Model()
+const view = new View()
+
+$(`#searchBtn`).on('click',function(){
+    const cityName = $('#textLine').val()
+    if(!cityName)
+        return
+    model.getCityData(cityName).then(val => view.renderer(val))
+})
diff --git a/dist/model.js b/dist/model.js
@@ -0,0 +1,42 @@
+class Model{ 
+    constructor(){
+        this.cityData = []
+
+    }
+
+    async getDataFromDB(){
+        const data = await $.get('/cities')
+        return data
+    }
+
+    async getCityData(cityName){ 
+        const data = await $.get(`/city/${cityName}`)
+
+        this.cityData.push({
+            name:data.name, 
+            temperature:(data.main.temp - 273.15).toFixed(2),
+            condition:data.weather[0].main,
+            conditionPic:data.weather[0].icon
+        })
+        return this.cityData
+    }
+
+    async saveCity(cityObj){
+        return $.post('/city',cityObj,function(response){
+            console.log(response)
+        })
+
+    }
+
+    async removeCity(cityName){
+        return $.ajax({
+            url: `/city/${cityName}`,
+            type: 'DELETE',
+            success: function(result) {
+                console.log(result)
+                return this.getDataFromDB()
+            }
+        });
+    }
+
+}
diff --git a/dist/style.css b/dist/style.css
@@ -0,0 +1,36 @@
+
+#container{
+    width : 100%;
+    display:grid;
+    grid-template-rows: auto auto;
+    grid-gap:10%;
+}
+
+#inputSearchBar{
+    width:100%;
+    display:grid;
+    grid-template-columns: 10fr 2fr;
+    grid-gap:10%;
+}
+
+
+#weatherContainer{
+    width:100%;
+    display:grid;
+    grid-gap:10%;
+    size:300%;
+}
+
+.card{
+    width:100%;
+    height: 100%;
+    display:grid;
+    grid-template-columns: auto auto auto auto;
+    background: #1995AD;
+    border-radius: 1ch;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    justify-items: center;
+    align-items: center;
+
+}
+
diff --git a/dist/view.js b/dist/view.js
@@ -0,0 +1,11 @@
+class View{
+    constructor(){
+        //handlebars init
+        this.weatherTemplate = $(`#weather-template`).html()
+        this.weatherSelector = Handlebars.compile(this.weatherTemplate);
+    }
+    renderer(cities){
+        const newHTML = this.weatherSelector({ cities });
+        $('#weatherContainer').empty().append(newHTML);
+    }
+}