Найти в Дзене
Как стилизовать type="radio" - html / css
type="radio" один из самых сложно поддающихся стилизации элиментов в html. Его вид напрямую зависит от настроек браузера и везде выглядит по-разному. Если мы хотим стилизовать инпут, нам нужно полностью сбросить вид стандартных кружков и добавить стилизацию для "накладных" HTML: делаем сам инпут: <input class="rooms-radio-real" type="radio" value="1"> и рядом делаем span для "накладной" опции <span class="rooms-radio-fake">1</span> CSS: (сбрасываем все стили) .rooms-radio-real { opacity: 0; appearance:...
2 года назад
Расширения для VSC для Front-end разработчика
Безусловно, существует огромное количество расширений, которые может использовать разработчик, но проблема заключается в том, что их так много, что выбирать и искать что-то под себя очень трудно. Здесь собрано несколько расширений, которые я лично использую и рекомендую каждому. 1. Auto Rename Tag Очень удобное расширение, которое самостоятельно переименновывает теги и вам не нужно за этим следить. 2. VS HTML to CSS Одно из моих любимых расширений. Здесь вы задаёте все теги, классы и их id, а затем при помощи простой комбинации плагин переносит названия в CSS файл...
2 года назад
С чего начать Front-end разработчику? (часть 1)
Самый сложный шаг для взрослого человека при смене профессии - это, как ни странно, начать. Перед нами открывается огромное количество страхов, вопросов, непонимания и просто желания всё бросить. Я, безусловно, не исключение. Чем больше ты начинаешь учить, искать и узнавать, тем больше кажется, что ты просто ничего не знаешь и ничего не умеешь. Это совершенно нормально. Решение? Системное изучение, повторение и совершенствование своих навыков. Чем больше вы практикуесь, решаете задачи и фиксите...
2 года назад
ClassList - JS
При использовании прослушивания событий у нас может возникнуть необходимость добавлять класс при клике или, например, наведении мыши. Здесь мы можем столкнуться с проблемой, что же нам выбрать: ✅ add добавит класс один раз; При первом клике у нас сработает прописанное событие, но далее, сколько бы раз мы не нажимали на кнопку - ничего не произойдет до перезагрузки страницы...
2 года назад
Генерация размера фигуры JS
1. Начнём с создания переменных: const circle = document.createElement('div') 2. Зададим функцию, которая будет генерировать рандомные числа: function getRandomNumber (min, max){ return Math.round(Math.random() * (max - min) + min) } //допустим, что у нашего обьекта вот такие размеры const size = getRandomNumber(10,60) circle.style.width = `${size}px` circle.style.height = `${size}px` 3. Далее нам нужны константы, которые всегда будут находиться в пределах нашего поля и нам не нужно будет каждый раз вводить значения ширины и высоты const {width, height} = board...
2 года назад
Генерация цветов JS
Допустим, у вас есть обьект, которому вы хотите задавать случайные свойства цвета при нажатии на него Начнём с создания переменных: const colors = ['#DC143C', '#B22222', '#C71585', '#DB7093' ] const circle = document.createElement('#circle') Напишем функцию, которая будет брать из массива цветов элемент с рандомным индексом: function RandomColor() { return colors[Math.floor(Math.random() * colors.length)]...
2 года назад
Слово с заглавной буквы - JS
Очень часто при обработке пользовательского инпута мы используем метод .toLowerCase() чтобы избежать некорректного ввода, но отсюда вытекает проблема - 'Как снова сделать первую букву слова заглавной' Допустим, что пользователь вводит имя 'маша', анам бы хотелось вывести 'Привет, Маша' Давайте напишем код, который преобразует первую букву каждого слова в верхний регистр. Сразу приведу решение с комментариями: let name = document...
121 читали · 2 года назад
Слайдер с фото на JS
Всего лишь несколько строчек кода в JS оживят картинки и при клике/наведении на них будут раскрываться и, по желанию, добавлять текст. В HTML нам понадобиться класс banner, в который будет вложен класс slideMenu и непосредственно дивы с классом slide, которых может быть любое количество. Я сразу добавила стиль для слайда, сделав фото свойством background, но это не обязательно. Таким образом мы не сможем контролировать размеры фотографии. Код: https://codepen.io/AlinaK96/pen/oNaXxRw Из интересного в CSS: 1...
2 года назад
Форма сердца в CSS / HTML
Зачастую при работе с формами мы можем вставить картинку этой формы, но это не всегда надёжно и грозит тем, что не на всех браузерах эта картинка может прочитаться или прочитаться некорректно. Давайте попробуем сделать форму сердцечка, чтобы по клику добавлять продукт в избранное. HTML разметка: <div class="wrapper"> <div class="heart"></div> </div> CSS: .heart {     width: 25px;     height: 25px;     background-color: blue;     transform: rotate(45deg); } .heart::before,. heart::after...
173 читали · 2 года назад
Front-end с нуля (Первые шаги)
Если вдруг вы проснулись сегодня утром и точно решили войти в IT и выбрали именно front-end разработку - тогда перед вами точно стоит вопрос: "С чего начать и куда бежать" Кто-то скажет: "Лучший сборник информации - официальная документация". Не поспоришь, но если вы только начинаете обучение, язык документации понять будет крайне сложно и это просто отобьём всё желание учиться. В этой статье я поделюсь своими шагами и ресурсами, где можно постепенно разбирать темы. Шаг 1. HTML (язык гипертекстовой...
2 года назад
Как сделать часы в js?
HTML: <div id="clock"></div> Создаём функцию: function update(){ let date = new Date() //собираем дату let hours = date.getHours() //создаем переменные для часов, минут и секунд let min = date.getMinutes() let sec = date.getSeconds() //опциональный шаг - если мы хотим получить...
2 года назад
Как сделать календарь в JS? В HTML нам поднадобиться всего лишь один div с классом container: <div class="container"></div> Вся оснавная работа будет в js. Сначала необходимо создать функцию, которая будте корректировать дату т.к. в js день недели начинается с воскресенья, а нам привычнее видеть стандарт даты с понедельника:    function getDay(date){    let day = date.getDay();    if(day == 0) day = 7    return day-1    } Далее мы прописываем основную функцию:    function createCalender(elem, year, month){    elem = document.querySelector(elem) // сюда при вызоые мы будем записывать элимент, в который будет вложен календарь    let mon = month - 1 // т.к. js считает январь нулевым месяцем    let d = new Date(year, mon)    let table = `    <table>    <caption>${month}.${year}</caption> //заголовок таблицы    <tr>    <th>пн</th>    <th>вт</th>    <th>ср</th>    <th>чт</th>    <th>пт</th>    <th>сб</th>    <th>вс</th>    </tr>    <tr> //не закрываем теги таблицы и tr т.к. затем пропишем циклы, которые будут записывать дни    `;    for (let i = 0; i<getDay(d); i++){   //пустые ячейки, если месяц начинается не с понедельника    table += `<td></td>`    }    //гениратор дней    while (d.getMonth() == mon){    table += '<td>' + d.getDate() + '</td>'    if (getDay(d) % 7 == 6){    table += '</tr><tr>'    }    d.setDate(d.getDate() + 1)    }    if (getDay(d) != 0){    for (let i = getDay(d); i<7; i++){  //пустые ячейки если месяц заканчивается не воскресеньем    table += `<td></td>`    }    }    table += '</tr></table>' // закрываем таблицы    elem.innerHTML = table // добавляем код HTML в таблицу    } И вызываем функцию, передав в нее параметры (расположение, год, месяц) createCalender('body', 2023, 4) Таблице мы также можем добавить несколько стилей в css: .container {   display: flex;   flex-wrap: wrap; } table {   border-collapse: collapse;   margin-bottom: 10px;   margin-right: 10px; } caption {   padding: 10px 0;   background-color: rgb(69, 154, 69);   border: 1px solid black;   border-bottom: none; } td, th {   border: 1px solid black;   padding: 8px;   text-align: center;   font-size: 18px; } th {   font-weight: bold;   background-color: rgb(47, 112, 47); }
215 читали · 2 года назад