Дневник программиста

подписчиков

Доброго времени суток, дорогие друзья. Я начинающий программист и этот канал завел скорее даже для себя, чтоб лучше запоминать и иметь универсальную шпаргалку. Но если если мои записи помогут кому-то я буду только рад. А также буду весьма признателен, если укажут на мои ошибки) .

Главная Статьи

Таймер до нового года на HTML, CSS, JS.

ТЗ - Создайте HTML-страницу в выведенной на нее информацией сколько осталось до нового года с момента запуска кода. <body> <div class="timer"> <h1>До Нового года осталось:</h1> <div class="d"><p id="day"></p> <p class="da">Дней</p> </div> <div class="w"><p id="Watch"></p> <p class="wa">Часов</p> </div> <div class="m"><p id="Min"></p> <p class="mi">Минут</p> </div> <div class="s"><p id="Sec"></p> <p class="se">Секунд</p> </div> </div> </body><body> <div class="timer"> <h1>До Нового года осталось:</h1>...

7 месяцев назад

Валидация введенных данных пользователем на HTML, CSS, JS.

ТЗ - Создать HTML-страницу и форму для ввода имени. Запретить вводить в форму числа. <body> <form> <ul> <li> <legend for="usern"><span>Введите свое имя:</span></legend> <input type="text" id="usn" oninput="chekI()"> </li> </ul> </form> </body> ul li{ list-style-type:none; } function chekI(){ let input = document...

7 месяцев назад

Двигающийся квадрат на HTML, CSS, JS.

ТЗ - создать HTML-страницу и на ней квадрат, который перемещается по нажатию ПКМ. <body onclick="moveMovve(event)"> <div id="movve"></div> </body> div{ width:50px; height:50px; background:red; position:absolute; } body{ position:relative; height:1000px; } function moveMovve(e){ movve...

7 месяцев назад

Модальное окно на HTML, CSS, JS.

ТЗ - Создать HTML-страницу и добавить на нее кнопку, которая будет открывать модальное окно. <body> <button id='openBtn'>Открыть</button> <div id='modalOverlay' class="modal_overlay"> <div class="modal"> <p>Модальное окно</p> <button id='closeBtn'>Закрыть</button> </div> </div> </body> .modal_overlay{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); display: none; } .modal { background: white; margin-left:40%; margin-top:1%; padding-bottom:20px; border-radius: 8px; width: 200px; height: 80px; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,0...

7 месяцев назад

Всплывающие подсказки на HTML, CSS, JS.

ТЗ - создать HTML-страницу и разместить на ней несколько кнопок. При наведении на кнопку должна появляться подсказка сверху или, если нет места, снизу. <body> <div class="modal1"><button id="btn1">Кнопка 1</button> <div id="podsk1"><p>кнопка 1</p></div></div> </br> <div class="modal2"><div id="podsk2"><p>кнопка 2</p></div> <button id="btn2">Кнопка 2</button></div> <div class="modal3"><div id="podsk3"><p>кнопка 3</p></div> <button id="btn3" >Кнопка 3</button></div> </body> #podsk1, #podsk2, #podsk3{...

7 месяцев назад