commit

EkaterinaBolvakina · Apr 25, 2024 · c5d4ea0 · c5d4ea0
1 parent 28ad471
commit c5d4ea0
Show file tree

Hide file tree

Showing 9 changed files with 473 additions and 0 deletions.
diff --git a/Lesson20/Homework/audio/audiocrowd_free_track_83_smooth-chilling-al.mp3 b/Lesson20/Homework/audio/audiocrowd_free_track_83_smooth-chilling-al.mp3
diff --git a/Lesson20/Homework/index.html b/Lesson20/Homework/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="./index.js" defer></script>
+    <link rel="stylesheet" href="./style.css">
+    <title>Timer</title>
+</head>
+
+<body>
+    <div class="wrapper">
+        <div class="titleTime">
+            <div id="minDiv">Minutes</div>
+            <div id="secDiv">Seconds</div>
+        </div>
+        <div id="timer">
+            <input id="inputMin" type="text" placeholder="00" > :
+            <input id="inputSec" type="text" placeholder="00">
+        </div>
+        <div>
+            <button id="startBtn">Start</button>
+        </div>
+    </div>
+    <audio id="audio" src="./audio/audiocrowd_free_track_83_smooth-chilling-al.mp3"></audio>
+
+</body>
+
+</html>
diff --git a/Lesson20/Homework/index.js b/Lesson20/Homework/index.js
@@ -0,0 +1,60 @@
+let countDown;
+const audio = document.getElementById('audio');
+
+addStartListener();
+
+function addStartListener() {
+    startBtn.addEventListener('click', start);
+}
+
+function backToStart() {
+    clearInterval(countDown);
+    audio.pause();
+    document.getElementById('minDiv').innerHTML = 'Minutes';
+    document.getElementById('secDiv').innerHTML = 'Seconds';
+    document.getElementById('timer').innerHTML =
+        '<input id="inputMin" type="text" placeholder="00" > : <input id="inputSec" type="text" placeholder="00">';
+    startBtn.innerHTML = 'Start';
+    startBtn.removeEventListener('click', backToStart);
+    addStartListener();
+}
+
+function start() {
+    const countMin = parseInt(document.getElementById('inputMin').value) || 0;
+    const countSec = parseInt(document.getElementById('inputSec').value) || 0;
+
+
+    const totalSeconds = countMin * 60 + countSec;
+
+    if (totalSeconds === 0) {
+        alert('Please enter a valid time.');
+        return;
+    }
+
+    const startTime = new Date();
+    const stopTime = startTime.setSeconds(startTime.getSeconds() + totalSeconds);
+
+    countDown = setInterval(() => {
+        const now = new Date().getTime();
+        const remain = stopTime - now;
+
+        let min = Math.floor((remain % (1000 * 60 * 60)) / (1000 * 60));
+        let sec = Math.floor((remain % (1000 * 60)) / 1000);
+        sec = sec < 10 ? "0" + sec : sec;
+        min = min < 10 ? "0" + min : min;
+
+        document.getElementById('timer').innerHTML = min + ":" + sec;
+
+        if (remain < 0) {
+            clearInterval(countDown);
+            document.getElementById('minDiv').innerHTML = '';
+            document.getElementById('secDiv').innerHTML = '';
+            document.getElementById('timer').innerHTML = 'Finish!';
+            audio.play();
+
+            startBtn.innerHTML = 'Back to start';
+            startBtn.removeEventListener('click', start);
+            startBtn.addEventListener('click', backToStart);
+        }
+    }, 1000);
+}
diff --git a/Lesson20/Homework/readMe.txt b/Lesson20/Homework/readMe.txt
@@ -0,0 +1,17 @@
+Homework Lesson 20:
+Task
+Create a simple timer on a web page that counts backwards from 60 seconds. 
+When it reaches 0 seconds, the timer should stop.
+Stylise it
+
+-------------------- DE --------------------
+Aufgabe
+Erstellen Sie einen einfachen Timer auf einer Webseite, der von 60 Sekunden rückwärts zählt. 
+Wenn der Timer 0 Sekunden erreicht, soll er anhalten.
+Gestalte ihn
+
+-------------------- RU --------------------
+Задание
+Создайте простой таймер на веб-странице, который будет отсчитывать время назад от 60 секунд. 
+При достижении 0 секунд таймер должен остановиться.
+Стилизуйте его
diff --git a/Lesson20/Homework/style.css b/Lesson20/Homework/style.css
@@ -0,0 +1,68 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+.wrapper {
+    width: 100%;
+    height: 1000px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: #2b6e7edf;
+    color: #f4f8fa;
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+}
+
+.titleTime {
+    margin-top: 100px;
+    height: 60px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+#minDiv,
+#secDiv {
+    margin-left: 50px;
+    margin-right: 50px;
+    font-size: 190%;
+    color: #d5e1de;
+}
+
+#timer {
+    width: 240px;
+    font-size: 710%;
+    font-weight: bolder;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+}
+
+#inputMin,
+#inputSec {
+    margin-top: -15px;
+    margin-left: 10px;
+    margin-right: 10px;
+    text-align: center;
+    width: 150px;
+    height: 130px;
+    font-size: 100%;
+    background-color: #2b6e7edf;
+    border-radius: 3px;
+    border: solid 0px;
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+}
+
+#startBtn {
+    margin-top: 50px;
+    width: 200px;
+    height: 70px;
+    font-size: 210%;
+    font-weight: lighter;
+    border-radius: 3px;
+    border: solid 0px;
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+}
diff --git a/Lesson20/Lesson_Code/destruct/index.js b/Lesson20/Lesson_Code/destruct/index.js
@@ -0,0 +1,174 @@
+const person = {
+    name: 'bob',
+    age: 22
+}
+
+// const name = person.name;
+// const age = person.age;
+
+// деструктуризация объекта
+// const { xxx = 'test', name, age } = person;
+
+// console.log(name);
+// console.log(age);
+// console.log(xxx);
+
+// деструктуризация в аргументах функции
+// const foo = ({ firstArg, secondArg }) => {
+//     console.log(`аргумент1: ${firstArg} аргумент2: ${secondArg}`);
+// }
+
+// foo({ firstArg: 'xxx', secondArg: 'yyy' });
+
+// const person2 = {
+//     name: 'bob',
+//     age: 22,
+//     car: {
+//         carName: 'BMW',
+//         speed: 300
+//     }
+// }
+
+// // const carName = person2.car.carName;
+
+// // деструктуризация вложенных объектов
+// const { name, age, car: { carName, speed } } = person2;
+
+// console.log(carName);
+
+// const person2 = {
+//     name: 'bob',
+//     age: 22,
+//     car: {
+//         carName: 'BMW',
+//         speed: 300
+//     }
+// }
+
+// // деструктуризация вложенных объектов вариант 2
+// const { car } = person2;
+// console.log(car);
+
+// const person2 = {
+//     name: 'bob',
+//     age: 22,
+// }
+
+
+// const name = 'test';
+
+// // переименование переменной при деструктуризации
+// const { name: pName } = person2;
+// console.log(pName);
+
+// const person2 = {
+//     // name: 'bob',
+//     age: 22,
+// }
+
+
+// const name = 'test';
+
+// // переименование переменной и задание значения по умолчанию
+// const { name: pName = 'newName' } = person2;
+// console.log(pName);
+
+// const person2 = {
+//     name: 'bob',
+//     age: 22,
+//     salary: 3000,
+//     lastName: 'ivanov',
+// }
+
+// const { name, ...rest } = person2;
+
+// console.log(name);
+// console.log(rest);
+
+// const person2 = {
+//     name: 'bob',
+//     age: 22,
+// }
+
+// const person3 = {
+//     salary: 3000,
+//     lastName: 'ivanov',
+// }
+
+// // создали объект на основе свойств двух других объектов способ 1
+// const ob1 = Object.assign({}, person2, person3);
+
+// // создали объект на основе свойств двух других объектов способ 2 через рест оператор
+// const ob2 = {
+//     ...person2,
+//     ...person3,
+//     test: 'test'
+// }
+
+// console.log(ob2);
+
+
+// деструктуризация массивов
+// const arr = [1, 2];
+
+// const [ first111, second111 ] = arr;
+
+// console.log(first111);
+
+// const arr = [1, 2, 3, 4];
+
+// const [first111, ...rest] = arr;
+
+// console.log(first111);
+// console.log(rest);
+
+
+// const arr = [];
+
+// // значение при деструктуризации
+// const [first111 = 10, ...rest] = arr;
+
+// console.log(first111);
+// console.log(rest);
+
+// --------------------
+
+// const name = 'bob';
+// const age = 20;
+
+// const pers = {
+//     name,
+//     age
+// }
+
+// console.log(pers);
+
+// const persCreator = ({ name, age }) => {
+//     const newPers = {
+//         name,
+//         age
+//     }
+//     return newPers;
+// }
+
+// const name = 'bob';
+// const age = 55;
+
+// const test = persCreator({ name, age });
+// console.log(test);
+
+// значения по умолчанию функций
+// const foo = (a = 0, b = 0) => {
+//     console.log(a + b);
+// }
+
+// foo();
+
+// const foo = (...arg111) => {
+//     console.log(arg111[0]);
+//     console.log(arg111);
+// }
+
+// foo(1, 2, 3, 4, 5);
+
+
diff --git a/Lesson20/Lesson_Code/index.html b/Lesson20/Lesson_Code/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="./index.js" defer></script>
+</head>
+
+<body>
+
+</body>
+
+</html>