Merge pull request #10 from PahaN47/lab6

Lab6
PahaN47 · Apr 8, 2022 · d0b43d0 · d0b43d0 · vercel · Apr 8, 2022
2 parents cd5bd30 + 684d55b
commit d0b43d0
Show file tree

Hide file tree

Showing 4 changed files with 240 additions and 1 deletion.
diff --git a/lab6/index.html b/lab6/index.html
@@ -4,7 +4,20 @@
         <meta charset="UTF-8" />
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="stylesheet" href="styles.css">
         <title>Lab6</title>
+
+        <script src="list.js"></script>
     </head>
-    <body></body>
+    <body>
+        <div id="square"></div>
+        <div id="counter">0</div>
+        <div id="ball-box">
+            <div id="ball"></div>
+        </div>
+        <button id="buttonForDumTitlesKillMe">
+            What could THAT be for?
+        </button>
+    </body>
+    <script src="script.js"></script>
 </html>
diff --git a/lab6/list.js 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);
+    }
+}
diff --git a/lab6/script.js 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));
+});
diff --git a/lab6/styles.css 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;
+}