From 18d3472b92584c6981ceafde5e7f7d9141a98baf Mon Sep 17 00:00:00 2001 From: factor-feerist Date: Tue, 2 Apr 2024 15:39:48 +0300 Subject: [PATCH 01/11] first task done --- index.html | 3 ++- index.js | 5 ++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 846cf93..2966522 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,8 @@ - + + \ No newline at end of file diff --git a/index.js b/index.js index dd50919..c797ecf 100644 --- a/index.js +++ b/index.js @@ -4,4 +4,7 @@ const element = document.querySelector('.myElement'); element.style.color = 'red'; element.style.width = '300px'; -*/ \ No newline at end of file +*/ +for (const logo of document.querySelectorAll('.logo')) { + logo.style.width < logo.style.height ? logo.style.height = '100px' : logo.style.width = '100px'; +} From b32719f01b06577cb333bf246890145eb7416deb Mon Sep 17 00:00:00 2001 From: Evgeny Lapshin Date: Tue, 2 Apr 2024 18:11:59 +0500 Subject: [PATCH 02/11] added modal --- index.html | 4 ++++ index.js | 6 ++++++ styles.css | 22 ++++++++++++++++++++++ 3 files changed, 32 insertions(+) diff --git a/index.html b/index.html index 2966522..b932d09 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,10 @@ + + +

Модальное окно

+ \ No newline at end of file diff --git a/index.js b/index.js index c797ecf..0dd0a75 100644 --- a/index.js +++ b/index.js @@ -8,3 +8,9 @@ for (const logo of document.querySelectorAll('.logo')) { logo.style.width < logo.style.height ? logo.style.height = '100px' : logo.style.width = '100px'; } + +const modalElement = document.getElementById('modal'); +modalElement.showModal(); + +const closeButton = document.getElementById('close'); +closeButton.addEventListener('click', () => modalElement.close()); diff --git a/styles.css b/styles.css index e69de29..8ff4493 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,22 @@ +#modal { + width: 320px; + position: relative; +} + +#modal::backdrop { + background-image: linear-gradient( + 45deg, + magenta, + rebeccapurple, + dodgerblue, + green + ); + opacity: 0.75; +} + +#close { + position: absolute; + top: 5%; + right: 2%; + background-color: red; +} \ No newline at end of file From afda3f74171a5d0d6c2f6b009d85b8c90a6ec0d3 Mon Sep 17 00:00:00 2001 From: Alexey_Dzhevello Date: Tue, 2 Apr 2024 18:12:08 +0500 Subject: [PATCH 03/11] made somehting --- index.html | 1 + styles.css | 21 +++++++++++++++++++++ 2 files changed, 22 insertions(+) diff --git a/index.html b/index.html index 2966522..17062eb 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,7 @@ +
Loading...
\ No newline at end of file diff --git a/styles.css b/styles.css index e69de29..726c63a 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,21 @@ +.progress{ + height:30px; + width:3000px; + background-color:lightgray; + position:relative; + z-index: -2; + text-align: center; + text-justify: inter-cluster; + font-size: 150%; + } + + .progress::before{ + position:absolute; + z-index: -1; + height: 100%; + background:red; + content:''; + width: 10%; + display:flex; + justify-content:flex-end; + } \ No newline at end of file From 3bc94157f4cd7b5f87b3a2b94c70361f678fe288 Mon Sep 17 00:00:00 2001 From: Evgeny Lapshin Date: Tue, 2 Apr 2024 18:14:59 +0500 Subject: [PATCH 04/11] changed background color --- styles.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/styles.css b/styles.css index 8ff4493..56d97f9 100644 --- a/styles.css +++ b/styles.css @@ -4,14 +4,15 @@ } #modal::backdrop { - background-image: linear-gradient( + /* background-image: linear-gradient( 45deg, magenta, rebeccapurple, dodgerblue, green ); - opacity: 0.75; + opacity: 0.75; */ + background-color: rgba(0, 0, 0, 0.5); } #close { From 63fa803036e943848bf4415aba1981ba7fb2ecf6 Mon Sep 17 00:00:00 2001 From: Alexey_Dzhevello Date: Tue, 2 Apr 2024 18:19:20 +0500 Subject: [PATCH 05/11] merging artifacts fixed --- index.html | 1 + styles.css | 22 ++++++++++++++++++++++ 2 files changed, 23 insertions(+) diff --git a/index.html b/index.html index d6d834b..4e5ee80 100644 --- a/index.html +++ b/index.html @@ -12,6 +12,7 @@

Модальное окно

+
Loading...
 diff --git a/styles.css b/styles.css index 8ff4493..65320be 100644 --- a/styles.css +++ b/styles.css @@ -19,4 +19,26 @@ top: 5%; right: 2%; background-color: red; +} + +.progress{ + height:30px; + width:500px; + background-color:lightgray; + position:relative; + z-index: -2; + text-align: center; + text-justify: inter-cluster; + font-size: 150%; +} + +.progress::before{ + position:absolute; + z-index: -1; + height: 100%; + background:red; + content:''; + width: 10%; + display:flex; + justify-content:flex-end; } \ No newline at end of file From e92dc0493dea353527d0aa56bd74062110101bc2 Mon Sep 17 00:00:00 2001 From: Evgeny Lapshin Date: Tue, 2 Apr 2024 18:29:50 +0500 Subject: [PATCH 06/11] changed position style --- styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles.css b/styles.css index 56d97f9..e83369a 100644 --- a/styles.css +++ b/styles.css @@ -1,6 +1,6 @@ #modal { width: 320px; - position: relative; + position: fixed; } #modal::backdrop { From 32936eb77ae8c1d1b3d5d9fe84b00b0e7b8b9a0d Mon Sep 17 00:00:00 2001 From: factor-feerist Date: Tue, 2 Apr 2024 16:30:17 +0300 Subject: [PATCH 07/11] fancy 4th task --- index.js | 8 ++++++++ styles.css | 7 +++---- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/index.js b/index.js index 0dd0a75..71125b5 100644 --- a/index.js +++ b/index.js @@ -14,3 +14,11 @@ modalElement.showModal(); const closeButton = document.getElementById('close'); closeButton.addEventListener('click', () => modalElement.close()); + +let progress = 0; +const bar = document.querySelector('.progress'); +let timerId = setInterval(() => { + progress += 1; + bar.style.width = `${progress}%`; +}, 30); +setTimeout(() => { clearInterval(timerId); }, 3000); \ No newline at end of file diff --git a/styles.css b/styles.css index 638f6eb..8feb924 100644 --- a/styles.css +++ b/styles.css @@ -4,15 +4,14 @@ } #modal::backdrop { - /* background-image: linear-gradient( + background-image: linear-gradient( 45deg, magenta, rebeccapurple, dodgerblue, green ); - opacity: 0.75; */ - background-color: rgba(0, 0, 0, 0.5); + opacity: 0.75; } #close { @@ -24,7 +23,7 @@ .progress{ height:30px; - width:500px; + width:100%; background-color:lightgray; position:relative; z-index: -2; From a8c1ec5ac1454a30df4f107625524024760bb85b Mon Sep 17 00:00:00 2001 From: Alexey_Dzhevello Date: Tue, 2 Apr 2024 18:38:06 +0500 Subject: [PATCH 08/11] fixed progress bar --- index.html | 4 ++-- index.js | 17 ++++++++++------- styles.css | 15 +++++++++++++-- 3 files changed, 25 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 4e5ee80..c333035 100644 --- a/index.html +++ b/index.html @@ -8,11 +8,11 @@ -
Loading...
+
Loading...

Модальное окно

-
Loading...
+
Loading...
diff --git a/index.js b/index.js index 71125b5..c47e3a3 100644 --- a/index.js +++ b/index.js @@ -15,10 +15,13 @@ modalElement.showModal(); const closeButton = document.getElementById('close'); closeButton.addEventListener('click', () => modalElement.close()); -let progress = 0; -const bar = document.querySelector('.progress'); -let timerId = setInterval(() => { - progress += 1; - bar.style.width = `${progress}%`; -}, 30); -setTimeout(() => { clearInterval(timerId); }, 3000); \ No newline at end of file + +const bars = document.querySelectorAll('.progress .bar'); +for (const bar of bars){ + let progress = 0; + let timerId = setInterval(() => { + progress += 1; + bar.style.width = `${progress}%`; + }, 30); + setTimeout(() => { clearInterval(timerId); }, 3000); +} diff --git a/styles.css b/styles.css index 955a5fc..bc4f064 100644 --- a/styles.css +++ b/styles.css @@ -31,8 +31,19 @@ text-justify: inter-cluster; font-size: 150%; } + +.progress .bar { + position:absolute; + z-index: -1; + height: 100%; + background:red; + content:''; + width: 10%; + display:flex; + justify-content:flex-end; +} -.progress::before{ +/* .progress::before{ position:absolute; z-index: -1; height: 100%; @@ -41,4 +52,4 @@ width: 10%; display:flex; justify-content:flex-end; -} \ No newline at end of file +} */ \ No newline at end of file From 579598de5c2c8bc0040d24fbd1216ed77ebd8d75 Mon Sep 17 00:00:00 2001 From: factor-feerist Date: Tue, 2 Apr 2024 16:46:29 +0300 Subject: [PATCH 09/11] 4 task done --- index.html | 1 - index.js | 13 +++++++------ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index c333035..a7ea145 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,6 @@ -
Loading...

Модальное окно

diff --git a/index.js b/index.js index c47e3a3..657db7e 100644 --- a/index.js +++ b/index.js @@ -16,12 +16,13 @@ const closeButton = document.getElementById('close'); closeButton.addEventListener('click', () => modalElement.close()); -const bars = document.querySelectorAll('.progress .bar'); -for (const bar of bars){ - let progress = 0; - let timerId = setInterval(() => { +const bar = document.querySelector('.progress .bar'); +let progress = 0; +let iter = () => { + if (progress !== 100) { progress += 1; bar.style.width = `${progress}%`; - }, 30); - setTimeout(() => { clearInterval(timerId); }, 3000); + let timerId = setTimeout(iter, 30); + } } +setTimeout(iter, 30) From 463b28723c273aace27fac49addbeb995f2a0374 Mon Sep 17 00:00:00 2001 From: Evgeny Lapshin Date: Tue, 2 Apr 2024 19:13:01 +0500 Subject: [PATCH 10/11] added accordeon --- index.html | 22 ++++++++++++++++++++ index.js | 8 ++++++++ styles.css | 60 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 89 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index a7ea145..d5de512 100644 --- a/index.html +++ b/index.html @@ -12,6 +12,28 @@

Модальное окно

Loading...
+
+
+

Аккордеон

+
+
+
Первое
+
Контент1
+
+
+
+
Второе
+
Контент2
+
+
+
+
Третье
+
Контент3
+
+
+
+ + diff --git a/index.js b/index.js index 657db7e..24c7f75 100644 --- a/index.js +++ b/index.js @@ -26,3 +26,11 @@ let iter = () => { } } setTimeout(iter, 30) + +const accordion = document.getElementsByClassName('container'); + +for (i=0; i Date: Tue, 2 Apr 2024 19:41:09 +0500 Subject: [PATCH 11/11] changed structure --- index.html | 38 ++++++++++++++++++++++---------------- index.js | 6 +++--- styles.css | 54 +----------------------------------------------------- 3 files changed, 26 insertions(+), 72 deletions(-) diff --git a/index.html b/index.html index d5de512..5002d67 100644 --- a/index.html +++ b/index.html @@ -14,22 +14,28 @@
Loading...
-

Аккордеон

-
-
-
Первое
-
Контент1
-
-
-
-
Второе
-
Контент2
-
-
-
-
Третье
-
Контент3
-
+ +
+ Первое +

Эта разница, вероятно, помогает объяснить, почему бобовая руда своеобразна. + Иольдиевая глина благоприятно переоткладывает железистый перенос, где на поверхность выведены + кристаллические структуры фундамента. +

+
+
+ Второе +

Альпийская складчатость слагает отсортированный ийолит-уртит, поскольку непосредственно + мантийные струи не наблюдаются. Происхождение, но если принять для простоты некоторые докущения, отмыто. + Базальтовый слой занимает плейстоцен. +

+
+
+ Третье +

Несомненный интерес представляет и тот факт, что минерализация складчата. + Криптархей изменяет девонский грязевой вулкан. Извержение разогревает фирн. Отличительной чертой поверхности, + сложенной излияниями очень текучей лавы, является то, что надвиг изменяет кремнистый сдвиг. +

+
diff --git a/index.js b/index.js index 24c7f75..7eb8323 100644 --- a/index.js +++ b/index.js @@ -30,7 +30,7 @@ setTimeout(iter, 30) const accordion = document.getElementsByClassName('container'); for (i=0; i