HW 5 done

.idea/workspace.xml

@@ -2,10 +2,11 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="c45bf7d2-992f-400a-8194-6f236ee5f805" name="Changes" comment="">
-      <change afterPath="$PROJECT_DIR$/Js_05/index.html" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/Js_05/js.js" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/Js_06/index.html" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/Js_06/js.js" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/Js_04/JS.js" beforeDir="false" afterPath="$PROJECT_DIR$/Js_04/JS.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/Js_05/js.js" beforeDir="false" afterPath="$PROJECT_DIR$/Js_05/js.js" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -65,6 +66,10 @@
       <workItem from="1667322210453" duration="4316000" />
       <workItem from="1667379562730" duration="15070000" />
       <workItem from="1667420416428" duration="12324000" />
+      <workItem from="1667488127265" duration="10949000" />
+      <workItem from="1667554129554" duration="26665000" />
+      <workItem from="1667638076419" duration="35685000" />
+      <workItem from="1667817859511" duration="1908000" />
     </task>
     <servers />
   </component>

Js_04/JS.js

@@ -102,20 +102,18 @@
 // C помощью этого же трюка (использование ИЛИ для запуска альтернативы) сделайте капризного робота, который в confirm
 // спрашивает "шопинг?", а в случае отказа - выводить alert "ты - бяка".
 /*{
-    const message = confirm('Шопинг????') ? "Погнали" : "Ты бяка"
+    const message = confirm('Шопинг????') || alert("Ты бяка");
     alert(message);
 } */
 
 //9.  Confirm: if this days
 // Сделать тоже самое с помощью if.
-/*{
+{
     let shopping = confirm("Шопинг???");
-    if (shopping) {
-        alert("Погнали :)");
-    } else {
+    if (!shopping) {
         alert("Ты бяка :(");
     }
-} */
+}
 
 //10.  Default: or
 // Попросите пользователя ввести ФИО в три разныe переменныe. Используя ИЛИ || добавьте строки по умолчанию, которые

Js_05/js.js

@@ -1,61 +1,324 @@
-//1. Confirms Сохраните в массив ответы на вопросы, заданные с помощью confirm. Используйте литеральный (декларативный)
+//1. Confirms +
+// Сохраните в массив ответы на вопросы, заданные с помощью confirm. Используйте литеральный (декларативный)
 // синтаксис массивов ([....,....,....])
 /*{
     let arr = [confirm("Ты женщина?"), confirm("Тебе есть 18 лет"), confirm("Ты работаешь?")];
     console.log(arr);
 }*/
 
-//2. Prompts
+//2. Prompts +
 // Сохраните в массив ответы на вопросы, заданные с помощью prompts. Используйте доступ к массиву по индексу
 // и присвоение (arr[....] = ....)
 /*{
-    let array = new Array ([prompt("Введите ваше имя"), prompt("Введите вашу фамилию"), prompt("Введите ваш возраст")])
-    let arr = [prompt("Введите ваше имя"), prompt("Введите вашу фамилию"), prompt("Введите ваш возраст")];
-    console.log(arr);
-    console.log(array)
-}*/
+    let array = [];
+    array[0] = prompt("Введите ваше имя");
+    array[1] = prompt("Введите вашу фамилию");
+    array[2] = prompt("Введите ваш возраст");
+} */
 
-//3. Item access
+//3. Item access +
 //Попросите пользователя ввести (prompt) индекс в массиве. Выведите значение элемента по этому индексу. Попробуйте так
 // же ввести индекс "length".
+/*{
+    let names = ["Маша", "Катя", "Наташа", "Оля", "Лена"];
+    let index = prompt("Введите индекс для выбора имени от 0 до 4");
+    alert(names[index]);
+    alert(names.length)
+}*/
 
-
-//4.    Item change
+//4. Item change +
 // Попросите пользователя ввести (prompt) индекс в массиве, а так же значение для этого индекса. Присвойте в введенный
 // индекс введенное значение
+/*{
+    let names = ["Маша", "Катя"];
+    let index = prompt("Введите число(индекс) для добавления в масив от 0 до 10");
+    let name = prompt("Введите имя");
+    names[index]=name;
+} */
 
-//5. Multiply table
+//5. Multiply table +
 // Создайте таблицу умножения 5x5 используя декларативный синтаксис вложенных массивов const arr = [[....], [....], [....], .....].
 // Числа во вложенных массивах должны быть равны произведению индекса внешнего массива на индекс внутреннего массива: arr[2][3] === 6
+/*{
+    const arr = [[0,0,0,0,0],
+               [0,1,2,3,4],
+               [0,2,4,6,8],
+               [0,3,6,9,12],
+               [0,4,8,12,16]];
+} */
 
-
-  //6. Multiply table slice
+  //6. Multiply table slice +
 //Используя slice создайте массив массивов (другую таблицу/матрицу) из таблицы умножения, в которой не будет нулей
+/*{
+    const arr = [[0,0,0,0,0], [0,1,2,3,4], [0,2,4,6,8], [0,3,6,9,12], [0,4,8,12,16]];
+    const newArr = arr.slice(1,5);
+    let a = newArr[0].shift();
+    let b = newArr[1].shift();
+    let c = newArr[2].shift();
+    let d = newArr[3].shift();
+}*/
 
-//7. IndexOf Word
-//Спросите у пользователя строку из нескольких слов. Спросите у него искомое слово. Выведите, каким по счету является это слово в строке из нескольких слов. Если слово не найдено, выведите сообщение об этом (а не -1)
+//7. IndexOf Word +
+//Спросите у пользователя строку из нескольких слов. Спросите у него искомое слово.
+// Выведите, каким по счету является это слово в строке из нескольких слов. Если слово не найдено, выведите сообщение об этом (а не -1)
+/*{
+    let ask = prompt("Введите несколько слов");
+    let word = ask.split(' ');
+    alert(`Искомое слово находится под индексом ${(word.indexOf('слово'))}`)
+}*/
 
-//8. Reverse
+//8. Reverse +
 //Добавьте в массив пять введенных пользователем через prompt элементов(используйте push).
 // Создайте другой массив с этими же элементами в обратном порядке. Для этого извлекайте элементы из первого массива
 // используя pop, добавляйте их во второй используя push
+/*{
+    let name = prompt("Введите ваше имя");
+    let secondName = prompt("Введите вашу фамилию");
+    let patronymic = prompt("Введите ваше отчество");
+    let town = prompt("Введите город где вы живете");
+    let color = prompt("Введите ваш любимый цвет");
+
+    const profile = [];
+    profile.push(name, secondName, patronymic, town, color);
 
-//9. Reverse 2
+    const profileTwo = [];
+    color = profile.pop();
+    town = profile.pop();
+    patronymic = profile.pop();
+    secondName = profile.pop();
+    name = profile.pop();
+    profileTwo.push(name, secondName, patronymic, town,color);
+    console.log(profileTwo);
+} */
+
+//9. Reverse 2 +
 //Переверните второй массив из предыдущего задания еще раз (последовательность будет как в первом массиве), используя
 // shift и unshift
+/*{
+    let color = prompt("Введите ваш любимый цвет");
+    let town = prompt("Введите город где вы живете");
+    let patronymic = prompt("Введите ваше отчество");
+    let secondName = prompt("Введите вашу фамилию");
+    let name = prompt("Введите ваше имя");
+    const profile = [];
+    profile.push(color, town, patronymic, secondName, name);
 
-//10. Copy
+    color = profile.shift();
+    town = profile.shift();
+    patronymic = profile.shift();
+    secondName = profile.shift();
+    name = profile.shift();
+    const profileTwo = [];
+    profileTwo.unshift(name, secondName, patronymic, town, color)
+    console.log(profileTwo)
+} */
+
+//10. Copy +
 //Скопируйте массив созданный в задании Multiply table неглубоко
+/*{
+    const arr = [[0,0,0,0,0],
+        [0,1,2,3,4],
+        [0,2,4,6,8],
+        [0,3,6,9,12],
+        [0,4,8,12,16]];
 
-//11. Deep Copy
+    const copy = [...arr];
+    console.log(copy);
+} */
+
+//11. Deep Copy +
 //Скопируйте массив созданный в задании Multiply table включая вложенные массивы (глубокая копия)
+/*{
+    const arr = [[0,0,0,0,0],
+        [0,1,2,3,4],
+        [0,2,4,6,8],
+        [0,3,6,9,12],
+        [0,4,8,12,16]];
+
+    const newArr = arr.slice();
+} */
+
+//12. Array Equals +
+// Создайте код, в котором будет две переменных с массивами (arr и arr2), которые равны друг другу (arr1 === arr2)
+/*{
+    const arr = ["Маша","Катя","Наташа"];
+    const arr2 = arr;
+    console.log(arr === arr2)
+}*/
+
+//13. Flat +
+// Соберите все элементы всех вложенных массивов из задания Multiply table в один массив.
+// Его длина должна быть равна 25.
+// Используйте spread-оператор
+/*{
+    const arr = [[0,0,0,0,0], [0,1,2,3,4], [0,2,4,6,8], [0,3,6,9,12], [0,4,8,12,16]];
+
+    const newArr = [...arr[0], ...arr[1], ...arr[2], ...arr[3], ...arr[4]]
+    console.log(newArr)
+} */
+
+//14. Destruct +
+// Извлеките первую, пятую и девятую букву из строки, введенной пользователем, используя деструктуризацию. Выведите их
+/*{
+    let word = [prompt("Введите любое слово")];
+    let [[a,,,,b,,,,c]] = word;
+    console.log(word);
+    alert(`Первая буква - ${a}, пятая буква - ${b}, девятая буква - ${c}`);
+}*/
+
+//15.  Destruct default +
+// Извлеките вторую, четвертую и пятую букву из строки, введенной пользователем, используя деструктуризацию.
+// Если в строке таких букв не окажется задайте переменным значение по умолчанию ! (восклицательный знак).
+/*{
+    let word = [prompt("Введите любое слово")];
+    let [[,a,,b,c]] = word;
+    if (a === undefined) {
+        a = "!";
+    } else if (b === undefined && c === undefined) {
+        b = "!";
+        c = "!";
+    } else if (c === undefined) {
+        c = "!";}
+    alert(`Вторая буква - ${a}, четвертая буква - ${b}, пятая буква - ${c}` )
+} */
 
-const a = 5
-const b = 10
-a + b //15
+//16. Multiply table rest +
+// Реализуйте задание Multiply table slice, используя оператор rest при деструктуризации. Используйте вложенную деструктуризацию.
+// После получения четырех обрезанных вложенных массивов - соберите общий массив без нулей
+/*{
+    const arr = [[0,0,0,0,0], [0,1,2,3,4], [0,2,4,6,8], [0,3,6,9,12], [0,4,8,12,16]];
+    const [[firstArr], [b,...secondArr], [c, ...thirdArr], [d, ...fourArr], [e, ...fiveArr]] = arr;
+    const arrNew = [...secondArr, ...thirdArr, ...fourArr, ...fiveArr];
+
+    console.log(arrNew)
+}*/
+
+//17. For Alert +
+// Есть массив ["John", "Paul", "George", "Ringo"]. Выведите каждое имя отдельным alert(), используя цикл for .... of
+/*{
+    const names = ["John", "Paul", "George", "Ringo"]
+    for (let name of names){
+        alert(name)
+    }
+}*/
+
+// 18. For Select Option +
+// Используя заготовку выше, создайте выпадающий список с валютами.
+// Элементы выпадающего списка создаются с помощью тэга <option>
+/* {
+    const currencies = ["USD", "EUR", "GBP", "UAH"]
+    let   str = "<select>";
+    for (let currency of currencies){
+        str += "<option>"+currency + "</option>";
+    }
+    str += "</select>"
+    document.write(str);
+} */
+
+//19. Horizontal +
+// Аналогично, добейтесь вывода имен в ячейки таблицы по горизонтали (одна строка с четырьмя ячейками)
+/*{
+    const names = ["John", "Paul", "George", "Ringo"]
+    let   str = "<table width='50%' border='2px' bgcolor='yellow'>"
+    for (let name of names){
+        str +="<td>"+ name +"</td>"
+    }
+    document.write(str)
+}*/
+
+//.21 For Table Vertical +
+//Аналогично, добейтесь вывода имен в ячейки таблицы по вертикали(одна колонка с четырьмя строками,
+// в каждой строке - одна ячейка)
+/*{
+    const names = ["John", "Paul", "George", "Ringo"]
+    let   str = "<table width='20%' bgcolor='yellow' border='1'>";
+    for (let name of names) {
+        str += "<tr>" + "</tr>";
+        str += "<td>" + name + "</td>"
+    }
+    str+= "</table>";
+    document.write(str);
+}*/
+
+//22. For Table Letters +
+//Используя заготовку выше, создайте таблицу 3x4. В каждой строке по три ячейки с буквами, четыре строки, так как 4 валюты в массиве.
+/*{
+    const currencies = ["USD", "EUR", "GBP", "UAH"];
+    let   str = "<table border='1'>"
+    for (let currency of currencies){
+         str += "<tr>" + "</tr>"
+        console.log(currency)
+        for (let letter of currency){
+            str += "<td>" + letter + "</td>"
+            console.log(letter)
+        }
+    }
+    str+= "</table>"
+    document.write(str)
+}*/
+
+//23. For Multiply Table +- подсветка
+// Выведите таблицу умножения 5x5 из задания Multiply table в таблицу, используя вложенные for .... of и document.write
+//Сделайте черезстрочную подсветку - задавайте четным строкам один цвет фона, нечетным - другой
+/*{
+    let cols = [0,1,2,3,4];
+    let rows = [0,1,2,3,4];
+    document.write('<table border=1, cellpadding=0, cellspacing=0, width="50%">');
+    for (i = 0; i < cols.length; i++) {
+        document.write("<tr>");
+        for (k = 0; k < rows.length; k++) {
+            document.write("<td>"+(k*i)+"</td>");
+        }
+        document.write("</tr>");
+    }
+    document.write("</table>");
+} */
+
+//24. Function Capitalize +
+// Реализуйте задачу String: capitalize как отдельную функцию:
+/*{
+    const capitalize = str => {
+        let result = str[0].toUpperCase() + str.slice(1).toLowerCase();
+        return result
+    }
+    console.log(capitalize("cANBerRa")) //Canberra
+} */
+
+//25. Map Capitalize +
+// Пусть пользователь вводит строку. Разбейте её по пробелам. Используя map и capitalize создайте массив в котором
+// каждое слово будет с большой буквы. Соберите массив в строку обратно
+/*{
+    const ask = prompt("Введите несколько слов");
+    const arr = ask.split(` `)
+    const capitalize = arr.map(arr => arr[0].toUpperCase() + arr.substring(1))
+
+    console.log(capitalize);
+    console.log(capitalize.join(' '))
+}*/
+
+//26. Filter Lexics
+// Пусть пользователь вводит строку. Разбейте её по пробелам. Используя filter верните true если элемент массива не
+// состоит в определенном массиве недопустимых слов. Если же элемент массива - недопустимое слово, функция, переданная
+// в filter должна возвращать false. Соберите массив в строку обратно. блин какая сегодня
+
+
+//27. Beep Lexics
+// Пусть пользователь вводит строку. Разбейте её по пробелам. Используя map и тернарный оператор верните из функции
+// слово без изменений, если оно не состоит в каком-то другом массиве запрещенных слов. Если же слово состоит в этом
+// списке, функция должна вернуть слово BEEP. Соберите массив обратно в строку через пробел. Таким образом вы сможете
+// реализовать замену нескольких запрещенных слов на BEEP.
+/*{
+    const ask = prompt("Введите несколько слов");
+    const arr = ask.split(` `);
+}*/
+
+//28. Reduce HTML +-
+// Реализуйте задачу For Select Option используя reduce
+/*{
+    const currencies = ["USD", "EUR", "GBP", "UAH"];
+    let str = "<select>";
+    str += currencies.reduce( (a,b) => a + "<option>"+ b + "</option>", "");
+    str += "</select>";
+    document.write(str);
+}*/
 
-const f = (x, y) => x + y //функция, аналогичная коду выше, однако в этой строке никакого вычисления суммы не происходит
-f(5, 10) //15
-f(a, b) //15
-f(100, 200)
-console.log(f(100, 200))

Js_06/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <script src="js.js"></script>
+</head>
+<body>
+
+</body>
+</html>

Js_06/js.js

@@ -0,0 +1,142 @@
+// 1.  Literals +
+// Найдите несколько окружающих объектов реального мира и создайте соответственные объекты Javascript. Например:
+/*{
+    const dog = {
+        name : "leo",
+        color : "orange",
+        breed : "spitz",
+}
+}*/
+
+// 2. Literals expand +
+// Дайте возможность пользователю добавить любые два свойства в эти объекты с любыми значениями. Обеспечьте ввод названия
+// ключа и значения через prompt прямо в литерале объекта {}
+/*{
+    const car = {
+        brand : "Toyota",
+    }
+    car[prompt("Введите ключ")] = prompt('Введите значение для ключа');
+    car[prompt("Введите ключ")] = prompt('Введите значение для ключа');
+    console.log(car)
+}*/
+
+//3.  Literals copy +
+// Пусть пользователь введет еще одно свойство в переменную. Вставьте в новый объект эту переменную.
+// Скопируйте объект из предыдущего задания в новый объект.
+/*{
+    const car = {
+        brand : "Toyota",
+        model : "Camry",
+        year : "2022"
+    }
+    const newCar = {...car}
+    newCar[prompt("Введите ключ")] = prompt('Введите значение для ключа');
+    console.log(newCar)
+}*/
+
+//4. Html tree продолжение в конспекте
+//
+//     <body>
+//         <div>
+//             <span>Enter a data please:</span><br/>
+//             <input type='text' id='name'>
+//             <input type='text' id='surname'>
+//         </div>
+//         <div>
+//             <button id='ok'>OK</button>
+//             <button id='cancel'>Cancel</button>
+//         </div>
+//     </body>
+//
+
+
+
+
+// 5. Parent
+// Добавьте каждому объекту тэга из предыдущего задания связь с родителем, используя свойство parent и присвоение
+
+// 6. Change OK
+// Добавьте(или измените) любой введенный пользователем атрибут тэга <button id='ok'> из задания HTML Tree. Пользователь также вводит значение этого атрибута.
+
+//7. Destructure
+// Используя деструктуризацию структуры из задания HTML Tree, Выведите значения текста в тэге span,
+// Выведите значения текста во второй кнопке и Выведите значение атрибута id во втором input.
+
+// 8. Destruct array +
+// напишите код, который используя деструктуризацию положит:
+// четные числа в переменные even1, even2; нечетные в odd1, odd2, odd3; буквы в отдельный массив
+/*{
+    let arr = [1,2,3,4,5,"a","b","c"];
+    [odd1, even1, odd2, even2, odd3, ...letters] = arr;
+} */
+
+// 9. Destruct string +
+//// напишите код, который используя деструктуризацию положит: число в переменную number; букву a в переменную s1;
+// букву b в переменную s2; букву c в переменную s3
+/*{
+    let arr = [1, "abc"];
+    [number, [s1, s2, s3]] = arr;
+} */
+
+//10. Destruct 2 +
+//извлеките используя деструктуризацию имена детей в переменные name1 и name2
+/*{
+    let obj = { name: 'Ivan',
+                surname: 'Petrov',
+                children: [
+                    {name: 'Maria'},
+                    {name: 'Nikolay'}]};
+
+    const [name1,name2] = obj.children;
+    console.log(name1, name2)
+} */
+
+// 11. Destruct 3 +
+// извлеките используя деструктуризацию объектов два первых элемента и длину массива в переменные a, b и length
+/*{
+    const arr = [1,2,3,4,5,6,7,10];
+    const {0:a, 1:b, length} = arr;
+}*/
+
+// 12. Copy delete
+// Сделайте копию одного из объектов из задания Literals без ключа, который введет пользователь.
+{
+    const dog = {
+        name: "leo",
+        color: "orange",
+        breed: "spitz",
+    }
+}
+
+// 13.Currency real rate
+// Ниже приведен код, который скачивает актуальную информацию о курсах валют. Скопируйте ссылку из него вставьте в браузер интереса ради. Реализуйте калькулятор обмена валют следующим образом:
+//
+//     Пользователь вводит исходную валюту
+//     Пользователь вводит валюту, в которую происходит конвертация
+//     Пользователь вводит сумму в исходной валюте
+//     Пользовател видит результат конвертации
+//
+//     fetch('https://open.er-api.com/v6/latest/USD').then(res => res.json())
+//      .then(data => {
+//             //эта функция запускается когда данные скачиваются.
+//             //остальной код работает РАНЬШЕ.
+//             //только ТУТ есть переменная data со скачанными данными
+//             console.log(data) //изучите структуру, получаемую с сервера в консоли
+//         })
+//
+// Учтите, что пользователь может ввести какую-то дичь или название валют в неверном регистре
+
+// 14. Currency drop down
+// Сделайте выпадающий список с названиями всех валют, используя код из прошлого задания и накопление HTML-тэгов в строковой переменной. Для выпадающих списков в HTML предусмотрены тэги <select> и <option>
+
+// 15. Currency table (таблица в конспекте
+// Сделайте двумерную таблицу с курсами между всеми возможными парами валют по типу таблицы Пифагора, используя заготовку из задания Currency real rate:
+
+//16. Form в конспекте
+// Напишите код, который их любого объекта создает форму HTML. Например для такого объекта
+
+//17. Соответствие типов в конспекте
+
+//18. Table в конспекте
+// Даден любой массив с объектами
+