From cdd58b8326304c213b7a4a55f34569e1dd8c6198 Mon Sep 17 00:00:00 2001 From: pahan Date: Sun, 3 Apr 2022 22:32:57 +0300 Subject: [PATCH 1/2] leb6 fenele --- lab6/index.html | 12 ++++++- lab6/list.js | 38 +++++++++++++++++++++ lab6/script.js | 68 ++++++++++++++++++++++++++++++++++++++ lab6/styles.css | 88 +++++++++++++++++++++++++++++++++++++++++++++++++ lab6/task5.html | 16 +++++++++ lab6/task5.js | 27 +++++++++++++++ 6 files changed, 248 insertions(+), 1 deletion(-) create mode 100644 lab6/list.js create mode 100644 lab6/script.js create mode 100644 lab6/styles.css create mode 100644 lab6/task5.html create mode 100644 lab6/task5.js diff --git a/lab6/index.html b/lab6/index.html index e8188cf..d241b36 100644 --- a/lab6/index.html +++ b/lab6/index.html @@ -4,7 +4,17 @@ + Lab6 + + - + +
+
0
+
+
+
+ + diff --git a/lab6/list.js b/lab6/list.js new file mode 100644 index 0000000..fb94dae --- /dev/null +++ b/lab6/list.js @@ -0,0 +1,38 @@ +class List { + constructor(id, ...items) { + alert('adding'); + this.list = document.createElement('div'); + document.body.appendChild(this.list); + this.list.className = 'list'; + this.list.id = id; + + this.button = document.createElement('div'); + this.button.className = 'list-button'; + this.button.addEventListener('click', (e) => { + this.list.style.height = + this.list.style.height === 'fit-content' ? '32px' : 'fit-content'; + e.stopPropagation(); + }); + this.list.appendChild(this.button); + + this.itemBox = document.createElement('div'); + this.itemBox.className = 'list-item-box'; + this.list.appendChild(this.itemBox); + + for (let item of items) + this.addItem(item); + this.button.textContent = document.getElementsByClassName('list-item')[0].textContent; + } + + addItem(text) { + let itemDiv = document.createElement('div'); + itemDiv.className = 'list-item'; + itemDiv.textContent = text; + itemDiv.addEventListener('click', (e) => { + this.button.textContent = itemDiv.textContent; + this.list.style.height = '32px'; + e.stopPropagation(); + }); + this.itemBox.appendChild(itemDiv); + } +} \ No newline at end of file diff --git a/lab6/script.js b/lab6/script.js new file mode 100644 index 0000000..352ff49 --- /dev/null +++ b/lab6/script.js @@ -0,0 +1,68 @@ +// task 1 + +const { response } = require("express"); + +let square = document.getElementById('square'); + +square.addEventListener('click', function(e) { + this.style.background = '#' + + (Math.floor(Math.random() * 16777216)).toString(16); + e.stopPropagation(); +}); + + +// task 2 + +let counter = document.getElementById('counter'); +let startTime = 0; +counter.addEventListener('mouseover', function() { + startTime = new Date(); +}); + +counter.addEventListener('mouseout', function(e) { + endTime = new Date(); + this.textContent = + (parseInt(this.textContent) + + Math.floor((endTime.getTime() - startTime.getTime()) / 100)).toString(); + e.stopPropagation(); +}); + + +// task 3 (list.js) + +let list = new List('1st', 'choose here', 'butt'); +list.addItem('uwu'); +list.addItem('aaaaaa'); +list.addItem('my life'); +list.addItem('sucks'); + + +// task 4 + +let ball = document.getElementById('ball'); +let ballBox = document.getElementById('ball-box'); +ballBox.style.top = '400px'; +ballBox.style.left = '40px'; +let moving = false; +ball.addEventListener('click', function() { + moving = true; +}); + +ballBox.onmousemove = (e) => { + if (!moving) return; + let ballBoxTop = parseInt(ballBox.style.top.substring(0, ballBox.style.top.length - 2)); + + let ballBoxLeft = parseInt(ballBox.style.left.substring(0, ballBox.style.left.length - 2)); + let ballTop = parseInt(e.pageY) - 15 - ballBoxTop; + ballTop = ballTop < 0 ? 0 : ballTop; + ballTop = ballTop > 770 ? 770 : ballTop; + let ballLeft = parseInt(e.pageX) - 15 - ballBoxLeft; + ballLeft = ballLeft < 0 ? 0 : ballLeft; + ballLeft = ballLeft > 770 ? 770 : ballLeft; + + ball.style.top = `${ballTop}px`; + ball.style.left = `${ballLeft}px`; +}; +document.body.addEventListener('keyup', (e) => { + if (e.key === 'Escape') moving = false; +}); diff --git a/lab6/styles.css b/lab6/styles.css new file mode 100644 index 0000000..7109ec5 --- /dev/null +++ b/lab6/styles.css @@ -0,0 +1,88 @@ +div { + font-family: 'Consolas'; +} + +#square { + width: 256px; + height: 256px; + border: solid 2px black; +} + +#counter { + width: fit-content; + height: fit-content; + font-size: 96px; + border: solid 2px black; +} + +@keyframes list-button-hover { + to { + background: rgb(53, 168, 235); + } +} + +@keyframes list-item-hover { + to { + background: rgb(180, 244, 255); + } +} + +.list { + position: absolute; + width: 256px; + height: 32px; + background: lightgrey; + overflow: hidden; + border: 1px solid grey; + right: 0; + left: auto; + top: 0; +} + +.list-button { + background: lightgrey; + height: 32px; + top: 0; + padding-left: 14%; + text-align: left; + line-height: 32px; +} + +.list-button:hover { + animation: 300ms forwards; + animation-name: list-button-hover; +} + +.list-item-box { + height: fit-content; + max-height: 97px; + background-color: white; + overflow-y: scroll; +} + +.list-item { + height: 32px; + padding-left: 14%; + background: white; + line-height: 32px; +} + +.list-item:hover { + animation: 300ms forwards; + animation-name: list-item-hover; +} + +#ball-box { + position: absolute; + height: 800px; + width: 800px; + border: 1px solid black; +} + +#ball { + position: relative; + height: 30px; + width: 30px; + background: red; + border-radius: 50%; +} diff --git a/lab6/task5.html b/lab6/task5.html new file mode 100644 index 0000000..53bde3a --- /dev/null +++ b/lab6/task5.html @@ -0,0 +1,16 @@ + + + + + + + + Lab6 + + + + + + diff --git a/lab6/task5.js b/lab6/task5.js new file mode 100644 index 0000000..4a22f75 --- /dev/null +++ b/lab6/task5.js @@ -0,0 +1,27 @@ +// task 5 + + +function getAllTitles(data) { + throwTitlesonScreen(data.reduce((titles, episode) => { + titles.push(episode.title); + return titles; + }, [])); +} + +function throwTitlesonScreen(titles) { + for (title of titles) { + let titleBox = document.createElement('div'); + titleBox.style.position = 'absolute'; + titleBox.style.top = `${Math.random() * 98}%`; + titleBox.style.left = `${Math.random() * 95}%`; + titleBox.textContent = title; + document.body.appendChild(titleBox); + } +} + +let button = document.getElementById('buttonForDumTitlesKillMe'); +button.addEventListener('click', (e) => { + fetch('https://breakingbadapi.com/api/episodes') + .then(response => response.json()) + .then(data => getAllTitles(data)); +}); From 684d55b6cfdb91ab1e1e20a5ff1631e9a0101193 Mon Sep 17 00:00:00 2001 From: pahan Date: Sun, 3 Apr 2022 22:52:29 +0300 Subject: [PATCH 2/2] leb6 fenele --- lab6/index.html | 3 +++ lab6/list.js | 1 - lab6/script.js | 31 +++++++++++++++++++++++++++++-- lab6/styles.css | 6 ++++++ lab6/task5.html | 16 ---------------- lab6/task5.js | 27 --------------------------- 6 files changed, 38 insertions(+), 46 deletions(-) delete mode 100644 lab6/task5.html delete mode 100644 lab6/task5.js diff --git a/lab6/index.html b/lab6/index.html index d241b36..02205ba 100644 --- a/lab6/index.html +++ b/lab6/index.html @@ -15,6 +15,9 @@
+ diff --git a/lab6/list.js b/lab6/list.js index fb94dae..afddb35 100644 --- a/lab6/list.js +++ b/lab6/list.js @@ -1,6 +1,5 @@ class List { constructor(id, ...items) { - alert('adding'); this.list = document.createElement('div'); document.body.appendChild(this.list); this.list.className = 'list'; diff --git a/lab6/script.js b/lab6/script.js index 352ff49..dbda825 100644 --- a/lab6/script.js +++ b/lab6/script.js @@ -1,7 +1,5 @@ // task 1 -const { response } = require("express"); - let square = document.getElementById('square'); square.addEventListener('click', function(e) { @@ -66,3 +64,32 @@ ballBox.onmousemove = (e) => { document.body.addEventListener('keyup', (e) => { if (e.key === 'Escape') moving = false; }); + + +// task 5 + + +function getAllTitles(data) { + throwTitlesonScreen(data.reduce((titles, episode) => { + titles.push(episode.title); + return titles; + }, [])); +} + +function throwTitlesonScreen(titles) { + for (title of titles) { + let titleBox = document.createElement('div'); + titleBox.style.position = 'absolute'; + titleBox.style.top = `${Math.random() * 98}%`; + titleBox.style.left = `${Math.random() * 95}%`; + titleBox.textContent = title; + document.body.appendChild(titleBox); + } +} + +let button = document.getElementById('buttonForDumTitlesKillMe'); +button.addEventListener('click', (e) => { + fetch('https://breakingbadapi.com/api/episodes') + .then(response => response.json()) + .then(data => getAllTitles(data)); +}); \ No newline at end of file diff --git a/lab6/styles.css b/lab6/styles.css index 7109ec5..e7897e0 100644 --- a/lab6/styles.css +++ b/lab6/styles.css @@ -86,3 +86,9 @@ div { background: red; border-radius: 50%; } + +#buttonForDumTitlesKillMe { + position: absolute; + left: 50%; + top: 0; +} diff --git a/lab6/task5.html b/lab6/task5.html deleted file mode 100644 index 53bde3a..0000000 --- a/lab6/task5.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - - Lab6 - - - - - - diff --git a/lab6/task5.js b/lab6/task5.js deleted file mode 100644 index 4a22f75..0000000 --- a/lab6/task5.js +++ /dev/null @@ -1,27 +0,0 @@ -// task 5 - - -function getAllTitles(data) { - throwTitlesonScreen(data.reduce((titles, episode) => { - titles.push(episode.title); - return titles; - }, [])); -} - -function throwTitlesonScreen(titles) { - for (title of titles) { - let titleBox = document.createElement('div'); - titleBox.style.position = 'absolute'; - titleBox.style.top = `${Math.random() * 98}%`; - titleBox.style.left = `${Math.random() * 95}%`; - titleBox.textContent = title; - document.body.appendChild(titleBox); - } -} - -let button = document.getElementById('buttonForDumTitlesKillMe'); -button.addEventListener('click', (e) => { - fetch('https://breakingbadapi.com/api/episodes') - .then(response => response.json()) - .then(data => getAllTitles(data)); -});