diff --git a/lab6/index.html b/lab6/index.html index e8188cf..02205ba 100644 --- a/lab6/index.html +++ b/lab6/index.html @@ -4,7 +4,20 @@ + Lab6 + + - + +
+
0
+
+
+
+ + + diff --git a/lab6/list.js b/lab6/list.js new file mode 100644 index 0000000..afddb35 --- /dev/null +++ b/lab6/list.js @@ -0,0 +1,37 @@ +class List { + constructor(id, ...items) { + 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..dbda825 --- /dev/null +++ b/lab6/script.js @@ -0,0 +1,95 @@ +// task 1 + +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; +}); + + +// 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 new file mode 100644 index 0000000..e7897e0 --- /dev/null +++ b/lab6/styles.css @@ -0,0 +1,94 @@ +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%; +} + +#buttonForDumTitlesKillMe { + position: absolute; + left: 50%; + top: 0; +}