Как сделать сравнение паролей на js
<form class="form" action="address.txt" method="get" >
<input id="password" name="password" type="password" placeholder="Пароль" >
<input id="password-check" name="password-check" type="password" placeholder="Подтверждение пароля" title="" >
<input id="submit" name="submit" type="submit" value="Создать аккаунт">
</form>
<script>
window.addEventListener('DOMContentLoaded', function() {
var form = document.querySelector('.form'),
pas = form.querySelectorAll('#password, #password-check');
form.addEventListener('submit', function(e) {
var err = !(pas[0].value && (pas[0].value == pas[1].value))
pas[1].setAttribute("title", err ? 'err' : '');
err && e.preventDefault();
}, false);
pas[1].addEventListener('input', function(e) {
var err = !(pas[0].value == pas[1].value)
pas[1].setAttribute("title", err ? 'err' : '');
}, false);
});
</script>
#практика👍5
CSS – Адаптивная сетка карточек с auto-fit
Условие:
Сделай сетку карточек (например, .card), которая:
- вмещает как можно больше карточек в ряд,
- карточки имеют минимальную ширину 200px,
- автоматически переносятся на новую строку при нехватке места,
- равномерно распределяются по ширине контейнера.
Ограничения:
- Используй только CSS Grid.
- Без медиа-запросов.
Подсказка: Используй grid-template-columns: repeat(auto-fit, minmax(...)).
#домашка
Условие:
Сделай сетку карточек (например, .card), которая:
- вмещает как можно больше карточек в ряд,
- карточки имеют минимальную ширину 200px,
- автоматически переносятся на новую строку при нехватке места,
- равномерно распределяются по ширине контейнера.
Ограничения:
- Используй только CSS Grid.
- Без медиа-запросов.
Подсказка: Используй grid-template-columns: repeat(auto-fit, minmax(...)).
#домашка
👍4
Подборка лучших постов за прошлую неделю
Лучшие статьи @free_html_lessons:
1. Push-уведомления через браузер
2. Как сделать сравнение паролей на js
3. Вариативные шрифты
Лучшие фронтенд вакансии @job_webdev:
1. HTML-верстальщик
2. Фронтэнд Разработчик
3. Верстальщик на React.js / Middle
Лучшие дизайн вакансии @job_webdesign:
1. Web Designer
2. Web-дизайнер
3. Дизайнер
#лучшеезанеделю
Лучшие статьи @free_html_lessons:
1. Push-уведомления через браузер
2. Как сделать сравнение паролей на js
3. Вариативные шрифты
Лучшие фронтенд вакансии @job_webdev:
1. HTML-верстальщик
2. Фронтэнд Разработчик
3. Верстальщик на React.js / Middle
Лучшие дизайн вакансии @job_webdesign:
1. Web Designer
2. Web-дизайнер
3. Дизайнер
#лучшеезанеделю
👍3
5 причин, почему твоя вёрстка "плывёт"
(и как это быстро пофиксить)
1. Отсутствие box-sizing: border-box;
Контейнеры с паддингами становятся шире, чем ты думаешь. Добавь это в * { box-sizing: border-box; }.
2. Фиксированные ширины
width: 1200px — плохая идея. Лучше max-width и width: 100%.
3. Неиспользование Flex/Grid
Стилишь всё через margin, float, position? Забудь. Переходи на флекс или грид.
4. Нет ресета стилей
У каждого браузера свои отступы. Используй normalize.css или напиши свой ресет.
5. Работа без контейнера
Если у тебя нет центрального контейнера (.container { max-width; margin: 0 auto; padding: ... }) — верстка начнёт вести себя как попало.
#полезности
(и как это быстро пофиксить)
1. Отсутствие box-sizing: border-box;
Контейнеры с паддингами становятся шире, чем ты думаешь. Добавь это в * { box-sizing: border-box; }.
2. Фиксированные ширины
width: 1200px — плохая идея. Лучше max-width и width: 100%.
3. Неиспользование Flex/Grid
Стилишь всё через margin, float, position? Забудь. Переходи на флекс или грид.
4. Нет ресета стилей
У каждого браузера свои отступы. Используй normalize.css или напиши свой ресет.
5. Работа без контейнера
Если у тебя нет центрального контейнера (.container { max-width; margin: 0 auto; padding: ... }) — верстка начнёт вести себя как попало.
#полезности
👍12❤1
Как сделать спойлеры на чистом JS c возможностью включения/отключения при определенной ширине?
Стили меняйте на свои, а также не забываете про обнуляющие стили
Посмотреть код 🧑💻
#практика | #полезности
Стили меняйте на свои, а также не забываете про обнуляющие стили
Посмотреть код 🧑💻
#практика | #полезности
Подборка лучших постов за прошлую неделю
Лучшие статьи @free_html_lessons:
1. Ошибка 403
2. 5 причин, почему твоя вёрстка "плывёт"
3. Задача: Расчет средней оценки
Лучшие фронтенд вакансии @job_webdev:
1. HTML-верстальщик
2. Фронтендер
3. React-разработчик
Лучшие дизайн вакансии @job_webdesign:
1. Web Designer
2. UI/UX-дизайнер
3. UI/UX Дизайнер
#лучшеезанеделю
Лучшие статьи @free_html_lessons:
1. Ошибка 403
2. 5 причин, почему твоя вёрстка "плывёт"
3. Задача: Расчет средней оценки
Лучшие фронтенд вакансии @job_webdev:
1. HTML-верстальщик
2. Фронтендер
3. React-разработчик
Лучшие дизайн вакансии @job_webdesign:
1. Web Designer
2. UI/UX-дизайнер
3. UI/UX Дизайнер
#лучшеезанеделю
Задача: "Сгруппировать одинаковые слова"
У тебя есть массив строк. Нужно сгруппировать слова, которые являются анаграммами друг друга (т.е. состоят из одних и тех же букв, но в разном порядке).
Ожидаемый результат:
Условия:
Порядок групп и слов внутри групп не важен.
Используй чистый JavaScript, без сторонних библиотек.
#домашка
У тебя есть массив строк. Нужно сгруппировать слова, которые являются анаграммами друг друга (т.е. состоят из одних и тех же букв, но в разном порядке).
const words = ["listen", "silent", "enlist", "hello", "ohlle", "world"];
Ожидаемый результат:
[
["listen", "silent", "enlist"],
["hello", "ohlle"],
["world"]
]
Условия:
Порядок групп и слов внутри групп не важен.
Используй чистый JavaScript, без сторонних библиотек.
#домашка
👍3