ilya_shyian
/
homework


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266
							<!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>
        <style>

            .cell {

                width: 40px;

                height: 40px;

                border: 1px solid black;

                text-align: center;

                cursor: pointer;

            }


            .row:nth-child(even) {

                background: #eeeeee;

            }

        </style>

        <table id="table1"></table>

        <br /><br /><br />

        <input type="number" name="" id="inp1" placeholder="Number 1" />
        <input type="number" name="" id="inp2" placeholder="Number 2" />
        <input type="text" id="result" placeholder="Sum" readonly />
        <button id="calcBtn">Calc</button>

        <script>

//ES6

    // //ПОДСВЕТИТЬ СТРОКУ И СТОЛБЕЦ

            // function lightUp({ event } = {}) {

            //     const cellIdx = this.cellIndex;

            //     const rows = this.parentElement.parentElement.children;


            //     this.parentElement.style.backgroundColor = "#CECECE";


            //     for (let row of rows) {

            //         row.children[cellIdx].style.backgroundColor = "#CECECE";

            //     }

            // }


            // function lightDown({ event } = {}) {

            //     const cellIdx = this.cellIndex;

            //     const rows = this.parentElement.parentElement.children;


            //     this.parentElement.style.backgroundColor = "";


            //     for (let row of rows) {

            //         row.children[cellIdx].style.backgroundColor = "";

            //     }

            // }


            // let table = document.querySelector("#table1");


            // for (let i = 1; i < 10; i++) {

            //     const tr = document.createElement("tr");

            //     tr.classList.add("row");

            //     table.append(tr);

            //     for (let j = 1; j < 10; j++) {

            //         const td = document.createElement("td");

            //         td.innerText = i * j;

            //         tr.append(td);

            //         td.classList.add("cell");


            //         td.addEventListener("mouseover", lightUp);

            //         td.addEventListener("mouseleave", lightDown);

            //     }

            // }


        // //CALC

            // let inp1 = document.querySelector("#inp1");

            // let inp2 = document.querySelector("#inp2");


            // calcBtn.onclick = () => alert(+inp1.value + +inp2.value);


        // //CALC LIVE


            // let calc = () => (result.value = +inp1.value + +inp2.value);


            // inp1.oninput = calc;

            // inp2.oninput = calc;


//SORT


            // function sort(arrayToSort, key, reverse = true) {

            //     let resultArray = [...arrayToSort];

            //     if (!reverse) {

            //         for (let j = 0; j < resultArray.length; j++)

            //             for (let i = 0; i < resultArray.length - 1; i++) {

            //                 if (resultArray[i][key] < resultArray[i + 1][key]) {

            //                     [resultArray[i], resultArray[i + 1]] = [resultArray[i + 1], resultArray[i]];

            //                 }

            //             }

            //     } else {

            //         for (let j = 0; j < resultArray.length; j++)

            //             for (let i = 0; i < resultArray.length - 1; i++) {

            //                 if (resultArray[i][key] > resultArray[i + 1][key]) {

            //                     [resultArray[i], resultArray[i + 1]] = [resultArray[i + 1], resultArray[i]];

            //                 }

            //             }

            //     }

            //     return resultArray;

            // }

            // sort(persons, "age"); //сортирует по возрасту по возрастанию

            // sort(persons, "name", false); //сортирует по имени по убыванию


//ARRAY MAP

            // let arr = ["1", {}, null, undefined, "500", 700];


            // console.log(arr.map((item) => (typeof item === "string" ? (item = +item) : item)));


//ARRAY REDUCE


            // let arr = ["0", 5, 3, "string", null];


            // console.log(

            //     arr.reduce((sum, item, index) => {

            //         if (typeof item !== "number") {

            //             return sum;

            //         }

            //         return sum === null ? (sum = item) : (sum *= item);

            //     }, null)

            // );


//OBJECT FILTER


            // var phone = {

            //     brand: "meizu",

            //     model: "m2",

            //     ram: 2,

            //     color: "black",

            // };


            // function filter(objToFilter, cb) {

            //     let obj = { ...objToFilter };

            //     for (let [key, value] of Object.entries(obj)) {

            //         !cb(key, value) && delete obj[key];

            //     }

            //     return obj;

            // }


            // console.log(filter(phone, (key, value) => key == "color" || value == 2));


//OBJECT MAP


            // function map(objToMap, cb) {

            //     let obj = { ...objToMap };

            //     for ([key, value] of Object.entries(obj)) {

            //         let [[newKey, newValue]] = Object.entries(cb(key, value));

            //         delete obj[key];

            //         obj[newKey] = newValue;

            //     }

            //     return obj;

            // }


            // console.log(

            //     map({ name: "Иван", age: 17 }, function (key, value) {

            //         var result = {};

            //         result[key + "_"] = value + "$";

            //         return result;

            //     })

            // ); //должен вернуть {name_: "Иван$", age_: "17$"}


//SUM


            // function sum(start, end, step = 1) {

            //     let rez = start;

            //     if (rez < end) {

            //         rez += +sum(rez + step, end, step);

            //     }

            //     return rez;

            // }


            // console.log(sum(1, 15));


//HTML TREE


            // let dictHTML = {

            //     tagName: "body",

            //     attrs: {},

            //     subTags: [

            //         {

            //             tagName: "div",

            //             attrs: {},

            //             subTags: [

            //                 {

            //                     tagName: "span",

            //                     text: "Enter a data please:",

            //                     attrs: {},

            //                     subTags: [],

            //                 },

            //                 {

            //                     tagName: "br",

            //                     attrs: {},

            //                     subTags: [],

            //                 },

            //                 {

            //                     tagName: "input",

            //                     attrs: {

            //                         type: "text",

            //                         id: "name",

            //                     },

            //                     subTags: [],

            //                 },

            //                 {

            //                     tagName: "input",

            //                     attrs: {

            //                         type: "text",

            //                         id: "surname",

            //                     },

            //                     subTags: [],

            //                 },

            //             ],

            //         },

            //         {

            //             tagName: "div",

            //             attrs: {},

            //             subTags: [

            //                 {

            //                     tagName: "button",

            //                     attrs: {

            //                         id: "ok",

            //                     },

            //                     text: "OK",

            //                     subTags: [],

            //                 },

            //                 {

            //                     tagName: "button",

            //                     attrs: {

            //                         id: "cancel",

            //                     },

            //                     text: "Cancel",

            //                     subTags: [],

            //                 },

            //             ],

            //         },

            //     ],

            // };


            // function contsractHTML(htmlTree) {

            //     let str = `<${htmlTree["tagName"]}`;

            //     for (attrName in htmlTree["attrs"]) {

            //         str += ` ${attrName}="${htmlTree["attrs"][attrName]}" `;

            //     }

            //     str += ">";

            //     str += htmlTree["text"] ?? "";

            //     if (htmlTree.subTags) {

            //         for (tag of htmlTree.subTags) str += contsractHTML(tag);

            //     }


            //     str += `</${htmlTree["tagName"]}>`;


            //     return str;

            // }


            // let html = contsractHTML(dictHTML);


            // document.write(html);

        </script>
    </body>
</html>