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...

2 года назад

Анимированный фон на 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...

2 года назад

Кнопка и форма входа на 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)"...

2 года назад

Карусель изображений на 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"...

2 года назад

Форма входа на 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...

2 года назад