Home Explore Help
Register Sign In
AntonPyvovarov
/
homework
Watch 1
Star 0
Fork 0
Files Issues 9 Pull Requests 0 Wiki
Browse Source

HW11,12 done

AntonPyvovarov 1 year ago
parent
0dd8eaa9f4
commit
2fa12f0321
5 changed files with 307 additions and 0 deletions
Split View Show Diff Stats
  1. 40 0
      HW10/main.js
  2. 21 0
      HW11/index.html
  3. 91 0
      HW11/main.js
  4. 15 0
      HW12/index.html
  5. 140 0
      HW12/main.js

+ 40 - 0
HW10/main.js
View File 

@@ -0,0 +1,40 @@
 
+function Password(parent, open) {
 
+    let value = ''
 
+    let pass = document.createElement('input')
 
+    let check = document.createElement('input')
 
+    check.type = 'checkbox'
 
+    parent.append(pass, check)
 
+    check.onchange = () => {
 
+        this.setOpen(check.checked)
 
+    }
 
+    //добавить pass oninput, который из pass забирает value, запускает setValue
 
+    this.getValue = function () {
 
+        return value
 
+    }
 
+    this.setValue = function (value) {
 
+        // передает value в onchange если он есть
 
+    }
 
+    this.getOpen = function () {
 
+        return open
 
+    }
 
+    this.setOpen = function (newOpen) {
 
+        open = newOpen
 
+        pass.type = open ? 'text' : 'password'
 
+        check.checked = open
 
+        if (typeof this.onOpenChange === 'function') {
 
+            this.onOpenChange(open)
 
+        }
 
+    }
 
+    this.setOpen(open)
 
+
 
+    check.oninput = () => {
 
+        if (this.getOpen() === true) {
 
+            this.setOpen(true);
 
+        } else {
 
+            this.setOpen(false);
 
+        }
 
+        if (typeof this.onOpenChange === "function") {
 
+            this.onOpenChange(this.getOpen());
 
+        }
 
+    };
 
+}

+ 21 - 0
HW11/index.html
View File 

@@ -0,0 +1,21 @@
 
+<!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>HW11_Redux</title>
 
+</head>
 
+
 
+<body>
 
+    <select name="" id="tovary">
 
+    </select>
 
+    <input type="number" id="number">
 
+    <button id="button">Купить</button>
 
+    <br><br>
 
+    <table id="table"></table>
 
+    <script src="main.js"></script>
 
+</body>
 
+
 
+</html>

+ 91 - 0
HW11/main.js
View File 

@@ -0,0 +1,91 @@
 
+function reducer(state, { type, ШО, СКОКА }) { // объект action деструктуризируется на три переменных
 
+    if (!state) { // начальная уборка в ларьке:
 
+        return {
 
+            пиво: { "number": 100, "price": 10 },
 
+            чипсы: { "number": 100, "price": 15 },
 
+            сиги: { "number": 100, "price": 5 },
 
+            бабло: { "в ларьке": 5, "в кармане": prompt("Введите сколько у вас денег в кармане", 0) }
 
+        }
 
+    }
 
+    if (type === 'КУПИТЬ' && (state[ШО]["number"] - СКОКА) >= 0 && state["бабло"]["в кармане"] - state[ШО]["price"] * СКОКА >= 0) { //если тип action - КУПИТЬ, то:
 
+        return {
 
+            ...state, //берем все что было из ассортимента
 
+            [ШО]: { ["number"]: state[ШО]["number"] - СКОКА, ["price"]: state[ШО]["price"] },// и уменьшаем то, что покупается на количество
 
+            ["бабло"]: {
 
+                ["в кармане"]: state["бабло"]["в кармане"] - state[ШО]["price"] * СКОКА,
 
+                ["в ларьке"]: state["бабло"]["в ларьке"] + state[ШО]["price"] * СКОКА
 
+            }
 
+        }
 
+    }
 
+    return state // если мы не поняли, что от нас хотят в `action` - оставляем все как есть
 
+}
 
+
 
+
 
+function createStore(reducer) {
 
+    let state = reducer(undefined, {}) // стартовая инициализация состояния, запуск редьюсера со state === undefined
 
+    let cbs = []                     // массив подписчиков
 
+
 
+    const getState = () => state            // функция, возвращающая переменную из замыкания
 
+    const subscribe = cb => (cbs.push(cb),   // пушим подписчиков в массиве
 
+        () => cbs = cbs.filter(c => c !== cb)) // возвращаем функцию unsubscribe, которая удаляет подписчика из списка
 
+
 
+    const dispatch = action => {
 
+        const newState = reducer(state, action) // пробуем запустить редьюсер
 
+        if (newState !== state) { // проверяем, смог ли редьюсер обработать action
 
+            state = newState // если смог, то обновляем state 
+            for (let cb of cbs) cb() // и запускаем подписчиков
 
+        }
 
+    }
 
+
 
+    return {
 
+        getState, // добавление функции getState в результирующий объект
 
+        dispatch,
 
+        subscribe // добавление subscribe в объект
 
+    }
 
+}
 
+
 
+const store = createStore(reducer);
 
+store.subscribe(() => console.log(store.getState()));
 
+store.subscribe(() => createTable());
 
+const tovaryEl = document.getElementById("tovary");
 
+const numberEl = document.getElementById("number");
 
+const tableEl = document.getElementById("table");
 
+tableEl.border = 1;
 
+for (let key in store.getState()) {
 
+    if (key === "бабло") continue;
 
+    let optionEl = document.createElement("option");
 
+    optionEl.innerHTML = key;
 
+    tovaryEl.appendChild(optionEl);
 
+}
 
+const buttonEl = document.getElementById("button");
 
+
 
+buttonEl.onclick = () => {
 
+    store.dispatch({ type: "КУПИТЬ", ШО: tovaryEl.value, СКОКА: numberEl.value });
 
+
 
+}
 
+createTable();
 
+
 
+
 
+function createTable() {
 
+    tableEl.innerHTML = "";
 
+    createTr("Наименование", "Количество", "Цена за единицу");
 
+
 
+    for (let [key, value] of Object.entries(store.getState())) {
 
+        if (key === "бабло") continue;
 
+        createTr(key, value.number, value.price);
 
+    }
 
+    createTr("Касса", "в ларьке:", store.getState()["бабло"]["в ларьке"]);
 
+    createTr("Касса", "в кармане:", store.getState()["бабло"]["в кармане"]);
 
+}
 
+
 
+function createTr(td1, td2, td3) {
 
+    const trEl = document.createElement("tr");
 
+    const td1El = document.createElement("td");
 
+    const td2El = document.createElement("td");
 
+    const td3El = document.createElement("td");
 
+    td1El.innerText = td1;
 
+    td2El.innerText = td2;
 
+    td3El.innerText = td3;
 
+    trEl.append(td1El, td2El, td3El);
 
+    tableEl.appendChild(trEl);
 
+}

+ 15 - 0
HW12/index.html
View File 

@@ -0,0 +1,15 @@
 
+<!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>HW12</title>
 
+</head>
 
+
 
+<body>
 
+    <script src="main.js"></script>
 
+</body>
 
+
 
+</html>

+ 140 - 0
HW12/main.js
View File 

@@ -0,0 +1,140 @@
 
+
 
+// fetch basic
 
+
 
+{
 
+    let DOM = document.body;
 
+    fetch('https://swapi.py4e.com/api/people/1/')
 
+        .then(res => res.json(),
 
+            err => console.log("ERROR"))
 
+        .then(luke => createTable(DOM, luke));
 
+
 
+    function createTable(DOM, JSON) {
 
+        console.log(DOM, JSON);
 
+        const tableEl = document.createElement("table");
 
+        tableEl.border = 1;
 
+
 
+        for (let [key, value] of Object.entries(JSON)) {
 
+            createTr(key, value);
 
+        }
 
+
 
+        DOM.append(tableEl);
 
+
 
+        function createTr(td1, td2) {
 
+            const trEl = document.createElement("tr");
 
+            const td1El = document.createElement("td");
 
+            const td2El = document.createElement("td");
 
+            td1El.innerHTML = td1;
 
+            if (typeof td2 === "object") {
 
+                const ulEl = document.createElement("ul");
 
+                for (let value of td2) {
 
+                    const liEl = document.createElement("li");
 
+                    liEl.innerText = value;
 
+                    ulEl.appendChild(liEl);
 
+                }
 
+                td2El.appendChild(ulEl);
 
+            } else {
 
+                td2El.innerHTML = td2;
 
+            }
 
+            trEl.append(td1El, td2El);
 
+            tableEl.append(trEl);
 
+        }
 
+
 
+    }
 
+}
 
+
 
+// fetch improved
 
+
 
+{
 
+    let DOM = document.body;
 
+    myFetch(DOM);
 
+
 
+    function myFetch(dom) {
 
+        fetch('https://swapi.py4e.com/api/people/1/')
 
+            .then(res => res.json(),
 
+                err => console.log("ERROR"))
 
+            .then(luke => createTable(dom, luke));
 
+    }
 
+
 
+    function createTable(DOM, JSON) {
 
+        console.log(DOM, JSON);
 
+        const tableEl = document.createElement("table");
 
+        tableEl.border = 1;
 
+        for (let [key, value] of Object.entries(JSON)) {
 
+            createTr(key, value);
 
+        }
 
+        DOM.append(tableEl);
 
+
 
+        function createTr(td1, td2) {
 
+            const trEl = document.createElement("tr");
 
+            const td1El = document.createElement("td");
 
+            const td2El = document.createElement("td");
 
+            td1El.innerHTML = td1;
 
+            if (typeof td2 === "number") td2 = td2.toString();
 
+            if (typeof td2 !== "object" && !td2.indexOf("https://swapi.py4e.com/api/")) td2 = [td2];
 
+            if (typeof td2 === "object") {
 
+                const ulEl = document.createElement("ul");
 
+                for (let value of td2) {
 
+                    const liEl = document.createElement("li");
 
+                    const buttonEl = document.createElement("button");
 
+                    buttonEl.innerText = value;
 
+                    buttonEl.onclick = () => {
 
+                        buttonEl.hidden = true;
 
+                        myFetch(buttonEl.parentElement);
 
+                    }
 
+                    liEl.appendChild(buttonEl);
 
+                    ulEl.appendChild(liEl);
 
+                }
 
+                td2El.appendChild(ulEl);
 
+            } else {
 
+                td2El.innerHTML = td2;
 
+            }
 
+            trEl.append(td1El, td2El);
 
+            tableEl.append(trEl);
 
+        }
 
+    }
 
+}
 
+
 
+// myfetch
 
+
 
+myfetch('https://swapi.py4e.com/api/people/1/').then(luke => console.log(luke));
 
+
 
+function myfetch(url) {
 
+    return new Promise(function (resolve, reject) {
 
+        const xhr = new XMLHttpRequest();
 
+        xhr.open('GET', url, true);
 
+        xhr.responseType = "json";
 
+        xhr.onload = function () {
 
+            if (xhr.status == 200) {
 
+                resolve(xhr.response);
 
+            }
 
+            else {
 
+                reject(`ERROR ${xhr.status} - ${xhr.statusText}`);
 
+            }
 
+        }
 
+        xhr.onerror = () => reject(`ERROR ${xhr.status} - ${xhr.statusText}`);
 
+        xhr.send();
 
+    })
 
+}
 
+
 
+// race
 
+
 
+Promise.race([myfetch('https://swapi.py4e.com/api/people/1/'), delay(30)]).then((value) => console.log(value));
 
+
 
+
 
+function myfetch(url) {
 
+    return new Promise(function (resolve, reject) {
 
+        const xhr = new XMLHttpRequest();
 
+        xhr.open('GET', url, true);
 
+        xhr.responseType = "json";
 
+        xhr.onload = function () {
 
+            if (xhr.status == 200) {
 
+                resolve(xhr.response);
 
+            }
 
+            else {
 
+                reject(`ERROR ${xhr.status} - ${xhr.statusText}`);
 
+            }
 
+        }
 
+        xhr.onerror = () => reject(`ERROR ${xhr.status} - ${xhr.statusText}`);
 
+        xhr.send();
 
+    })
 
+}