Commit 6eef7001 authored by sparshtripathi's avatar sparshtripathi
Browse files

Added star button functionality and changed some icons and visual features.

parent d533b06d
......@@ -6,11 +6,11 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Zen+Tokyo+Zoo&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/46e70ac428.js" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Zen Tokyo Zoo' rel='stylesheet'>
<script src="https://kit.fontawesome.com/46e70ac428.js" crossorigin="anonymous" async></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="apple-touch-icon" sizes="57x57" href="/icons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/icons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/icons/apple-icon-72x72.png">
......@@ -28,6 +28,8 @@
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/icons/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<meta name="description"
content="A to-do list that is pleasing to the eye and useful for keeping track of your tasks.">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
</head>
......@@ -37,22 +39,26 @@
<div id="content" class="content">
<header id="header">
<div class="todohead">
<h1 class="animate__animated animate__fadeIn" id="title">TO-DO LIST</h1>
<h1 class="animate__animated animate__fadeIn" id="title" style="font-family: 'Zen Tokyo Zoo';">TO-DO
LIST</h1>
</div>
</header>
<div class="formdiv">
<form>
<!-- <div class="form"> -->
<input type="text" placeholder="Add task..." class="addtasktxt">
<button class="addtaskbtn"><span>+</span></button>
<button class="addtaskbtn"><i class="far fa-plus-square" aria-hidden="true"></i></button>
<!-- </div> -->
</form>
<div class="clearbtndiv">
<button class="clearbtn" title="Clear all notes"><i class="fas fa-eraser"></i></button>
</div>
</div>
<div class="tasklist">
<h1 class="animate__animated animate__fadeIn">TASKS</h1>
<!-- <h1 class="animate__animated animate__fadeIn">TASKS</h1> -->
<div class="ultaskscont">
<ul class="ultasks">
<ul class="ultasks animate__animated animate__fadeIn">
</ul>
</div>
......
......@@ -3,21 +3,53 @@ let addtaskbtn = document.querySelector('.addtaskbtn');
let ultasks = document.querySelector('.ultasks');
let listitem;
let header = document.getElementById('header');
let clearbtn = document.querySelector('.clearbtn');
addtasktxt.focus();
let starredCount = 2000;
let defaultTasks = [["Click text to edit task.", 0], ["Tick to complete task", 1], ["Trash to delete task.", 0], ["Star to pin to top", 0]];
$(window).scroll(function () {
if ($(window).scrollTop() >= header.offsetHeight - 25) {
$('#content').addClass('fix-search');
} else {
$('#content').removeClass('fix-search');
if (window.matchMedia("(max-width: 1000px)").matches) {
console.log('small');
if ($(window).scrollTop() >= header.offsetHeight - 20) {
$('#content').addClass('fix-search');
} else {
$('#content').removeClass('fix-search');
}
}
else {
console.log('big');
if ($(window).scrollTop() >= header.offsetHeight - 18) {
$('#content').addClass('fix-search');
} else {
$('#content').removeClass('fix-search');
}
}
});
function addTask() {
if (addtasktxt.value != '') {
clearbtn.addEventListener('click', function () {
const taskitems = document.querySelectorAll('ul li');
ultasks.classList.remove("animate__slideInUp");
ultasks.classList.add("animate__animated");
ultasks.classList.add("animate__bounceOutRight");
setTimeout(function () {
for (let i = 0; i <= taskitems.length - 1; i++) {
taskitems[i].remove();
ultasks.classList.remove("animate__bounceOutRight");
}
}, 900);
});
function addTask(value = addtasktxt.value, noAnimation, isChecked) {
if (value) {
listtxt = document.createElement('div');
......@@ -27,17 +59,26 @@ function addTask() {
listitem.appendChild(listtxt);
listtxt.appendChild(document.createTextNode(addtasktxt.value));
ultasks.prepend(listitem);
listitem.classList.add('added');
listitem.classList.add("animate__animated");
listitem.classList.add("animate__fadeInLeft");
listitem.classList.add("animate__faster");
setTimeout(function () { listitem.classList.remove("animate__animated"); listitem.classList.remove("animate__fadeInLeft"); listitem.classList.remove("animate__faster"); }, 500);
listtxt.appendChild(document.createTextNode(value));
ultasks.append(listitem);
listtxt.classList.add("listxt");
if (noAnimation) {
listitem.classList.add('added');
if (isChecked) {
listitem.classList.remove('added');
listitem.classList.add("done");
}
}
else {
listitem.classList.add('added');
listitem.classList.add("animate__animated");
listitem.classList.add("animate__fadeInLeft");
listitem.classList.add("animate__faster");
setTimeout(function () { listitem.classList.remove("animate__animated"); listitem.classList.remove("animate__fadeInLeft"); listitem.classList.remove("animate__faster"); }, 500);
}
console.log('hello')
listitem.addEventListener('click', onItemClick);
completediv = document.createElement('div');
......@@ -56,29 +97,17 @@ function addTask() {
removebtn.innerHTML = '<i class="fas fa-trash"></i>';
completediv.appendChild(removebtn);
/*
Star button
*/
// starbtn = document.createElement('button');
// starbtn.className = "starbtn";
// starbtn.innerHTML = '<i class="far fa-star"></i>';
// completediv.appendChild(starbtn);
/*
Star button
*/
starbtn = document.createElement('button');
starbtn.className = "starbtn";
starbtn.innerHTML = '<i class="far fa-star"></i>';
completediv.appendChild(starbtn);
}
listitem.style.fontSize = '25px';
addtasktxt.value = '';
addtasktxt.focus();
}
......@@ -107,18 +136,40 @@ function onItemClick(event) {
event.target.closest('li').remove()
}, 500);
// event.target.closest('li').classList.add("animate__animated");
// event.target.closest('li').classList.add("animate__slideInUp")
}
let i_element = event.target.closest('i');
if (classList.contains('far')) {
i_element.classList = "fas fa-star";
if (event.target.closest('li')) {
starredCount--;
event.target.closest('li').style.order = starredCount;
console.log(starredCount);
}
}
if (classList.contains('starbtn') || classList.contains('fa-star')) {
starbtn.innerHTML = '<i class="fas fa-star"></i>';
else if (classList.contains('fas')) {
i_element.classList = "far fa-star";
event.target.closest('li').style.order = 0;
}
}
}
addtaskbtn.addEventListener('click', function (e) {
e.preventDefault();
addTask();
});
function defaultSetup() {
let noAnimation = true;
console.log(defaultTasks.length);
for (let j = defaultTasks.length; j >= 0; --j) {
addTask(defaultTasks[j-1][0], noAnimation, defaultTasks[j - 1][1]);
}
}
defaultSetup();
......@@ -44,12 +44,12 @@ body {
flex-direction: row;
align-content: center;
text-align: center;
padding-bottom: 55px;
padding-bottom: 50px;
position: relative;
}
.todohead {
font-family: 'Zen Tokyo Zoo', cursive;
/* font-family: 'Zen Tokyo Zoo', cursive; */
font-size: 30px;
/* color: #351c75; */
color: white;
......@@ -69,6 +69,7 @@ body {
flex-grow: 2;
border: none;
width: 40%;
margin-right: 5px;
}
form {
......@@ -80,19 +81,36 @@ form {
border-radius: 10px;
padding: 3px;
z-index: 3;
height: 40px;
/* height: 42px; */
padding-right: 4px;
}
@media(max-width:1000px) {
.todohead {
font-size: 22px;
padding-bottom: 25px;
}
form {
width: 80%;
}
.addtaskbtn {
width: 12%;
padding: 0;
.formdiv {
padding-left: 5px;
padding-right: 5px;
}
.fix-search form{
top: 5px;
}
.listxt {
font-size: 20px;
}
.addtaskbtn i {
/* width: 15%; */
/* padding: 3; */
/* margin-bottom: 2px; */
font-size: 40px;
}
.ultaks li {
font-size: 25px;
font-size: 16px;
margin-left: 10px;
margin-right: 10px;
}
......@@ -120,7 +138,6 @@ form {
text-align: center;
align-items: center;
justify-content: center;
height: 40px;
}
input:focus {
......@@ -128,14 +145,40 @@ input:focus {
}
.addtaskbtn {
font-size: 25px;
/* font-size: 30px;
border-radius: 10px;
border-color: green;
background-color: white;
color: green;
background-color: #ee7752;
color: white;
font-weight: bold;
text-align: center;
padding-bottom: 3px;
width: 8%; */
/* display: flex;
justify-content: center;
padding:0; */
border: none;
appearance: none;
padding: 0px;
background-color: white;
color: black;
cursor: pointer;
}
.addtaskbtn i {
font-size: 42px;
width: 100%;
}
.clearbtn {
font-size: 25px;
border-radius: 10px;
border: 3px solid black;
margin-left: 7px;
padding: 10px;
/* height: 50px; */
height: 100%;
background-color: white;
color: black;
}
.tasklist h1 {
......@@ -148,7 +191,7 @@ input:focus {
}
.tasklist {
padding-top: 20px;
padding-top: 40px;
}
.ultaskscont {
......@@ -161,12 +204,12 @@ input:focus {
.ultasks {
list-style-type: none;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
/* display: flex; */
display: flex;
align-content: center;
margin: 10px;
padding: 0;
z-index: 2;
/* flex-direction: column-reverse; */
flex-direction: column-reverse;
}
.ultasks li {
......@@ -179,117 +222,104 @@ input:focus {
min-width: 200px;
margin-bottom: 10px;
border-radius: 7px;
word-break: break-all;
margin-right: 30px;
margin-left: 30px;
}
li.added {
box-shadow: 1px 1px 15px 2px rgba(0, 0, 0, 0.4);
}
/* li.added {
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 0.3s;
}
li.delete {
animation-name: fadeOutOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-out;
animation-duration: 0.3s;
}
li.done.delete {
animation-name: fadeOutOpacity2;
animation-iteration-count: 1;
animation-timing-function: ease-out;
animation-duration: 0.3s;
}
@keyframes fadeInOpacity {
0% {
opacity: 0;
transform: translateX(-300px);
}
100% {
opacity: 1;
transform: translateX(0px);
}
}
@keyframes fadeOutOpacity {
0% {
opacity: 1;
transform: translateX(0px);
}
100% {
opacity: 0;
transform: translateX(500px);
}
}
@keyframes fadeOutOpacity2 {
0% {
opacity: 0.5;
transform: translateX(0px);
}
100% {
opacity: 0;
transform: translateX(300px);
}
} */
.ultasks li button {
background: white;
padding: 5px;
border-radius: 5px;
padding: 0px;
/* border-radius: 5px; */
cursor: pointer;
font-size: 16px;
margin-top: 15px;
margin-left: 7px;
margin-right: 7px;
padding-left: 7px;
padding-right: 7px;
/* padding-left: 7px;
padding-right: 7px; */
}
li.done {
text-decoration: line-through;
opacity: 50%;
/* animation: strike 0.3s linear; */
box-shadow: none;
}
/* @keyframes strike{
from {text-decoration-color:transparent;}
to {text-decoration-color:auto;
box-shadow: none;}
} */
li.done div:first-of-type {
pointer-events: none;
}
.completebtn:hover {
.completebtn i:hover {
color: rgb(40, 185, 40);
border-color: rgb(40, 185, 40);
}
.removebtn:hover {
.removebtn i:hover {
color: rgb(214, 16, 16);
border-color: rgb(214, 16, 16);
}
.starbtn:hover {
.completebtn {
appearance: none;
border: none;
padding: 0;
}
.removebtn {
appearance: none;
border: none;
padding: 0;
}
.starbtn {
appearance: none;
border: none;
padding: 0;
}
.completebtn i {
padding: 8px;
border: 2px solid black;
border-radius: 5px;
}
.removebtn i {
padding: 8px;
border: 2px solid black;
border-radius: 5px;
}
.starbtn i {
padding: 8px;
border: 2px solid black;
border-radius: 5px;
}
.starbtn i:hover {
color: gold;
border-color: gold;
}
.starred {
order: 100;
}
.fix-search form {
position: fixed;
top: 20px;
box-shadow: 1px 1px 15px 2px rgba(0, 0, 0, 0.4);
}
.fix-search .clearbtn{
visibility: hidden;
}
/* .footer {
width: 100%;
height: 3%;
......
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