SpiderPigAndCat, если есть под рукой дизайнер, шарящий в цветах, можно подобрать другое наложение, чтобы это хорошо смотрелось. А так, еще простой и симпатичный вариант, это полупрозрачный блок на котором будет располагаться текст.
Если вы попробуете это сделать, ответ сам придет.
Контейнер ограничивает ширину основного контента (ну и обычно еще добавляет базовые отступы).
А его родитель нужен чтобы например задать фон для всей ширины блока, а не только контента.
Если у вас контент на всю ширину экрана, то можно обойтись и без контейнера.
return останавливает выполнение текущей функции, и возвращает из неё своё значение, в данном случае ничего (если уж глубже, то возвращается undefined)
в целом всё верно поняли
1. можно, но тогда нам потребуется дополнительная логическая переменная чтобы хранить промежуточный результат проверки, либо функция которая его возвращает. И вот уже её мы вставляем вместо правой части условия в if
2. Лучше использовать, чем не использовать. Можно и не ставить, но это вредная привычка и из за неё в некоторых случаях могут возникать ошибки
3. Это значение используется несколько раз за функцию, и каждый раз она его берет из DOM. Чтобы этого избежать мы в самом начале заносим значение в локальную переменную, и дальше уже работаем с ней. К тому же у переменной появилось еще одно назначение, вы добавляете в список значения в верхнем регистре, соответственно все операции лучше проводить в нем, такие как добавление в массив и проверка наличия в массиве
Если вы хотите хорошо и глубоко изучать js, то могу посоветовать этот ресурс
Прямо берете и с первой главы, даже если думаете что уже знаете эту тему, там можно узнать какие-то тонкости. Задания тоже важны, для закрепления и понимания некоторых механик.
А если js вам обычно не требуется, то и не нужно слишком много времени тратить
rundll32, не совсем. Изменение innerHtml родителя заменяет всё его содержимое, а добавление потомка не затрагивает то что в нём уже было
Пример
Здесь можно посмотреть как это работает. Выделение текста сбивается. Так же если открыть инспектор, видно что каждый раз обновляется всё содержимое родителя
rundll32, пробел работает, а на остальные надо отдельно писать обработки когда поймали нажатие. Собственно, вопрос был о том как стилизовать текст, а не писать сам блок)
Ну при вводе текста с клавиатуры лучше перехватывать сразу после нажатия клавиши и добавлять уже обернутым в span.
Чтобы не было проблем с обновлением, можно сделать по-другому (правда мусора в html станет еще больше):
оборачиваем в span не через символ, а каждый символ. Дальше можно их с помощью :nth-child(2n) стилизовать. Идея в том чтобы не менять innerHTML, а добавлять потомков родительскому классу. Тогда все предыдущие останутся нетронутыми
letProgrammer, ну для начала в for даже не попадает
> создается пустой массив
> цикл перебирает всё еще пустой массив <-- вот здесь затык
> внутри этого цикла массив должен заполняться
Искуственный Интеллект, да не, нормальные варианты, особенно если их объединить медиазапросом. Например увеличиваем в vw до определенного размера экрана, потом делаем статикой.
Но они не универсальны. Если к примеру нам нужно отталкиваться от размера самой картинки, и при этом обрезать её до нужных пропорций. Или нужно использовать размер родительских блоков в сетке, а не всего viewport. Тогда возникают проблемы. Да и vw несколько косячная, она же не учитывает ширину скроллбара
В вашей проверке вы сравниваете значение инпута с только что созднанным на предыдущей строке li. Само собой в нем ничего нет.
Если этот список полностью заполняется с помощью инпута, надо хранить все добавляемые данные в массиве и проверять наличие в нем при добавлении, как уже написал ниже v3shin.
Если же при начале работы там уже есть данные, то сначала их спарсить в массив, а потом дальше по той же схеме.
Либо другой вариант, пробегать по всем потомкам ul, и сравнивать введенное значение с ними.
Так же нет смысла создавать li до того как сделана проверка, потому что если она не пройдена, li будет не нужен.
И лучше не использовать innerHTML, записывайте безопасным textContent
