program.oks | Дзен

Делимся ниже готовым кодом, который поможет создать To Do List на HTML, CSS и JavaScript. html <div class="app-container" id="taskList"> <h1 class="app-header">TO DO LIST</h1> <div class="add-task"> <input type="text" autocomplete="off" placeholder="Add New Task" v-model="tasks.name" @keyup.enter="newItem" class="task-input"> <input type="submit" value="" class="submit-task" @click="newItem" title="Add Task"> </div> <ul class="task-list"> <li class="task-list-item" v-for="task in tasks"> <label class="task-list-item-label"> <input type="checkbox"> <span>{{task...

1 год назад

Анимированный фон на JavaScript

Вы можете воспользоваться кодом ниже, чтобы создать анимацию перетекающего фона на HTML, CSS и JavaScript. html <p>click</p> <svg xmlns="http://www.w3.org/2000/svg" id="bgart" version="1.1" viewBox="100 100 600 600" preserveAspectRatio="xMidYMid slice"> </svg> <svg style="pointer-events:none;"> <defs> <linearGradient id="bggrad" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" /> <stop offset="100%" /> </linearGradient> </defs> </svg> <svg class="outfit-logo" viewbox="0 0 90 50" stroke="currentcolor" stroke-width="4" fill="none"> <circle cy="28...

1 год назад

Кнопка и форма входа на JavaScript

Вы можете создать для своего сайта форму входа, которая появляется после нажатия на кнопку, с помощью готового кода ниже. html <link href='https://fonts.googleapis.com/css?family=Raleway:400,500,300' rel='stylesheet' type='text/css'> <div id="mainButton"> <div class="btn-text" onclick="openForm()">Sign In</div> <div class="modal"> <div class="close-button" onclick="closeForm()">x</div> <div class="form-title">Sign In</div> <div class="input-group"> <input type="text" id="name" onblur="checkInput(this)"...

1 год назад

Карусель изображений на JavaScript

Оставляем для вас ниже готовый код для создания простой карусели с изображениями. html <div class="wrapper flex-center-all"> <div class="img-container"> <img src="https://plus.unsplash.com/premium_photo-1684992858411-3e3ddf37c4c9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" alt="jellyfish" class="visible" id="img-1"> <img src="https://images.unsplash.com/photo-1495012379376-194a416fcc5f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=725&q=80"...

1 год назад

Форма входа на JavaScript

Оставляем для вас ниже готовый код, который поможет создать форму входа для вашего сайта на HTML, CSS и JavaScript html <body> <section class="container"> <div class="login-container"> <div class="circle circle-one"></div> <div class="form-container"> <img src="https://raw.githubusercontent.com/hicodersofficial/glassmorphism-login-form/master/assets/illustration.png" alt="illustration" class="illustration" /> <h1 class="opacity">LOGIN</h1> <form> <input type="text" placeholder="USERNAME" /> <input...

1 год назад

Бесконечная карусель на JavaScript

Оставляем для вас ниже код, который поможет создать бесконечную карусель с фотокарточками. HTML <section> <div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide swiper-slide--one"> <span>domestic</span> <div> <h2>Enjoy the exotic of sunny Hawaii</h2> <p> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M19...

1 год назад

Конвертер арабских цифр в римские на JavaScriptВы

Можете использовать готовый код ниже, чтобы создать конвертер арабских цифр в римские на H <!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Number To Roman Converter</title>  <link rel="stylesheet" href="style.css" /> </head> <body> <div class="container"> <div class="input-wrapper"> <input type="number" id="input" placeholder="Enter Number Here..." /> <button type="submit" id="submit">Convert</button> </div>...

1 год назад

Виджет календарь на JavaScript

Вы можете создать виджет календарь на HTML, CSS и JavaScript с помощью готового кода ниже. HTML <div class="calendar"> <header class="calendar__header"> <div class="calendar__month"></div> <div class="calendar__year"></div> </header> <div class="calendar__grid"> <div class="calendar__day-names"> <span class="calendar__day-name">S</span> <span class="calendar__day-name">M</span> <span class="calendar__day-name">T</span> <span class="calendar__day-name">W</span> <span class="calendar__day-name">T</span>...

1 год назад

JavaScript localStorage: Полное руководство

Объяснили localStorage и его методы. Рассказали, как использовать localStorage для сохранения, доступа, удаления и изменения данных. JavaScript localStorage – это основное хранилище данных, которое находится в объекте Window браузера. Вы можете сохранять любую информацию в localStorage, и она будет сохраняться даже при перезагрузке страницы или закрытии и повторном открытии браузера. localStorage и связанное с ним sessionStorage являются частью API веб-хранилища. Мы узнаем о них подробнее ниже. API веб-хранилища предоставляет методы, с помощью которых браузеры могут сохранять пары ключ/значение данных (например, объекты)...

1 год назад

Тоглы на JavaScript

HTML <div class="toggle-container green"> <input class="toggle-checkbox" type="checkbox"> <div class="toggle-track"> <div class="toggle-thumb"></div> </div> </div> <div class="toggle-container blue"> <input class="toggle-checkbox" type="checkbox"> <div class="toggle-track"> <div class="toggle-thumb"></div> </div> </div> <div class="toggle-container boo"> <input class="toggle-checkbox" type="checkbox"> <div class="toggle-track"> <div class="toggle-thumb"></div> </div> </div> CSS body { display: flex;...

1 год назад