├── css
    └── style.css
├── lr1
    ├── css
    │   └── style.css
    ├── tasks
    │   ├── task4
    │   │   └── index.html
    │   ├── task1
    │   │   └── index.html
    │   ├── task3
    │   │   └── index.html
    │   ├── task7
    │   │   └── index.html
    │   ├── task9
    │   │   └── index.html
    │   ├── task2
    │   │   └── index.html
    │   ├── task5
    │   │   └── index.html
    │   ├── task8
    │   │   └── index.html
    │   └── task6
    │   │   └── index.html
    └── index.html
├── lr2
    ├── css
    │   └── style.css
    ├── index.html
    └── tasks
    │   ├── task3
    │       └── index.html
    │   ├── task1
    │       └── index.html
    │   └── task2
    │       └── index.html
├── pr1
    ├── css
    │   └── style.css
    ├── tasks
    │   ├── task1
    │   │   └── index.html
    │   ├── task2
    │   │   └── index.html
    │   ├── task4
    │   │   └── index.html
    │   ├── task3
    │   │   └── index.html
    │   ├── task5
    │   │   └── index.html
    │   ├── task6
    │   │   └── index.html
    │   └── task7
    │   │   └── index.html
    └── index.html
├── pr2
    ├── css
    │   └── style.css
    ├── task4
    │   └── index.html
    ├── task1
    │   └── index.html
    ├── task3
    │   └── index.html
    ├── task2
    │   └── index.html
    └── index.html
├── README.md
├── lr3
    ├── task4
    │   ├── images
    │   │   ├── 001.jpg
    │   │   ├── 002.jpg
    │   │   ├── 003.jpg
    │   │   └── 004.jpg
    │   ├── css
    │   │   └── style.css
    │   └── index.html
    ├── task1
    │   └── index.html
    ├── index.html
    ├── task2
    │   └── index.html
    ├── task5
    │   └── index.html
    └── task3
    │   └── index.html
├── pr3
    ├── task3
    │   ├── media
    │   │   ├── Ball.png
    │   │   ├── image1.jpg
    │   │   ├── image2.jpg
    │   │   └── image3.jpg
    │   ├── css
    │   │   └── style.css
    │   └── index.html
    ├── task2
    │   ├── media
    │   │   ├── image1.jpg
    │   │   ├── image2.jpg
    │   │   └── image3.jpg
    │   ├── css
    │   │   └── style.css
    │   └── index.html
    ├── task1
    │   ├── css
    │   │   └── style.css
    │   └── index.html
    ├── css
    │   └── style.css
    └── index.html
├── lr4
    ├── css
    │   └── style.css
    ├── index.html
    └── task1
    │   ├── css
    │       └── style.css
    │   ├── index.html
    │   └── script
    │       └── script.js
└── index.html


/css/style.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/lr1/css/style.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/lr2/css/style.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/pr1/css/style.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/pr2/css/style.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # kep_web
2 | kepovski tasku
3 | 


--------------------------------------------------------------------------------
/lr3/task4/images/001.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Chikh124/kep_web/HEAD/lr3/task4/images/001.jpg


--------------------------------------------------------------------------------
/lr3/task4/images/002.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Chikh124/kep_web/HEAD/lr3/task4/images/002.jpg


--------------------------------------------------------------------------------
/lr3/task4/images/003.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Chikh124/kep_web/HEAD/lr3/task4/images/003.jpg


--------------------------------------------------------------------------------
/lr3/task4/images/004.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Chikh124/kep_web/HEAD/lr3/task4/images/004.jpg


--------------------------------------------------------------------------------
/pr3/task3/media/Ball.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Chikh124/kep_web/HEAD/pr3/task3/media/Ball.png


--------------------------------------------------------------------------------
/pr3/task2/media/image1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Chikh124/kep_web/HEAD/pr3/task2/media/image1.jpg


--------------------------------------------------------------------------------
/pr3/task2/media/image2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Chikh124/kep_web/HEAD/pr3/task2/media/image2.jpg


--------------------------------------------------------------------------------
/pr3/task2/media/image3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Chikh124/kep_web/HEAD/pr3/task2/media/image3.jpg


--------------------------------------------------------------------------------
/pr3/task3/media/image1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Chikh124/kep_web/HEAD/pr3/task3/media/image1.jpg


--------------------------------------------------------------------------------
/pr3/task3/media/image2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Chikh124/kep_web/HEAD/pr3/task3/media/image2.jpg


--------------------------------------------------------------------------------
/pr3/task3/media/image3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Chikh124/kep_web/HEAD/pr3/task3/media/image3.jpg


--------------------------------------------------------------------------------
/lr1/tasks/task4/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Task4</title>
 7 | </head>
 8 | <body>
 9 |     <p>Напишіть скрипт, який запрошує у користувача інформацію, а потім виводить її в
10 |         діалоговому вікні.</p>  
11 |         <script>
12 |             var name = prompt('Введіть ваше імя:');
13 |             alert('Ваше імя: ' + name);
14 |         </script>  
15 | </body>
16 | </html>


--------------------------------------------------------------------------------
/lr1/tasks/task1/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Task1</title>
 7 | </head>
 8 | <body>
 9 |     <p>Змініть приклад (лістинг 1.7) так, щоб діалогова панель виникала не при наведенні
10 |         курсора миші, а при виборі посилання (подія onClick).</p>
11 |     <h1>JavaScript Test</h1>
12 |     <hr>
13 |     <a href="" onclick="alert('Hello, world')">Select me!</a>    
14 | </body>
15 | </html>


--------------------------------------------------------------------------------
/pr1/tasks/task1/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Task1</title>
 7 | </head>
 8 | <body>
 9 |     <p>11. Дано об'єкт {js: 'test', jq: 'hello', css: 'world'}. Отримайте масив його ключів.</p>
10 |     <script>
11 |         var myObject = {js: 'test', jq: 'hello', css: 'world'};
12 |         var keysArray = Object.keys(myObject);
13 |         console.log(keysArray);
14 |     </script>
15 | </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/pr1/tasks/task2/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Task2</title>
 7 | </head>
 8 | <body>
 9 |     <p>12. Дано рядок 'aaa@bbb@ccc'. Замініть всі @ на '!' за допомогою глобального пошуку і заміни.</p>
10 |     <script>
11 |         var myString = 'aaa@bbb@ccc';
12 |         var modifiedString = myString.replace(/@/g, '!');
13 |         document.write(modifiedString);
14 |     </script>
15 | </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/pr1/tasks/task4/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Task4</title>
 7 | </head>
 8 | <body>
 9 |     <p>14. Дано рядок 'я вчу javascript!'. За допомогою методу split запишіть кожен символ цього рядка в окремий елемент масиву</p>
10 |     <script>
11 |         var myString = 'я вчу javascript!';
12 |         var charArray = myString.split('');
13 |         document.write(charArray);
14 |     </script>
15 | </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/lr1/tasks/task3/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Task3</title>
 7 | </head>
 8 | <body>
 9 |     <p>Напишіть скрипт, який спочатку виводить на екран діалогове вікно, а потім, після
10 |         натиснення кнопки "ОК", у вікні браузеру пише фразу "Hello, world"!.</p>
11 |     <script>
12 |         alert('Натисніть Ок')
13 |         document.body.innerHTML = '<p>Hello, world!</p>';
14 |     </script>        
15 | </body>
16 | </html>


--------------------------------------------------------------------------------
/pr3/task3/css/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   display: flex;
 3 |   align-items: center;
 4 |   justify-content: center;
 5 |   height: 100vh;
 6 |   margin: 0;
 7 | }
 8 | 
 9 | #field {
10 |   position: relative;
11 |   width: 300px;
12 |   height: 300px;
13 |   border: 5px solid black;
14 |   overflow: hidden;
15 |   background-color: #00ff00; /* Зелений колір для поля */
16 | }
17 | 
18 | #ball {
19 |   position: absolute;
20 |   width: 50px; /* Задайте розміри м'яча */
21 |   height: 50px;
22 |   border-radius: 50%;
23 |   transition: transform 0.2s ease-in-out; /* Анімація для плавного переходу */
24 | }


--------------------------------------------------------------------------------
/pr3/task1/css/style.css:
--------------------------------------------------------------------------------
 1 | #messages {
 2 |     list-style-type: none;
 3 |     padding: 0;
 4 |   }
 5 |   
 6 |   .message-content {
 7 |     background-color: rgb(196, 222, 196); /* Зелений фон для блоку повідомлення */
 8 |     color: black; /* Білий колір тексту */
 9 |     padding: 10px; /* Відступи всередині блоку повідомлення */
10 |     margin-bottom: 10px;
11 |   }
12 |   
13 |   .hide-btn {
14 |     background-color: transparent; /* Прозорий фон для кнопки */
15 |     color: red; /* Червоний колір тексту кнопки */
16 |     padding: 5px 10px;
17 |     border: none;
18 |     cursor: pointer;
19 |   }
20 |   


--------------------------------------------------------------------------------
/pr1/tasks/task3/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Task3</title>
 7 | </head>
 8 | <body>
 9 |     <p>13. В змінній date лежить дата в форматі '2025-12-31'. Перетворіть цю дату в формат '31 / 12 / 2025'.</p>
10 |     <script>
11 |         var date = '2025-12-31';
12 |         var parts = date.split('-');
13 |         var formattedDate = parts[2] + ' / ' + parts[1] + ' / ' + parts[0];
14 |         document.write(formattedDate);
15 |     </script>
16 | </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/pr1/tasks/task5/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Task5</title>
 7 | </head>
 8 | <body>
 9 |     <p>15. Заповніть масив таким чином: в перший елемент запишіть 'x', у другій 'xx', в третій 'xxx' і так далі.</p>
10 |     <script>
11 |         var myArray = [];
12 |         for (var i = 1; i <= 5; i++) {
13 |             var str = 'x'.repeat(i);
14 |             myArray.push(str);
15 |         }
16 |         document.write(myArray);
17 |     </script>
18 | </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/lr3/task4/css/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: sans-serif;
 3 |     font-size: 16px;
 4 | }
 5 | 
 6 | header {
 7 |     background-color: #000;
 8 |     color: #fff;
 9 |     padding: 10px;
10 | }
11 | 
12 | main {
13 |     width: 500px;
14 |     margin: 0 auto;
15 | }
16 | 
17 | .question {
18 |     margin-bottom: 20px;
19 | }
20 | 
21 | .answer {
22 |     margin-bottom: 10px;
23 | }
24 | 
25 | .result {
26 |     margin-bottom: 20px;
27 | }
28 | 
29 | .buttons {
30 |     text-align: center;
31 | }
32 | 
33 | #score {
34 |     font-size: 24px;
35 |     font-weight: bold;
36 | }
37 | 
38 | #message {
39 |     color: red;
40 | }


--------------------------------------------------------------------------------
/lr1/tasks/task7/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Task7</title>
 7 | </head>
 8 | <body>
 9 |     <p>Напишіть скрипт, який запитує два числа і виводить у вікні браузеру найбільше з
10 |         них.</p>    
11 |         <script>
12 |             var num1 = parseFloat(prompt('ведіть число 1:'));
13 |             var num2 = parseFloat(prompt('введіть число 2:'));
14 |             if (!isNaN(num1) && !isNaN(num2)) {
15 |                 var maxNumber = (num1 > num2) ? num1 : num2;
16 |                 alert('Найбільше число: ' + maxNumber);
17 |             } else {
18 |                 alert('введіть коректні числа.');
19 |             }
20 |         </script>
21 | </body>
22 | </html>


--------------------------------------------------------------------------------
/lr1/tasks/task9/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Task9</title>
 7 | </head>
 8 | <body>
 9 |     <p>Напишіть скрипт, який відображує діалогове вікно з кнопками "Ок" і "Відміна"
10 |         (функція confirm) і виводить у вікно браузеру повідомлення про те, яка з кнопок
11 |         була натиснута (використовуйте конструкцію if(confirm("Повідомлення")) ..)</p>
12 |         <script>
13 |             var userResponse = confirm("Натисніть 'Ок' або 'Скасувати'");
14 |             if (userResponse) {
15 |                 alert("натиснуто 'Ок'");
16 |             } else {
17 |                 alert("натиснуто 'Скасувати'");
18 |             }
19 |         </script>        
20 | </body>
21 | </html>


--------------------------------------------------------------------------------
/lr1/tasks/task2/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Task2</title>
 7 | </head>
 8 | <body>
 9 |     <p>Змініть приклад так, щоб при наведенні курсора миші на посилання, виконувалася
10 |         б процедура, що виводить у вікно браузера фразу "Hello, word"!.</p>
11 |     <h1>JavaScript Test</h1>
12 |     <hr>
13 |     <a href="#" onmouseover="showHello()">Select me!</a>
14 |     <script>
15 |     function showHello() {
16 |         var helloElement = document.createElement("p");
17 |         helloElement.textContent = "Hello, world!";
18 | 
19 |         var link = document.querySelector("a");
20 |         link.parentNode.insertBefore(helloElement, link.nextSibling);
21 |     }
22 |     </script>
23 | </body>
24 | </html>


--------------------------------------------------------------------------------
/lr1/tasks/task5/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Task5</title>
 7 | </head>
 8 | <body>
 9 |     <p>Складіть документ так, щоб діалогове вікно для введення інформації
10 |         пропонувалося тільки після наведення курсора миші на посилання, і введений
11 |         користувачем текстовий рядок виводився б у вигляді діалогового вікна, або у
12 |         вікно браузеру.</p>  
13 |     <a href="" id="showInputDialog">Наведи сюди курсора</a>
14 |     <script>
15 |         document.getElementById('showInputDialog').addEventListener('mouseover', function() {
16 |             var userInput = prompt('Любите JS? ');
17 |             alert('Чи любите ви JS: ' + userInput);
18 |         });
19 |     </script>  
20 | </body>
21 | </html>


--------------------------------------------------------------------------------
/pr1/tasks/task6/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Task6</title>
 7 | </head>
 8 | <body>
 9 |     <p>16. Зробіть функцію arrayFill, яка буде заповнювати масив заданими значеннями. Першим параметром функція приймає значення, яким заповнювати масив, а другим - скільки елементів має бути в масиві. Приклад: arrayFill('x', 5) зробить масив ['x', 'x', 'x', 'x', 'x'].</p>
10 |     <script>
11 |         function arrayFill(value, count) {
12 |             var result = [];
13 |             for (var i = 0; i < count; i++) {
14 |                 result.push(value);
15 |             }
16 |             return result;
17 |         }
18 |         var filledArray = arrayFill('x', 5);
19 |         document.write(filledArray);
20 |     </script>
21 | </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/pr1/tasks/task7/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Task7</title>
 7 | </head>
 8 | <body>
 9 |     <p>17. Дано тривимірний масив з числами, наприклад [[[1, 2], [3, 4]], [[5, 6], [7, 8]]]. Знайдіть суму елементів цього масиву. Масив, звичайно ж, може бути довільним.</p>
10 |     <script>
11 |         var array3D = [[[1, 2], [3, 4]], [[5, 6], [7, 8]]];
12 |         var sum = 0;
13 |         for (var i = 0; i < array3D.length; i++) {
14 |             for (var j = 0; j < array3D[i].length; j++) {
15 |                 for (var k = 0; k < array3D[i][j].length; k++) {
16 |                     sum += array3D[i][j][k];
17 |                 }
18 |             }
19 |         }
20 |         document.write("Сума елементів: " + sum);
21 |     </script>
22 | </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/pr2/task4/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Chikh</title>
 7 | </head>
 8 | <body>
 9 | <h1>Task4</h1>
10 | 
11 | 
12 | <script>
13 | function determineWinner(betAmount) {
14 |   setTimeout(function() {
15 |     const randomValue = Math.floor(Math.random() * 11) - 5; // Генеруємо випадкове число від -5 до 5
16 |     if (randomValue <= 0) {
17 |       alert("Ви не вгадали. Ваша ставка " + betAmount + " гривень.");
18 |     } else {
19 |       const winnings = betAmount * randomValue;
20 |       alert("Ви виграли " + winnings + " гривень!");
21 |     }
22 |   }, 1000); // Затримка 1 секунда
23 | }
24 | 
25 | const betAmount = parseFloat(prompt("Введіть суму ставки (гривні):"));
26 | if (!isNaN(betAmount)) {
27 |   determineWinner(betAmount);
28 | } else {
29 |   alert("Введено некоректну суму ставки.");
30 | }
31 | </script>
32 | </body>
33 | </html>


--------------------------------------------------------------------------------
/pr2/task1/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Chikh</title>
 7 | </head>
 8 | <body>
 9 | <h1>Task1</h1>
10 | <div id="clock"></div>
11 | 
12 | <script>
13 | // Функція для оновлення годинника
14 | function updateClock() {
15 |   const now = new Date();
16 |   const hours = now.getHours();
17 |   const minutes = now.getMinutes();
18 |   const seconds = now.getSeconds();
19 |   
20 |   // Додавання "0" до значень менше 10
21 |   const formattedHours = hours < 10 ? "0" + hours : hours;
22 |   const formattedMinutes = minutes < 10 ? "0" + minutes : minutes;
23 |   const formattedSeconds = seconds < 10 ? "0" + seconds : seconds;
24 |   
25 |   // Виведення годинника на сторінку
26 |   document.getElementById("clock").innerHTML = formattedHours + ":" + formattedMinutes + ":" + formattedSeconds;
27 | }
28 | 
29 | // Оновлення годинника кожну секунду
30 | setInterval(updateClock, 1000);
31 | </script>
32 | </body>
33 | </html>


--------------------------------------------------------------------------------
/lr1/tasks/task8/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Task8</title>
 7 | </head>
 8 | <body>
 9 |     <p>Напишіть скрипт, який запитує номер місяця і виводить назву пори року.</p>
10 |     <script>
11 |         var monthNumber = parseInt(prompt('введіть номер місяця:'));
12 |         if (!isNaN(monthNumber) && monthNumber >= 1 && monthNumber <= 12) {
13 |             var season;
14 |             if (monthNumber >= 3 && monthNumber <= 5) {
15 |                 season = 'весна';
16 |             } else if (monthNumber >= 6 && monthNumber <= 8) {
17 |                 season = 'літо';
18 |             } else if (monthNumber >= 9 && monthNumber <= 11) {
19 |                 season = 'осінь';
20 |             } else {
21 |                 season = 'зима';
22 |             }
23 |             alert('Пора року: ' + season);
24 |         } else {
25 |             alert('введіть коректний номер місяця (від 1 до 12).');
26 |         }
27 |     </script>    
28 | </body>
29 | </html>


--------------------------------------------------------------------------------
/lr1/tasks/task6/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Task6</title>
 7 | </head>
 8 | <body>
 9 |     <p>Написати скрипт, що реалізовує складання двох чисел по клацанню на кнопці.</p>
10 |     <input type="text" id="number1" placeholder="Введіть число">
11 |     <input type="text" id="number2" placeholder="Введіть число два">
12 |     <button id="calculateButton">Скласти</button>
13 |     <p id="result"></p>
14 |     <script>
15 |         document.getElementById('calculateButton').addEventListener('click', function() {
16 |             var num1 = parseFloat(document.getElementById('number1').value);
17 |             var num2 = parseFloat(document.getElementById('number2').value);
18 |             if (!isNaN(num1) && !isNaN(num2)) {
19 |                 var sum = num1 + num2;
20 |                 document.getElementById('result').textContent = 'Результат: ' + sum;
21 |             } else {
22 |                 alert('введіть коректні числа.');
23 |             }
24 |         });
25 |     </script>    
26 | </body>
27 | </html>


--------------------------------------------------------------------------------
/pr2/task3/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Chikh</title>
 7 | </head>
 8 | <body>
 9 | <h1>Task3</h1>
10 | <div id="printer-container"></div>
11 | 
12 | 
13 | <script>
14 | function printTextWithEffect(text) {
15 |   let index = 0;
16 |   const container = document.getElementById("printer-container");
17 |   const intervalId = setInterval(function() {
18 |     if (index < text.length) {
19 |       container.textContent += text.charAt(index);
20 |       index++;
21 |     } else {
22 |       clearInterval(intervalId); // Зупинити setInterval, коли весь текст виведено
23 |     }
24 |   }, 100); // Затримка в мілісекундах між символами
25 | }
26 | 
27 | function startPrinting() {
28 |   document.getElementById("printer-container").textContent = ''; // Очистити вміст контейера
29 |   const inputText = prompt("Введіть текст для виведення:");
30 |   if (inputText) {
31 |     printTextWithEffect(inputText);
32 |   }
33 | }
34 | 
35 | </script>
36 | <button onclick="startPrinting()">Почати друк</button>
37 | </body>
38 | </html>


--------------------------------------------------------------------------------
/pr3/task2/css/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   font-family: Arial, sans-serif;
 4 | }
 5 | 
 6 | .carousel-container {
 7 |   position: relative;
 8 |   overflow: hidden;
 9 |   width: 800px; /* Збільште ширину контейнера для видимості трьох фото в ряду */
10 |   margin: 20px auto;
11 | }
12 | 
13 | .carousel-list {
14 |   list-style: none;
15 |   padding: 0;
16 |   margin: 0;
17 |   display: flex; /* Використовуємо flexbox для легшого розміщення елементів */
18 |   transition: transform 0.3s ease;
19 | }
20 | 
21 | .carousel-list li {
22 |   flex: 0 0 266.66px; /* Не дозволяємо змінювати розмір, встановлюємо розмір на 266.66px */
23 |   box-sizing: border-box;
24 | }
25 | 
26 | .carousel-list img {
27 |   display: block;
28 |   width: 600px;
29 |   height: 600px;
30 |   padding-right:10px ;
31 | }
32 | 
33 | .prev-button,
34 | .next-button {
35 |   position: absolute;
36 |   top: 50%;
37 |   transform: translateY(-50%);
38 |   font-size: 20px;
39 |   background-color: #333;
40 |   color: #fff;
41 |   border: none;
42 |   padding: 10px;
43 |   cursor: pointer;
44 | }
45 | 
46 | .prev-button {
47 |   left: 0;
48 | }
49 | 
50 | .next-button {
51 |   right: 0;
52 | }
53 | 


--------------------------------------------------------------------------------
/lr4/css/style.css:
--------------------------------------------------------------------------------
 1 | h1{
 2 |     padding-top: 100px;
 3 |     font-size: 80px;
 4 |     font-family:Imprint MT Shadow;
 5 |     text-align: center;
 6 |     color:white
 7 | }
 8 | nav ul li a:hover {
 9 |     color: rgb(154, 197, 247);
10 |   }
11 |   body {
12 |     background-image: url(../media/funny-cat.gif);
13 |     backdrop-filter: blur(10px);
14 |     background-repeat: no-repeat;
15 |     background-attachment: fixed;
16 |     background-size: 100% 100%;
17 |     background-position:center;
18 | }
19 | .site-nav {
20 |     list-style: none;
21 |     margin: 0;
22 |     padding: 100px;
23 |     text-align: center; /* додайте цей стиль, щоб вирівняти елементи списку по центру */
24 |   }
25 |   
26 |   .site-nav-item {
27 |     display: inline-block; /* змінюємо float на display: inline-block, щоб вони можна було вирівнювати по центру */
28 |     margin-right: 20px;
29 |   }
30 |   
31 |   .site-nav-item:last-child {
32 |     margin-right: 0;
33 |   }
34 |   
35 |   .site-nav-item a {
36 |     display: block;
37 |     padding: 0px;
38 |     text-decoration: none;
39 |     color: #ffffff;
40 |     font-size: 80px; /* збільшуємо розмір шрифту до 50px */
41 |     font-family:Pristina;
42 |   }


--------------------------------------------------------------------------------
/pr2/task2/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Chikh</title>
 7 | </head>
 8 | <body>
 9 | <h1>Task2</h1>
10 | <div id="clock"></div>
11 | >
12 | <button id="updateButton">Оновити час</button>
13 | 
14 | <script>
15 | // Функція для оновлення годинника
16 | function updateClock() {
17 |   const now = new Date();
18 |   const hours = now.getHours();
19 |   const minutes = now.getMinutes();
20 |   const seconds = now.getSeconds();
21 |   
22 |   // Додавання "0" до значень менше 10
23 |   const formattedHours = hours < 10 ? "0" + hours : hours;
24 |   const formattedMinutes = minutes < 10 ? "0" + minutes : minutes;
25 |   const formattedSeconds = seconds < 10 ? "0" + seconds : seconds;
26 |   
27 |   document.getElementById("clock").innerHTML = formattedHours + ":" + formattedMinutes + ":" + formattedSeconds;
28 | }
29 | 
30 | // Оновлення годинника при завантаженні сторінки
31 | updateClock();
32 | 
33 | document.getElementById("updateButton").addEventListener("click", function() {
34 |   updateClock();
35 | });
36 | </script>
37 | </body>
38 | </html>


--------------------------------------------------------------------------------
/pr3/css/style.css:
--------------------------------------------------------------------------------
 1 | h1{
 2 |     padding-top: 100px;
 3 |     font-size: 80px;
 4 |     font-family:Imprint MT Shadow;
 5 |     text-align: center;
 6 |     color:white
 7 | }
 8 | nav ul li a:hover {
 9 |     color: rgb(154, 197, 247);
10 |   }
11 |   body {
12 |     background-image: url(../media/funny-cat.gif);
13 |     backdrop-filter: blur(10px);
14 |     background-repeat: no-repeat;
15 |     background-attachment: fixed;
16 |     background-size: 100% 100%;
17 |     background-position:center;
18 | }
19 | .site-nav {
20 |     list-style: none;
21 |     margin: 0;
22 |     padding: 100px;
23 |     text-align: center; /* додайте цей стиль, щоб вирівняти елементи списку по центру */
24 |   }
25 |   
26 |   .site-nav-item {
27 |     display: inline-block; /* змінюємо float на display: inline-block, щоб вони можна було вирівнювати по центру */
28 |     margin-right: 20px;
29 |   }
30 |   
31 |   .site-nav-item:last-child {
32 |     margin-right: 0;
33 |   }
34 |   
35 |   .site-nav-item a {
36 |     display: block;
37 |     padding: 0px;
38 |     text-decoration: none;
39 |     color: #ffffff;
40 |     font-size: 80px; /* збільшуємо розмір шрифту до 50px */
41 |     font-family:Pristina;
42 |   }


--------------------------------------------------------------------------------
/lr4/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>ПР1</title>
 7 |     <style>
 8 |         body {
 9 |             font-family: Arial, sans-serif;
10 |             background-color: lightgoldenrodyellow;
11 |             text-align: center;
12 |         }
13 |         .button-container {
14 |             display: flex;
15 |             flex-wrap: wrap;
16 |             justify-content: center;
17 |             padding: 20px;
18 |         }
19 |         .button {
20 |             margin: 10px;
21 |             padding: 10px 20px;
22 |             background-color: greenyellow;
23 |             color: black;
24 |             text-decoration: none;
25 |             border: none;
26 |             border-radius: 5px;
27 |             cursor: pointer;
28 |             transition: background-color 0.3s;
29 |         }
30 |         .button:hover {
31 |             background-color: green;
32 |         }
33 |     </style>
34 | </head>
35 | <body>
36 |     <div class="button-container">
37 |         <a class="button" href="task1/index.html">Task 1</a>
38 |     </div>
39 | </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/lr3/task1/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Chikh</title>
 7 | </head>
 8 | <body>
 9 |     <h1>Конвертер температури</h1>
10 | 
11 |     <label for="fahrenheitInput">Температура за Фаренгейтом:</label>
12 |     <input type="text" id="fahrenheitInput" oninput="convertToCelsius()" placeholder="Введіть температуру в °F"><br>
13 | 
14 |     <label for="celsiusInput">Температура за Цельсієм:</label>
15 |     <input type="text" id="celsiusInput" oninput="convertToFahrenheit()" placeholder="Введіть температуру в °C"><br>
16 | 
17 |     <script>
18 |         function convertToFahrenheit() {
19 |             var celsius = parseFloat(document.getElementById('celsiusInput').value);
20 |             var fahrenheit = (celsius * 9/5) + 32;
21 |             document.getElementById('fahrenheitInput').value = fahrenheit.toFixed(2);
22 |         }
23 | 
24 |         function convertToCelsius() {
25 |             var fahrenheit = parseFloat(document.getElementById('fahrenheitInput').value);
26 |             var celsius = (fahrenheit - 32) * 5/9;
27 |             document.getElementById('celsiusInput').value = celsius.toFixed(2);
28 |         }
29 |     </script>  
30 | </body>
31 | </html>


--------------------------------------------------------------------------------
/pr3/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>ПР1</title>
 7 |     <style>
 8 |         body {
 9 |             font-family: Arial, sans-serif;
10 |             background-color: lightgoldenrodyellow;
11 |             text-align: center;
12 |         }
13 |         .button-container {
14 |             display: flex;
15 |             flex-wrap: wrap;
16 |             justify-content: center;
17 |             padding: 20px;
18 |         }
19 |         .button {
20 |             margin: 10px;
21 |             padding: 10px 20px;
22 |             background-color: greenyellow;
23 |             color: black;
24 |             text-decoration: none;
25 |             border: none;
26 |             border-radius: 5px;
27 |             cursor: pointer;
28 |             transition: background-color 0.3s;
29 |         }
30 |         .button:hover {
31 |             background-color: green;
32 |         }
33 |     </style>
34 | </head>
35 | <body>
36 |     <div class="button-container">
37 |         <a class="button" href="task1/index.html">Task 1</a>
38 |         <a class="button" href="task2/index.html">Task 2</a>
39 |         <a class="button" href="task3/index.html">Task 3</a>
40 |     </div>
41 | </body>
42 | </html>
43 | 


--------------------------------------------------------------------------------
/pr2/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>ПР1</title>
 7 |     <style>
 8 |         body {
 9 |             font-family: Arial, sans-serif;
10 |             background-color: lightgoldenrodyellow;
11 |             text-align: center;
12 |         }
13 |         .button-container {
14 |             display: flex;
15 |             flex-wrap: wrap;
16 |             justify-content: center;
17 |             padding: 20px;
18 |         }
19 |         .button {
20 |             margin: 10px;
21 |             padding: 10px 20px;
22 |             background-color: greenyellow;
23 |             color: black;
24 |             text-decoration: none;
25 |             border: none;
26 |             border-radius: 5px;
27 |             cursor: pointer;
28 |             transition: background-color 0.3s;
29 |         }
30 |         .button:hover {
31 |             background-color: green;
32 |         }
33 |     </style>
34 | </head>
35 | <body>
36 |     <div class="button-container">
37 |         <a class="button" href="task1/index.html">Task 1</a>
38 |         <a class="button" href="task2/index.html">Task 2</a>
39 |         <a class="button" href="task3/index.html">Task 3</a>
40 |         <a class="button" href="task4/index.html">Task 4</a>
41 |     </div>
42 | </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/lr2/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>ЛР2</title>
 7 |     <style>
 8 |         body {
 9 |             font-family: Arial, sans-serif;
10 |             background-color: lightgoldenrodyellow;
11 |             text-align: center;
12 |         }
13 |         .button-container {
14 |             display: flex;
15 |             flex-wrap: wrap;
16 |             justify-content: center;
17 |             padding: 20px;
18 |         }
19 |         .button {
20 |             margin: 10px;
21 |             padding: 10px 20px;
22 |             background-color: greenyellow;
23 |             color: black;
24 |             text-decoration: none;
25 |             border: none;
26 |             border-radius: 5px;
27 |             cursor: pointer;
28 |             transition: background-color 0.3s;
29 |         }
30 |         .button:hover {
31 |             background-color: green;
32 |         }
33 |     </style>
34 | </head>
35 | <body>
36 |     <p>Практичні приклади застосування Date()</p>
37 |     <div class="button-container">
38 |         <a class="button" href="tasks/task1/index.html">Task 1</a>
39 |         <a class="button" href="tasks/task2/index.html">Task 2</a>
40 |         <a class="button" href="tasks/task3/index.html">Task 3</a>
41 |     </div>
42 | </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/pr3/task3/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <link rel="stylesheet" href="css/style.css" media="screen">
 7 |     <title>Document</title>
 8 | </head>
 9 | <body>
10 |   <div id="field">
11 |     <img id="ball" src="media/Ball.png" alt="Ball Image">
12 | </div>
13 |     <script>
14 |  const field = document.getElementById('field');
15 |     const ball = document.getElementById('ball');
16 | 
17 |     field.addEventListener('click', moveBall);
18 | 
19 |     function moveBall(event) {
20 |         const fieldRect = field.getBoundingClientRect();
21 |         const mouseX = event.clientX;
22 |         const mouseY = event.clientY;
23 | 
24 |         const ballX = mouseX - fieldRect.left - ball.clientWidth / 2;
25 |         const ballY = mouseY - fieldRect.top - ball.clientHeight / 2;
26 | 
27 |         const maxX = field.clientWidth - ball.clientWidth;
28 |         const maxY = field.clientHeight - ball.clientHeight;
29 | 
30 |         ball.style.transition = 'transform 0.2s ease-in-out';
31 |         ball.style.transform = `translate(${Math.min(Math.max(ballX, 0), maxX)}px, ${Math.min(Math.max(ballY, 0), maxY)}px)`;
32 |     }
33 | 
34 |     ball.addEventListener('transitionend', () => {
35 |         ball.style.transition = 'none'; // Зупиняємо анімацію після завершення руху
36 |     });
37 |     </script>
38 | </body>
39 | </html>


--------------------------------------------------------------------------------
/lr2/tasks/task3/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Task3</title>
 7 | </head>
 8 | <body>
 9 |     <p>3. Спробуйте використати метод getDay() для того, щоб вивести, в якому місяці вказаного року
10 |         у нас 13-е число місяця припаде на п'ятницю.</p>
11 |         <div class="test">
12 |             <select id="year">
13 |               <option value="2018">2018</option>
14 |               <option value="2019">2019</option>
15 |               <option value="2020">2020</option>
16 |               <option value="2021">2021</option>
17 |               <option value="2022">2022</option>
18 |               <option value="2023">2023</option>
19 |               <option value="2024">2024</option>
20 |               <option value="2025">2025</option>
21 |             </select>
22 |             <div id="output13"></div>
23 |           </div>              
24 |     <script>
25 |         year.addEventListener('change', friday13);
26 | 
27 |         function friday13 (year) {
28 |             year = this.value || year;
29 |             let str = '';
30 |             for (let i = 0; i<12; i++) {
31 |                 let d = new Date(year, i, 13);
32 |                 if (d.getDay() == 5)
33 |                 str += `<p>П'ятниця, ${d.toLocaleDateString()}</p>`;
34 |                 }
35 |             output13.innerHTML = str;
36 |         }
37 |     </script>
38 | </body>
39 | </html>
40 | 


--------------------------------------------------------------------------------
/lr3/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>ЛР2</title>
 7 |     <style>
 8 |         body {
 9 |             font-family: Arial, sans-serif;
10 |             background-color: lightgoldenrodyellow;
11 |             text-align: center;
12 |         }
13 |         .button-container {
14 |             display: flex;
15 |             flex-wrap: wrap;
16 |             justify-content: center;
17 |             padding: 20px;
18 |         }
19 |         .button {
20 |             margin: 10px;
21 |             padding: 10px 20px;
22 |             background-color: greenyellow;
23 |             color: black;
24 |             text-decoration: none;
25 |             border: none;
26 |             border-radius: 5px;
27 |             cursor: pointer;
28 |             transition: background-color 0.3s;
29 |         }
30 |         .button:hover {
31 |             background-color: green;
32 |         }
33 |     </style>
34 | </head>
35 | <body>
36 |     <p>Практичні приклади застосування Date()</p>
37 |     <div class="button-container">
38 |         <a class="button" href="task1/index.html">Task 1</a>
39 |         <a class="button" href="task2/index.html">Task 2</a>
40 |         <a class="button" href="task3/index.html">Task 3</a>
41 |         <a class="button" href="task4/index.html">Task 4</a>
42 |         <a class="button" href="task5/index.html">Task 5</a>
43 |     </div>
44 | </body>
45 | </html>
46 | 


--------------------------------------------------------------------------------
/pr1/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>ПР1</title>
 7 |     <style>
 8 |         body {
 9 |             font-family: Arial, sans-serif;
10 |             background-color: lightgoldenrodyellow;
11 |             text-align: center;
12 |         }
13 |         .button-container {
14 |             display: flex;
15 |             flex-wrap: wrap;
16 |             justify-content: center;
17 |             padding: 20px;
18 |         }
19 |         .button {
20 |             margin: 10px;
21 |             padding: 10px 20px;
22 |             background-color: greenyellow;
23 |             color: black;
24 |             text-decoration: none;
25 |             border: none;
26 |             border-radius: 5px;
27 |             cursor: pointer;
28 |             transition: background-color 0.3s;
29 |         }
30 |         .button:hover {
31 |             background-color: green;
32 |         }
33 |     </style>
34 | </head>
35 | <body>
36 |     <div class="button-container">
37 |         <a class="button" href="tasks/task1/index.html">Task 1</a>
38 |         <a class="button" href="tasks/task2/index.html">Task 2</a>
39 |         <a class="button" href="tasks/task3/index.html">Task 3</a>
40 |         <a class="button" href="tasks/task4/index.html">Task 4</a>
41 |         <a class="button" href="tasks/task5/index.html">Task 5</a>
42 |         <a class="button" href="tasks/task6/index.html">Task 6</a>
43 |         <a class="button" href="tasks/task7/index.html">Task 7</a>
44 |     </div>
45 | </body>
46 | </html>
47 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Чіх Ростик</title>
 7 |     <style>
 8 |         body {
 9 |             font-family: Arial, sans-serif;
10 |             background-color: lightgoldenrodyellow;
11 |             text-align: center;
12 |         }
13 |         .button-container {
14 |             display: flex;
15 |             flex-wrap: wrap;
16 |             justify-content: center;
17 |             padding: 20px;
18 |         }
19 |         .button {
20 |             margin: 10px;
21 |             padding: 10px 20px;
22 |             background-color: greenyellow;
23 |             color: black;
24 |             text-decoration: none;
25 |             border: none;
26 |             border-radius: 5px;
27 |             cursor: pointer;
28 |             transition: background-color 0.3s;
29 |         }
30 |         .button:hover {
31 |             background-color: green;
32 |         }
33 |     </style>
34 | </head>
35 | <body>
36 |     <p>Список моїх виконаних завдань:</p>
37 |     <div class="button-container">
38 |         <a class="button" href="lr1/index.html">laboratorna 1</a>
39 |         <a class="button" href="lr2/index.html">laboratorna 2</a>
40 |         <a class="button" href="pr1/index.html">practic 1</a>
41 |         <a class="button" href="pr2/index.html">practic 2</a>
42 |         <a class="button" href="lr3/index.html">laboratorna 3</a>
43 |         <a class="button" href="pr3/index.html">practic 3</a>
44 |         <a class="button" href="lr4/index.html">laboratorna 4</a>
45 |     </div>
46 | </body>
47 | </html>
48 | 


--------------------------------------------------------------------------------
/lr1/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>ЛР1</title>
 7 |     <style>
 8 |         body {
 9 |             font-family: Arial, sans-serif;
10 |             background-color: lightgoldenrodyellow;
11 |             text-align: center;
12 |         }
13 |         .button-container {
14 |             display: flex;
15 |             flex-wrap: wrap;
16 |             justify-content: center;
17 |             padding: 20px;
18 |         }
19 |         .button {
20 |             margin: 10px;
21 |             padding: 10px 20px;
22 |             background-color: greenyellow;
23 |             color: black;
24 |             text-decoration: none;
25 |             border: none;
26 |             border-radius: 5px;
27 |             cursor: pointer;
28 |             transition: background-color 0.3s;
29 |         }
30 |         .button:hover {
31 |             background-color: green;
32 |         }
33 |     </style>
34 | </head>
35 | <body>
36 |     <div class="button-container">
37 |         <a class="button" href="tasks/task1/index.html">Task 1</a>
38 |         <a class="button" href="tasks/task2/index.html">Task 2</a>
39 |         <a class="button" href="tasks/task3/index.html">Task 3</a>
40 |         <a class="button" href="tasks/task4/index.html">Task 4</a>
41 |         <a class="button" href="tasks/task5/index.html">Task 5</a>
42 |         <a class="button" href="tasks/task6/index.html">Task 6</a>
43 |         <a class="button" href="tasks/task7/index.html">Task 7</a>
44 |         <a class="button" href="tasks/task8/index.html">Task 8</a>
45 |         <a class="button" href="tasks/task9/index.html">Task 9</a>
46 |     </div>
47 | </body>
48 | </html>
49 | 


--------------------------------------------------------------------------------
/lr2/tasks/task1/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Task1</title>
 7 | </head>
 8 | <body>
 9 |     <p>1. Можна розрахувати різницю між двома датами. Наприклад, ми маємо сьогоднішню
10 |         дату і дату початку нового року. Для того, щоб порахувати різницю, можна використовувати
11 |         метод getTime() для кожної зі змінних або просто відняти одну змінну-екземпляр класу Date
12 |         від іншої:</p>
13 |     <script>
14 |         let today = new Date();
15 |         let newYearDate = new Date(today.getFullYear() + 1, 0, 1);
16 |         document.write('<p> today: ' + today.toLocaleString() + '</p>');
17 |         document.write('<p> newYearDate: ' + newYearDate.toLocaleString() + '</p>');
18 |         document.write('<p> newYearDate today: ' + (newYearDate - today) + '</p>');
19 |         document.write('<p> newYearDate.getTime() today.getTime(): ' + (newYearDate.getTime() - today.getTime()) + '</p>');
20 |     </script>
21 |     <p>Тепер порахуємо, скільки часу залишилося до Нового року, використовуючи змінні зі
22 |         скрипту вище і знання про те, що в добі 24 години, годині 60 хвилин, хвилині - 60 секунд, а в
23 |         секунді 1000 мілісекунд.</p>
24 |         <script>
25 |             let msDiff = newYearDate - today;
26 |             days = Math.floor(msDiff / (24 * 60 * 60 * 1000));
27 |             hours = Math.floor((msDiff / (1000 * 60 * 60)) / 24);
28 |             mins = Math.floor((msDiff / (1000 * 60)) / 60);
29 |             secs = Math.floor((msDiff / 1000) / 60);
30 |             document.write('<p> До Нового року: ' + days + ' днів, ' + hours + ' годин, ' + mins + ' хвилин, ' + secs + ' секунд.</p>');
31 |         </script>    
32 | </body>
33 | </html>
34 | 


--------------------------------------------------------------------------------
/lr2/tasks/task2/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Task2</title>
 7 | </head>
 8 | <body>
 9 |     <p>2. Дата у локальному форматі</p>
10 |     <script>
11 |         let today = new Date();
12 |         let options = {
13 |         era: 'long',
14 |         year: 'numeric',
15 |         month: 'long',
16 |         day: 'numeric',
17 |         weekday: 'long',
18 |         timezone: 'UTC',
19 |         hour: 'numeric',
20 |         minute: 'numeric',
21 |         second: 'numeric',
22 |         };
23 |         document.write(`<p>${today.toLocaleString('ar-EG')}</p>`);
24 |         document.write(`<p>${today.toLocaleString('ar-EG', options)}</p>`);
25 |         document.write(`<p>${today.toLocaleString('en-US')}</p>`);
26 |         document.write(`<p>${today.toLocaleString('en-GB')}</p>`);
27 |         document.write(`<p>${today.toLocaleString('en-GB', options)}</p>`);
28 |         document.write(`<p>${today.toLocaleString('uk-UA', options)}</p>`);
29 |     </script>
30 |     <p>2. Змініть параметри і ще раз виведіть сьогоднішню дату кількома мовами:</p>
31 |     <script>
32 |         let today2 = new Date();
33 |         let options2 = {
34 |             year: '2-digit',
35 |             month: 'short',
36 |             day: '2-digit',
37 |             weekday: 'short',
38 |             hour: '2-digit',
39 |             minute: '2-digit',
40 |             second: '2-digit',
41 |         };
42 |         document.write(`<p>${today2.toLocaleString('ar-EG', options2)}</p>`);
43 |         document.write(`<p>${today2.toLocaleString('en-GB', options2)}</p>`);
44 |         document.write(`<p>${today2.toLocaleString('ru-RU', options2)}</p>`);        
45 |         document.write(`<p>${today2.toLocaleString('uk-UA', options2)}</p>`);
46 |     </script>
47 | </body>
48 | </html>
49 | 


--------------------------------------------------------------------------------
/lr4/task1/css/style.css:
--------------------------------------------------------------------------------
  1 | #tabs .tab {
  2 |     display: inline-block;
  3 |     padding: 5px 10px;
  4 |     cursor: pointer;
  5 |     position: relative;
  6 |     z-index: 5;
  7 | }
  8 | 
  9 | #tabs .whiteborder {
 10 |     border: 1px solid #707070;
 11 |     border-bottom: 1px solid #fff;
 12 |     border-radius: 3px 3px 0 0;
 13 | }
 14 | 
 15 | #tabs .tabContent {
 16 |     width: 500px;
 17 |     border: 1px solid #707070;
 18 |     position: relative;
 19 |     top: -1px;
 20 |     z-index: 1;
 21 |     padding: 10px;
 22 |     border-radius: 0 0 3px 3px;
 23 | }
 24 | 
 25 | #tabs .hide {
 26 |     display: none;
 27 | }
 28 | 
 29 | #tabs .show {
 30 |     display: block;
 31 | }
 32 | 
 33 | 
 34 | 
 35 | #block {
 36 |     width: 100px;
 37 |     height: 100px;
 38 |     background: green;
 39 |     margin-top: 20px;
 40 | }
 41 | 
 42 | textarea {
 43 |     width: 100%;
 44 |     height: 100px;
 45 |     margin-top: 10px;
 46 | }
 47 | 
 48 | 
 49 | 
 50 | #text, #text2{
 51 |     font-size: 26px;
 52 |     padding: 20px;
 53 |   }
 54 |   #textContainer {
 55 |     display: inline-block;
 56 |     vertical-align: top;
 57 | }
 58 | 
 59 | .square1, .square2 {
 60 |     display: inline-block;
 61 |     margin: 10px;
 62 |   }
 63 | 
 64 |   .square1 {
 65 |     position: absolute;
 66 |     width: 200px;
 67 |     height: 200px;
 68 |     background: blue;
 69 |   }
 70 | 
 71 |   .square2 {
 72 |     width: 200px;
 73 |     height: 200px;
 74 |     background: red;
 75 |   }
 76 | 
 77 |   #zIndexForm {
 78 |     margin-bottom: 20px;
 79 |   }
 80 | 
 81 |   #cssOutput {
 82 |     width: 100%;
 83 |     height: 100px;
 84 |     margin-bottom: 20px;
 85 |   }
 86 |   .square3 {
 87 |     position: absolute;
 88 |     width: 200px;
 89 |     height: 200px;
 90 |     background: rgb(0, 255, 140);
 91 |   }
 92 | 
 93 |   .square4 {
 94 |     width: 200px;
 95 |     height: 200px;
 96 |     background: red;
 97 |   }
 98 |   .flex-container {
 99 |     display: flex;
100 |     justify-content: space-between;
101 |     margin-bottom: 20px;
102 |   }


--------------------------------------------------------------------------------
/lr3/task2/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Chikh</title>
 7 | </head>
 8 | <body>
 9 |     <h1>Перевірка знань таблиці множення</h1>
10 |     
11 |     <p>Загальний рахунок: <span id="score">0</span>% (<span id="correctCount">0</span> правильних відповідей з <span id="totalCount">0</span>)</p>
12 | 
13 |     <button id="nextTask" onclick="generateTask()">Наступне завдання</button>
14 | 
15 |     <p id="task">Завдання: </p>
16 | 
17 |     <input type="text" id="answer" placeholder="Введіть відповідь">
18 |     
19 |     <button id="check" onclick="checkAnswer()">Перевірити</button>
20 | 
21 |     <p id="result"></p>
22 | 
23 |     <script>
24 |         var score = 0;
25 |         var correctCount = 0;
26 |         var totalCount = 0;
27 |         var currentTask;
28 | 
29 |         function generateTask() {
30 |             var num1 = Math.floor(Math.random() * 10) + 1;
31 |             var num2 = Math.floor(Math.random() * 10) + 1;
32 |             currentTask = num1 * num2;
33 |             document.getElementById("task").textContent = "Завдання: " + num1 + " x " + num2;
34 |         }
35 | 
36 |         function checkAnswer() {
37 |             var userAnswer = parseInt(document.getElementById("answer").value);
38 |             if (userAnswer === currentTask) {
39 |                 correctCount++;
40 |                 document.getElementById("result").textContent = "Правильно!";
41 |             } else {
42 |                 document.getElementById("result").textContent = "Неправильно. Правильна відповідь: " + currentTask;
43 |             }
44 |             totalCount++;
45 |             score = (correctCount / totalCount * 100).toFixed(2);
46 |             document.getElementById("score").textContent = score + "%";
47 |             document.getElementById("correctCount").textContent = correctCount;
48 |             document.getElementById("totalCount").textContent = totalCount;
49 |         }
50 | 
51 |         generateTask(); // Генеруємо перше завдання при завантаженні сторінки
52 |     </script>
53 | </body>
54 | </html>


--------------------------------------------------------------------------------
/pr3/task1/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <link rel="stylesheet" href="css/style.css" media="screen">
 7 |     <title>Document</title>
 8 | </head>
 9 | <body>
10 |     <ul id="messages">
11 |         <li>
12 |           <div class="message-content">
13 |             <p class="message-title">Android</p>
14 |             <p>Опис Опис Опис Опис Опис Опис Опис Опис <br>
15 |                 Опис Опис Опис Опис Опис Опис Опис Опис <br>
16 |                 Опис Опис Опис Опис Опис Опис Опис Опис</p>
17 |             <button class="hide-btn">[x]</button>
18 |           </div>
19 |         </li>
20 |         <li>
21 |           <div class="message-content">
22 |             <p class="message-title">Android</p>
23 |             <p>Опис Опис Опис Опис Опис Опис Опис Опис <br>
24 |                 Опис Опис Опис Опис Опис Опис Опис Опис <br>
25 |                 Опис Опис Опис Опис Опис Опис Опис Опис</p>
26 |             <button class="hide-btn">[x]</button>
27 |           </div>
28 |         </li>
29 |         <li>
30 |           <div class="message-content">
31 |             <p class="message-title">Android</p>
32 |             <p>Опис Опис Опис Опис Опис Опис Опис Опис <br>
33 |                 Опис Опис Опис Опис Опис Опис Опис Опис <br>
34 |                 Опис Опис Опис Опис Опис Опис Опис Опис</p>
35 |             <button class="hide-btn">[x]</button>
36 |           </div>
37 |         </li>
38 |       </ul>
39 |     <script>
40 |         // Отримуємо всі кнопки приховування за допомогою querySelectorAll
41 | const hideButtons = document.querySelectorAll('.hide-btn');
42 | 
43 | // Додаємо обробник події для кожної кнопки
44 | hideButtons.forEach(button => {
45 |   button.addEventListener('click', hideMessage);
46 | });
47 | 
48 | // Функція, яка приховує батька кнопки (тобто батьківський div)
49 | function hideMessage(event) {
50 |   const button = event.target;
51 |   const messageDiv = button.parentNode;
52 | 
53 |   // Приховуємо батька
54 |   messageDiv.style.display = 'none';
55 | }
56 | 
57 |     </script>
58 | </body>
59 | </html>


--------------------------------------------------------------------------------
/pr3/task2/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <link rel="stylesheet" href="css/style.css" media="screen">
 7 |     <title>Document</title>
 8 | </head>
 9 | <body>
10 |   <div class="carousel-container">
11 |     <ul class="carousel-list">
12 |       <li><img src="media/image1.jpg" alt="Image 1"></li>
13 |       <li><img src="media/image2.jpg" alt="Image 2"></li>
14 |       <li><img src="media/image3.jpg" alt="Image 3"></li>
15 |       <li><img src="media/image2.jpg" alt="Image 3"></li>
16 |       <li><img src="media/image2.jpg" alt="Image 3"></li>
17 |       <li><img src="media/image1.jpg" alt="Image 3"></li>
18 |       <li><img src="media/image3.jpg" alt="Image 3"></li>
19 |       <!-- Додайте більше елементів, якщо потрібно -->
20 |     </ul>
21 |     <button class="prev-button">&lt;</button>
22 |     <button class="next-button">&gt;</button>
23 |   </div>
24 |     <script>
25 |  document.addEventListener('DOMContentLoaded', function () {
26 |   const prevButton = document.querySelector('.prev-button');
27 |   const nextButton = document.querySelector('.next-button');
28 |   const carouselList = document.querySelector('.carousel-list');
29 | 
30 |   let currentPosition = 0;
31 |   const itemWidth = document.querySelector('.carousel-list li').offsetWidth;
32 |   const totalItems = document.querySelectorAll('.carousel-list li').length;
33 | 
34 |   prevButton.addEventListener('click', function () {
35 |     currentPosition += itemWidth;
36 |     updateCarousel();
37 |   });
38 | 
39 |   nextButton.addEventListener('click', function () {
40 |     currentPosition -= itemWidth;
41 |     updateCarousel();
42 |   });
43 | 
44 |   function updateCarousel() {
45 |     // Вимикаємо стрілку "Вліво" при досягненні крайнього лівого положення
46 |     prevButton.disabled = currentPosition === 0;
47 | 
48 |     // Вимикаємо стрілку "Вправо" при досягненні крайнього правого положення
49 |     nextButton.disabled = currentPosition === -(itemWidth * (totalItems - 3));
50 | 
51 |     carouselList.style.transform = `translateX(${currentPosition}px)`;
52 |   }
53 | });
54 | 
55 | 
56 |     </script>
57 | </body>
58 | </html>


--------------------------------------------------------------------------------
/lr4/task1/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>chikh chikh</title>
 7 |     <link rel="stylesheet" href="css/style.css">
 8 | </head>
 9 | <body>
10 |     <div id="tabs">
11 |         <div class="tab whiteborder">border-radius</div>
12 |         <div class="tab">text-indent</div>
13 |         <div class="tab">text-shadow</div>
14 |         <div class="tabContent">
15 |             <div>Верхній лівий радіус:
16 |                 <input type="range" id="rtl" min="0" max="100" value="0" oninput="generate()">
17 |                 <input type="text" id="ttl" value="0">
18 |             </div>
19 |             <div>Верхній правий радіус:
20 |                 <input type="range" id="rtr" min="0" max="100" value="0" oninput="generate()">
21 |                 <input type="text" id="ttr" value="0">
22 |             </div>
23 |             <div>Нижній лівий радіус:
24 |                 <input type="range" id="rbl" min="0" max="100" value="0" oninput="generate()">
25 |                 <input type="text" id="tbl" value="0">
26 |             </div>
27 |             <div>Нижній правий радіус:
28 |                 <input type="range" id="rbr" min="0" max="100" value="0" oninput="generate()">
29 |                 <input type="text" id="tbr" value="0">
30 |             </div>    
31 |             <div id="block"></div>
32 |             <textarea id="cssCode" readonly></textarea>            
33 |         </div>
34 | 
35 |         <div class="tabContent"> 
36 |         <form id="zIndexForm">
37 |             <label for="zIndexValue">Enter z-index value for .square1:</label>
38 |             <input type="number" id="zIndexValue" name="zIndexValue" min="-9999" max="9999" step="1" value="-1" oninput="generateCSS()">
39 |           </form>
40 |         
41 |           <div class="square1" id="square1"></div>
42 |           <div class="square2"></div>
43 |         
44 |           <textarea id="cssOutput" readonly></textarea>
45 |         </div>
46 |         
47 |         
48 |         
49 |         
50 |         
51 |         <div class="tabContent">
52 |             <div class="flex-container">
53 |                 <div class="square3" id="square3"></div>
54 |                 <div class="square4" id="square4"></div>
55 |               </div>
56 |             
57 |               <div class="flex-form" id="flexForm">
58 |                 <label for="flexValue">Enter flex value for .square3:</label>
59 |                 <input type="number" id="flexValue" name="flexValue" min="0" max="10" step="0.1" value="1" oninput="generateCSS()">
60 |               </div>
61 |             
62 |               <textarea class="output-textarea" id="flexOutput" readonly></textarea>
63 |         </div>
64 |         
65 |     <script src="script/script.js"></script>
66 | </body>
67 | </html>


--------------------------------------------------------------------------------
/lr4/task1/script/script.js:
--------------------------------------------------------------------------------
 1 | var tab;
 2 | var tabContent;
 3 | 
 4 | window.onload = function () {
 5 |     tabContent = document.getElementsByClassName('tabContent');
 6 |     tab = document.getElementsByClassName('tab');
 7 |     hideTabsContent(1);
 8 | }
 9 | 
10 | function hideTabsContent(a) {
11 |     for (var i = a; i < tabContent.length; i++) {
12 |         tabContent[i].classList.remove('show');
13 |         tabContent[i].classList.add('hide');
14 |         tab[i].classList.remove('whiteborder');
15 |     }
16 | }
17 | 
18 | document.getElementById('tabs').onclick = function (event) {
19 |     var target = event.target;
20 |     if (target.className == 'tab') {
21 |         for (var i = 0; i < tab.length; i++) {
22 |             if (target == tab[i]) {
23 |                 showTabsContent(i);
24 |                 break;
25 |             }
26 |         }
27 |     }
28 | }
29 | 
30 | function showTabsContent(b) {
31 |     if (tabContent[b].classList.contains('hide')) {
32 |         hideTabsContent(0);
33 |         tab[b].classList.add('whiteborder');
34 |         tabContent[b].classList.remove('hide');
35 |         tabContent[b].classList.add('show');
36 |     }
37 | }
38 | 
39 | var rtl = document.getElementById('rtl');
40 | var rtr = document.getElementById('rtr');
41 | var rbr = document.getElementById('rbr');
42 | var rbl = document.getElementById('rbl');
43 | var ttl = document.getElementById('ttl');
44 | var ttr = document.getElementById('ttr');
45 | var tbr = document.getElementById('tbr');
46 | var tbl = document.getElementById('tbl');
47 | var block = document.getElementById('block');
48 | var cssCode = document.getElementById('cssCode');
49 | 
50 | function generate() {
51 |     cssCode.value = "";
52 | 
53 |     var topLeft = rtl.value + "px";
54 |     var topRight = rtr.value + "px";
55 |     var bottomRight = rbr.value + "px";
56 |     var bottomLeft = rbl.value + "px";
57 |     ttl.value = rtl.value;
58 |     ttr.value = rtr.value;
59 |     tbr.value = rbr.value;
60 |     tbl.value = rbl.value;
61 |     block.style.borderRadius = topLeft + " " + topRight + " " + bottomRight + " " + bottomLeft;
62 |     cssCode.value += `border-radius: ${topLeft} ${topRight} ${bottomRight} ${bottomLeft};\n`;
63 | }
64 | 
65 | function generateCSS() {
66 |     var zIndexValue = document.getElementById('zIndexValue').value;
67 |     var square1 = document.getElementById('square1');
68 |     square1.style.zIndex = zIndexValue;
69 | 
70 |     var cssCode = '.square1 {\n  z-index: ' + zIndexValue + ';\n}';
71 |     document.getElementById('cssOutput').value = cssCode;
72 |   }
73 | 
74 |   function generateCSS() {
75 |     var flexValue = document.getElementById('flexValue').value;
76 |     var square3 = document.getElementById('square3');
77 |     square3.style.flex = flexValue;
78 | 
79 |     var cssCode = '.square3 {\n  flex: ' + flexValue + ';\n}';
80 |     document.getElementById('flexOutput').value = cssCode;
81 |   }
82 | 


--------------------------------------------------------------------------------
/lr3/task5/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Проста CAPTCHA</title>
 7 |     <style>
 8 |         @import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@500&display=swap');
 9 |         
10 |         .captcha-container {
11 |             text-align: center;
12 |             margin-top: 50px;
13 |         }
14 | 
15 |         .pixel {
16 |             font-family: 'Pixelify Sans', sans-serif;
17 |             font-size: 80px; /* Розмір шрифта капчі */
18 |             display: inline;
19 |             color: #000; /* Колір тексту CAPTCHA */
20 |         }
21 | 
22 |         input[type="text"] {
23 |             padding: 5px;
24 |             font-size: 16px;
25 |             width: 150px;
26 |         }
27 | 
28 |         button {
29 |             padding: 5px 10px;
30 |             font-size: 16px;
31 |         }
32 | 
33 |         #captchaMessage {
34 |             margin-top: 10px;
35 |             font-weight: bold;
36 |         }
37 |     </style>
38 | </head>
39 | <body>
40 |     <h3>CAPTCHA:</h3>
41 |     <div class="captcha-container">
42 |         <div class="captcha" id="captcha"></div>
43 |         <input type="text" id="captchaInput" placeholder="Введіть число">
44 |         <button onclick="checkCaptcha()">Перевірити</button>
45 |         <p id="captchaMessage"></p>
46 |     </div>
47 | 
48 |     <script>
49 |         // Функція для генерації випадкового числа заданої довжини
50 |         function generateRandomNumber(length) {
51 |             let result = '';
52 |             for (let i = 0; i < length; i++) {
53 |                 result += Math.floor(Math.random() * 10);
54 |             }
55 |             return result;
56 |         }
57 | 
58 |         // Функція для створення CAPTCHA
59 |         function createCaptcha(digits) {
60 |             const captchaElement = document.getElementById("captcha");
61 |             const randomNumber = generateRandomNumber(digits);
62 |             captchaElement.innerHTML = '';
63 | 
64 |             for (let i = 0; i < randomNumber.length; i++) {
65 |                 const digitSpan = document.createElement('span');
66 |                 digitSpan.className = 'pixel';
67 |                 digitSpan.textContent = randomNumber[i];
68 |                 captchaElement.appendChild(digitSpan);
69 |             }
70 |         }
71 | 
72 |         // Функція для перевірки правильності введення CAPTCHA
73 |         function checkCaptcha() {
74 |             const captchaElement = document.getElementById("captcha");
75 |             const captchaInput = document.getElementById("captchaInput");
76 |             const message = document.getElementById("captchaMessage");
77 | 
78 |             if (captchaInput.value === captchaElement.textContent.replace(/\s/g, '')) {
79 |                 message.textContent = "ЄС СЕР Ю ОЛЛ РАЙТ!";
80 |                 message.style.color = 'green';
81 |             } else {
82 |                 message.textContent = "Помилка, Спробуйте ще раз.";
83 |                 message.style.color = 'red';
84 |             }
85 | 
86 |             // Ініціалізуємо нову CAPTCHA після перевірки
87 |             createCaptcha(2);
88 |         }
89 | 
90 |         // Ініціалізуємо CAPTCHA з 2 цифр
91 |         createCaptcha(2);
92 |     </script>
93 | </body>
94 | </html>
95 | 


--------------------------------------------------------------------------------
/lr3/task3/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Document</title>
 7 | </head>
 8 | <body>
 9 |     <h1>Перевірка знань таблиці множення</h1>
10 |     
11 |     <p>Загальний рахунок: <span id="score">0</span>% (<span id="correctCount">0</span> правильних відповідей з <span id="totalCount">0</span>)</p>
12 | 
13 |     <button id="nextTask" onclick="generateTask()">Наступне завдання</button>
14 | 
15 |     <p id="task">Завдання: </p>
16 | 
17 |     <form id="answerForm">
18 |         <input type="radio" name="answer" id="option1" value="option1">
19 |         <label for="option1" id="label1"></label><br>
20 |         <input type="radio" name="answer" id="option2" value="option2">
21 |         <label for="option2" id="label2"></label><br>
22 |         <input type="radio" name="answer" id="option3" value="option3">
23 |         <label for="option3" id="label3"></label><br>
24 |     </form>
25 |     
26 |     <button id="check" onclick="checkAnswer()">Перевірити</button>
27 | 
28 |     <p id="result"></p>
29 | 
30 |     <script>
31 |         var score = 0;
32 |         var correctCount = 0;
33 |         var totalCount = 0;
34 |         var currentTask;
35 | 
36 |         function generateTask() {
37 |             var num1 = Math.floor(Math.random() * 10) + 1;
38 |             var num2 = Math.floor(Math.random() * 10) + 1;
39 |             currentTask = num1 * num2;
40 |             document.getElementById("task").textContent = "Завдання: " + num1 + " x " + num2;
41 |             
42 |             var options = generateRandomOptions(currentTask);
43 |             document.getElementById("label1").textContent = options[0];
44 |             document.getElementById("label2").textContent = options[1];
45 |             document.getElementById("label3").textContent = options[2];
46 |             
47 |             document.getElementById("option1").value = options[0];
48 |             document.getElementById("option2").value = options[1];
49 |             document.getElementById("option3").value = options[2];
50 |         }
51 | 
52 |         function generateRandomOptions(correctAnswer) {
53 |             var options = [correctAnswer];
54 |             while (options.length < 3) {
55 |                 var randomOption = Math.floor(Math.random() * 100);
56 |                 if (options.indexOf(randomOption) === -1) {
57 |                     options.push(randomOption);
58 |                 }
59 |             }
60 |             options.sort(function() { return 0.5 - Math.random() });
61 |             return options;
62 |         }
63 | 
64 |         function checkAnswer() {
65 |             var selectedOption = document.querySelector('input[name="answer"]:checked');
66 |             if (selectedOption) {
67 |                 var userAnswer = parseInt(selectedOption.value);
68 |                 if (userAnswer === currentTask) {
69 |                     correctCount++;
70 |                     document.getElementById("result").textContent = "Правильно!";
71 |                 } else {
72 |                     document.getElementById("result").textContent = "Неправильно. Правильна відповідь: " + currentTask;
73 |                 }
74 |                 totalCount++;
75 |                 score = (correctCount / totalCount * 100).toFixed(2);
76 |                 document.getElementById("score").textContent = score + "%";
77 |                 document.getElementById("correctCount").textContent = correctCount;
78 |                 document.getElementById("totalCount").textContent = totalCount;
79 |                 selectedOption.checked = false;
80 |             } else {
81 |                 document.getElementById("result").textContent = "Будь ласка, виберіть відповідь.";
82 |             }
83 |         }
84 | 
85 |         generateTask(); // Генеруємо перше завдання при завантаженні сторінки
86 |     </script>
87 | </body>
88 | </html>


--------------------------------------------------------------------------------
/lr3/task4/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>Фото-ротатор</title>
  7 |     <style>
  8 |         .photo-rotator-container {
  9 |             text-align: center;
 10 |             border: 1px solid #ccc;
 11 |             padding: 10px;
 12 |             display: flex;
 13 |             flex-direction: column;
 14 |         }
 15 | 
 16 |         .photo-rotator-image {
 17 |             width: 500px;
 18 |             height: 500px;
 19 |             margin:0 auto;
 20 |         }
 21 | 
 22 |         .nav-buttons-container {
 23 |             display: flex;
 24 |             justify-content: space-between;
 25 |             border: 1px solid #ccc;
 26 |             margin: 10px;
 27 |         }
 28 | 
 29 |         .description {
 30 |             border: 1px solid #ccc;
 31 |             padding: 10px;
 32 |         }
 33 |         .butti{
 34 |             display: flex;
 35 |             justify-content: space-between;
 36 |             width: 700px;
 37 |             position:relative ;
 38 |             top: 250px;
 39 |             margin:0 auto;
 40 |             
 41 |         }
 42 |     </style>
 43 | </head>
 44 | <body>
 45 |     <div class="butti">
 46 |         <button id="nextButton" class="nav-button">Вперед</button>
 47 |         <button id="prevButton" class="nav-button1">Назад</button>
 48 |     </div>
 49 |     <div id="rotator" class="photo-rotator-container">
 50 |         <h2>Фотографія <span id="imageNumber">x</span> з <span id="totalImages">x</span></h2>
 51 |         <img id="photo" class="photo-rotator-image" src="">
 52 |         <div class="description">
 53 |             <p id="title">Заголовок</p>
 54 |             <p id="description">Опис фото</p>
 55 |         </div>
 56 |     </div>
 57 | 
 58 |     <script>
 59 |         function initPhotoRotator(divId, imagesArray) {
 60 |             const container = document.getElementById(divId);
 61 |             const imageCount = imagesArray.length;
 62 |             let currentIndex = 0;
 63 | 
 64 |             const imageElement = document.getElementById('photo');
 65 |             const imageNumberElement = document.getElementById('imageNumber');
 66 |             const totalImagesElement = document.getElementById('totalImages');
 67 |             const titleElement = document.getElementById('title');
 68 |             const descriptionElement = document.getElementById('description');
 69 | 
 70 |             const prevButton = document.getElementById('prevButton');
 71 |             const nextButton = document.getElementById('nextButton');
 72 | 
 73 |             function updatePhotoRotator() {
 74 |                 const currentImage = imagesArray[currentIndex];
 75 |                 imageElement.src = currentImage.path;
 76 |                 imageNumberElement.textContent = currentIndex + 1;
 77 |                 totalImagesElement.textContent = imageCount;
 78 |                 titleElement.textContent = currentImage.title;
 79 |                 descriptionElement.textContent = currentImage.description;
 80 | 
 81 |                 if (currentIndex === 0) {
 82 |                     prevButton.style.display = 'none';
 83 |                 } else {
 84 |                     prevButton.style.display = 'block';
 85 |                 }
 86 |                 if (currentIndex === imageCount - 1) {
 87 |                     nextButton.style.display = 'none';
 88 |                 } else {
 89 |                     nextButton.style.display = 'block';
 90 |                 }
 91 |             }
 92 | 
 93 |             prevButton.addEventListener('click', () => {
 94 |                 if (currentIndex > 0) {
 95 |                     currentIndex--;
 96 |                     updatePhotoRotator();
 97 |                 }
 98 |             });
 99 | 
100 |             nextButton.addEventListener('click', () => {
101 |                 if (currentIndex < imageCount - 1) {
102 |                     currentIndex++;
103 |                     updatePhotoRotator();
104 |                 }
105 |             });
106 | 
107 |             updatePhotoRotator();
108 |         }
109 | 
110 |         const imagesArray = [
111 |             {
112 |                 path: 'images/001.jpg',
113 |                 title: 'ауд. 108',
114 |                 description: 'Parfumes amazing',
115 |             },
116 |             {
117 |                 path: 'images/002.jpg',
118 |                 title: 'ауд. 103-а',
119 |                 description: 'Parfumes amazing',
120 |             },
121 |             {
122 |                 path: 'images/003.jpg',
123 |                 title: 'ауд. 104',
124 |                 description: 'Parfumes amazing',
125 |             },
126 |         ];
127 | 
128 |         initPhotoRotator('rotator', imagesArray);
129 |     </script>
130 | </body>
131 | </html>
132 | 


--------------------------------------------------------------------------------