From 869253b175a192a96cc97ef20891df00481e0839 Mon Sep 17 00:00:00 2001 From: Alex Date: Mon, 16 Mar 2020 14:03:18 +0300 Subject: [PATCH 1/7] =?UTF-8?q?=D0=92=D1=8B=D0=BF=D0=BE=D0=BB=D0=BD=D0=B5?= =?UTF-8?q?=D0=BD=D0=BE=2003=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- style03a.css | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 style03a.css diff --git a/style03a.css b/style03a.css new file mode 100644 index 0000000..160a044 --- /dev/null +++ b/style03a.css @@ -0,0 +1,34 @@ +.wrap{ + width: 400px; + padding: 10px; + background: rgb(236,236,236); + position: fixed; + top: 15%; + left: calc(50% - 210px); + box-shadow: 0 0 10px black; +} + +.hidden{ + display: none; +} + +span{ + position: absolute; + right: -15px; + top: -15px; + display: flex; + align-items: center; + justify-content: center; + width: 30px; + height: 30px; + border-radius: 50%; + background: lightgrey; + font-size: 34px; + cursor: pointer; + transition: 0.5s; +} + +span:honer{ + background: grey; + color: white; +} \ No newline at end of file From 345ccd35557bbbeb0f375392b5a83fcf143efdfe Mon Sep 17 00:00:00 2001 From: Alex Date: Mon, 16 Mar 2020 14:03:38 +0300 Subject: [PATCH 2/7] =?UTF-8?q?=D0=92=D1=8B=D0=BF=D0=BE=D0=BB=D0=BD=D0=B5?= =?UTF-8?q?=D0=BD=D0=BE=2003=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- script03a.js | 11 +++++++++++ task03a.html | 17 +++++++++++++++++ 2 files changed, 28 insertions(+) create mode 100644 script03a.js create mode 100644 task03a.html diff --git a/script03a.js b/script03a.js new file mode 100644 index 0000000..24b4496 --- /dev/null +++ b/script03a.js @@ -0,0 +1,11 @@ +const modal = document.querySelector('.wrap') +const closeBtn = document.querySelector('span') +const showBtn = document.querySelector('button') + +closeBtn.addEventListener('click',function(){ + modal.classList.add('hidden'); +}); + +showBtn.addEventListener('click',function(){ + modal.classList.remove('hidden'); +}); \ No newline at end of file diff --git a/task03a.html b/task03a.html new file mode 100644 index 0000000..b290cee --- /dev/null +++ b/task03a.html @@ -0,0 +1,17 @@ + + + + + Document + + + + + + + + + \ No newline at end of file From 37f14dce2948bd43d73e1183e2b82c4bc5916fca Mon Sep 17 00:00:00 2001 From: Alex Date: Mon, 16 Mar 2020 14:04:25 +0300 Subject: [PATCH 3/7] =?UTF-8?q?=D1=83=D0=B4=D0=B0=D0=BB=D0=B8=D0=BB=20?= =?UTF-8?q?=D1=80=D0=B8=D0=B4=D0=BC=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 1 - 1 file changed, 1 deletion(-) delete mode 100644 README.md diff --git a/README.md b/README.md deleted file mode 100644 index 52258b5..0000000 --- a/README.md +++ /dev/null @@ -1 +0,0 @@ -# JavaScript From 1f358be5c72063b28ca26872d2e8ce261ba047e5 Mon Sep 17 00:00:00 2001 From: Alex Date: Mon, 16 Mar 2020 15:24:13 +0300 Subject: [PATCH 4/7] =?UTF-8?q?=D0=B8=D0=B7=D0=BC=D0=B5=D0=BD=D0=B8=D0=BB?= =?UTF-8?q?=20=D0=BB=D0=B8=D0=BD=D0=BA=D0=B8=20=D0=BD=D0=B0=20=D1=84=D0=B0?= =?UTF-8?q?=D0=B9=D0=BB=D1=8B=2003=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- task03a.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/task03a.html b/task03a.html index b290cee..5061d6e 100644 --- a/task03a.html +++ b/task03a.html @@ -3,7 +3,7 @@ Document - + @@ -12,6 +12,6 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores eligendi itaque magni laborum blanditiis, tempore doloribus eos delectus iste dolorum explicabo sapiente saepe ducimus dicta maiores, hic excepturi cum soluta. - + \ No newline at end of file From 1fb8b6c30784c9bbe46d22b442181f47441594e6 Mon Sep 17 00:00:00 2001 From: Alex Date: Mon, 16 Mar 2020 15:24:49 +0300 Subject: [PATCH 5/7] =?UTF-8?q?=D1=81=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB=2003b?= =?UTF-8?q?=20=D0=BD=D0=BE=20=D0=B0=D0=BD=D0=B8=D0=BC=D0=B0=D1=86=D0=B8?= =?UTF-8?q?=D1=8F=20=D1=82=D0=B0=D0=BA=20=D0=B8=20=D0=BD=D0=B5=20=D0=B7?= =?UTF-8?q?=D0=B0=D1=80=D0=B0=D0=B1=D0=BE=D1=82=D0=B0=D0=BB=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- script03b.js | 17 +++++++++++++++++ style03b.css | 34 ++++++++++++++++++++++++++++++++++ task03b.html | 18 ++++++++++++++++++ 3 files changed, 69 insertions(+) create mode 100644 script03b.js create mode 100644 style03b.css create mode 100644 task03b.html diff --git a/script03b.js b/script03b.js new file mode 100644 index 0000000..d9bb295 --- /dev/null +++ b/script03b.js @@ -0,0 +1,17 @@ +'use scrict' +let modal = document.querySelector('.wrap') +let closeBtn = document.querySelector('span') +let showBtn = document.querySelector('button') + +closeBtn.addEventListener('click',function(){ + modal.classList.remove('rollIn'); + modal.classList.add('animated','rollOut') + setTimeout(function(){ + modal.classList.add('hidden'); + },1000) +}); + +showBtn.addEventListener('click',function(){ + modal.classList.remove('rollOut','hidden'); + modal.classList.add('animated','rollIn') +}); \ No newline at end of file diff --git a/style03b.css b/style03b.css new file mode 100644 index 0000000..160a044 --- /dev/null +++ b/style03b.css @@ -0,0 +1,34 @@ +.wrap{ + width: 400px; + padding: 10px; + background: rgb(236,236,236); + position: fixed; + top: 15%; + left: calc(50% - 210px); + box-shadow: 0 0 10px black; +} + +.hidden{ + display: none; +} + +span{ + position: absolute; + right: -15px; + top: -15px; + display: flex; + align-items: center; + justify-content: center; + width: 30px; + height: 30px; + border-radius: 50%; + background: lightgrey; + font-size: 34px; + cursor: pointer; + transition: 0.5s; +} + +span:honer{ + background: grey; + color: white; +} \ No newline at end of file diff --git a/task03b.html b/task03b.html new file mode 100644 index 0000000..6dc03c5 --- /dev/null +++ b/task03b.html @@ -0,0 +1,18 @@ + + + + + Document + + + + + + + + + + \ No newline at end of file From a46f7298d41a7b1900c7e73aa661a35935b600a6 Mon Sep 17 00:00:00 2001 From: Alex Date: Mon, 16 Mar 2020 18:54:09 +0300 Subject: [PATCH 6/7] =?UTF-8?q?=D1=81=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB=20task?= =?UTF-8?q?04?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- script04.js | 42 ++++++++++++++++++++++++++++++++++++++++++ style04.css | 18 ++++++++++++++++++ task04.html | 30 ++++++++++++++++++++++++++++++ 3 files changed, 90 insertions(+) create mode 100644 script04.js create mode 100644 style04.css create mode 100644 task04.html diff --git a/script04.js b/script04.js new file mode 100644 index 0000000..23f0715 --- /dev/null +++ b/script04.js @@ -0,0 +1,42 @@ +const buttons = document.querySelectorAll('button') +buttons.forEach(function(button){ + button.addEventListener('click',function(event){ + handleClick(event) + }) +}) +/** +* Функция обрабатывает клик по кнопке в карточке товара и попеременно вызывает +* функции для показа или скрытия текста о товаре. +* @param {MouseEvent} clickedButtonEvent +*/ +function handleClick(clickedButtonEvent){ + const cardNode = clickedButtonEvent.target.parentNode; + + const card ={ + wrap: cardNode, + img: cardNode.querySelector('img'), + productName: cardNode.querySelector('.productName'), + button: cardNode.querySelector('button') + } + + const textOnButton = card.button.innerText; + if(textOnButton ==='Подробнее'){ + showMoreText(card); + } else if(textOnButton === 'Отмена'){ + hideMoreText(card); + } + +} + +function showMoreText(card){ + card.img.style.display = 'none'; + const text = 'Описалово картинки'; + card.productName.insertAdjacentHTML('afterend', `
${text}
`) + card.button.innerText ='Отмена'; +} + +function hideMoreText(card){ + card.img.style.display = 'block'; + card.wrap.querySelector('.desc').remove(); + card.button.innerText ='Подробнее'; +} \ No newline at end of file diff --git a/style04.css b/style04.css new file mode 100644 index 0000000..6d2963f --- /dev/null +++ b/style04.css @@ -0,0 +1,18 @@ +body{ + display: grid; + grid-template-columns: repeat(3,150px); + grid-gap: 20px; +} + +.product{ + width: 150px; +} + +img{ + display: block; +} + +button{ + margin-top: 15px; + display: block; +} \ No newline at end of file diff --git a/task04.html b/task04.html new file mode 100644 index 0000000..b063c1a --- /dev/null +++ b/task04.html @@ -0,0 +1,30 @@ + + + + + Document + + + +
+
Product 1 name
+ + + +
+
+
Product 2 name
+ + + +
+
+
Product 3 name
+ + + +
+ + + + \ No newline at end of file From 840efbf8b197c6c57ba24a753f31ee35610acc6e Mon Sep 17 00:00:00 2001 From: Alex Date: Thu, 19 Mar 2020 11:45:49 +0300 Subject: [PATCH 7/7] =?UTF-8?q?=D1=81=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB=20task?= =?UTF-8?q?05?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- script05.js | 76 ++++++++++++++++++++++++++++++++++++++++++++++++++++ styles05.css | 23 ++++++++++++++++ task05.html | 11 ++++++++ 3 files changed, 110 insertions(+) create mode 100644 script05.js create mode 100644 styles05.css create mode 100644 task05.html diff --git a/script05.js b/script05.js new file mode 100644 index 0000000..4495ede --- /dev/null +++ b/script05.js @@ -0,0 +1,76 @@ +let app = { + config: { + rows: [8,7,6,5,4,3,2,1], + cols: ['a','b','c','d','e','f','g','h'] + }, + + run(){ + //генерим доску + let board = this.generateBoard(); + //добавляем доску в документ + document.body.innerHTML = board; + + //добавляем колонку с номерами строк + this.insertRowsNumbers(); + //добавляем строку с названием колонок + this.insertColsChars(); + }, + + generateBoard(){ + let board = ''; + let rowStartWidthColor = 'white'; + for(let i = 0;i < this.config.rows.length; i++){ + let row = ''; + row = this.generateRow(rowStartWidthColor,this.config.rows[i]); + if(rowStartWidthColor == 'white'){ + rowStartWidthColor = 'black'; + } else{ + rowStartWidthColor = 'white'; + } + board += row; + } + return `${board}
`; + }, + + generateRow(starWithColor, rowNum){ + let currentColorClass = starWithColor; + let row = ""; + for(let i = 0; i < this.config.cols.length; i++){ + let field = ""; + if(currentColorClass === 'white'){ + field = this.generateField('white', rowNum, this.config.cols[i]); + currentColorClass = 'blackField'; + } else { + field = this.generateField('black', rowNum, this.config.cols[i]); + currentColorClass = 'white'; + } + row += field; + } + return `${row}`; + }, + + generateField(color, rowNum, colChar){ + return ``; + }, + + insertRowsNumbers(){ + let trs =document.querySelectorAll('tr'); + for(let i = 0; i < trs.length; i++){ + let td = document.createElement('td'); + td.innerText = this.config.rows[i]; + trs[i].insertAdjacentElement("afterbegin", td); + } + }, + + insertColsChars(){ + let tr = document.createElement('tr'); + tr.innerHTML += ''; + for(let i = 0; i < this.config.cols.length; i++){ + tr.innerHTML += `${this.config.cols[i]}`; + } + let tbody = document.querySelector('tbody'); + tbody.insertAdjacentElement("beforeend", tr); + } +}; + +app.run() \ No newline at end of file diff --git a/styles05.css b/styles05.css new file mode 100644 index 0000000..e1027cd --- /dev/null +++ b/styles05.css @@ -0,0 +1,23 @@ +table{ + border-collapse: collapse; +} + +td{ + width: 40px; + height: 40px; + border: 1px solid black; + text-align: center; +} +.white{ + background: #FFCF73; +} + +.black{ + background: #7a5000; +} + +tr:last-child td:first-child{ + border-left: none; + border-bottom: none; +} + diff --git a/task05.html b/task05.html new file mode 100644 index 0000000..944576c --- /dev/null +++ b/task05.html @@ -0,0 +1,11 @@ + + + + + Document + + + + + + \ No newline at end of file