diff --git a/README.md b/README.md deleted file mode 100644 index 52258b5..0000000 --- a/README.md +++ /dev/null @@ -1 +0,0 @@ -# JavaScript 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/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/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/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/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 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/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/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/task03a.html b/task03a.html new file mode 100644 index 0000000..5061d6e --- /dev/null +++ b/task03a.html @@ -0,0 +1,17 @@ + + + + + Document + + + + + + + + + \ 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 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 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