diff --git a/index.html b/index.html index 6f14ae14a..9370d5fc2 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ Проект "Комменты" - + @@ -63,9 +63,7 @@ - diff --git a/main.js b/main.js new file mode 100644 index 000000000..80a6b1d9a --- /dev/null +++ b/main.js @@ -0,0 +1,39 @@ +const commentsList = document.querySelector('.comments'); +const nameInput = document.querySelector('.add-form-name'); +const textInput = document.querySelector('.add-form-text'); +const addButton = document.querySelector('.add-form-button'); + +addButton.addEventListener('click', function() { + // проверка на пустые плдя + if (nameInput.value === '' || textInput.value === '') { + alert('Заполните все поля'); + return; + } + + // создание комента + const newComment = document.createElement('li'); + newComment.className = 'comment'; + newComment.innerHTML = ` +
+
${nameInput.value}
+
+
+
+ ${textInput.value} +
+
+
+
+ + +
+
+ `; + + // в начало списка + commentsList.append(newComment); + + // Очищаем поля + nameInput.value = ''; + textInput.value = ''; +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 000000000..4f61cb3a1 --- /dev/null +++ b/style.css @@ -0,0 +1,133 @@ +body { + margin: 0; +} + +.container { + font-family: Helvetica; + color: #ffffff; + display: flex; + flex-direction: column; + align-items: center; + padding-top: 80px; + padding-bottom: 200px; + background: #202020; + min-height: 100vh; +} + +.comments, +.comment { + margin: 0; + padding: 0; + list-style: none; +} + +.comment, +.add-form { + width: 596px; + box-sizing: border-box; + background: radial-gradient(75.42% 75.42% at 50% 42.37%, rgba(53, 53, 53, 0) 22.92%, #7334ea 100%); + filter: drop-shadow(0px 20px 67px rgba(0, 0, 0, 0.08)); + border-radius: 20px; +} + +.comments { + display: flex; + flex-direction: column; + gap: 24px; +} + +.comment { + padding: 48px; +} + +.comment-header { + font-size: 16px; + display: flex; + justify-content: space-between; +} + +.comment-footer { + display: flex; + justify-content: flex-end; +} + +.comment-body { + margin-top: 32px; + margin-bottom: 32px; +} + +.comment-text { + font-size: 32px; +} + +.likes { + display: flex; + align-items: center; +} + +.like-button { + all: unset; + cursor: pointer; +} + +.likes-counter { + font-size: 26px; + margin-right: 8px; +} + +.like-button { + margin-left: 10px; + background-image: url("data:image/svg+xml,%3Csvg width='22' height='20' viewBox='0 0 22 20' fill='none' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M11.11 16.9482L11 17.0572L10.879 16.9482C5.654 12.2507 2.2 9.14441 2.2 5.99455C2.2 3.81471 3.85 2.17984 6.05 2.17984C7.744 2.17984 9.394 3.26975 9.977 4.75204H12.023C12.606 3.26975 14.256 2.17984 15.95 2.17984C18.15 2.17984 19.8 3.81471 19.8 5.99455C19.8 9.14441 16.346 12.2507 11.11 16.9482ZM15.95 0C14.036 0 12.199 0.882834 11 2.26703C9.801 0.882834 7.964 0 6.05 0C2.662 0 0 2.6267 0 5.99455C0 10.1035 3.74 13.4714 9.405 18.5613L11 20L12.595 18.5613C18.26 13.4714 22 10.1035 22 5.99455C22 2.6267 19.338 0 15.95 0Z' fill='%23BCEC30' /%3E%3C/svg%3E"); + background-repeat: no-repeat; + width: 22px; + height: 22px; +} + +.-active-like { + background-image: url("data:image/svg+xml,%3Csvg width='22' height='20' viewBox='0 0 22 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.95 0C14.036 0 12.199 0.882834 11 2.26703C9.801 0.882834 7.964 0 6.05 0C2.662 0 0 2.6267 0 5.99455C0 10.1035 3.74 13.4714 9.405 18.5613L11 20L12.595 18.5613C18.26 13.4714 22 10.1035 22 5.99455C22 2.6267 19.338 0 15.95 0Z' fill='%23BCEC30'/%3E%3C/svg%3E"); +} + +.add-form { + padding: 20px; + margin-top: 48px; + display: flex; + flex-direction: column; +} + +.add-form-name, +.add-form-text { + font-size: 16px; + font-family: Helvetica; + border-radius: 8px; + border: none; +} + +.add-form-name { + width: 300px; + padding: 11px 22px; +} + +.add-form-text { + margin-top: 12px; + padding: 22px; + resize: none; +} + +.add-form-row { + display: flex; + justify-content: flex-end; +} + +.add-form-button { + margin-top: 24px; + font-size: 24px; + padding: 10px 20px; + background-color: #bcec30; + border: none; + border-radius: 18px; + cursor: pointer; +} + +.add-form-button:hover { + opacity: 0.9; +}/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/style.css.map b/style.css.map new file mode 100644 index 000000000..a52233ec9 --- /dev/null +++ b/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,SAAA;ACCJ;;ADEE;EACE,sBAAA;EACA,cAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,iBAAA;EACA,qBAAA;EACA,mBAAA;EACA,iBAAA;ACCJ;;ADEE;;EAEE,SAAA;EACA,UAAA;EACA,gBAAA;ACCJ;;ADEE;;EAEE,YAAA;EACA,sBAAA;EACA,kGAAA;EAKA,sDAAA;EACA,mBAAA;ACHJ;;ADME;EACE,aAAA;EACA,sBAAA;EACA,SAAA;ACHJ;;ADME;EACE,aAAA;ACHJ;;ADME;EACE,eAAA;EACA,aAAA;EACA,8BAAA;ACHJ;;ADME;EACE,aAAA;EACA,yBAAA;ACHJ;;ADME;EACE,gBAAA;EACA,mBAAA;ACHJ;;ADME;EACE,eAAA;ACHJ;;ADME;EACE,aAAA;EACA,mBAAA;ACHJ;;ADME;EACE,UAAA;EACA,eAAA;ACHJ;;ADME;EACE,eAAA;EACA,iBAAA;ACHJ;;ADME;EACE,iBAAA;EACA,+rBAAA;EACA,4BAAA;EACA,WAAA;EACA,YAAA;ACHJ;;ADME;EACE,yZAAA;ACHJ;;ADME;EACE,aAAA;EACA,gBAAA;EACA,aAAA;EACA,sBAAA;ACHJ;;ADME;;EAEE,eAAA;EACA,sBAAA;EACA,kBAAA;EACA,YAAA;ACHJ;;ADME;EACE,YAAA;EACA,kBAAA;ACHJ;;ADME;EACE,gBAAA;EACA,aAAA;EACA,YAAA;ACHJ;;ADME;EACE,aAAA;EACA,yBAAA;ACHJ;;ADME;EACE,gBAAA;EACA,eAAA;EACA,kBAAA;EACA,yBAAA;EACA,YAAA;EACA,mBAAA;EACA,eAAA;ACHJ;;ADME;EACE,YAAA;ACHJ","file":"style.css"} \ No newline at end of file diff --git a/styles.css b/style.scss similarity index 100% rename from styles.css rename to style.scss