Home Explore Help
Sign In
Vladimir-Grabarev
/
A-level_homework
Watch 1
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

ДЗ: Функции 2, ES6 done

Vladimir 3 years ago
parent
378333d5c9
commit
cef99298e2
3 changed files with 265 additions and 0 deletions
Unified View Show Diff Stats
  1. 25 0
      HW 08/index.html
  2. 210 0
      HW 08/main.js
  3. 30 0
      HW 08/style.css

+ 25 - 0
HW 08/index.html
View File 

@@ -0,0 +1,25 @@
 
+<!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">
 
+    <link rel="stylesheet" href="style.css">
 
+    <title>Document</title>
 
+</head>
 
+<body class="body">
 
+    <div class="calc-wrap">
 
+        <h1>Калькулятор</h1>
 
+        <input class="first-input" type="number" value="2">
 
+        <select class="select" name="" id="">
 
+            <option value="+" selected>+</option>
 
+            <option value="-">-</option>
 
+            <option value="/">/</option>
 
+            <option value="*">*</option>
 
+        </select>
 
+        <input class="second-input" type="number" value="1"> = 
+        <input class="result" type="number" value="3" disabled>
 
+    </div>
 
+    <script src="main.js"></script>
 
+</body>
 
+</html>

+ 210 - 0
HW 08/main.js
View File 

@@ -0,0 +1,210 @@
 
+//ES6
 
+//ES6: Таблица умножения
 
+let f;
 
+let str = "<table class='table'>";
 
+
 
+str += "<tr class='horizontal-table-head'><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr>";
 
+
 
+for(let i = 1; i < 10; i++) {
 
+    str += `<tr><td>${i}</td>`; //Использование ${} внутри `` скобочек было добавлено в ES6
 
+    for(let j = 1; j < 10; j++) {
 
+        f = (i, j) => str += `<td>${i*j}</td>`; //Использование ${} внутри `` скобочек было добавлено в ES6
 
+        f(i, j);
 
+    }
 
+    str += "</tr>";
 
+}
 
+
 
+document.write(str);
 
+
 
+
 
+//ES6: Подсветить ячейку
 
+//ES6: Подсветить строку и столбец,
 
+let table = document.querySelector(".table");
 
+let tr    = table.querySelectorAll("tr");
 
+
 
+let fillTdBackground = function(evt ,backgroundColor = null) { //Использование параметров по умолчанию
 
+    let evtTargetCellIndex = evt.target.cellIndex;
 
+    let evtTargetRowIndex = evt.target.parentElement.rowIndex;
 
+
 
+    if(evt.target.tagName == "TD" && evtTargetRowIndex != 0 && evtTargetCellIndex != 0) {
 
+        evt.target.style                         = `background-color: ${backgroundColor}`; // Использование ${} внутри `` скобочек
 
+        tr[0].children[evtTargetCellIndex].style = `background-color: ${backgroundColor}`; // Использование ${} внутри `` скобочек
 
+        tr[evtTargetRowIndex].children[0].style  = `background-color: ${backgroundColor}`; // Использование ${} внутри `` скобочек
 
+    }
 
+};
 
+
 
+table.addEventListener("mouseover", function(evt) {
 
+    fillTdBackground(evt, "#ff5151")
 
+});
 
+
 
+table.addEventListener("mouseout", function(evt) {
 
+    fillTdBackground(evt)
 
+});
 
+
 
+
 
+//ES6: Calc
 
+//ES6: Calc Live
 
+let arrElements = [
 
+    document.querySelector(".first-input"),
 
+    document.querySelector(".second-input"),
 
+    document.querySelector(".select"),
 
+    document.querySelector(".result")
 
+]
 
+
 
+let [firstInput, secondInput, select, result] = arrElements; // Диструктуризация
 
+
 
+let caltResult = function() {
 
+    if(select.value == "+") {
 
+        result.value = +firstInput.value + +secondInput.value;
 
+    } else if(select.value == "-") {
 
+        result.value = +firstInput.value - +secondInput.value
 
+    } else if(select.value == "/") {
 
+        result.value = +firstInput.value / +secondInput.value;
 
+    } else {
 
+        result.value = +firstInput.value * +secondInput.value;
 
+    }
 
+}
 
+
 
+for(let element of arrElements) { // Использование for of
 
+    element.addEventListener("input", function(){
 
+        caltResult();
 
+    });
 
+};
 
+
 
+
 
+//sort
 
+var persons = [
 
+    {name: "Иван", age: 17},
 
+    {name: "Мария", age: 35},
 
+    {name: "Алексей", age: 73},
 
+    {name: "Яков", age: 12},
 
+]
 
+
 
+let mySort = function(arr, key, ascending = true) {
 
+    arr.sort(function(a, b) {
 
+        if(typeof(a[key]) == "string") {
 
+            return ascending ? a[key].length - b[key].length : b[key].length - a[key].length;
 
+        } else {
 
+            return ascending ? a[key] - b[key] : b[key] - a[key];
 
+        }
 
+    });
 
+};
 
+
 
+
 
+//array map
 
+let arr1 = ["1", {}, null, undefined, "500", 700].map(function(item){
 
+    if(typeof(item) == "string") {
 
+        item = +item;
 
+    }
 
+
 
+    return item
 
+});
 
+
 
+
 
+//array reduce
 
+let arrayReduce = ["0", 5, 3, "string", null].reduce(function(previousItem, currentItem){
 
+    if(typeof(currentItem) == "number") {
 
+        previousItem = previousItem * currentItem;
 
+    }
 
+
 
+    return previousItem;
 
+}, 1);
 
+
 
+console.log(arrayReduce);
 
+
 
+
 
+//object filter
 
+var phone = {
 
+    brand: "meizu",
 
+    model: "m2",
 
+    ram: 2,
 
+    color: "black",
 
+};
 
+
 
+let filter = function(obj, f) {
 
+    for(let key in obj) {
 
+        if(!f(key, obj[key])) {
 
+            delete obj[key];
 
+        }
 
+    }
 
+};
 
+
 
+filter(phone,(key,value) => key == "color" || value == 2);
 
+
 
+
 
+//object map
 
+let map = function(obj, f) {
 
+    let newObj = {};
 
+    
+    for(let key in obj) {
 
+        Object.assign(newObj, f(key, obj[key]))
 
+    }
 
+
 
+    return newObj;
 
+};
 
+
 
+console.log(
 
+    map({name: "Иван", age: 17},function(key,value){
 
+        var result = {};
 
+        result[key+"_"] = value + "$";
 
+        return result;
 
+    })
 
+)
 
+
 
+
 
+//Рекурсия
 
+//Sum
 
+let sum = function(x) {
 
+    return x == 1 ? 1 : x + sum(x - 1); 
+}
 
+
 
+console.log(sum(10));
 
+
 
+
 
+//HTML Tree
 
+{
 
+    var someTree = {
 
+        tagName: "table", //html tag
 
+        children: [ //вложенные тэги
 
+            {
 
+                        tagName: "tr",
 
+                        children: [
 
+                            {
 
+                                tagName: "td",
 
+                                text: "some text",
 
+                            },
 
+                            {
 
+                                tagName: "td",
 
+                                text: "some text 2",
 
+                            }
 
+                        ]
 
+            }
 
+        ],
 
+        attrs: 
+        {
 
+            border: 1,
 
+        },
 
+    }
 
+    
+    let str = "";
 
+    
+    let drawTreeHTML = function(obj) {
 
+        str += `<${obj.tagName}>`;
 
+        
+        if("text" in obj) {
 
+            str += `${obj.text}`;
 
+        }
 
+    
+        if("children" in obj) {
 
+            for(let child of obj.children) {
 
+                drawTreeHTML(child);
 
+            }
 
+        }
 
+    
+        str += `</${obj.tagName}>`;
 
+    }
 
+    
+    drawTreeHTML(someTree);
 
+
 
+    document.write(str);
 
+}

+ 30 - 0
HW 08/style.css
View File 

@@ -0,0 +1,30 @@
 
+.table {
 
+    border: 10px solid #ece9e0;
 
+    border-collapse: separate;
 
+    border-spacing: 10px;
 
+    border-radius: 10px;
 
+    background-color: #ece9e0;
 
+    table-layout: auto;
 
+    text-align: center;
 
+    margin: 0 auto;
 
+}
 
+.table td {
 
+    padding: 5px;
 
+    background-color: #ddc37a;
 
+}
 
+.horizontal-table-head td {
 
+    font-weight: 600;
 
+    background-color: #bdaf88;
 
+}
 
+td:first-child {
 
+    font-weight: 600;
 
+    background-color: #bdaf88;
 
+}
 
+
 
+td {
 
+    cursor: pointer;
 
+}
 
+.calc-wrap {
 
+    text-align: center;
 
+    margin-bottom: 50px;
 
+}