|
64 | 64 | </body> |
65 | 65 |
|
66 | 66 | <script> |
67 | | - "use strict"; |
68 | | - // Код писать здесь |
69 | | - console.log("It works!"); |
| 67 | + |
| 68 | +const nameInput = document.querySelector('.add-form-name'); |
| 69 | +const textInput = document.querySelector('.add-form-text'); |
| 70 | +const addButton = document.querySelector('.add-form-button'); |
| 71 | +const commentsList = document.querySelector('.comments'); |
| 72 | + |
| 73 | +function getCurrentDateTime() { |
| 74 | + const now = new Date(); |
| 75 | + const day = String(now.getDate()).padStart(2, '0'); |
| 76 | + const month = String(now.getMonth() + 1).padStart(2, '0'); |
| 77 | + const year = String(now.getFullYear()).slice(-2); |
| 78 | + const hours = String(now.getHours()).padStart(2, '0'); |
| 79 | + const minutes = String(now.getMinutes()).padStart(2, '0'); |
| 80 | + |
| 81 | + return `${day}.${month}.${year} ${hours}:${minutes}`; |
| 82 | +} |
| 83 | + |
| 84 | +function addNewComment() { |
| 85 | + const name = nameInput.value.trim(); |
| 86 | + const text = textInput.value.trim(); |
| 87 | + |
| 88 | + if (!name || !text) { |
| 89 | + alert('Пожалуйста, заполните все поля'); |
| 90 | + return; |
| 91 | + } |
| 92 | + |
| 93 | + const newComment = ` |
| 94 | + <li class="comment"> |
| 95 | + <div class="comment-header"> |
| 96 | + <div>${name}</div> |
| 97 | + <div>${getCurrentDateTime()}</div> |
| 98 | + </div> |
| 99 | + <div class="comment-body"> |
| 100 | + <div class="comment-text"> |
| 101 | + ${text} |
| 102 | + </div> |
| 103 | + </div> |
| 104 | + <div class="comment-footer"> |
| 105 | + <div class="likes"> |
| 106 | + <span class="likes-counter">0</span> |
| 107 | + <button class="like-button"></button> |
| 108 | + </div> |
| 109 | + </div> |
| 110 | + </li> |
| 111 | + `; |
| 112 | + |
| 113 | + commentsList.innerHTML += newComment; |
| 114 | + nameInput.value = ''; |
| 115 | + textInput.value = ''; |
| 116 | +} |
| 117 | + |
| 118 | +addButton.addEventListener('click', addNewComment); |
| 119 | + |
| 120 | +nameInput.addEventListener('input', function() { |
| 121 | + console.log('Имя изменено:', this.value); |
| 122 | +}); |
| 123 | + |
| 124 | +textInput.addEventListener('input', function() { |
| 125 | + console.log('Комментарий изменен:', this.value); |
| 126 | +}); |
| 127 | + |
| 128 | +textInput.addEventListener('keypress', function(e) { |
| 129 | + if (e.key === 'Enter' && !e.shiftKey) { |
| 130 | + e.preventDefault(); |
| 131 | + addNewComment(); |
| 132 | + } |
| 133 | +}); |
| 134 | + |
70 | 135 | </script> |
71 | 136 | </html> |
0 commit comments