首頁 探索 說明
登入
vladislavaSim
/
homeworks
關註 1
讚好 0
複刻 0
Files 問題管理 14 合併請求 0 Wiki
瀏覽代碼

JS homeworks directory created

vladislavaSim 2 年之前
父節點
1e7f94162e
當前提交
d1a03d08ed
共有 39 個文件被更改，包括 0 次插入 和 3274 次删除
分割檢視 顯示文件統計
  1. 0 29
      HW1/index.html
  2. 0 31
      HW1/index.js
  3. 0 23
      HW10/index.html
  4. 0 139
      HW10/main.js
  5. 0 19
      HW11/index.html
  6. 0 111
      HW11/main.js
  7. 0 22
      HW12/index.html
  8. 0 69
      HW12/main.js
  9. 0 49
      HW13/index.html
  10. 0 88
      HW13/main.js
  11. 0 44
      HW14/index.html
  12. 0 92
      HW14/main.js
  13. 0 13
      HW15/index.html
  14. 0 81
      HW15/main.js
  15. 0 10
      HW2/index.html
  16. 0 147
      HW2/main.js
  17. 0 10
      HW3/index.html
  18. 0 250
      HW3/main.js
  19. 0 10
      HW4/index.html
  20. 0 201
      HW4/main.js
  21. 0 17
      HW5/index.html
  22. 0 131
      HW5/main.js
  23. 0 10
      HW6/index.html
  24. 0 84
      HW6/main.js
  25. 0 20
      HW7/index.html
  26. 0 53
      HW7/main.js
  27. 0 10
      HW8/index.html
  28. 0 118
      HW8/main.js
  29. 0 10
      HW9/index.html
  30. 0 62
      HW9/main.js
  31. 二進制
      JsModule/Loading_icon.gif
  32. 0 132
      JsModule/index.html
  33. 0 715
      JsModule/index.js
  34. 0 53
      painter/index.html
  35. 0 311
      painter/main.js
  36. 二進制
      tuner/13x.png
  37. 二進制
      tuner/bbno$xdiamondPistols-help herself.mp3
  38. 0 35
      tuner/index.html
  39. 0 75
      tuner/index.js

+ 0 - 29
HW1/index.html
查看文件 

@@ -1,29 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-    <head>
 
-        <meta charset="UTF-8">
 
-        <title>HW1</title>
 
-        <style>
 
-            #message {
 
-                width: 120px;
 
-                font-size: 18px;
 
-            }
 
-            .success-message {
 
-                background-color: palegreen;
 
-            }
 
-            .fail-message {
 
-                background-color: #ff6b6b;
 
-            }
 
-        </style>
 
-    </head>
 
-    <body>
 
-        <div>
 
-            <form>
 
-                <input type="text" id="login" placeholder="login">
 
-                <input type="text" id="password" placeholder="password">
 
-                <button id="login-btn">Log in</button>
 
-            </form>
 
-        </div>
 
-    <script src="index.js"></script>
 
-    </body>
 
-</html>

+ 0 - 31
HW1/index.js
查看文件 

@@ -1,31 +0,0 @@
 
-let cigarettesPerDay = +prompt('How many cigarettes do you smoke per day?');
 
-let onePackPrice = +prompt('How much does one pack cost?')
 
-
 
-let cigarettesPerMonth = cigarettesPerDay * 30;
 
-let packsPerMonth = cigarettesPerMonth / 20;
 
-
 
-let totalPricePerMonth = packsPerMonth * onePackPrice;
 
-alert(`You spend ${totalPricePerMonth} for cigarettes every month. Aren\'t you surprised?`)
 
-
 
-var credentials = {
 
-    login: 'admin',
 
-    password: 'qwerty',
 
-};
 
-
 
-let login = document.querySelector('#login');
 
-let password = document.querySelector('#password');
 
-let loginBtn = document.querySelector('#login-btn');
 
-let message = document.createElement('div');
 
-message.id = 'message'
 
-
 
-loginBtn.addEventListener('click', (e) => {
 
-    e.preventDefault()
 
-    if(login.value === credentials.login && password.value === credentials.password) {
 
-        message.innerHTML = 'Successful login'
 
-        message.className = 'success-message'
 
-    } else {
 
-        message.innerHTML = 'Data is wrong!'
 
-        message.className = 'fail-message'
 
-    }
 
-    document.body.append(message)
 
-});

+ 0 - 23
HW10/index.html
查看文件 

@@ -1,23 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-<head>
 
-    <meta charset="UTF-8">
 
-    <title>HW10</title>
 
-    <style>
 
-        #loginForm {
 
-            display: flex;
 
-            flex-direction: column;
 
-            align-items: start;
 
-        }
 
-    </style>
 
-</head>
 
-
 
-<body>
 
-<div>
 
-    <form id="loginForm">
 
-
 
-    </form>
 
-</div>
 
-<script src="main.js"></script>
 
-</body>
 
-</html>

+ 0 - 139
HW10/main.js
查看文件 

@@ -1,139 +0,0 @@
 
-function Password(parent, open) {
 
-    let value = ''
 
-    let pass = document.createElement('input')
 
-    pass.placeholder = 'enter password'
 
-    let showPassBox = document.createElement('div')
 
-    let check = document.createElement('input')
 
-    check.type = 'checkbox'
 
-    check.name = 'password'
 
-    let label = document.createElement('label')
 
-    label.for = 'password'
 
-    label.innerText = 'Show password'
 
-    showPassBox.append(check, label)
 
-    parent.append(pass, showPassBox)
 
-    check.onchange = () => {
 
-        this.setOpen(check.checked)
 
-    }
 
-    pass.oninput = () => {
 
-        if (typeof this.onChange === "function") {
 
-            this.onChange(this.getValue());
 
-        }
 
-    };
 
-    this.getValue = function () {
 
-        return pass.value
 
-    }
 
-    this.setValue = function(value) {
 
-        pass.value = value
 
-    }
 
-    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)
 
-    this.onChange = () => {
 
-        button.disabled = !(p.getValue() === p2.getValue())
 
-    }
 
-
 
-}
 
-
 
-
 
-
 
-// let p = new Password(document.body, false)
 
-//
 
-// p.onChange = data => console.log(data)
 
-// p.onOpenChange = open => console.log(open)
 
-//
 
-// p.setValue('qwerty')
 
-// console.log(p.getValue())
 
-
 
-// p.setOpen(false)
 
-// console.log(p.getOpen())
 
-
 
-function Login(parent) {
 
-    let input = document.createElement('input')
 
-    input.placeholder = 'enter login'
 
-    let button = document.createElement('button')
 
-    button.innerText = 'log in'
 
-    parent.appendChild(input)
 
-    let password = new Password(parent, false)
 
-    password.placeholder = 'enter password'
 
-    button.disabled = true
 
-    parent.appendChild(button)
 
-
 
-    parent.onchange = function () {
 
-        console.log(password.getValue())
 
-        button.disabled = !(input.value !== '' && password.getValue() !== '')
 
-    }
 
-}
 
-let newLogin = new Login(loginForm)
 
-console.log(newLogin)
 
-
 
-
 
-let p = new Password(document.body, true)
 
-let p2 = new Password(document.body, true)
 
-let button = document.createElement('button')
 
-button.innerText = 'log in'
 
-button.disabled = true
 
-
 
-
 
-
 
-
 
-
 
-document.body.append(button)
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-// let $login = document.createElement('input');
 
-// let $password = document.createElement('input')
 
-// let $loginBtn = document.createElement('button')
 
-// $loginBtn.innerText = 'Log In'
 
-// let loginForm = document.querySelector('#loginForm')
 
-// loginForm.append($login, $password, $loginBtn)
 
-// let login = new Password(document.body, true)
 
-// let password = new Password(document.body, false)
 
-// let btn = new Password(document.body, false)
 
-//
 
-// login.setValue('anonymous');
 
-// password.setValue('123456');
 
-// login.value && password.value !== '' ? btn.setOpen(true) : btn.setOpen(false)
 
-// function LoginForm(login, password){
 
-//     this.login = login
 
-//     this.password = password
 
-//     this.btn = false
 
-//
 
-//     this.getLogin = function () {
 
-//         return this.login
 
-//     }
 
-//     this.setLogin = function (value) {
 
-//         return this.login = value
 
-//     }
 
-//     this.getPassword = function () {
 
-//         return this.password
 
-//     }
 
-//     this.setPassword = function (value) {
 
-//         return this.password = value
 
-//     }
 
-//     this.setBtn = function () {
 
-//         this.login.value && this.password.value ? this.btn = true : this.btn = false
 
-//     }
 
-// }
 
-
 
-// let newLogin = new LoginForm('admin', '11111');
 
-// console.log(newLogin.login.value)
 
-// console.log(newLogin)
 
-

+ 0 - 19
HW11/index.html
查看文件 

@@ -1,19 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-<head>
 
-    <meta charset="UTF-8">
 
-    <title>HW11</title>
 
-    <style>
 
-        body {
 
-            font-size: 20px;
 
-        }
 
-        td {
 
-            border: 1px solid black;
 
-            padding: 4px;
 
-        }
 
-    </style>
 
-</head>
 
-<body>
 
-<script src="main.js"></script>
 
-</body>
 
-</html>

+ 0 - 111
HW11/main.js
查看文件 

@@ -1,111 +0,0 @@
 
-function createStore(reducer){
 
-    let state = reducer(undefined, {})
 
-    let callbacks = []
 
-    const getState = () => state
 
-    const dispatch = (action) => {
 
-        const newState = reducer(state, action)
 
-        if(newState !== state) {
 
-            state = newState
 
-        }
 
-        for(let cb of callbacks) {
 
-            cb()
 
-        }
 
-    }
 
-
 
-    const subscribe = (callback) => (callbacks.push(callback),
 
-        () => callbacks = callbacks.filter(c => c !== callback))
 
-    return {
 
-        getState,
 
-        dispatch,
 
-        subscribe
 
-    }
 
-}
 
-
 
-function reducer(state, {type, item, number, price}){ //объект action деструктуризируется на три переменных
 
-    if (!state){ //начальная уборка в ларьке:
 
-        return {
 
-            items :
 
-                [
 
-                     {
 
-                        name: 'beer',
 
-                        price: 35,
 
-                        number: 100
 
-                     },
 
-                    {
 
-                        name: 'chips',
 
-                        price: 50,
 
-                        number: 100
 
-                    },
 
-                    {
 
-                        name: 'cigarettes',
 
-                        price: 45,
 
-                        number: 100
 
-                    },
 
-                    {
 
-                        name: 'gum',
 
-                        price: 15,
 
-                        number: 100
 
-                    }
 
-                ],
 
-            money: 0
 
-        }
 
-    }
 
-    if (type === 'BUY'){ //если тип action - КУПИТЬ, то:
 
-        console.log(state.items)
 
-        return {
 
-            ...state, //берем все что было из ассортимента
 
-
 
-            items: state.items.filter(i => i.name === item), //и уменьшаем то, что покупается на количество
 
-            money: state.money += state.items.filter(i => i.price === price)
 
-        }
 
-    }
 
-    return state //если мы не поняли, что от нас просят в `action` - оставляем все как есть
 
-}
 
-
 
-const store = createStore(reducer)
 
-// console.log(store.getState())
 
-
 
-let $select = document.createElement('select')
 
-let $table = document.createElement('table');
 
-let $num = document.createElement('input')
 
-$num.type = 'number'
 
-let btn = document.createElement('button')
 
-$num.min = '1';
 
-console.log(store.getState().items)
 
-let money = document.createElement('div')
 
-for(let item of store.getState().items) {
 
-    let $tr = document.createElement('tr')
 
-    let $td = document.createElement('td')
 
-    let $td2 = document.createElement('td')
 
-    let $td3 = document.createElement('td')
 
-    $td.innerText = item.name
 
-    $td2.innerText = item.price
 
-    $td3.innerText = item.number
 
-    let $option = document.createElement('option')
 
-    $option.innerHTML = item.name
 
-    $select.append($option)
 
-    btn.innerHTML = 'buy'
 
-    $tr.append($td, $td2, $td3)
 
-    $table.append($tr)
 
-    btn.onclick = (e) => {
 
-        // console.log(store.getState().items, item)
 
-        // console.log(item.number - +$num.value >= 0 )
 
-            if(item.number - +$num.value >= 0 ) {
 
-                // console.log(+$num.value, item.number)
 
-                let [selected] = store.getState().items.filter(i => i.name === $select.value)
 
-                selected.number = item.number - +$num.value
 
-                // console.log(selected.number)
 
-                if(item.number > 0) {
 
-                    console.log(store.getState())
 
-                    store.dispatch({type: 'BUY', item: selected.name, number: item.number - +$num.value})
 
-                    console.log(store.getState())
 
-                }
 
-            }
 
-
 
-    }
 
-    console.log(store.getState())
 
-    store.subscribe(() => money.innerHTML = `Cashbox: ${+store.getState().money}`)
 
-    store.subscribe(() => $td3.innerHTML = `${item.number}`)
 
-    document.body.append($select, $num, btn, $table)
 
-}
 
-document.body.appendChild(money)

+ 0 - 22
HW12/index.html
查看文件 

@@ -1,22 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-<head>
 
-    <meta charset="UTF-8">
 
-    <title>HW12</title>
 
-    <style>
 
-        body {
 
-            font-size: 20px;
 
-        }
 
-        td {
 
-            border: 1px solid black;
 
-            padding: 4px;
 
-        }
 
-        button {
 
-            background-color: #C4C4C4;
 
-        }
 
-    </style>
 
-</head>
 
-<body>
 
-<script src="main.js"></script>
 
-</body>
 
-</html>

+ 0 - 69
HW12/main.js
查看文件 

@@ -1,69 +0,0 @@
 
-fetch('https://swapi.dev/api/people/1/')
 
-    .then(res => res.json())
 
-    .then(luke => renderTable(document.body, luke))
 
-
 
-function renderTable(parent, obj) {
 
-    let $table = document.createElement('table')
 
-    for(let key in obj) {
 
-        let $tr = document.createElement('tr')
 
-        let $td = document.createElement('td')
 
-        let $td2 = document.createElement('td')
 
-        if(Array.isArray(obj[key])) {
 
-            for(let item of obj[key]) {
 
-                let newTable = document.createElement('table')
 
-                let newTr = document.createElement('tr')
 
-                let newTd = document.createElement('td')
 
-                linkChecker(item, newTd)
 
-                newTr.append(newTd)
 
-                newTable.append(newTr)
 
-                $td2.append(newTable)
 
-            }
 
-        } else {
 
-            linkChecker(obj[key], $td2)
 
-        }
 
-
 
-        $td.innerHTML = key
 
-
 
-        $tr.append($td, $td2)
 
-        $table.appendChild($tr)
 
-    }
 
-    parent.appendChild($table)
 
-}
 
-function linkChecker(str, container) {
 
-    if(typeof str === 'string') {
 
-        if(str.includes('https://swapi.dev/api/')) {
 
-            let btn = document.createElement('button')
 
-            btn.innerHTML = 'Show'
 
-            btn.onclick = () => {
 
-                fetch(str).then(r => r.json())
 
-                    .then(r => renderTable(container, r))
 
-                    // .then(r => console.log(r))
 
-            }
 
-            container.append(btn)
 
-        } else {
 
-            container.innerHTML = str
 
-        }
 
-    }
 
-}
 
-
 
-function myFetch(url){
 
-    return new Promise(function (resolve, reject){
 
-        const xhr = new XMLHttpRequest()
 
-        xhr.open('get', url)
 
-        xhr.onload = function () {
 
-            if (xhr.status >= 200 && xhr.status < 300) {
 
-                resolve(xhr.response);
 
-            } else {
 
-                reject(() => alert('something went wrong'));
 
-            }
 
-        xhr.send();
 
-    }});
 
-}
 
-myFetch('https://swapi.dev/api/peope/4/')
 
-    .then(res => console.log(res))
 
-
 
-function delay(ms) {
 
-    return setTimeout(() => console.log('delay worked'), ms)
 
-}
 
-Promise.race([myFetch('https://swapi.dev/api/peope/4/'), delay(300)]).then(val => console.log(val))
 
-Promise.race([myFetch('https://swapi.dev/api/peope/1/'), delay(200)]).then(val => console.log(val))

+ 0 - 49
HW13/index.html
查看文件 

@@ -1,49 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-<head>
 
-    <meta charset="UTF-8">
 
-    <title>HW13</title>
 
-    <style>
 
-
 
-        .chat-header {
 
-            text-align: left;
 
-        }
 
-        #chat-message {
 
-            border-radius: 5px;
 
-            padding: 7px;
 
-            background-color: #ccc;
 
-            display: inline-block;
 
-            margin-left: 5px;
 
-        }
 
-        .msg {
 
-            width: 250px;
 
-            border: 1px solid grey;
 
-            padding: 5px 10px;
 
-            margin: 5px;
 
-            background: seashell;
 
-        }
 
-        p {
 
-            margin: 5px;
 
-        }
 
-        .msg p:first-child {
 
-            font-size: 20px;
 
-        }
 
-    </style>
 
-</head>
 
-<body>
 
-<main class="main">
 
-<div class="chat">
 
-    <h1 class="chat-header">Chat</h1>
 
-    <div id="content" class = "chat-header">
 
-        <div class="form">
 
-            Nick : <input type="text" id = 'nick' value="test">
 
-            Message : <input type="text" id = 'msg'>
 
-            <button id="sendButton">Отправить</button>
 
-        </div>
 
-    </div>
 
-</div>
 
-    <div id="msgHolder"></div>
 
-</main>
 
-<script src="main.js"></script>
 
-</body>
 
-</html>

+ 0 - 88
HW13/main.js
查看文件 

@@ -1,88 +0,0 @@
 
-let $nickname = document.querySelector('#nick')
 
-let sendBtn = document.querySelector('#sendButton');
 
-let $msg = document.querySelector('#msg')
 
-let msgHolder = document.querySelector('#msgHolder')
 
-
 
-function jsonPost(url, data) {
 
-    return new Promise((resolve, reject) => {
 
-        var x = new XMLHttpRequest();
 
-        x.onerror = () => reject(new Error('jsonPost failed'))
 
-        x.open("POST", url, true);
 
-        x.send(JSON.stringify(data))
 
-
 
-        x.onreadystatechange = () => {
 
-            if (x.readyState === XMLHttpRequest.DONE && x.status === 200){
 
-                resolve(JSON.parse(x.responseText))
 
-            }
 
-            else if (x.status !== 200){
 
-                reject(new Error('status is not 200'))
 
-            }
 
-        }
 
-    })
 
-}
 
-
 
-// function messageDataCreator(message) {
 
-//     return {
 
-//         func: 'addMessage',
 
-//         nick: $nickname.value,
 
-//         message: message,
 
-//     }
 
-// }
 
-//
 
-function showMessagesList(arr) {
 
-    let $container = document.createElement('div')
 
-    for(let msg of arr) {
 
-        let $div = document.createElement('div')
 
-        $div.className = 'msg'
 
-        let $p1 = document.createElement('p')
 
-        let $p2 = document.createElement('p')
 
-        $p1.innerHTML = msg.nick + ':'
 
-        $p2.innerHTML = msg.message
 
-        $div.append($p1, $p2)
 
-        $container.append($div)
 
-    }
 
-    msgHolder.prepend($container)
 
-}
 
-
 
-    async function getMessages() {
 
-        let id = 0;
 
-        let resp = await jsonPost("http://students.a-level.com.ua:10012", {func: "getMessages", messageId: id})
 
-        let {data, nextMessageId} = await resp
 
-        id = nextMessageId
 
-        let list = data.slice(data.length - 50).reverse()
 
-        showMessagesList(list)
 
-        if(nextMessageId > id) {
 
-            id = nextMessageId
 
-            showMessagesList(data)
 
-        }
 
-    }
 
-
 
-    // let interval = setInterval(async () => {
 
-    //
 
-    // }, 3000)
 
-
 
-
 
-async function sendMessage(nick, message) {
 
-    console.log('test')
 
-        await jsonPost("http://students.a-level.com.ua:10012",
 
-            {
 
-                func: 'addMessage',
 
-                nick: nick,
 
-                message: message,
 
-            }
 
-        )
 
-    }
 
-
 
-sendBtn.onclick = sendAndCheck()
 
-    async function sendAndCheck() {
 
-        await getMessages()
 
-        await sendMessage($nickname.value, $msg.value)
 
-        $msg.value = ''
 
-    }
 
-
 
-function delay(ms) {
 
-    return new Promise((resolve) => setTimeout(resolve, ms))
 
-}
 
-
 
-
 
-

+ 0 - 44
HW14/index.html
查看文件 

@@ -1,44 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-<head>
 
-    <meta charset="UTF-8">
 
-    <title>HW14</title>
 
-  <style>
 
-    .trafficLight {
 
-      width: 150px;
 
-      height: 350px;
 
-      display: flex;
 
-      flex-direction: column;
 
-      justify-content: space-around;
 
-      align-items: center;
 
-      background-color: black;
 
-    }
 
-    .trafficLight  div {
 
-      width: 100px;
 
-      height: 100px;
 
-      border-radius: 50%;
 
-    }
 
-    .red {
 
-      background-color: red;
 
-        opacity: .2;
 
-    }
 
-    .yellow {
 
-      background-color: yellow;
 
-        opacity: .2;
 
-    }
 
-    .green {
 
-      background-color: green;
 
-        opacity: .2;
 
-    }
 
-  </style>
 
-</head>
 
-<body>
 
-  <div class="trafficLight">
 
-    <div class="red"></div>
 
-    <div class="yellow"></div>
 
-    <div class="green"></div>
 
-  </div>
 
-<button class="btn">Button</button>
 
-  <script src="main.js"></script>
 
-</body>
 
-</html>

+ 0 - 92
HW14/main.js
查看文件 

@@ -1,92 +0,0 @@
 
-const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
 
-
 
-const red = document.querySelector('.red')
 
-const yellow = document.querySelector('.yellow')
 
-const green = document.querySelector('.green')
 
-let col = red
 
-
 
-// async function trafficLight(){
 
-//     while (true){
 
-//         changeLight(green)
 
-//         await delay(3000)
 
-//         changeLight(yellow)
 
-//         await delay(2000)
 
-//         changeLight(red)
 
-//         await delay(3000)
 
-//     }
 
-// }
 
-// trafficLight().then()
 
-
 
-function changeLight(color) {
 
-    if(col !== color) {
 
-        col.style.opacity = .2
 
-        color.style.opacity = 1
 
-        col = color
 
-    } else {
 
-        color.style.opacity = 1
 
-    }
 
-}
 
-
 
-let btn = document.querySelector('.btn')
 
-
 
-function domEventPromise(button, eventName) {
 
-    return new Promise(res => {
 
-        button.addEventListener(eventName, (e) => res(e))
 
-
 
-        button.removeEventListener(eventName, (e) => res(e))
 
-    });
 
-}
 
-domEventPromise(btn, 'click')
 
-    .then(e => console.log('event click happens', e))
 
-
 
-let stopLightIsActive = true
 
-async function pedestrianTrafficLight() {
 
-    while(stopLightIsActive){
 
-            changeLight(red)
 
-            await delay(100)
 
-    }
 
-}
 
-pedestrianTrafficLight().then()
 
-btn.addEventListener('click', async () => {
 
-    stopLightIsActive = !stopLightIsActive
 
-        await delay(3000)
 
-        changeLight(yellow)
 
-        await delay(1000)
 
-        changeLight(green)
 
-        await delay(4000)
 
-        changeLight(yellow)
 
-        await delay(1000)
 
-        changeLight(red)
 
-})
 
-
 
-async function speedtest(getPromise, count, parallel = 1) {
 
-    let time = performance.now();
 
-    let promisesArr = [];
 
-    let initParallel = parallel;
 
-    for (let i = 0; i < count; i++) {
 
-        promisesArr.push(getPromise);
 
-        parallel--;
 
-        await Promise.all(promisesArr);
 
-    }
 
-
 
-    time = performance.now() - time;
 
-
 
-    return {
 
-        duration: time,
 
-        querySpeed: count / time,
 
-        queryDuration: time / count,
 
-        parallelSpeed: (count / time) * initParallel,
 
-        parallelDuration: time / (count * initParallel),
 
-    };
 
-}
 
-
 
-speedtest(() => delay(1000), 10, 10).then((res) =>console.log(res));
 
-speedtest(
 
-    () =>
 
-        fetch("http://swapi.dev/api/people/1").then((res) =>
 
-            res.json()
 
-        ),
 
-    2,
 
-    2
 
-).then((v)=>console.log(v))
 
-

+ 0 - 13
HW15/index.html
查看文件 

@@ -1,13 +0,0 @@
 
-<!doctype html>
 
-<html lang="en">
 
-<head>
 
-    <meta charset="UTF-8">
 
-    <meta name="viewport"
 
-          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
-    <title>HW15</title>
 
-</head>
 
-<body>
 
-<script src="main.js"></script>
 
-</body>
 
-</html>

+ 0 - 81
HW15/main.js
查看文件 

@@ -1,81 +0,0 @@
 
-let gql = (url, query, variables={}) =>
 
-    fetch(url, {
 
-        method: 'POST',
 
-        headers:{
 
-            Accept: 'application/json',
 
-            "Content-Type": 'application/json'
 
-        },
 
-        body: JSON.stringify({query, variables})
 
-    }).then(res => res.json())
 
-
 
-// используя функцию gql, понаделать функций с параметрами для разных запросов: категории, категория по id с товарами, товар по id с картинками и описанием, логин, регистрация.
 
-//     например:
 
-let idd = 123456
 
-// `\\"_id\\":\\"${id}\\"`
 
-console.log(JSON.parse("[{\"_id\":\"123456\"}]"))
 
-const url = 'http://shop-roles.node.ed.asmer.org.ua/graphql'
 
-const gqlCategoriesList = () => {
 
-    return gql(url, `query cats{
 
-    CategoryFind(query: "[{}]"){
 
-    _id, name,
 
-  }
 
-}`, {}
 
-    )
 
-}
 
-
 
-const gqlRegister = (login, password) => {
 
-    return gql(url, `mutation register($login: String, $password: String){
 
-    UserUpsert(user: {login: $login, password: $password}){
 
-        _id, login, createdAt
 
-    }
 
-}`, {login, password})
 
-}
 
-
 
-const gqlLogin = (login, password) =>
 
-    gql(url,
 
-        `query login($login:String, $password: String){
 
-                login(login:$login, password: $password)
 
-        }`, {login, password})
 
-
 
-const gqlCategories = () => {
 
-    return gql(url,
 
-        ` query categories{
 
-                            CategoryFind(query:"[{}]"){
 
-                            _id name goods {
 
-                                _id
 
-                                name
 
-                                price
 
-                                description
 
-                                }
 
-                          }
 
-                     }`
 
-        );
 
-}
 
-const productSearchById = (id) => {
 
-    let jsn = JSON.stringify({_id: id})
 
-    return gql(
 
-        url,
 
-        `query searchById{
 
-        GoodFind(query: ${JSON.stringify(`[${jsn}]`)}){
 
-            name description images {
 
-                _id
 
-                createdAt
 
-                text
 
-                url
 
-                originalFileName
 
-            }
 
-        }
 
-    }`,
 
-    );
 
-};
 
-
 
-(async function callAll() {
 
-    console.log(await gqlCategoriesList());
 
-    console.log(await gqlRegister("Vlada Simonova", "123456"));
 
-    console.log(await gqlLogin("Vlada Simonova", "123456"));
 
-    console.log(await gqlCategories());
 
-    console.log(await productSearchById("62c9472cb74e1f5f2ec1a0d3"));
 
-})();
 
-
 
-
 
-

+ 0 - 10
HW2/index.html
查看文件 

@@ -1,10 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-<head>
 
-    <meta charset="UTF-8">
 
-    <title>HW2</title>
 
-</head>
 
-<body>
 
-<script src="main.js"></script>
 
-</body>
 
-</html>

+ 0 - 147
HW2/main.js
查看文件 

@@ -1,147 +0,0 @@
 
-var a = 5;
 
-var b, c;
 
-
 
-b = (a * 5);
 
-b = (c = b/2);
 
-
 
-b = a *= 5;
 
-b = c = b / 2;
 
-
 
-console.log(b)
 
-
 
-for(let i = 0 i < 10 i++) {
 
-    console.log(i)
 
-}
 
-
 
-const num1 = 110 num2 = num1 + 54
 
-
 
-const obj = {}
 
-(function () { })()
 
-let x = (5; + 10)
 
-console.log(x)
 
-
 
-let age1 = prompt('how old are you?');
 
-alert(`you were born in ${2022 - age1}`)
 
-// (0 °C × 9/5) + 32 = 32 °F
 
-let celsius = prompt('Enter the temperature in ℃')
 
-alert(`${celsius * 1.8 + 32} fahrenheit`);
 
-
 
-let num1 = prompt('enter the number to divide')
 
-let num2 = prompt('enter another number')
 
-alert(Math.floor(num1 / num2));
 
-
 
-let number = +prompt('enter the number');
 
-
 
-if(!isNaN(number)) {
 
-    console.log('it\'s a number')
 
-    if(number % 2 === 0) {
 
-        console.log('the number is even')
 
-    } else {
 
-        console.log('the number is odd')
 
-    }
 
-} else {
 
-    console.log('It\'s not a number!')
 
-}
 
-
 
-let name = prompt('What\'s your name?')
 
-alert(`Hello, ${name}!`)
 
-
 
-let str = prompt('Enter message')
 
-
 
-if(str.includes('shit')) {
 
-    console.log('Hey, it\'s inappropriate')
 
-}
 
-
 
-let isSpeakingSpanish = confirm('Do you speak Spanish?')
 
-isSpeakingSpanish ? console.log('Hola, amigo!') : console.log('So let\'s learn it!')
 
-
 
-let isMan = confirm('Are you a man?')
 
-let isMarried = confirm('Are you married?')
 
-let hasChildren = confirm('Do you have children?')
 
-
 
-
 
-let question = confirm('are you a woman?');
 
-let isWoman = question;
 
-console.log(isWoman);
 
-if(isWoman) {
 
- alert('you`re a woman')
 
- } else {
 
- alert('you`re a man');
 
-}
 
-
 
-let shoppingCart = ['avocado', 'milk', 'lemon', 'cheese', 'tea'];
 
-const answers = [isMan, isMarried, hasChildren, isWoman]
 
-
 
-let numbers = [1, 2, 5, 4, 5];
 
-
 
-numbers.splice(2, 1,numbers[0] + numbers[1])
 
-
 
-console.log(numbers)
 
-
 
-let array = ['he', 'l', 'lo']
 
-array.join('');
 
-
 
-let dog = {
 
-    gender: 'male',
 
-    breed: 'chihuahua',
 
-    name: 'Ronnie',
 
-    age: 6,
 
-    ['favorite food']: ['cheese', 'meat', 'tomatoes'],
 
-    hasChildren: false
 
-}
 
-
 
-dog["favorite food"].push('egg yolk')
 
-
 
-let age = +prompt("Сколько вам лет?","");
 
-
 
-if(age < 0) {
 
-    alert('возраст не может быть отрицательным')
 
-} else if (age < 18) {
 
-    alert("школьник");
 
-} else if (age > 18 && age < 30) {
 
-    alert("молодежь");
 
-} else if (age > 30 && age < 45) {
 
-    alert("зрелость");
 
-} else if (age > 45 && age < 60){
 
-    alert("закат");
 
-} else if (age > 60){
 
-    alert("как пенсия?");
 
-} else {
 
-    alert("то ли киборг, то ли KERNESS");
 
-}
 
-let size = +prompt('введите размер обуви дял конвертации в UK')
 
-switch (size) {
 
-    case 35:
 
-        alert(3.5);
 
-        break;
 
-    case 36:
 
-        alert(4);
 
-        break;
 
-    case 37:
 
-        alert(5);
 
-        break;
 
-    case 38:
 
-        alert(6);
 
-        break;
 
-    case 39:
 
-        alert(6.5);
 
-        break;
 
-    case 40:
 
-        alert(7);
 
-        break;
 
-    default:
 
-        alert('something went wrong')
 
-}
 
-isWoman ? alert('you`re a woman') : alert('you`re a man');
 
-
 
-
 
-let flatNumber = +prompt('Введите номер квартиры')
 
-let flatsPerFloor = +prompt('Сколько квартир на этаже?')
 
-let porchesPerHouse = +prompt('Сколько подъездов в доме?')
 
-let floorsPerHouse = +prompt('Сколько этажей в доме?')
 
-
 
-let flatsPerEntrance = flatsPerFloor * floorsPerHouse;
 
-let entrance = Math.floor((flatNumber - 1) / flatsPerEntrance + 1)
 
-let floor = Math.floor((flatNumber - 1) % flatsPerEntrance / flatsPerFloor + 1)
 
-
 
-alert(`Flat No.${flatNumber} is on floor ${floor}, entrance ${entrance}`)

+ 0 - 10
HW3/index.html
查看文件 

@@ -1,10 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-<head>
 
-    <meta charset="UTF-8">
 
-    <title>HW3</title>
 
-</head>
 
-<body>
 
-<script src="main.js"></script>
 
-</body>
 
-</html>

+ 0 - 250
HW3/main.js
查看文件 

@@ -1,250 +0,0 @@
 
-let task = prompt('enter task name').toLowerCase();
 
-
 
-switch (task) {
 
-    case 'switch: sizes':
 
-        let size = +prompt('введите размер обуви дял конвертации в UK')
 
-        switch (size) {
 
-            case 35:
 
-                alert(3.5);
 
-                break;
 
-            case 36:
 
-                alert(4);
 
-                break;
 
-            case 37:
 
-                alert(5);
 
-                break;
 
-            case 38:
 
-                alert(6);
 
-                break;
 
-            case 39:
 
-                alert(6.5);
 
-                break;
 
-            case 40:
 
-                alert(7);
 
-                break;
 
-            default:
 
-                alert('something went wrong')
 
-        }
 
-        break;
 
-
 
-    case 'switch: if':
 
-        let color = prompt("Введите цвет","");
 
-        if(color === "red") {
 
-            document.write("<div style='background-color: red;'>красный</div>")
 
-        } else if(color === "black") {
 
-            document.write("<div style='background-color: black; color: white;'>черный</div>")
 
-        } else if(color === "blue") {
 
-            document.write("<div style='background-color: blue;'>синий</div>")
 
-        } else if(color === "green") {
 
-            document.write("<div style='background-color: green;'>зеленый</div>")
 
-        } else {
 
-            document.write("<div style='background-color: gray;'>Я не понял</div>")
 
-        }
 
-        break;
 
-
 
-    case 'prompt: or':
 
-        let age1 = prompt('how old are you?');
 
-        if(age1 === '' || age1 === null) {
 
-            alert('something is wrong...')
 
-        } else {
 
-            alert(`you were born in ${2022 - age1}`)
 
-        }
 
-        break;
 
-
 
-    case 'confirm: or this days':
 
-        let question1 = confirm('Шоппинг?') || alert(' Ты - бяка!');
 
-        break;
 
-
 
-    case 'confirm: if this days':
 
-        let question2 = confirm('Шоппинг?');
 
-        if(!question2) {
 
-            alert(' Ты - бяка!')
 
-        }
 
-        break;
 
-
 
-    case 'triple prompt':
 
-        let surname = prompt('Enter surname')
 
-        let name = prompt('Enter name')
 
-        let patronymic = prompt('Enter patronymic')
 
-
 
-        alert(`${surname} ${name} ${patronymic}`)
 
-        break;
 
-
 
-    case 'default: or':
 
-        let enteredName = prompt('enter your name');
 
-        let enteredSurname = prompt('enter your surname');
 
-
 
-        enteredName = enteredName || 'Ivan';
 
-        enteredSurname = enteredSurname || 'Ivanov';
 
-        break;
 
-
 
-    case 'default: if':
 
-        let enteredName2 = prompt('enter your name');
 
-        let enteredSurname2 = prompt('enter your surname');
 
-        if(!enteredSurname2) {
 
-            enteredSurname2 = 'Ivanov'
 
-        }
 
-        if(!enteredName2) {
 
-            enteredName2 = 'Ivan'
 
-        }
 
-        break;
 
-
 
-    case 'login and password':
 
-        const adminName = 'admin';
 
-        const adminPassword = 'qwerty';
 
-        let login = prompt('Login: ');
 
-
 
-        if(adminName === login) {
 
-            let password = prompt('Password: ');
 
-            if(adminPassword === password) {
 
-                alert('Success!')
 
-            } else {
 
-                alert('password is incorrect')
 
-            }
 
-        } else {
 
-            alert('login is incorrect')
 
-        }
 
-        break;
 
-
 
-    case 'currency calc':
 
-        let currency1 = prompt('USD or EUR?')
 
-        let rate1;
 
-        switch (currency1) {
 
-            case 'usd':
 
-                rate1 = 34.67
 
-                break;
 
-            case 'eur':
 
-                rate1 = 37.38
 
-                break;
 
-            default:
 
-                rate1 = 0;
 
-        }
 
-        let uah = +prompt('enter UAH to convert');
 
-        alert(`${(uah / rate1).toFixed(2)} ${currency1}`)
 
-        break;
 
-
 
-    case 'currency calc: improved':
 
-        let currency2 = prompt('USD or EUR?').toLowerCase();
 
-        let rate2;
 
-        switch (currency2) {
 
-            case 'usd':
 
-                rate2 = 34.67
 
-                break;
 
-            case 'eur':
 
-                rate2 = 37.38
 
-                break;
 
-            default:
 
-                rate2 = 0;
 
-        }
 
-        let uah1 = +prompt('enter UAH to convert');
 
-        alert(`${(uah1 / rate2).toFixed(2)} ${currency2}`)
 
-        break;
 
-
 
-    case 'currency calc: two rates':
 
-        let currency3 = prompt('Do you want to use USD or EUR?').toLowerCase()
 
-        let rate3;
 
-        let buyRate1 = confirm('Do you want to buy currency?')
 
-        switch (currency3) {
 
-            case 'usd':
 
-                buyRate1 ? rate3 = 36.28 : rate3 = 34.67
 
-                break;
 
-            case 'eur':
 
-                buyRate1 ? rate3 = 41.77 : rate3 = 37.38
 
-                break;
 
-            default:
 
-                alert('error');
 
-        }
 
-        let uah2 = +prompt('enter UAH to convert');
 
-        alert(`${(uah2 / rate3).toFixed(2)} ${currency3}`)
 
-        break;
 
-
 
-    case 'currency calc: if':
 
-        let currency4 = prompt('Do you want to use USD or EUR?').toLowerCase()
 
-        if(currency4 === 'usd' || currency4 === 'eur') {
 
-            let uah4 = +prompt('enter UAH to convert');
 
-            let rate4;
 
-            let buyRate2 = confirm('Do you want to buy currency?')
 
-            if (currency4 === 'usd') {
 
-                buyRate2 ? rate4 = 36.28 : rate4 = 34.67
 
-            } else if (currency4 === 'eur') {
 
-                buyRate2 ? rate4 = 41.77 : rate4 = 37.38
 
-            } else {
 
-                alert('error')
 
-            }
 
-            alert(`${(uah4 / rate4).toFixed(2)} ${currency4}`)
 
-        }
 
-        break;
 
-
 
-    case 'scissors':
 
-
 
-        let usersTurn = prompt('Rock, paper or scissors?').toLowerCase();
 
-        let turns = ['rock', 'paper', 'scissors'];
 
-        const randomIndex  = Math.floor(Math.random() * 3)
 
-        let computersTurn = turns[randomIndex]
 
-        console.log(computersTurn)
 
-
 
-        if(usersTurn === computersTurn) {
 
-            alert('It\'s a tie!')
 
-        } else if(usersTurn === 'paper' && computersTurn === 'scissors') {
 
-            alert('computer won');
 
-        } else if(usersTurn === 'scissors' && computersTurn === 'rock') {
 
-            alert('computer won');
 
-        } else if(usersTurn === 'rock' && computersTurn === 'paper') {
 
-            alert('computer won')
 
-        } else if(computersTurn === 'paper' && usersTurn === 'scissors') {
 
-            alert('you won');
 
-        } else if(computersTurn === 'scissors' && usersTurn === 'rock') {
 
-            alert('you won');
 
-        } else if(computersTurn === 'rock' && usersTurn === 'paper') {
 
-            alert('you won')
 
-        } else {
 
-            alert('error')
 
-        }
 
-        break;
 
-
 
-    case 'задание на синий пояс':
 
-        let ratios = {
 
-            usdToBuy: 36.28,
 
-            eurToBuy: 41.77,
 
-            usdToSell: 34.67,
 
-            eurToSell: 37.38
 
-        }
 
-        let currency5 = prompt('Do you want to use USD or EUR?').toLowerCase()
 
-        if(currency5 === 'usd' || currency5 === 'eur') {
 
-            let rate;
 
-            let uah = +prompt('enter UAH to convert');
 
-            let buyRate = confirm('Do you want to buy currency?')
 
-            if (currency5 === 'usd') {
 
-                rate = buyRate ? ratios["usdToBuy"] : ratios["usdToSell"]
 
-            } else if (currency5 === 'eur') {
 
-                rate = buyRate ? ratios["eurToBuy"] : ratios["eurToSell"]
 
-            } else {
 
-                alert('error')
 
-            }
 
-            alert(`${(uah / rate).toFixed(2)} ${currency5}`)
 
-        }
 
-        break;
 
-
 
-    case 'real data':
 
-        let currency = prompt('Enter the currency name to convert (e.g. USD)').toUpperCase()
 
-            let uah3 = +prompt('enter UAH to convert');
 
-            fetch('https://open.er-api.com/v6/latest/' + currency)
 
-                .then(res => res.json())
 
-                .then(data => {
 
-                    alert(`${(uah3 / data.rates.UAH).toFixed(2)} ${currency}`)
 
-                })
 
-        break;
 
-
 
-    case 'задание на черный пояс':
 
-        let usersTurn1 = prompt('Rock, paper or scissors?').toLowerCase();
 
-        let turns1 = ['rock', 'paper', 'scissors'];
 
-        const randomIndex1  = Math.floor(Math.random() * 3)
 
-        let computersTurn1 = turns1[randomIndex1]
 
-        console.log(computersTurn1)
 
-        let compWin = usersTurn1 === 'paper' && computersTurn1 === 'scissors' || usersTurn1 === 'scissors' && computersTurn1 === 'rock' || usersTurn1 === 'rock' && computersTurn1 === 'paper';
 
-        let userWin = computersTurn1 === 'paper' && usersTurn1 === 'scissors' || computersTurn1 === 'scissors' && usersTurn1 === 'rock' || computersTurn1 === 'rock' && usersTurn1 === 'paper';
 
-        let tie = usersTurn1 === computersTurn1 && alert('It\'s a tie!')
 
-        let victory = compWin && alert('computer won') || userWin && alert('you won');
 
-        break;
 
-};
 
-

+ 0 - 10
HW4/index.html
查看文件 

@@ -1,10 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-<head>
 
-    <meta charset="UTF-8">
 
-    <title>HW4</title>
 
-</head>
 
-<body>
 
-<script src="main.js"></script>
 
-</body>
 
-</html>

+ 0 - 201
HW4/main.js
查看文件 

@@ -1,201 +0,0 @@
 
-let body = {
 
-    tagName: 'body',
 
-    children: [
 
-        {
 
-            tagName: 'div',
 
-            children: [
 
-                {
 
-                    tagName: 'span',
 
-                    innerText: 'Enter a data please:'
 
-                },
 
-                {
 
-                    tagName: 'br'
 
-                },
 
-                {
 
-                    tagName: 'input',
 
-                    type: 'text',
 
-                    id: 'name'
 
-                },
 
-                {
 
-                    tagName: 'input',
 
-                    type: 'text',
 
-                    id: 'surname'
 
-                }
 
-            ]
 
-        },
 
-        {
 
-            tagName: 'div',
 
-            children: [
 
-                {
 
-                    tagName: 'button',
 
-                    innerText: 'OK',
 
-                    id: 'ok'
 
-                },
 
-                {
 
-                    tagName: 'button',
 
-                    innerText: 'Cancel',
 
-                    id: 'cancel'
 
-                }
 
-            ]
 
-        }
 
-    ]
 
-};
 
-
 
-console.log(body.children[1].children[1].innerText)
 
-console.log(body.children[0].children[3].id)
 
-
 
-
 
-var person;
 
-var notebook = {
 
-    brand: prompt('Brand:'),
 
-    type:  prompt('Type:'),
 
-    model: prompt('Model:'),
 
-    ram: +prompt('Ram:'),
 
-    size: +prompt('Size:'),
 
-    weight: +prompt('Weight:'),
 
-    resolution: {
 
-        width: +prompt('Resolution width:'),
 
-        height: +prompt('Resolution height:'),
 
-    },
 
-    owner: person
 
-};
 
-
 
-var phone = {
 
-    brand: prompt('Brand:'),
 
-    model: prompt('Model:'),
 
-    ram: +prompt('Ram:'),
 
-    color: prompt('Color:'),
 
-    owner: person
 
-};
 
-
 
-person = {
 
-    name: prompt('Name:'),
 
-    surname: prompt('Surname:'),
 
-    married: confirm('Married?'),
 
-    smartphone: phone,
 
-    laptop: notebook
 
-};
 
-
 
-let array1 = []
 
-array1[0] = prompt('string 1');
 
-array1[1] = prompt('string 2');
 
-array1[2] = prompt('string 3');
 
-
 
-let confirm1;
 
-while(!confirm1) {
 
-    confirm1 = confirm('Are you hungry?');
 
-    if(confirm1) {
 
-        break;
 
-    }
 
-}
 
-
 
-let prompt1;
 
-let array2 = []
 
-while(prompt1 !== null) {
 
-    prompt1 = prompt('Enter something');
 
-    array2.push(prompt1)
 
-    if(!prompt1) {
 
-        break
 
-    }
 
-    console.log(array2)
 
-}
 
-
 
-
 
-let prompt2 = prompt('Enter something');
 
-let array3 = []
 
-do {
 
-    let i = 0;
 
-    prompt2 ? array3[i++] = prompt2 : null
 
-    console.log(array3)
 
-} while(prompt2 !== null)
 
-
 
-let i = 0;
 
-let n;
 
-while(n !== 5) {
 
-    i++
 
-    let n = Math.random() * 5;
 
-    console.log(n)
 
-    console.log(i)
 
-    if(n === 5) {
 
-        break
 
-    }
 
-}
 
-let end = +prompt('Введите крайнее число прогрессии')
 
-let sum = 0;
 
-for(let i = 1; i < 30; i+=3){
 
-    console.log(i)
 
-    sum += i
 
-}
 
-alert(`Сумма чисел в прогрессии - ${sum}`);
 
-
 
-let chessString = '';
 
-
 
-for(let i = 0; i < 10; i++) {
 
-    i % 2 === 0 ? chessString += ' ' : chessString += '#'
 
-}
 
-console.log(chessString);
 
-
 
-let numbers2 = '';
 
-
 
-for(let i = 0; i < 10; i++) {
 
-    numbers2 += '\n'
 
-    for(let j = 0; j < 10; j++) {
 
-        numbers2 += j
 
-    }
 
-}
 
-console.log(numbers2)
 
-
 
-let height = 8;
 
-let width = 10;
 
-let board = "";
 
-
 
-for (let i = 0; i < height; i++) {
 
-    if(i > 0) board += "\n";
 
-    for (let j = 0; j < width; j++) {
 
-        if ((j + i) % 2 === 0){
 
-            board += ".";
 
-        } else {
 
-            board += "#";
 
-        }
 
-    }
 
-}
 
-
 
-console.log(board);
 
-
 
-let numbers = [];
 
-for(let i = 0; i < 15; i++) {
 
-    numbers.push(Math.pow(i, 3));
 
-}
 
-
 
-console.log(numbers)
 
-
 
-let multiplyTable = [];
 
-for(let i = 0; i <= 9; i++) {
 
-    let nestedArr = []
 
-    multiplyTable.push(nestedArr)
 
-    for(let j = 0; j <= 9; j++) {
 
-        nestedArr.push([j * i])
 
-    }
 
-}
 
-console.log(multiplyTable[5][6])
 
-
 
-
 
-let table = document.createElement('table')
 
-for(let i = 1; i <= 9; i++) {
 
-    let tr = document.createElement('tr');
 
-    for(let j = 1; j <= 9; j++) {
 
-        let td = document.createElement('td')
 
-        td.innerHTML = String(j * i)
 
-        tr.appendChild(td)
 
-    }
 
-    table.appendChild(tr)
 
-}
 
-
 
-document.body.appendChild(table)
 
-
 
-
 
-
 
-
 
-
 
-
 
-

+ 0 - 17
HW5/index.html
查看文件 

@@ -1,17 +0,0 @@
 
-<!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>HW5</title>
 
-    <style>
 
-        tr:nth-child(odd) {
 
-            background-color: aquamarine;
 
-        }
 
-    </style>
 
-</head>
 
-<body>
 
-<script src='main.js'></script>  
-</body>
 
-</html>

+ 0 - 131
HW5/main.js
查看文件 

@@ -1,131 +0,0 @@
 
-let a = {
 
-    name: 'Olga',
 
-    surname: 'Kosareva'
 
-}
 
-let b = {
 
-    name: 'Elena',
 
-    surname: 'Krasnik'
 
-}
 
-let c = {
 
-    name: 'Leonid',
 
-    surname: 'Onoprienko'
 
-}
 
-
 
-a.age = 42;
 
-b.fatherName = 'Igorevna'
 
-c.sex = 'male'
 
-
 
-
 
-let arrofPersons = [a, b, c, {name: 'Anatoly', surname: 'Petrenko', age: 30}]
 
-
 
-for(let i = 0; i < arrofPersons.length; i++) {
 
-    console.log(arrofPersons[i]);
 
-}
 
-
 
-for(let person of arrofPersons) {
 
-    console.log(person.surname + ' ' + person.name);
 
-}
 
-
 
-for(let i = 0; i < arrofPersons.length; i++) {
 
-   for (let key in arrofPersons[i]) {
 
-        console.log(arrofPersons[i][key]);
 
-    }
 
-}
 
-
 
-for(let obj of arrofPersons) {
 
-    if(obj.name && obj.surname) {
 
-        obj.fullName = obj.name + ' ' + obj.surname
 
-    }
 
- }
 
-console.log(arrofPersons);
 
-
 
-JSON.stringify(arrofPersons);
 
-
 
-
 
-// let str = "<table border='1'>"
 
-// arrofPersons.map(person => {
 
-//     str += `<tr><td>${person.name}</td><td>${person.surname}</td></tr>`
 
-// })
 
-// str += '</table>'
 
-// document.write(str)
 
-
 
-
 
-let str = "<table border='1'>"
 
-arrofPersons.map(person => {
 
-    str += `<tr>`
 
-    Object.values(person).map(value => str += `<td>${value}</td>`)
 
-    str += `</tr>`
 
-})
 
-str += '</table>'
 
-document.write(str)
 
-
 
-var someTree = {
 
-    tagName: "table", //html tag
 
-    subTags: [ //вложенные тэги
 
-        {
 
-                    tagName: "tr",
 
-                    subTags: [
 
-                        {
 
-                            tagName: "td",
 
-                            text: "some text",
 
-                        },
 
-                        {
 
-                            tagName: "td",
 
-                            text: "some text 2",
 
-                        }
 
-                    ]
 
-        }
 
-    ],
 
-    attrs:
 
-    {
 
-        border: 1,
 
-    },
 
-}
 
-
 
-let table = `<${someTree.tagName} ${Object.keys(someTree.attrs)[0]}=${Object.values(someTree.attrs)}>`
 
-
 
-for(let subTag of someTree.subTags) {
 
-    table += `<${subTag.tagName}>`
 
-    for(let innerTag of subTag.subTags) {
 
-        table += `<${innerTag.tagName}>${innerTag.text}</${innerTag.tagName}>`
 
-    }
 
-}
 
-table += `</${someTree.tagName}>`
 
-document.write(table);
 
-
 
-let arr = [1,2,3,4,5, "a", "b", "c"]
 
-
 
-let [odd1, even1, odd2, even2, odd3, ...letters] = arr
 
-
 
-let arr2 = [1, "abc"]
 
-
 
-let [number, [s1, s2, s3]] = arr2
 
-
 
-let obj = {
 
-    name: 'Ivan',
 
-    surname: 'Petrov',
 
-    children: [
 
-        {name: 'Maria'},
 
-        {name: 'Nikolay'}
 
-    ]
 
-}
 
-
 
-let {
 
-    children:
 
-        [{name: name1}, {name: name2}]} = obj
 
-
 
-
 
-let arr3 = [1,2,3,4, 5,6,7,10];
 
-
 
-let [first, second, {length = arr3.length}] = arr3
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-

+ 0 - 10
HW6/index.html
查看文件 

@@ -1,10 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-<head>
 
-    <meta charset="UTF-8">
 
-    <title>HW6</title>
 
-</head>
 
-<body>
 
-<script src="main.js"></script>
 
-</body>
 
-</html>

+ 0 - 84
HW6/main.js
查看文件 

@@ -1,84 +0,0 @@
 
-function a(text) {
 
-    alert(text)
 
-}
 
-
 
-function cube(n) {
 
-    return Math.pow(n, 3)
 
-}
 
-
 
-function avg2(a, b) {
 
-    return (a + b) / 2
 
-}
 
-
 
-function sum3(a, b, ...c) {
 
-    return a + b + +c
 
-}
 
-function intRandom(min = 0, max = 10) {
 
-    return Math.round(Math.random() * (max - min - 1) + min)
 
-}
 
-
 
-// function greetAll(...arguments) {
 
-//     for(let arg of arguments) {
 
-//         alert(`Hello, ${arg}!`)
 
-//     }
 
-// }
 
-
 
-function greetAll(...arguments) {
 
-    arguments = arguments.map(item => ' ' + item)
 
-    alert(`Hello, ${arguments}!`)
 
-
 
-}
 
-function sum(...arguments) {
 
-    let result = 0
 
-    for(let num of arguments) {
 
-        result += num
 
-    }
 
-    return result
 
-}
 
-
 
-var sample = prompt("Введите название задания")
 
-
 
-switch (sample.toLowerCase()){
 
-    case "a": a('Test prompt')
 
-        break
 
-    case "cube": cube(5)
 
-        break
 
-    case 'avg2': avg2(55, 17)
 
-        break
 
-    case 'sum3': sum3(5, 82, 47)
 
-        break
 
-    case 'intRandom': intRandom(1, 105)
 
-        break
 
-    case 'greetAll': greetAll('Sonya', 'Kerry', 'Eve')
 
-        break
 
-    case 'sum': sum(45, 741, 32, 14)
 
-        break
 
-    default:
 
-        a()
 
-}
 
-
 
-let sampleObj = {
 
-        a() {
 
-            a('Test prompt')
 
-        },
 
-        cube() {
 
-            cube(50)
 
-        },
 
-        avg2() {
 
-            avg2(55, 17)
 
-        },
 
-        sum3() {
 
-            sum3(5, 82, 47)
 
-        },
 
-        intRandom() {
 
-            intRandom(1, 50)
 
-        },
 
-        greetAll() {
 
-            greetAll('Sonya', 'Kerry', 'Eve')
 
-        },
 
-        sum() {
 
-            sum(45, 741, 32, 14)
 
-        },
 
-    };
 
-
 
-console.log(sampleObj[prompt("Введите название задания")]());

+ 0 - 20
HW7/index.html
查看文件 

@@ -1,20 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-<head>
 
-    <meta charset="UTF-8">
 
-    <title>HW7</title>
 
-    <style>
 
-        table td {
 
-            padding: 5px;
 
-            border: 1px solid grey;
 
-        }
 
-    </style>
 
-</head>
 
-<body>
 
-    <input type="number" id="n1">
 
-    <input type="number" id="n2">
 
-    <button id="calcBtn">sum</button>
 
-    <div id="result"></div>
 
-<script src="main.js"></script>
 
-</body>
 
-</html>

+ 0 - 53
HW7/main.js
查看文件 

@@ -1,53 +0,0 @@
 
-let $table = document.createElement('table');
 
-
 
-function rerenderColor(e, color) {
 
-    Array.from($table.children).map(item => {
 
-        Array.from(item.children).filter(item => item.cellIndex === e.target.cellIndex).map(item => item.style.backgroundColor = color)
 
-    })
 
-}
 
-
 
-for(let i = 1; i < 10; i++) {
 
-    let $tr = document.createElement('tr')
 
-
 
-    for(let j = 1; j < 10; j++) {
 
-        // $td.addEventListener('mouseover', (e) => rerenderColor(e, 'blue'))
 
-        // $td.addEventListener('mouseout', (e) => rerenderColor(e, 'transparent'))
 
-        let $td = document.createElement('td')
 
-        $td.innerText = String(j * i)
 
-
 
-        $td.addEventListener('mouseover', (e) => {
 
-            rerenderColor(e, 'red')
 
-
 
-            $td.style.backgroundColor = 'green'
 
-        })
 
-        $td.addEventListener('mouseout', (e) => rerenderColor(e, 'transparent'))
 
-        $tr.appendChild($td)
 
-    }
 
-    $table.appendChild($tr)
 
-}
 
-document.body.appendChild($table)
 
-
 
-const $n1 = document.querySelector('#n1')
 
-const $n2 = document.querySelector('#n2')
 
-const $calcBtn = document.querySelector('#calcBtn')
 
-const $result = document.querySelector('#result')
 
-
 
-const calcSum = () => {
 
-    return $result.innerText = String(+$n1.value + +$n2.value)
 
-}
 
-
 
-$calcBtn.addEventListener( 'click',  () => {
 
-    calcSum()
 
-})
 
-$n1.onchange = calcSum()
 
-$n2.onchange = calcSum()
 
-$calcBtn.onclick = calcSum()
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-
 
-

+ 0 - 10
HW8/index.html
查看文件 

@@ -1,10 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-<head>
 
-    <meta charset="UTF-8">
 
-    <title>HW8</title>
 
-</head>
 
-<body>
 
-<script src="main.js"></script>
 
-</body>
 
-</html>

+ 0 - 118
HW8/main.js
查看文件 

@@ -1,118 +0,0 @@
 
-//SORT
 
-
 
-var persons = [
 
-    {name: "Иван", age: 17},
 
-    {name: "Мария", age: 35},
 
-    {name: "Алексей", age: 73},
 
-    {name: "Яков", age: 12},
 
-]
 
-
 
-function sort(arr, type, bool = true) {
 
-    return arr.sort((a, b) => {
 
-        let res;
 
-        if (bool) {
 
-            console.log('true')
 
-            res = a[type] > b[type] ? 1 : -1;
 
-        } else {
 
-            console.log('false')
 
-            res = a[type] < b[[type]] ? 1 : -1;
 
-        }
 
-        return res
 
-    })
 
-}
 
-console.log(sort(persons, 'name', false))
 
-
 
-
 
-//ARRAY MAP
 
-let someArr = ["1", {}, null, undefined, "500", 700];
 
-
 
-let newArr = someArr.map(item => typeof item === 'string' ? +item : item)
 
-console.log(newArr)
 
-
 
-
 
-//ARRAY REDUCE
 
-let reduceArr = ["0", 5, 3, "string", null];
 
-let reducedArr = reduceArr.filter(item => typeof item === 'number').reduce((acc, curr) => acc *= curr)
 
-console.log(reducedArr)
 
-
 
-
 
-//OBJECT FILTER
 
-var phone = {
 
-    brand: "meizu",
 
-    model: "m2",
 
-    ram: 2,
 
-    color: "black",
 
-};
 
-
 
-function filter(obj, callback) {
 
-    let filteredObj = {}
 
-    for(let key in obj) {
 
-        if (callback(key, obj[key])) {
 
-            filteredObj = {...filteredObj, [key]: obj[key]}
 
-        }
 
-      }
 
-        return filteredObj
 
-}
 
-
 
-console.log(filter(phone,(key,value) => key === "color" || value === 2))
 
-
 
-
 
-//OBJECT MAP
 
-function map(obj, callback) {
 
-    let res = {};
 
-    for(let key in obj) {
 
-        res = { ...res, ...callback(key, obj[key]) }
 
-    }
 
-    return res
 
-}
 
-
 
-let test = map({name: "Иван", age: 17},function(key,value){
 
-    var result = {};
 
-    result[key+"_"] = value + "$";
 
-    return result;
 
-})
 
-console.log(test)
 
-
 
-
 
-//SUM
 
-function geomProgressionCalc(min, max, step){
 
-    if (max <= 0) return 0;
 
-    return geomProgressionCalc(min + step,max -1, step) + min
 
-}
 
-
 
-console.log(geomProgressionCalc(10, 20, 2))
 
-
 
-//HTML TREE RECURSION
 
-let $table = document.createElement('table');
 
-
 
-function rerenderColor(e, color) {
 
-    Array.from($table.children).map(item => {
 
-        Array.from(item.children).filter(item => item.cellIndex === e.target.cellIndex).map(item => item.style.backgroundColor = color)
 
-    })
 
-};
 
-
 
-let i = 10;
 
-function createRow() {
 
-    i--
 
-    let $tr = document.createElement('tr')
 
-
 
-    let j = 1;
 
-    function createCell() {
 
-        j++
 
-        let $td = document.createElement('td');
 
-        $td.innerText = String(j * i)
 
-        $td.addEventListener('mouseover', (e) => {
 
-            rerenderColor(e, 'red')
 
-            $td.style.backgroundColor = 'green'
 
-        })
 
-        $td.addEventListener('mouseout', (e) => rerenderColor(e, 'transparent'))
 
-        $tr.appendChild($td)
 
-        if(j < 9) createCell()
 
-    }
 
-    $table.appendChild($tr)
 
-    createCell()
 
-    if(i > 1) createRow();
 
-}
 
-
 
-createRow()
 
-document.body.appendChild($table);

+ 0 - 10
HW9/index.html
查看文件 

@@ -1,10 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-<head>
 
-    <meta charset="UTF-8">
 
-    <title>HW9</title>
 
-</head>
 
-<body>
 
-<script src="main.js"></script>
 
-</body>
 
-</html>

+ 0 - 62
HW9/main.js
查看文件 

@@ -1,62 +0,0 @@
 
-function makeProfileTimer() {
 
-    let start = performance.now();
 
-    return function() {
 
-        let end = performance.now();
 
-        return end - start
 
-    };
 
-}
 
-
 
-let timer = makeProfileTimer();
 
-
 
-alert("Замеряем время работы этого alert");
 
-alert(`This code took ${timer()}ms`);
 
-
 
-function makeSaver(data){
 
-    let promptShowed = false;
 
-    let newData;
 
-    return () => {
 
-        if(!promptShowed) {
 
-            promptShowed = true;
 
-            return newData = data()
 
-        }
 
-    }
 
-}
 
-var saver = makeSaver(Math.random)
 
-var value1 = saver()
 
-var value2 = saver()
 
-console.log(value1, value2)
 
-console.log(value1 === value2 )
 
-var saver2 = makeSaver(() => console.log('saved function called') || [null, undefined, false, '', 0, Math.random()][Math.ceil(Math.random()*6)])
 
-var value3 = saver2()
 
-var value4 = saver2()
 
-console.log(value3 === value4)
 
-
 
-let namePrompt = prompt.bind(window, 'Как тебя зовут?')
 
-let nameSaver = makeSaver(namePrompt)
 
-
 
-alert(`Привет! Prompt еще не было!`)
 
-alert(`Привет ${nameSaver()}. Только что запустился prompt, первый и последний раз`)
 
-alert(`Слушай, ${nameSaver()}, го пить пиво. Ведь prompt был только один раз`)
 
-
 
-let count = 5;
 
-function timer2() {
 
-    console.log(count);
 
-    const timeout = setTimeout(() => {
 
-        timer();
 
-    }, 1000);
 
-    if (count > 0) {
 
-        return (() => {
 
-            return count--;
 
-        })();
 
-    }
 
-    clearTimeout(timeout);
 
-    if (count === 0) {
 
-        console.log("поехали!");
 
-    }
 
-}
 
-timer2();
 
-
 
-
 
-
 
-
 
-

二進制
JsModule/Loading_icon.gif
查看文件


+ 0 - 132
JsModule/index.html
查看文件 

@@ -1,132 +0,0 @@
 
-<!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>Module Shop</title>
 
-  <style>
 
-    body {
 
-      font-family: system-ui;
 
-      padding: 0;
 
-    }
 
-    header {
 
-      height: 50px;
 
-      display: flex;
 
-      align-items: center;
 
-      justify-content: space-around;
 
-    }
 
-    header a {
 
-      margin: 5px 10px;
 
-      border: 1px solid grey;
 
-      padding: 5px 10px;
 
-    }
 
-    a {
 
-      text-decoration: none;
 
-      color: black;
 
-      padding: 5px 10px;
 
-      transition-property: transform, border-radius;
 
-      transition-duration: .5s;
 
-    }
 
-    .cat {
 
-      color: grey;
 
-    }
 
-    img {
 
-      max-width: 150px;
 
-    }
 
-    #userBox {
 
-      display: flex;
 
-      align-items: baseline;
 
-      flex-direction: row-reverse;
 
-    }
 
-
 
-    #authBox {
 
-      display: flex;
 
-      min-width: 150px;
 
-      justify-content: space-between;
 
-    }
 
-    aside {
 
-      display: flex;
 
-      flex-direction: column;
 
-      margin-right: 150px;
 
-    }
 
-    aside > a {
 
-      margin-bottom: 15px;
 
-    }
 
-
 
-    #mainContainer {
 
-      display: flex;
 
-    }
 
-    button, .loginBtn  {
 
-      margin: 5px 10px;
 
-      border: 1px solid #FB8F1D;
 
-      padding: 5px 10px;
 
-      background-color: sandybrown;
 
-      color: white;
 
-      font-size: 16px;
 
-      font-family: system-ui;
 
-    }
 
-    .showMore, #userBox > a {
 
-      margin: 5px 10px;
 
-      border: 1px solid #FB8F1D;
 
-      padding: 5px 10px;
 
-    }
 
-    a:hover {
 
-      transform: translateY(5px);
 
-      box-shadow: 0 0 11px sandybrown;
 
-      border-radius: 8px;
 
-      animation-delay: .5s;
 
-    }
 
-    .card {
 
-      padding: 15px 20px;
 
-      margin: 35px;
 
-      border: 1px solid lightgrey;
 
-      border-radius: 20px;
 
-      display: flex;
 
-      transition-property: transform;
 
-      transition-duration: .5s;
 
-      width: 400px;
 
-      justify-content: space-between;
 
-    }
 
-    .card:hover {
 
-      transform: translateX(10px);
 
-    }
 
-    button:hover {
 
-      color: #FB8F1D;
 
-      background-color: white;
 
-      box-shadow: 0 0 11px sandybrown;
 
-    }
 
-
 
-  </style>
 
-</head>
 
-
 
-<body>
 
-
 
-  <header>
 
-
 
-    <a href="">Main</a>
 
-      <a id="cartIcon" href="#/cart">
 
-        Cart
 
-        <span id="cartCounter"></span>
 
-      </a>
 
-      <div id="userBox"></div>
 
-    <div id="authBox"></div>
 
-    </div>
 
-  </header>
 
-
 
-
 
-  <div id='mainContainer'>
 
-    <aside id='aside'>
 
-    </aside>
 
-
 
-    <main id='main'>
 
-      <h3>Welcome to our shop! Let's find something for you :)</h3>
 
-    </main>
 
-
 
-  </div>
 
-
 
-</div>
 
-  <script src='index.js'></script>
 
-</body>
 
-
 
-</html>

+ 0 - 715
JsModule/index.js
查看文件 

@@ -1,715 +0,0 @@
 
-
 
-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 => {
 
-        if (typeof action === 'function'){ //если action - не объект, а функция
 
-            return action(dispatch, getState) //запускаем эту функцию и даем ей dispatch и getState для работы
 
-        }
 
-        const newState = reducer(state, action) //пробуем запустить редьюсер
 
-        if (newState !== state){ //проверяем, смог ли редьюсер обработать action
 
-            state = newState //если смог, то обновляем state
 
-            for (let cb of cbs)  cb() //и запускаем подписчиков
 
-        }
 
-    }
 
-
 
-    return {
 
-        getState, //добавление функции getState в результирующий объект
 
-        dispatch,
 
-        subscribe //добавление subscribe в объект
 
-    }
 
-}
 
-
 
-function combineReducers(reducers) {
 
-    return (state={}, action) => {
 
-        const newState = {}
 
-        // перебрать все редьюсеры
 
-        if (reducers) {
 
-            for (const [reducerName, reducer] of Object.entries(reducers)) {
 
-                const newSubState = reducer(state[reducerName], action)
 
-                if (newSubState !== state[reducerName]) {
 
-                    newState[reducerName] = newSubState
 
-                }
 
-            }
 
-            // если newState не пустой, то вернуть стейт в
 
-            if (Object.keys(newState).length !== 0) {
 
-                return {...state, ...newState}
 
-            } else {
 
-                return state
 
-            }
 
-        }
 
-
 
-    }
 
-}
 
-
 
-const combinedReducer = combineReducers({promise: promiseReducer, auth: authReducer, cart: cartReducer})
 
-const store = createStore(combinedReducer)
 
-
 
-store.subscribe(() => console.log(store.getState()))
 
-
 
-
 
-
 
-function jwtDecode(token){
 
-    try {
 
-        return JSON.parse(atob(token.split('.')[1]))
 
-    }
 
-    catch(e){
 
-    }
 
-}
 
-
 
-function authReducer(state, {type, token}) {
 
-    if (!state) {
 
-        if (localStorage.authToken) {
 
-            token = localStorage.authToken
 
-            type = 'AUTH_LOGIN'
 
-        } else {
 
-            return {}
 
-        }
 
-    }
 
-    if (type === 'AUTH_LOGIN') {
 
-        let payload = jwtDecode(token)
 
-        if (typeof payload === 'object') {
 
-            localStorage.authToken = token
 
-            return {
 
-                ...state,
 
-                token,
 
-                payload
 
-            }
 
-        } else {
 
-            return state
 
-        }
 
-    }
 
-    if (type === 'AUTH_LOGOUT') {
 
-        delete localStorage.authToken
 
-        location.reload()
 
-        return {}
 
-    }
 
-    return state
 
-}
 
-
 
-const actionAuthLogin = (token) => ({type: 'AUTH_LOGIN', token})
 
-const actionAuthLogout = () => ({type: 'AUTH_LOGOUT'})
 
-
 
-
 
-
 
-function cartReducer (state={}, {type, good={}, count=1}) {
 
-
 
-    if (Object.keys(state).length === 0 && localStorage.cart) {
 
-        let currCart = JSON.parse(localStorage.cart)
 
-        if (currCart && Object.keys(currCart).length !== 0) {
 
-            state = currCart
 
-        }
 
-    }
 
-
 
-    const {_id} = good
 
-
 
-    const types = {
 
-        CART_ADD() {
 
-            count = +count
 
-            if (!count) {
 
-                return state
 
-            }
 
-            let newState = {
 
-                ...state,
 
-                [_id]: {good, count: (count + (state[_id]?.count || 0)) < 1 ? 1 : count + (state[_id]?.count || 0)}
 
-            }
 
-            localStorage.cart = JSON.stringify(newState)
 
-            return newState
 
-        },
 
-        CART_CHANGE() {
 
-            count = +count
 
-            if (!count) {
 
-                return state
 
-            }
 
-            let newState = {
 
-                ...state,
 
-                [_id]: {good, count: count < 0 ? 0 : count}
 
-            }
 
-            localStorage.cart = JSON.stringify(newState)
 
-            return newState
 
-        },
 
-        CART_REMOVE() {
 
-            let { [_id]: removed, ...newState }  = state
 
-            localStorage.cart = JSON.stringify(newState)
 
-            return newState
 
-        },
 
-        CART_CLEAR() {
 
-            localStorage.cart = JSON.stringify({})
 
-            return {}
 
-        },
 
-    }
 
-    if (type in types) {
 
-        return types[type]()
 
-    }
 
-    return state
 
-}
 
-
 
-const actionCartAdd = (good, count) => ({type: 'CART_ADD', good, count})
 
-const actionCartChange = (good, count) => ({type: 'CART_CHANGE', good, count})
 
-const actionCartRemove = (good) => ({type: 'CART_REMOVE', good})
 
-const actionCartClear = () => ({type: 'CART_CLEAR'})
 
-
 
-
 
-function promiseReducer(state={}, {type, status, payload, error, name}) {
 
-    if (!state) {
 
-        return {}
 
-    }
 
-    if (type === 'PROMISE') {
 
-        return {
 
-            ...state,
 
-            [name]: {
 
-                status: status,
 
-                payload : payload,
 
-                error: error,
 
-            }
 
-        }
 
-    }
 
-    return state
 
-}
 
-
 
-const actionPending = (name) => ({type: 'PROMISE', status: 'PENDING', name})
 
-const actionResolved = (name, payload) => ({type: 'PROMISE', status: 'RESOLVED', name, payload})
 
-const actionRejected = (name, error) => ({type: 'PROMISE', status: 'REJECTED', name, error})
 
-
 
-
 
-const actionPromise = (name, promise) => (
 
-    async (dispatch) => {
 
-        dispatch(actionPending(name))
 
-        try {
 
-            let data = await promise
 
-            dispatch(actionResolved(name, data))
 
-            return data
 
-        }
 
-        catch(error){
 
-            dispatch(actionRejected(name, error))
 
-        }
 
-    }
 
-)
 
-
 
-const getGQL = url => (
 
-    async (query, variables={}) => {
 
-        let obj = await fetch(url, {
 
-            method: 'POST',
 
-            headers: {
 
-                "Content-Type": "application/json",
 
-                ...(localStorage.authToken ? {Authorization: "Bearer " + localStorage.authToken} : {})
 
-            },
 
-            body: JSON.stringify({ query, variables })
 
-        })
 
-        let a = await obj.json()
 
-        if (!a.data && a.errors) {
 
-            throw new Error(JSON.stringify(a.errors))
 
-        } else {
 
-            return a.data[Object.keys(a.data)[0]]
 
-        }
 
-    }
 
-)
 
-
 
-const backURL = 'http://shop-roles.node.ed.asmer.org.ua/'
 
-const gql = getGQL(backURL + 'graphql');
 
-
 
-
 
-
 
-const actionOrder = () => (
 
-    async (dispatch, getState) => {
 
-        let {cart} = getState()
 
-
 
-        const orderGoods = Object.entries(cart)
 
-            .map(([_id, {good, count}]) => ({good: {_id}, count}))
 
-
 
-        let result = await dispatch(actionPromise('order', gql(`
 
-                  mutation newOrder($order:OrderInput){
 
-                    OrderUpsert(order:$order)
 
-                      { _id total}
 
-                  }
 
-          `, {order: {orderGoods}})))
 
-        if (result?._id) {
 
-            dispatch(actionCartClear())
 
-        }
 
-    })
 
-
 
-
 
-
 
-
 
-
 
-const actionLogin = (login, password) => (
 
-    actionPromise('login', gql(`query log($login: String, $password: String) {
 
-        login(login: $login, password: $password)
 
-    }`, {login, password}))
 
-)
 
-
 
-const actionFullLogin = (login, password) => (
 
-    async (dispatch) => {
 
-        let token = await dispatch(actionLogin(login, password))
 
-        if (token) {
 
-            dispatch(actionAuthLogin(token))
 
-            location.hash = '#/category'
 
-        } else {
 
-            showErrorMessage('please, enter correct login and password', main)
 
-        }
 
-    }
 
-)
 
-
 
-
 
-const actionRegister = (login, password) => (
 
-    actionPromise('register', gql(`mutation reg($user:UserInput) {
 
-        UserUpsert(user:$user) {
 
-        _id 
-        }
 
-    }
 
-    `, {user: {login, password}})
 
-    )
 
-)
 
-
 
-const actionFullRegister = (login, password) => (
 
-    async (dispatch) => {
 
-        let registerId = await dispatch(actionRegister(login, password))
 
-
 
-        if (registerId) {
 
-            dispatch(actionFullLogin(login, password))
 
-        }
 
-    }
 
-)
 
-
 
-
 
-
 
-const actionRootCats = () => (
 
-    actionPromise('rootCats', gql(`query {
 
-        CategoryFind(query: "[{\\"parent\\":null}]"){
 
-            _id name
 
-        }
 
-    }`))
 
-)
 
-
 
-const actionCatById = (_id) => (
 
-    actionPromise('catById', gql(`query catById($q: String){
 
-        CategoryFindOne(query: $q){
 
-            _id name goods {
 
-                _id name price images {
 
-                    url
 
-                }
 
-            }
 
-            subCategories {
 
-                _id name 
-            }
 
-        }
 
-    }`, {q: JSON.stringify([{_id}])}))
 
-)
 
-
 
-const actionGoodById = (_id) => (
 
-    actionPromise('goodById', gql(`query goodById($q: String) {
 
-        GoodFindOne(query: $q) {
 
-            _id name price description images {
 
-            url
 
-            }
 
-        }
 
-    }`, {q: JSON.stringify([{_id}])}))
 
-)
 
-
 
-const actionGoodsByUser = (_id) => (
 
-    actionPromise('goodByUser', gql(`query oUser($query: String) {
 
-        OrderFind(query:$query){
 
-        _id orderGoods{
 
-                price count total good{
 
-                    _id name categories{
 
-                    name
 
-                    }
 
-                    images {
 
-                        url
 
-                    }
 
-                }
 
-            } 
-            owner {
 
-            _id login
 
-            }
 
-        }
 
-    }`,
 
-        {query: JSON.stringify([{___owner: _id}])}))
 
-)
 
-
 
-store.subscribe(() => {
 
-    const {promise, auth} = store.getState()
 
-    const {rootCats} = promise
 
-
 
-    if (rootCats?.status === 'PENDING') {
 
-        aside.innerHTML = `<img src="Loading_icon.gif">`
 
-    } else {
 
-        if (rootCats?.payload) {
 
-            aside.innerHTML = ''
 
-            authBox.innerHTML = ''
 
-            const regBtn = document.createElement('a')
 
-            regBtn.href = '#/register'
 
-            regBtn.innerText = 'Register'
 
-            const loginBtn = document.createElement('a')
 
-            loginBtn.className = 'loginBtn'
 
-            loginBtn.href = `#/login`
 
-            loginBtn.innerText = 'Login'
 
-            const logoutBtn = document.createElement('a')
 
-            logoutBtn.innerText = 'Logout'
 
-            auth.token ? authBox.append(logoutBtn) : authBox.append(regBtn, loginBtn)
 
-
 
-            logoutBtn.onclick = () => {
 
-                store.dispatch(actionAuthLogout())
 
-            }
 
-            for (const {_id, name} of rootCats?.payload) {
 
-                const link = document.createElement('a')
 
-                link.href = `#/category/${_id}`
 
-                link.innerText = name
 
-                aside.append(link)
 
-            }
 
-        }
 
-    }
 
-})
 
-
 
-store.dispatch(actionRootCats())
 
-
 
-
 
-function createForm(parent, type, callback) {
 
-let {auth} = store.getState()
 
-    let res = `<label for="login${type}">Nick</label>
 
-            <input id="login${type}" type="text"/>
 
-            <label for="pass${type}">Password</label>
 
-            <input id="pass${type}" type="password"/>
 
-      
-        <button id="btn${type}">${type}</button>
 
-    </div>`
 
-    parent.innerHTML = res
 
-    return () => window[`btn${type}`].onclick = () => {
 
-        store.dispatch(callback(window[`login${type}`].value, window[`pass${type}`].value))
 
-    }
 
-}
 
-
 
-let message = document.createElement('p')
 
-function showErrorMessage(text, parent) {
 
-    message.innerHTML = text
 
-    parent.append(message)
 
-    }
 
-
 
-
 
-
 
-const createCartPage = (parent) => {
 
-    parent.innerHTML = ''
 
-    const {cart} = store.getState()
 
-
 
-    const clearBtn = document.createElement('button')
 
-    clearBtn.innerText = "clear all"
 
-    if(Object.keys(cart).length !== 0) {
 
-        parent.append(clearBtn)
 
-    }
 
-    clearBtn.onclick = () => {
 
-        store.dispatch(actionCartClear())
 
-    }
 
-
 
-    const cartPage  = document.createElement('div')
 
-    if(Object.keys(cart).length === 0) {
 
-        showErrorMessage('Hmm... Let`s add something into the cart!', cartPage)
 
-    }
 
-    main.append(cartPage)
 
-
 
-    let cartCounter = 0
 
-    for(const item in cart) {
 
-        const {good} = cart[item]
 
-        const {count, good: {_id: id, name: name, price: price, images: [{url}]}} = cart[item]
 
-
 
-        cartCounter += count*price
 
-
 
-        const card = document.createElement('div')
 
-        card.innerHTML = `
 
-                        <h4>${name}</h4>
 
-                        </div>
 
-                        <img src="${backURL}/${url}" />
 
-                        <p>amount: </p>                                
-                        `
 
-
 
-        const inputGr = document.createElement('div')
 
-        card.lastElementChild.append(inputGr)
 
-
 
-        const minusBtn = document.createElement('button')
 
-        minusBtn.innerText = '-'
 
-        inputGr.append(minusBtn)
 
-        minusBtn.onclick = () => {
 
-            store.dispatch(actionCartAdd(good, -1))
 
-        }
 
-
 
-        const changeCount = document.createElement('input')
 
-        changeCount.type = 'number'
 
-        changeCount.value = count
 
-        changeCount.setAttribute('min', '1')
 
-        inputGr.append(changeCount)
 
-        changeCount.oninput = () => {
 
-            store.dispatch(actionCartChange(good, changeCount.value))
 
-        }
 
-
 
-        const plusBtn = document.createElement('button')
 
-        plusBtn.innerText = '+'
 
-        inputGr.append(plusBtn)
 
-        plusBtn.onclick = () => {
 
-            store.dispatch(actionCartAdd(good))
 
-        }
 
-
 
-        const deleteGood = document.createElement('button')
 
-        deleteGood.innerText = 'remove item'
 
-        deleteGood.style.display = 'block'
 
-        card.lastElementChild.append(deleteGood)
 
-        deleteGood.onclick = () => {
 
-            store.dispatch(actionCartRemove(good))
 
-        }
 
-
 
-        cartPage.append(card)
 
-    }
 
-
 
-    const total  = document.createElement('h5')
 
-    total.innerText = `Total: ${cartCounter} UAH`
 
-
 
-    const sendOrder = document.createElement('button')
 
-    sendOrder.innerText = 'Make an order'
 
-    if(Object.keys(cart).length !== 0) {
 
-        parent.append(total)
 
-        parent.append(sendOrder)
 
-    }
 
-    const {auth} = store.getState()
 
-    sendOrder.disabled = !auth.token;
 
-    sendOrder.onclick = () => {
 
-        store.dispatch(actionOrder())
 
-    }
 
-}
 
-
 
-
 
-
 
-// location.hash
 
-window.onhashchange = () => {
 
-    const [,route, _id] = location.hash.split('/')
 
-
 
-    const routes = {
 
-        category(){
 
-            store.dispatch(actionCatById(_id))
 
-        },
 
-        good(){
 
-            store.dispatch(actionGoodById(_id))
 
-        },
 
-        register(){
 
-            const registerFunc = createForm(main, 'Register', actionFullRegister)
 
-            registerFunc()
 
-        },
 
-        login(){
 
-            const loginFunc = createForm(main, 'Login', actionFullLogin)
 
-            loginFunc()
 
-        },
 
-        orders(){
 
-            store.dispatch(actionGoodsByUser(_id))
 
-        },
 
-        cart(){
 
-            createCartPage(main)
 
-        }
 
-    }
 
-    if (route in routes) {
 
-        routes[route]()
 
-    }
 
-}
 
-
 
-
 
-store.subscribe(() => {
 
-    const [,route] = location.hash.split('/')
 
-    if (route === 'cart') {
 
-        createCartPage(main)
 
-    }
 
-})
 
-
 
-
 
-window.onhashchange()
 
-
 
-store.subscribe(() => {
 
-    const {promise} = store.getState()
 
-    const {catById} = promise
 
-    const [,route, _id] = location.hash.split('/')
 
-
 
-    if (catById?.status === 'PENDING') {
 
-        main.innerHTML = `<img src="Loading_icon.gif">`
 
-    } else {
 
-        if (catById?.payload && route === 'category'){
 
-            main.innerHTML = ''
 
-            const catBody  = document.createElement('div')
 
-            main.append(catBody)
 
-
 
-            const {name} = catById.payload;
 
-            catBody.innerHTML = `<h1>${name}</h1>`
 
-
 
-            if (catById.payload.subCategories) {
 
-                const linkList  = document.createElement('div')
 
-                catBody.append(linkList)
 
-
 
-                for(const {_id, name} of catById.payload.subCategories) {
 
-                    const link = document.createElement('a')
 
-                    link.href = `#/category/${_id}`
 
-                    link.innerText  = name
 
-                    link.className = 'cat'
 
-                    catBody.append(link)
 
-                }
 
-            if(location.hash === '#/category/') {
 
-                for(const {_id, name} of catById.payload) {
 
-                    const link = document.createElement('a')
 
-                    link.href = `#/category/${_id}`
 
-                    link.innerText  = name
 
-                    link.className = 'cat'
 
-                    catBody.append(link)
 
-                }
 
-            }
 
-            }
 
-
 
-            if (catById.payload.goods) {
 
-                const cardBody  = document.createElement('div')
 
-                main.append(cardBody)
 
-                for (const good of catById.payload.goods){
 
-                    const {_id, name, price, images} = good
 
-                    const card      = document.createElement('div')
 
-                    card.className = 'card'
 
-                    card.innerHTML = `
 
-                                    <img src="${backURL}/${images[0].url}" />
 
-                                    <div>
 
-                                        <h4>${name}</h4>
 
-                                        <h5>${price} UAH</h5>                                    
-                                        <a href="#/good/${_id}" class="showMore">
 
-                                            Show more
 
-                                        </a>
 
-                                    </div>
 
-                                    `
 
-                    const btnCart = document.createElement('button')
 
-                    btnCart.innerText = 'To cart'
 
-                    btnCart.onclick = () => {
 
-                        store.dispatch(actionCartAdd(good))
 
-                    }
 
-                    card.lastElementChild.append(btnCart)
 
-                    cardBody.append(card)
 
-                }
 
-            }
 
-        }
 
-    }
 
-})
 
-
 
-store.subscribe(() => {
 
-        const {promise} = store.getState()
 
-        const {goodById} = promise
 
-        const [,route, _id] = location.hash.split('/');
 
-
 
-        if (goodById?.status === 'PENDING') {
 
-            main.innerHTML = `<img src="Loading_icon.gif">`
 
-        } else {
 
-            if (goodById?.payload && route === 'good') {
 
-                main.innerHTML = ''
 
-                const good = goodById.payload
 
-                const {_id, name, images, price, description} = good
 
-                const card = document.createElement('div')
 
-                card.innerHTML = `<h2>${name}</h2>
 
-                                <img src="${backURL}/${images[0].url}" />
 
-                                <div>                                    
-                                    <h6>${description}</h6>
 
-                                    <strong>Цена - ${price} грн</strong>
 
-                                </div>
 
-                                `
 
-                const btnCart = document.createElement('button')
 
-                btnCart.innerText  = 'Add to cart'
 
-                btnCart.onclick = () => {
 
-                    store.dispatch(actionCartAdd(good))
 
-                }
 
-                card.append(btnCart)
 
-                main.append(card);
 
-            }
 
-        }
 
-    }
 
-)
 
-
 
-
 
-store.subscribe(() => {
 
-    const {auth} = store.getState()
 
-    const name = document.createElement('div')
 
-    name.innerText = `Hello, stranger`
 
-    const {payload} = auth
 
-    if (payload?.sub) {
 
-        userBox.innerHTML = ''
 
-        const {id, login}  = payload.sub
 
-        name.innerText = `Hello, ${login}`
 
-        const myOrders = document.createElement('a')
 
-        myOrders.innerText = 'My orders'
 
-        myOrders.href = `#/orders/${id}`
 
-        userBox.append(myOrders)
 
-    } else {
 
-        userBox.innerHTML = ''
 
-    }
 
-    userBox.append(name)
 
-})
 
-
 
-
 
-
 
-store.subscribe(() => {
 
-    const {promise} = store.getState()
 
-    const {goodByUser} = promise
 
-    const [,route] = location.hash.split('/')
 
-
 
-    if (goodByUser?.status === 'PENDING') {
 
-        main.innerHTML = `<img src="Loading_icon.gif">`
 
-    } else {
 
-        if (goodByUser?.payload && route === 'orders'){
 
-
 
-            main.innerHTML = ''
 
-            const cardBody  = document.createElement('div')
 
-            main.append(cardBody)
 
-
 
-            if (goodByUser.payload) {
 
-                let totalMoney = 0
 
-
 
-                for (const order of goodByUser.payload) {
 
-
 
-                    if (order.orderGoods) {
 
-                        for (const {price, count, total, good} of order.orderGoods) {
 
-                            if (price !== null && count !== null && total !== null && good !== null) {
 
-                                totalMoney += total
 
-                                const {_id, name, images} = good
 
-
 
-                                const card      = document.createElement('div')
 
-                                card.innerHTML = `
 
-                                <img src="${backURL}/${images[0].url}" />
 
-                                <div>
 
-                                    <h4>${name}</h4>
 
-                                    // <h6>
 
-                                    //     bought: ${count},  ${price} UAH 
-                                    // </h6>  
-                                    <h6>
 
-                                        Total: ${total} UAH
 
-                                    </h6>   
-                                    <a href="#/good/${_id}">
 
-                                        show more
 
-                                    </a>
 
-                                </div>
 
-                                `
 
-                                cardBody.append(card)
 
-
 
-                            }
 
-                        }
 
-                    }
 
-
 
-                }
 
-                const totalBlock = document.createElement('h3')
 
-                totalBlock.innerText = 'Total: ' + totalMoney + ' UAH'
 
-                main.append(totalBlock)
 
-            }
 
-        }
 
-    }
 
-})
 
-
 
-
 
-
 
-store.subscribe(() => {
 
-    const {cart} = store.getState()
 
-    let counter = 0;
 
-
 
-    for (const key in cart) {
 
-        counter += cart[key].count
 
-    }
 
-    cartCounter.innerText  = counter
 
-})
 
-

+ 0 - 53
painter/index.html
查看文件 

@@ -1,53 +0,0 @@
 
-<html>
 
-<head>
 
-  <meta charset="utf-8">
 
-  <meta name="viewport" content="width=device-width">
 
-  <title>eval</title>
 
-  <style>
 
-    * {
 
-      box-sizing: border-box;
 
-      margin: 0;
 
-      padding: 0;
 
-    }
 
-
 
-    body {
 
-      margin: 0;
 
-      padding: 0;
 
-    }
 
-
 
-    button{
 
-      width: 100%;
 
-      font-size: 2em;
 
-    }
 
-    input, button, select{
 
-      width: 100%;
 
-      font-size: 2em;
 
-    }
 
-
 
-    table {
 
-      border: 1px;
 
-      border-collapse: collapse;
 
-    }
 
-
 
-    td,th {
 
-      border: 1px solid black;
 
-    }
 
-  </style>
 
-</head>
 
-<body>
 
-<canvas id='canvas' width=400 height=400></canvas>
 
-<button id='undo'>UNDO</button>
 
-<input type='color' id='color'>
 
-<select id='tool'>
 
-  <option value='graffity'>Graffity</option>
 
-  <option value='circle'>Circle</option>
 
-  <option value='line'>Line</option>
 
-  <option value='rectangle'>Rectangle</option>
 
-  <option value='ellipse'>Ellipse</option>
 
-  <option value='select'>Select</option>
 
-</select>
 
-<input type='number' id='size' value=10>
 
-<button id='delete'>Delete</button>
 
-<script src="main.js"></script>
 
-</body>
 
-</html>

+ 0 - 311
painter/main.js
查看文件 

@@ -1,311 +0,0 @@
 
-const canvas = document.getElementById('canvas')
 
-const ctx    = canvas.getContext('2d')
 
-const width  = canvas.width;
 
-const height = canvas.height;
 
-let current;
 
-let selection = []
 
-
 
-const tools = {
 
-    graffity: {
 
-        mousemove(e){
 
-            (e.buttons & 1) && new Circle(e.clientX, e.clientY, +size.value, color.value)
 
-        }
 
-    },
 
-    circle: {
 
-        mousedown(e){
 
-            current = new Circle(e.clientX, e.clientY, 1, color.value)
 
-        },
 
-        mousemove(e){
 
-            if (!current) return;
 
-
 
-            current.radius = current.distanceTo(e.clientX, e.clientY)
 
-            Drawable.drawAll()
 
-        },
 
-
 
-        mouseup(e){
 
-            current = null
 
-        }
 
-    },
 
-    line: {
 
-        mousedown(e){
 
-            current = new Line(e.clientX, e.clientY, 0, 0, color.value, +size.value)
 
-        },
 
-        mousemove(e){
 
-            if (!current) return;
 
-
 
-            current.width = e.clientX - current.x
 
-            current.height = e.clientY - current.y
 
-
 
-            Drawable.drawAll()
 
-        },
 
-
 
-        mouseup(e){
 
-            current = null
 
-        }
 
-    },
 
-    select: {
 
-        click(e){
 
-            console.log(e)
 
-            let found = Drawable.instances.filter(c => c.in && c.in(e.clientX, e.clientY))
 
-            if (found.length){
 
-                if (e.altKey){
 
-                    selection.push(found.pop())
 
-                }
 
-                else {
 
-                    selection = [found.pop()]
 
-                }
 
-            }
 
-            else {
 
-                if (!e.altKey) selection = []
 
-            }
 
-
 
-            Drawable.drawAll(selection)
 
-        },
 
-        mousedown(e){},
 
-        mousemove(e){},
 
-        mouseup(e){},
 
-    },
 
-    rectangle: {
 
-        mousedown(e){
 
-            current = new Rectangle(e.clientX, e.clientY, 0, 0, color.value)
 
-        },
 
-        mousemove(e){
 
-            if (!current) return;
 
-
 
-            current.width = e.clientX - current.x
 
-            current.height = e.clientY - current.y
 
-
 
-            Drawable.drawAll()
 
-        },
 
-
 
-        mouseup(e){
 
-            current = null
 
-        }
 
-    },
 
-    ellipse: {
 
-        mousedown(e){
 
-            current = new Ellipse(e.clientX, e.clientY, 0, 0, color.value)
 
-        },
 
-        mousemove(e){
 
-            if (!current) return;
 
-
 
-            current.width = e.clientX - current.x
 
-            current.height = e.clientY - current.y
 
-
 
-            Drawable.drawAll()
 
-        },
 
-        mouseup(e){
 
-            current = null
 
-        }
 
-    }
 
-}
 
-
 
-function superHandler(evt){
 
-    let t = tools[tool.value]
 
-    if (typeof t[evt.type] === 'function')
 
-        t[evt.type].call(this, evt)
 
-}
 
-
 
-canvas.onmousemove = superHandler
 
-canvas.onmouseup   = superHandler
 
-canvas.onmousedown = superHandler
 
-canvas.onclick = superHandler
 
-
 
-function Drawable(){
 
-    Drawable.addInstance(this);
 
-}
 
-
 
-const distance = (x1, y1, x2, y2) => ((x1-x2)**2 + (y1-y2)**2)**0.5
 
-
 
-Drawable.prototype.draw = function(){};
 
-Drawable.prototype.distanceTo = function(x,y){
 
-    if (typeof this.x !== 'number' ||
 
-        typeof this.y !== 'number'){
 
-        return NaN
 
-    }
 
-    return distance(this.x, this.y, x, y)
 
-};
 
-Drawable.instances = [];
 
-Drawable.addInstance = function(item){
 
-    Drawable.instances.push(item);
 
-}
 
-Drawable.drawAll = function(selection=[]){
 
-    ctx.clearRect(0,0,width,height);
 
-    Drawable.forAll(item => item.draw())
 
-    selection.forEach(item  => item.draw(true))
 
-}
 
-Drawable.forAll = function(callback){
 
-    for(var i = 0; i<Drawable.instances.length;i++){
 
-        callback(Drawable.instances[i])
 
-    }
 
-}
 
-
 
-class Circle extends Drawable {
 
-    constructor(x,y,radius, color){
 
-        super()
 
-        this.x      = x
 
-        this.y      = y
 
-        this.radius = radius
 
-        this.color  = color
 
-        this.draw()
 
-    }
 
-
 
-    draw(selected){
 
-        ctx.beginPath()
 
-        ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI)
 
-        ctx.closePath()
 
-        ctx.fillStyle = this.color
 
-        if (selected){
 
-            ctx.lineWidth = 2
 
-            ctx.stroke()
 
-        }
 
-        ctx.fill()
 
-    }
 
-
 
-    in(x, y){
 
-        return this.distanceTo(x, y) < this.radius
 
-    }
 
-
 
-    inBounds(x, y, w, h){
 
-        return this.x >= x && this.x <= x + w && this.y >= y && this.y <= y + h
 
-    }
 
-}
 
-
 
-class Line extends Drawable {
 
-    constructor(x,y, width, height, color, lineWidth){
 
-        super()
 
-        this.x      = x
 
-        this.y      = y
 
-        this.width  = width
 
-        this.height = height
 
-        this.color  = color
 
-        this.lineWidth  = lineWidth
 
-        this.draw()
 
-    }
 
-    draw(selected){
 
-        ctx.beginPath()
 
-        ctx.moveTo(this.x, this.y)
 
-        ctx.lineTo(this.x + this.width, this.y + this.height)
 
-        ctx.closePath()
 
-        ctx.strokeStyle = this.color
 
-        ctx.lineWidth   = this.lineWidth
 
-        if (selected){
 
-            ctx.strokeStyle = '#f0f'
 
-            ctx.stroke()
 
-        }
 
-        ctx.stroke()
 
-    }
 
-    in(x, y) {
 
-        let rotateLine = Math.atan2(this.height, this.width)
 
-        let rotCursor = Math.atan2(y - this.y, x - this.x)
 
-        let distanceToPoint = distance(x, y, this.x, this.y)
 
-        let angleLine = rotCursor - rotateLine
 
-        let rotateX = Math.cos(angleLine) * distanceToPoint
 
-        let rotateY = Math.sin(angleLine) * distanceToPoint
 
-        return rotateX >= 0 && rotateX <= this.length && rotateY <= this.lineWidth/2 && rotateY >= -this.lineWidth/2
 
-    }
 
-    get length(){
 
-        return this.distanceTo(this.x + this.width, this.y + this.height)
 
-    }
 
-}
 
-
 
-class Rectangle extends Drawable{
 
-    constructor(x, y, width, height, color){
 
-        super()
 
-        this.x      = x
 
-        this.y      = y
 
-        this.width  = width
 
-        this.height = height
 
-        this.color  = color
 
-        this.draw()
 
-    }
 
-    draw(selected){
 
-        ctx.beginPath()
 
-        ctx.moveTo(this.x, this.y)
 
-        ctx.fillRect(this.x, this.y, this.width, this.height)
 
-        if (selected){
 
-            ctx.rect(this.x, this.y, this.width, this.height)
 
-            ctx.strokeStyle = '#f0f'
 
-            ctx.stroke()
 
-        }
 
-        ctx.fillStyle = this.color
 
-        ctx.stroke()
 
-    }
 
-    in(x, y){
 
-        return x >= this.x && x <= this.x + this.width && y >= this.y && y <= this.y + this.height
 
-    }
 
-}
 
-
 
-class Ellipse extends Drawable{
 
-    #width = 0
 
-    #height = 0
 
-    constructor(x, y, width, height, color){
 
-        super()
 
-        this.x      = x
 
-        this.y      = y
 
-        this.#width  = width
 
-        this.#height = height
 
-        this.color  = color
 
-        this.draw()
 
-    }
 
-    draw(selected){
 
-        ctx.beginPath()
 
-        ctx.moveTo(this.x, this.y)
 
-        ctx.ellipse(this.x + this.rx, this.y + this.ry, this.rx, this.ry, 0, 0, 2 * Math.PI)
 
-        ctx.closePath()
 
-        if (selected){
 
-            ctx.lineWidth = 2
 
-            ctx.fill()
 
-        }
 
-        ctx.fillStyle = this.color
 
-        ctx.fill()
 
-    }
 
-
 
-    in(x, y) {
 
-        let h = this.x + this.rx
 
-        let k = this.y + this.ry
 
-        return Math.pow((x - h), 2)/Math.pow(this.rx, 2) + Math.pow((y - k), 2)/Math.pow(this.ry, 2) <= 1
 
-    }
 
-
 
-    set width(newWidth){
 
-        if (newWidth < 0){
 
-            this.#width = -newWidth
 
-            this.x     += newWidth
 
-        }
 
-        else
 
-            this.#width = newWidth
 
-    }
 
-    set height(newHeight){
 
-        if (newHeight < 0){
 
-            this.#height = -newHeight
 
-            this.y      +=  newHeight
 
-        }
 
-        else
 
-            this.#height = newHeight
 
-    }
 
-    get width(){
 
-        return this.#width
 
-    }
 
-    get height(){
 
-        return this.#height
 
-    }
 
-    get rx(){
 
-        return this.#width/2
 
-    }
 
-    get ry(){
 
-        return this.#height/2
 
-    }
 
-}
 
-
 
-color.onchange = () => {
 
-    selection.forEach(c => c.color = color.value)
 
-    Drawable.drawAll(selection)
 
-}
 
-undo.onclick = function(){
 
-    Drawable.instances.pop()
 
-    Drawable.drawAll()
 
-}
 
-document.getElementById('delete').onclick = () =>{
 
-    Drawable.instances = []
 
-    Drawable.drawAll()
 
-}

二進制
tuner/13x.png
查看文件


二進制
tuner/bbno$xdiamondPistols-help herself.mp3
查看文件


+ 0 - 35
tuner/index.html
查看文件 

@@ -1,35 +0,0 @@
 
-<html>
 
-<head>
 
-    <meta charset="utf-8" />
 
-    <meta name="viewport" content="width=device-width" />
 
-    <title>Tuner</title>
 
-    <style>
 
-        #container1 {
 
-            padding: 40px;
 
-        }
 
-        img{
 
-            width: 100px;
 
-            height: 100px;
 
-            margin: 15px;
 
-        }
 
-        #colorBox {
 
-            width: 500px;
 
-            height: 100px;
 
-            border: 1px solid black;
 
-        }
 
-    </style>
 
-</head>
 
-<body>
 
-<div id='container2'></div>
 
-
 
-<div id="colorBox"></div>
 
-<div class="audioBox">
 
-    <div id='container1'></div>
 
-    <p>bbno$ ft Diamond Pistols - Help Yourself</p>
 
-    <audio class="mySong" autoplay controls>
 
-        <source src="bbno$xdiamondPistols-help%20herself.mp3" type="audio/mp3">
 
-    </audio>
 
-</div>
 
-<script src='index.js'></script>
 
-</body>
 
-</html>

+ 0 - 75
tuner/index.js
查看文件 

@@ -1,75 +0,0 @@
 
-function Control(el, {value=50,
 
-    min=0,
 
-    max=100,
 
-    minAngle=-90,
 
-    maxAngle=90,
 
-    wheelSpeed=0.1,
 
-    step=1}={}){
 
-
 
-    const img = document.createElement('img')
 
-    img.src   = '13x.png'
 
-    el.append(img)
 
-
 
-    const ratio    = (maxAngle - minAngle) / (max - min) //цена единицы value в градусах
 
-    const getAngle = () => (value - min) * ratio + minAngle //подсчитали отступ в единицах, пересчитали в градусы и прибавили к стартовому углу
 
-
 
-
 
-    this.setValue = (newValue) => {
 
-        if (newValue < min){
 
-            newValue = min
 
-        }
 
-
 
-        if (newValue > max){
 
-            newValue = max
 
-        }
 
-
 
-        value = newValue
 
-
 
-        if (typeof this.onchange === 'function'){
 
-            this.onchange(value)
 
-        }
 
-
 
-        img.style.transform = `rotate(${getAngle()}deg)`
 
-    }
 
-
 
-    this.getValue = () => value
 
-
 
-    img.onmousewheel = (e) => {
 
-        const {deltaY} = e
 
-        //console.log(deltaY)
 
-        e.preventDefault()
 
-
 
-        this.setValue(value + deltaY*wheelSpeed)
 
-    }
 
-
 
-    img.onclick = (e) => {
 
-        const {layerX} = e
 
-        console.log(e, layerX)
 
-        if (layerX > img.width/2)
 
-            this.setValue(value +step)
 
-        else
 
-            this.setValue(value -step)
 
-    }
 
-
 
-    this.setValue(value)
 
-}
 
-let $song = document.querySelector('.mySong')
 
-const volumeControl  = new Control(container1, {max: 1, wheelSpeed: 0.001, value: 75, minAngle: -180})
 
-volumeControl.onchange = (value => {
 
-    $song.volume = value
 
-})
 
-
 
-setTimeout(() => volumeControl.setValue(80), 2000)
 
-
 
-function setRGB(value, n){
 
-    colorBox.style.backgroundColor = `rgb(${red.getValue()}, ${green.getValue()}, ${blue.getValue()})`
 
-}
 
-
 
-const red  = new Control(container2, {min: 0, max: 255})
 
-const green  = new Control(container2, {min: 0, max: 255})
 
-const blue  = new Control(container2, {min: 0, max: 255})
 
-const colors = [red, green, blue];
 
-for(let i = 0; i < colors.length; i++) {
 
-    colors[i].onchange = value => setRGB(value, i)
 
-}
 
-