Browse Source

HW09 done

Volddemar4ik 2 years ago
parent
commit
d6469ced37
2 changed files with 275 additions and 0 deletions
  1. 102 0
      js/09/HW09.html
  2. 173 0
      js/09/HW09.js

+ 102 - 0
js/09/HW09.html

@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+
+<body>
+    <div class="table">
+        <!-- 
+Создайте HTML файл с :
+    <select id='from'> - исходная валюта
+    <select id='to'> - валюта в которую происходит обмен
+    <div id='rate'> - кросскурс между валютами
+    <input type='number' id='amount' /> - сумма в исходной валюте
+    <div id='result'> - сумма в валюте, в которую хотим поменять
+
+Используя заготовку из предыдущего задания, наполните select-ы тэгами option с названиями валют, используя цикл
+    document.createElement
+    innerText для option
+    from.append или to.append
+    За пределами цикла назначьте обработчики onchange для элементов select и oninput для элемента input, используя их id. По этим событиям обновляйте текст в div#rate и div#result
+ -->
+
+        <select name="" id="from"></select>
+        <select name="" id="to"></select>
+        <div id="rate"></div>
+        <input type="number" id="amount" />
+        <div id="result"></div>
+
+        <script>
+            fetch('https://open.er-api.com/v6/latest/USD').then(res => res.json())
+                .then(data => {
+
+                    for (const [currency, value] of Object.entries(data.rates)) {
+
+                        const optionFrom = document.createElement('option')
+                        const optionTo = document.createElement('option')
+
+                        from.append(optionFrom)
+                        to.append(optionTo)
+
+                        optionFrom.innerText = optionTo.innerText = `${currency}`
+                        optionFrom.value = optionTo.value = `${value}`
+                    }
+
+
+                    from.onchange = to.onchange = amount.oninput = () => {
+                        rate.innerText = `кросскурс: ${(to.value / from.value).toFixed(2)}`
+                        result.innerText = `Вы получите: ${(to.value / from.value * +amount.value).toFixed(2)}`
+                    }
+
+                })
+        </script>
+    </div>
+
+    <div class="countries" style="margin-top: 50px;">
+        <!-- 
+    По аналогии с предыдущем заданием, реализуйте интерфейс выбора страны и города:
+        по закрузке данных наполняйте select#countries элементами option с названиями стран;
+        так же назначьте обработчик события onchange в select#countries, который:
+            удаляет старый контент select#cities (достаточно занести в innerHTML или innerText пустую строку)
+            добавляет в select#cities элементы option с городами из выбранной только что страны.
+    Таким образом, при изменении страны будет меняться список городов в select#cities
+ -->
+
+        <select name="" id="countries"></select>
+        <select name="" id="cities"></select>
+
+        <script>
+            fetch('https://raw.githubusercontent.com/russ666/all-countries-and-cities-json/master/countries.min.json').then(res => res.json())
+                .then(data => {
+
+                    for (const [country] of Object.entries(data)) {
+
+                        const optionCountries = document.createElement('option')
+                        countries.append(optionCountries)
+                        optionCountries.innerText = `${country}`
+
+                        countries.onchange = () => {
+
+                            cities.innerText = ''
+
+                            for (const city of data[countries.value]) {
+
+                                const optionCities = document.createElement('option')
+                                cities.append(optionCities)
+                                optionCities.innerText = `${city}`
+
+                            }
+
+                        }
+                    }
+                })
+        </script>
+    </div>
+</body>
+
+</html>

+ 173 - 0
js/09/HW09.js

@@ -0,0 +1,173 @@
+// blocks
+{
+    // готово
+}
+
+
+
+// comparison if
+// Разберите пример
+// Добавьте условие отрицательного возраста в пример выше.Расставьте недостающие(но синтаксически необязательные) фигурные скобки.Выкиньте лишнее из текущего кода
+{
+    const age = +prompt("Сколько вам лет?", "");
+    if (age < 0) {
+        alert("Косишь под Бенджамина Баттона")
+    }
+    else {
+        if (age < 18) {
+            alert("школьник");
+        }
+        else {
+            if (age < 30) {
+                alert("молодеж");
+            }
+            else {
+                if (age < 45) {
+                    alert("зрелость");
+                }
+                else {
+                    if (age < 60) {
+                        alert("закат");
+                    }
+                    else {
+                        if (age > 60) {
+                            alert("как пенсия?");
+                        }
+                        else {
+                            alert("то ли киборг, то ли KERNESS");
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+
+
+// switch: sizes
+// Сделайте задание Comparison: sizes используя switch
+{
+    const sizes = prompt('Введите, размер чего будем ковертировать в американскую систему размеров:\nверхняя одежда, платья, брюки, женское белье, чулки, носки')
+    switch (sizes) {
+        case 'верхняя одежда':
+        case 'платья':
+        case 'брюки':
+            let firstPart = +prompt('Введите размер одежды в Украине')
+            alert(`Украинский ${firstPart} размер соответствует американскому ${6 + firstPart % 40} размеру`)
+            break;
+
+        case 'женское белье':
+            let secondPart = +prompt('Введите размер одежды в Украине')
+            alert(`Украинский ${secondPart} размер соответствует американскому ${8 + secondPart % 42} размеру`)
+            break;
+
+        case 'чулки':
+            let thirdPart = +prompt('Введите размер одежды в Украине')
+            alert(`Украинский ${thirdPart} размер соответствует американскому ${8 + (thirdPart % 21) / 2} размеру`)
+            break;
+
+        default: alert('Неправильная категория/мы такое не считаем')
+
+    }
+}
+
+
+
+// switch: if
+// Перепишите пример ниже, используя if
+// Обратите внимание, на пропуски break
+{
+    let color = prompt("Введите цвет", "");
+    if (color === 'red') {
+        document.write("<div style='background-color: red;'>красный</div>")
+        document.write("<div style='background-color: black; color: white;'>черный</div>")
+    }
+    else if (color === 'black') {
+        document.write("<div style='background-color: black; color: white;'>черный</div>")
+    }
+    else if (color === 'blue') {
+        document.write("<div style='background-color: blue;'>синий</div>")
+        document.write("<div style='background-color: green;'>зеленый</div>");
+    }
+    else if (color === 'green') {
+        document.write("<div style='background-color: green;'>зеленый</div>")
+    }
+    else {
+        document.write("<div style='background-color: gray;'>Я не понял</div>")
+    }
+}
+
+
+
+// noswitch
+// Напишите функцию noSwitch, которая принимает объект со значениями - функциями, ключ для объекта и запускает одну из функций из объекта если ключ найден, иначе - запускает default:
+{
+    const noSwitch = (key, cases, defaultKey = 'default') => {
+        if (key in cases)
+            cases[key]()
+        else cases.defaultKey()
+    }
+
+    const drink = prompt("Что вы любите пить")
+    noSwitch(drink, {
+        воду: () => console.log('Самый здоровый выбор!'),
+        чай() {
+            console.log('Вкусная и полезная штука. Не переусердствуйте с сахаром')
+        },
+        "пиво": () => console.log('Хорошо летом, да в меру'),
+        виски: function () {
+            console.log('Да вы, батенька, эстет! Не забудьте лед и сигару')
+        },
+        defaultKey() {
+            console.log('шото я не понял')
+        }
+    })
+}
+
+
+
+// closure calc
+// Напишите внутри анонимной функции, переданной в then(data =>):
+//      цикл, который перебирает курсы;
+//         на каждой итерации создается кнопка(document.createElement)
+//         текст кнопки - название валюты(innerHTML или innerText)
+//         Назначьте обработчик события на этой кнопке(onclick = () => {.....}).Функция - обработчик должна быть написана прямо в теле цикла
+//              Обработчик должен спрашивать сумму используя prompt и переводить эту суммы из валюты, написанной на кнопке в USD
+// Найдите замыкания. Для доступа к валютам из data.rates используйте[], .тут не поможет.Кнопки добавляйте в специальный контейнер(div например), созданный в HTML, или, на худой конец, в body
+{
+    fetch('https://open.er-api.com/v6/latest/USD').then(res => res.json())
+        .then(data => {
+            const div = document.createElement('div')
+            document.body.append(div)
+
+            for (const [currency, value] of Object.entries(data.rates)) {
+                const btn = document.createElement('button')
+                btn.style.cssText = `
+                min-width: 50px;
+                margin: 0 5px 5px;
+                `
+                div.append(btn)
+                btn.innerText = `${currency}`
+                btn.onclick = () => {
+                    const summ = +prompt('Введите сумму в валюте кнопки')
+                    alert(`Это равно ${(summ / value).toFixed(2)} долларов`)
+                }
+            }
+            // console.log(data) //изучите структуру, получаемую с сервера в консоли
+        })
+}
+
+
+
+// closure calc 2
+{
+    // реализовано в файле HW09.html
+}
+
+
+
+// countries and cities
+{
+    // реализовано в файле HW09.html
+}