Merge pull request #3 from KiraIsmailova/master

title

01-basics/10-create-app/index.html

@@ -8,4 +8,4 @@
     <div id="app"></div>
     <script type="module" src="./script.js"></script>
   </body>
-</html>
+</html> 

01-basics/10-create-app/script.js

@@ -1 +1,32 @@
-import { defineComponent, createApp } from 'vue'
+import { defineComponent, createApp } from 'vue';
+
+const App = defineComponent({
+  name: 'App',
+
+  setup() {
+    function formattedData() {
+      const date = new Date();
+
+      const options = { 
+        dateStyle: 'long',
+      };
+
+      return date.toLocaleDateString(navigator.language, options);
+    }
+
+    const DATE = formattedData();
+
+    return {
+      formattedData,
+      DATE,
+    }
+  },
+
+  template: `
+    <div>Сегодня {{ DATE }}</div>
+  `
+})
+
+const app = createApp(App);
+const vm = app.mount('#app');
+window.vm = vm;

01-basics/20-weather/WeatherApp.js

@@ -4,44 +4,66 @@ import { getWeatherData, WeatherConditionIcons } from './weather.service.ts'
 export default defineComponent({
   name: 'WeatherApp',
 
+  setup() {
+    const weatherData = getWeatherData();
+    console.log(weatherData);
+    console.log(WeatherConditionIcons);
+
+    function checkWeatherCondition(key, obj) {
+      let result;
+      if (obj.hasOwnProperty(key)) {
+        result = obj[key];
+      } else {
+        result = '';
+      }
+      return result;
+    }
+
+    return {
+      weatherData,
+      WeatherConditionIcons,
+      checkWeatherCondition,
+    }
+  },
+
   template: `
     <div>
       <h1 class="title">Погода в Средиземье</h1>
-
       <ul class="weather-list unstyled-list">
-        <li class="weather-card weather-card--night">
-          <div class="weather-alert">
+        <li v-for="(weather, index) in weatherData" :key="index" class="weather-card"
+        :class="{'weather-card--night' : weather.current.dt < '07:00' }">
+          <div class="weather-alert" v-if="weather.alert">
             <span class="weather-alert__icon">⚠️</span>
-            <span class="weather-alert__description">Королевская метеослужба короля Арагорна II: Предвещается наступление сильного шторма.</span>
+            <span class="weather-alert__description">{{weather.alert.sender_name}}: {{ weather.alert.description }}</span>
           </div>
           <div>
             <h2 class="weather-card__name">
-              Гондор
+              {{ weather.geographic_name }}
             </h2>
             <div class="weather-card__time">
-              07:17
+              {{ weather.current.dt }}
             </div>
           </div>
           <div class="weather-conditions">
-            <div class="weather-conditions__icon" title="thunderstorm with heavy rain">⛈️</div>
-            <div class="weather-conditions__temp">15.0 °C</div>
+            <div class="weather-conditions__icon" :title="weather.current.weather.description">{{ checkWeatherCondition(weather.current.weather.id, WeatherConditionIcons) }}</div>
+            <div class="weather-conditions__temp">{{ (weather.current.temp - 273.15).toFixed(1) }} °C</div>
           </div>
           <div class="weather-details">
             <div class="weather-details__item">
               <div class="weather-details__item-label">Давление, мм рт. ст.</div>
-              <div class="weather-details__item-value">754</div>
+              <div class="weather-details__item-value">{{ Math.round(weather.current.pressure * 0.75) }}</div>
             </div>
             <div class="weather-details__item">
               <div class="weather-details__item-label">Влажность, %</div>
-              <div class="weather-details__item-value">90</div>
+              <div class="weather-details__item-value">{{ weather.current.humidity }}</div>
             </div>
             <div class="weather-details__item">
               <div class="weather-details__item-label">Облачность, %</div>
-              <div class="weather-details__item-value">100</div>
+              <div class="weather-details__item-value">{{ weather.current.clouds }}</div>
             </div>
             <div class="weather-details__item">
               <div class="weather-details__item-label">Ветер, м/с</div>
-              <div class="weather-details__item-value">10.5</div>
+              <div class="weather-details__item-value">{{ weather.current.wind_speed }}</div>
             </div>
           </div>
         </li>

01-basics/20-weather/main.js

@@ -3,4 +3,4 @@ import './weather.css'
 import { createApp } from 'vue'
 import WeatherApp from './WeatherApp.js'
 
-createApp(WeatherApp).mount('#app')
+createApp(WeatherApp).mount('#app');