Commit 0b86553d authored by sparshtripathi's avatar sparshtripathi
Browse files

Removed hardcode from floating add task bar and added fade in transition for addin new tasks.

parent 495bab7f
......@@ -37,7 +37,7 @@
<div id="content" class="content">
<header>
<header id="header">
<div class="todohead">
<h1 id="title">TO-DO LIST</h1>
</div>
......
......@@ -2,26 +2,37 @@ let addtasktxt = document.querySelector('.addtasktxt');
let addtaskbtn = document.querySelector('.addtaskbtn');
let ultasks = document.querySelector('.ultasks');
let listitem;
let header = document.getElementById('header');
addtasktxt.focus();
$(window).scroll(function () {
if ($(window).width() < 1000) {
if ($(window).scrollTop() >= 198) {
// $(window).scroll(function () {
// if ($(window).width() < 1000) {
// // if ($(window).scrollTop() >= 198)
// if($(window).scrollTop() >= header.offsetHeight-25){
// $('#content').addClass('fix-search');
// } else {
// $('#content').removeClass('fix-search');
// }
// }
// else {
// //if ($(window).scrollTop() >= 126)
// if($(window).scrollTop() >= header.offsetHeight-25){
// $('#content').addClass('fix-search');
// } else {
// $('#content').removeClass('fix-search');
// }
// }
// });
$(window).scroll(function(){
if($(window).scrollTop() >= header.offsetHeight-25){
$('#content').addClass('fix-search');
} else {
$('#content').removeClass('fix-search');
}
}
else {
if ($(window).scrollTop() >= 126) {
$('#content').addClass('fix-search');
} else {
$('#content').removeClass('fix-search');
}
}
});
function addTask() {
......@@ -38,6 +49,7 @@ function addTask() {
listtxt.appendChild(document.createTextNode(addtasktxt.value));
ultasks.prepend(listitem);
listitem.addEventListener('click', onItemClick);
completediv = document.createElement('div');
......
......@@ -20,13 +20,13 @@ body {
overflow: overlay;
margin: 0;
/* background: linear-gradient(to right, #5f57d1, #c065c0); */
/* background: linear-gradient(to left, #ee7752, #e73c7e); */
background: linear-gradient(to left, #23d5ab, #23a6d5, #e73c7e, #ee7752);
background: linear-gradient(to left, #ee7752, #e73c7e);
/* background: linear-gradient(to left, #23d5ab, #23a6d5, #e73c7e, #ee7752);
background-size: 400% 400%;
animation: gradient 55s ease infinite;
animation: gradient 55s ease infinite; */
}
@keyframes gradient {
/* @keyframes gradient {
0% {
background-position: 0% 50%;
}
......@@ -36,7 +36,7 @@ body {
100% {
background-position: 0% 50%;
}
}
} */
.content {
display: flexbox;
......@@ -46,9 +46,9 @@ body {
padding-bottom: 55px;
}
#title {
/* #title {
animation: animated-text 2s steps(11, end) 0.5s 1 normal both, animated-cursor 750ms steps(11, end) infinite;
}
} */
.todohead {
font-family: 'Zen Tokyo Zoo', cursive;
......@@ -85,6 +85,9 @@ form {
}
@media(max-width:1000px) {
/* html {
zoom: 125%;
} */
form {
width: 80%;
}
......@@ -177,6 +180,20 @@ input:focus {
min-width: 200px;
margin-bottom: 10px;
border-radius: 7px;
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 0.8s;
}
@keyframes fadeInOpacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.ultasks li button {
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment