Alyona Brytvina 2 лет назад
Родитель
Сommit
67de9fc429
3 измененных файлов с 230 добавлено и 0 удалено
  1. 12 0
      HW07/index.html
  2. 179 0
      HW07/main.js
  3. 39 0
      HW07/style.css

+ 12 - 0
HW07/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>HW07</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+<ol class="list"></ol>
+<script src="main.js"></script>
+</body>
+</html>

+ 179 - 0
HW07/main.js

@@ -0,0 +1,179 @@
+function runSort1(){
+    let persons = [
+        {name: 'Иван', age: 17},
+        {name: 'Мария', age: 35},
+        {name: 'Алексей', age: 73},
+        {name: 'Яков', age: 12},
+    ];
+
+    function mySort1(arr, param, boolean = false) {
+        arr.sort((a, b) => boolean === true ? a[param] - b[param] : b[param] - a[param])
+    }
+
+    mySort1(persons, 'age');
+    mySort1(persons, 'name', false);
+}
+
+function runSort2(){
+    let persons = [
+        {name: 'Иван', age: 17},
+        {name: 'Мария', age: 35},
+        {name: 'Алексей', age: 73},
+        {name: 'Яков', age: 12},
+    ];
+
+    function mySort2(person, param, boolean = false) {
+
+        for (let i = 0; i < person.length; i++) {
+            for (let k = i + 1; k < person.length; k++) {
+                if (boolean === true) {
+                    if (person[i][param] > person[k][param]) {
+                        let shelter = person[i][param];
+                        person[i][param] = person[k][param];
+                        person[k][param] = shelter;
+                    }
+                } else if (boolean === false) {
+                    if (person[i][param] < person[k][param]) {
+                        let shelter = person[i][param];
+                        person[i][param] = person[k][param];
+                        person[k][param] = shelter;
+                    }
+                }
+
+            }
+        }
+        return person;
+    }
+    mySort2(persons, 'age');
+    mySort2(persons, 'name', true);
+}
+
+function runArrayMap(){
+    const arr = ['1', {}, null, undefined, '500', 700];
+    let arrMap = arr.map(elem => {
+        return typeof elem === 'string' ? +elem : elem;
+    });
+}
+
+function runArrayReduce(){
+    const arr1 = ['0', 5, 3, 'string', null];
+    let arrReduce = arr1.reduce((accum, elem) => {
+        return typeof elem === 'number' ? accum * elem : accum;
+    }, 1);
+    console.log(arr1);
+    console.log(arrReduce);
+}
+
+function runObjectFilter(){
+    let phone = {
+        brand: 'meizu',
+        model: 'm2',
+        ram: 2,
+        color: 'black',
+    };
+
+    function myFilter(obj, callback) {
+        for (let key in obj) {
+            callback(key, obj[key]) || delete obj[key];
+        }
+        return obj;
+    }
+
+    myFilter(phone, function (key, value) {
+        return key == 'color' || value == 2;
+    });
+}
+
+function runObjectMap(){
+    function myMap(obj, callback) {
+        let newMap = {};
+        for (let key in obj) {
+            Object.assign(newMap, callback(key, obj[key]));
+        }
+        console.log(newMap);
+        return newMap;
+    }
+
+    myMap({name: 'Иван', age: 17}, function (key, value) {
+        let result = {};
+        result[key + '_'] = value + '$';
+        return result;
+    });
+}
+
+function runSum(){
+    function getSum(num) {
+        return num === 1 ? 1 :num + getSum(num - 1);
+    }
+    alert(`Результат рекурсивного вызова: ${getSum(+prompt('Введите целое число'))}`);
+}
+
+
+function runHTMLTree(){
+    function createComponent(tagName, subTags, attrs = {}, text = '') {
+        let $elem = document.createElement(tagName);
+        if (attrs) {
+            Object.entries(attrs).forEach(([key, value]) => $elem.setAttribute(key, value));
+        }
+
+        if (text) {
+            $elem.textContent = text;
+        } else {
+
+            let $children = subTags.map(function ({tagName, subTags, attrs, text}) {
+                return createComponent(tagName, subTags, attrs, text);
+            });
+            $children.forEach(child => $elem.appendChild(child));
+        }
+        return $elem;
+    }
+
+
+    let table = createComponent('table', [{
+        tagName: 'tr', subTags: [
+            {tagName: 'td', text: 'some text',},
+            {tagName: 'td', text: 'some text 2',}]
+    }], {border: 1,});
+
+    document.body.appendChild(table);
+}
+
+const tasksArray = [
+    ['sort1', runSort1],
+    ['sort2', runSort2],
+    ['array map', runArrayMap],
+    ['array reduce', runArrayReduce],
+    ['object filter', runObjectFilter],
+    ['object map', runObjectMap],
+    ['sum', runSum],
+    ['HTML Tree', runHTMLTree],
+];
+
+const $list = document.querySelector('.list');
+tasksArray.forEach(task => {
+    const [name, callback] = task;
+
+    const $div = document.createElement('div');
+    $div.className = 'div';
+
+    let $button = document.createElement('button');
+    $button.textContent = 'Запустить';
+    $button.className = 'button';
+    $button.onclick = callback;
+    $div.appendChild($button);
+
+    const $li = document.createElement('li');
+    $li.className = 'li';
+    $li.textContent = name;
+    $div.appendChild($li);
+    $list.appendChild($div);
+});
+
+
+
+
+
+
+
+
+

+ 39 - 0
HW07/style.css

@@ -0,0 +1,39 @@
+body{
+    font-family: Arial, sans-serif;
+}
+.list {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+}
+
+.li {
+    text-decoration: none;
+}
+
+.div {
+    display: flex;
+    align-items: center;
+}
+
+.button {
+    margin: 5px 15px;
+    height: 25px;
+    border: 1px solid tan;
+    border-radius: 3px;
+    cursor: pointer;
+    background-color: cornsilk;
+    color: darkred;
+    position: relative;
+    font-weight: 600;
+    left: 10px;
+}
+
+.button:hover {
+    height: 25px;
+    border: 1px solid darkred;
+    border-radius: 3px;
+    cursor: pointer;
+    background-color: darkred;
+    color: white;
+}