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>