|
| 1 | +'use strict'; |
| 2 | + |
| 3 | +// Задание 1: |
| 4 | +// Представь, что у тебя есть вот такая HTML-структура для карточки профиля: |
| 5 | +// <div id="profile-card"> |
| 6 | +// <h2>Имя пользователя: <span id="user-name">...</span></h2> |
| 7 | +// <p>Статус: <span id="user-status">...</span></p> |
| 8 | +// </div> |
| 9 | +// А в твоем JavaScript-коде есть объект с данными, которые пришли, скажем, с сервера: |
| 10 | +// const userData = { |
| 11 | +// name: 'Елена', |
| 12 | +// status: 'в сети' |
| 13 | +// }; |
| 14 | +// Твоя задача: Напиши JS-код, который: |
| 15 | +// 1. Найден нужные <span> элементы по их id. |
| 16 | +// 2. Вставит в них имя и статус из объекта userData. |
| 17 | +// В результате на странице вместо "..." должны появиться "Елена" и "в сети". |
| 18 | + |
| 19 | +const userData = { |
| 20 | + name: 'Елена', |
| 21 | + status: 'в сети', |
| 22 | +}; |
| 23 | + |
| 24 | +const userName = document.querySelector('#user-name'); |
| 25 | +const userStatus = document.querySelector('#user-status'); |
| 26 | + |
| 27 | +userName.textContent = userData.name; |
| 28 | +userStatus.textContent = userData.status; |
| 29 | + |
| 30 | +/* |
| 31 | +Имя пользователя: Елена |
| 32 | +Статус: в сети |
| 33 | +*/ |
| 34 | + |
| 35 | +// Задание 2: |
| 36 | +// На странице есть форма для ввода пароля. Изначально в поле уже есть какое-то значение. |
| 37 | +// <div> |
| 38 | +// <label for="password-input">Пароль:</label> |
| 39 | +// <input id="password-input" type="text" value="qwerty"> |
| 40 | +// <p id="validation-message"></p> |
| 41 | +//</div> |
| 42 | +// Твоя задача: Написать JS-код, который проверяет пароль при загрузке страницы. |
| 43 | +// 1. Получи элемент поля ввода и элемент параграфа для сообщения. |
| 44 | +// 2. Считай значение (текст) из поля ввода. |
| 45 | +// 3. Проверь его длину. |
| 46 | +// 4. Если длина пароля меньше 8 символов, то в параграф #validation-message нужно вывести сообщение "Пароль слишком короткий" и покрасить этот текст в красный цвет. |
| 47 | +// 5. В противном случае — вывести "Надежный пароль" зелёного цвета. |
| 48 | +// Подсказка: Чтобы изменить цвет текста элемента, можно использовать его свойство .style.color. Например: element.style.color = 'red';. |
| 49 | + |
| 50 | +function checkPassword() { |
| 51 | + const passwordInput = document.querySelector('#password-input'); |
| 52 | + const validMessage = document.querySelector('#validation-message'); |
| 53 | + const inputValue = passwordInput.value; |
| 54 | + |
| 55 | + if (!inputValue) { |
| 56 | + return false; |
| 57 | + } |
| 58 | + |
| 59 | + if (inputValue.length < 8) { |
| 60 | + validMessage.textContent = 'Пароль слишком короткий'; |
| 61 | + validMessage.style.color = 'red'; |
| 62 | + return false; |
| 63 | + } else { |
| 64 | + validMessage.textContent = 'Надежный пароль'; |
| 65 | + validMessage.style.color = 'green'; |
| 66 | + return true; |
| 67 | + } |
| 68 | +} |
| 69 | + |
| 70 | +checkPassword(); // qwerty - Пароль слишком короткий |
| 71 | + |
| 72 | +// Задание 3: |
| 73 | +// У тебя есть список элементов на странице. Некоторые из них помечены как "новые" с помощью специального класса. |
| 74 | +// <ul id="item-list"> |
| 75 | +// <li>Молоко</li> |
| 76 | +// <li class="new-item">Хлеб</li> |
| 77 | +// <li>Сыр</li> |
| 78 | +// <li class="new-item">Сок</li> |
| 79 | +// </ul> |
| 80 | +// Твоя задача: Написать JS-код, который "обработает" все новые элементы. |
| 81 | +// 1. Найди все элементы с классом new-item. |
| 82 | +// 2. Используя цикл, перебери найденные элементы. |
| 83 | +// 3. Для каждого из них сделай две вещи: |
| 84 | +// - Добавь в конец их текста пометку "(новинка!)". |
| 85 | +// - Сделай их текст жирным. |
| 86 | +// Подсказка: Чтобы сделать текст жирным, можно использовать свойство .style.fontWeight = 'bold';. Чтобы добавить текст в конец, можно использовать конструкцию element.textContent = element.textContent + ' какой-то текст'; или более короткую element.textContent += ' какой-то текст';. |
| 87 | + |
| 88 | +function getNewItems() { |
| 89 | + const itemsList = document.querySelectorAll('li'); |
| 90 | + |
| 91 | + if (itemsList.length < 1) { |
| 92 | + return false; |
| 93 | + } |
| 94 | + |
| 95 | + itemsList.forEach((item) => { |
| 96 | + if (item.classList.contains('new-item')) { |
| 97 | + item.style.fontWeight = 'bold'; |
| 98 | + item.textContent += ' (новинка!)'; |
| 99 | + } |
| 100 | + }); |
| 101 | +} |
| 102 | + |
| 103 | +// getNewItems(); |
| 104 | + |
| 105 | +// ?? альтернативное решение |
| 106 | +// Сразу находим только то, что нам нужно |
| 107 | +const newItems = document.querySelectorAll('.new-item'); |
| 108 | + |
| 109 | +// Теперь не нужна проверка if, ведь в newItems УЖЕ лежат только нужные элементы |
| 110 | +newItems.forEach((item) => { |
| 111 | + item.style.fontWeight = 'bold'; |
| 112 | + item.textContent += ' (новинка!)'; |
| 113 | +}); |
0 commit comments