js-tasks-ru · VolgaMashchytskaya · Dec 16, 2024 · Dec 18, 2024 · Dec 29, 2024 · Dec 29, 2024
diff --git a/00-intro/10-sum/index.html b/00-intro/10-sum/index.html
@@ -1,25 +1,28 @@
 <!DOCTYPE html>
 <html lang="ru">
-  <head>
-    <meta charset="UTF-8" />
-    <title></title>
-  </head>
-  <body>
-    <form id="form">
-      <p>
-        <label for="num-a">A:</label>
-        <input id="num-a" name="num-a" type="number" />
-      </p>
-      <p>
-        <label for="num-b">B:</label> <input id="num-b" name="num-b" type="number" />
-      </p>
-      <p>
-        <label>
-          A + B =
-        </label>
-        <output name="result"></output>
-      </p>
-    </form>
-    <script type="module" src="./script.js"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <title>First</title>
+</head>
+
+<body>
+  <form id="form">
+    <p>
+      <label for="num-a">A:</label>
+      <input id="num-a" name="num-a" type="number" />
+    </p>
+    <p>
+      <label for="num-b">B:</label> <input id="num-b" name="num-b" type="number" />
+    </p>
+    <p>
+      <label>
+        A + B =
+      </label>
+      <output name="result"></output>
+    </p>
+  </form>
+  <script type="module" src="./script.js"></script>
+</body>
+
+</html>
diff --git a/00-intro/10-sum/sum.js b/00-intro/10-sum/sum.js
@@ -6,5 +6,5 @@
  * @return {number} сумма чисел a и b
  */
 export function sum(a, b) {
-  // Решение
+  return a+b;
 }
diff --git a/01-basics/10-create-app/index.html b/01-basics/10-create-app/index.html
@@ -5,7 +5,7 @@
     <title>createApp</title>
   </head>
   <body>
-    <div id="app"></div>
+    <div id="app">hi</div>
     <script type="module" src="./script.js"></script>
   </body>
 </html>
diff --git a/01-basics/10-create-app/script.js b/01-basics/10-create-app/script.js
@@ -1 +1,19 @@
 import { defineComponent, createApp } from 'vue'
+
+const App = defineComponent({
+    name: 'app',
+
+    setup() {
+
+    var day = new Date();
+
+    return {
+      today: day.toLocaleDateString('navigator.language', { dateStyle: 'long' })
+    }
+  },
+
+  template: `
+  <div>Сегодня {{ today }}</div>`
+});
+
+createApp(App).mount('#app');
diff --git a/01-basics/20-weather/WeatherApp.js b/01-basics/20-weather/WeatherApp.js
@@ -3,49 +3,75 @@ import { getWeatherData, WeatherConditionIcons } from './weather.service.ts'
 
 export default defineComponent({
   name: 'WeatherApp',
+  setup() {
+    const weatherData = getWeatherData();
 
-  template: `
-    <div>
-      <h1 class="title">Погода в Средиземье</h1>
-
-      <ul class="weather-list unstyled-list">
-        <li class="weather-card weather-card--night">
-          <div class="weather-alert">
-            <span class="weather-alert__icon">⚠️</span>
-            <span class="weather-alert__description">Королевская метеослужба короля Арагорна II: Предвещается наступление сильного шторма.</span>
-          </div>
-          <div>
-            <h2 class="weather-card__name">
-              Гондор
-            </h2>
-            <div class="weather-card__time">
-              07:17
-            </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>
-          <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>
-            <div class="weather-details__item">
-              <div class="weather-details__item-label">Влажность, %</div>
-              <div class="weather-details__item-value">90</div>
-            </div>
-            <div class="weather-details__item">
-              <div class="weather-details__item-label">Облачность, %</div>
-              <div class="weather-details__item-value">100</div>
-            </div>
-            <div class="weather-details__item">
-              <div class="weather-details__item-label">Ветер, м/с</div>
-              <div class="weather-details__item-value">10.5</div>
-            </div>
-          </div>
-        </li>
-      </ul>
-    </div>
-  `,
-})
+    function convertToCelsius(k) {
+      return (parseFloat(k - 273.15)).toFixed(1) ;
+    }
+
+    function formatPressure(hPa){
+      return  parseInt(Math.round(hPa*0.75));
+    }
+
+    function isNight(currentHour, sunrise, sunset) {
+
+      return currentHour < sunrise ||currentHour > sunset;
+      }
+
+
+      return {
+      weatherData,
+      WeatherConditionIcons,
+      formatPressure,
+      isNight,
+      convertToCelsius,
+    };
+  },
+
+ template: `
+ <div>
+  <h1 class="title">Погода в Средиземье</h1>
+
+  <ul class="weather-list unstyled-list">
+  <li v-for="data in weatherData" class="weather-card" :class="{ 'weather-card--night': isNight(data.current.dt, data.current.sunrise, data.current.sunset) }">
+      <div class="weather-alert" v-if="data.alert != null">
+        <span class="weather-alert__icon">⚠️</span>
+        <span class="weather-alert__description">{{ data.alert.sender_name }}:{{ data.alert.description }}</span>
+      </div>
+      <div>
+        <h2 class="weather-card__name">
+        {{ data.geographic_name }} 
+        </h2>
+        <div class="weather-card__time">
+        {{ data.current.dt }}
+        </div>
+      </div>
+      <div class="weather-conditions">
+        <div class="weather-conditions__icon" :title = data.current.weather.description>{{WeatherConditionIcons[data.current.weather.id]}}</div>
+        <div class="weather-conditions__temp">{{ convertToCelsius( data.current.temp ) }} °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">{{ formatPressure(data.current.pressure) }}</div>
+        </div>
+        <div class="weather-details__item">
+          <div class="weather-details__item-label">Влажность, %</div>
+          <div class="weather-details__item-value">{{ data.current.humidity }}</div>
+        </div>
+        <div class="weather-details__item">
+          <div class="weather-details__item-label">Облачность, %</div>
+          <div class="weather-details__item-value">{{ data.current.clouds }}</div>
+        </div>
+        <div class="weather-details__item">
+          <div class="weather-details__item-label">Ветер, м/с</div>
+          <div class="weather-details__item-value">{{ data.current.wind_speed }}</div>
+        </div>
+      </div>
+    </li>
+  </ul>
+</div>
+`,
+});
diff --git a/01-basics/20-weather/index.html b/01-basics/20-weather/index.html
@@ -11,3 +11,5 @@
     <script type="module" src="./main.js"></script>
   </body>
 </html>
+
+
diff --git a/02-basics-2/10-counter/CounterApp.js b/02-basics-2/10-counter/CounterApp.js
@@ -1,22 +1,45 @@
-import { defineComponent } from 'vue'
+import { couldStartTrivia } from 'typescript';
+import { defineComponent, ref } from 'vue'
 
 export default defineComponent({
   name: 'CounterApp',
 
-  setup() {},
+  setup() {
+
+    const count = ref (0);
+
+    function decrement(){
+      count.value--;
+
+    }
+
+    function increment(){
+      count.value++;
+    }
+
+  return {
+
+    decrement,
+    increment,
+    count
+
+    };
+  },
+
+
 
   template: `
     <div class="counter">
-      <button
+      <button @click="decrement" :disabled= "count === 0"
         class="button button--secondary"
         type="button"
         aria-label="Decrement"
         disabled
       >➖</button>
 
-      <span class="count" data-testid="count">0</span>
+      <span class="count" data-testid="count">{{ count }}</span>
 
-      <button
+      <button @click="increment" :disabled= "count === 5"
         class="button button--secondary"
         type="button"
         aria-label="Increment"

diff --git a/02-basics-2/20-broken-map/MapApp.js b/02-basics-2/20-broken-map/MapApp.js
@@ -1,4 +1,4 @@
-import { defineComponent, ref, watch } from 'vue'
+import { defineComponent, ref} from 'vue'
 
 export default defineComponent({
   name: 'MapApp',
@@ -13,27 +13,21 @@ export default defineComponent({
      * @param {MouseEvent} event
      */
     function handleClick(event) {
-      x = event.offsetX
-      y = event.offsetY
+      x.value = event.offsetX
+      y.value = event.offsetY
     }
 
-    // Следим за X и Y для установки нового положения
-    watch([x, y], () => {
-      // Находим метку и изменяем её положение
-      const map = document.querySelector('.pin')
-      map.style.left = `${x}px`
-      map.style.top = `${y}px`
-    })
-
     return {
       handleClick,
+      x,
+      y,
     }
   },
 
   template: `
     <div class="map" @click="handleClick">
       <img class="map-image" src="./map.png" alt="Map" draggable="false" />
-      <span class="pin">📍</span>
+      <span class="pin" :style="{ left: x + 'px', top: y + 'px' }">📍</span>
     </div>
   `,
 })
diff --git a/02-basics-2/30-calculator/CalculatorApp.js b/02-basics-2/30-calculator/CalculatorApp.js
@@ -1,26 +1,53 @@
-import { defineComponent } from 'vue'
+import { defineComponent, ref, computed } from 'vue'
 
 export default defineComponent({
   name: 'CalculatorApp',
 
-  setup() {},
+  setup() {
+    const firstOperand = ref('');
+    const secondOperand = ref('');
+    const operator = ref("sum"); 
+
+    const result = computed(() => {
+      switch (operator.value) {
+        case "sum":
+          return firstOperand.value + secondOperand.value;
+        case "subtract":
+          return firstOperand.value - secondOperand.value;
+        case "multiply":
+          return firstOperand.value * secondOperand.value;
+        case "divide":
+          return secondOperand.value !== 0 ? firstOperand.value / secondOperand.value : 'Ошибка: Деление на ноль';
+        default:
+          return 0;
+      }
+    });
+
+    return {
+      firstOperand,
+      secondOperand,
+      operator,
+      result,
+    };
+  },
+
 
   template: `
     <div class="calculator">
-      <input type="number" aria-label="First operand" />
+      <input type="number" aria-label="First operand" v-model = "firstOperand" />
 
       <div class="calculator__operators">
-        <label><input type="radio" name="operator" value="sum"/>➕</label>
-        <label><input type="radio" name="operator" value="subtract"/>➖</label>
-        <label><input type="radio" name="operator" value="multiply"/>✖</label>
-        <label><input type="radio" name="operator" value="divide"/>➗</label>
+        <label><input type="radio" name="operator" v-model="operator" value="sum"/>➕</label>
+        <label><input type="radio" name="operator" v-model="operator" value="subtract"/>➖</label>
+        <label><input type="radio" name="operator" v-model="operator" value="multiply"/>✖</label>
+        <label><input type="radio" name="operator" v-model="operator" value="divide"/>➗</label>
       </div>
 
-      <input type="number" aria-label="Second operand" />
+      <input type="number" aria-label="Second operand" v-model = "secondOperand"/>
 
       <div>=</div>
 
-      <output>0</output>
+      <output>{{ result }}</output>
     </div>
   `,
-})
+});
Original file line number	Diff line number	Diff line change
Expand Up		@@ -11,3 +11,5 @@
		<script type="module" src="./main.js"></script>
		</body>
		</html>