Commit 1729ee21 authored by sparshtripathi's avatar sparshtripathi
Browse files

added dark mode

parent f7c175f5
<!DOCTYPE html>
<html>
<html lang="en">
<title>To-do List</title>
<head>
<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 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">
<link rel="apple-touch-icon" sizes="76x76" href="/icons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/icons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/icons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/icons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/icons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/icons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/icons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<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" />
<link rel="preload" as="font">
<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 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 defer 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" />
<link rel="apple-touch-icon" sizes="76x76" href="/icons/apple-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/icons/apple-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/icons/apple-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/icons/apple-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/icons/apple-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-icon-180x180.png" />
<link rel="icon" type="image/png" sizes="192x192" href="/icons/android-icon-192x192.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="96x96" href="/icons/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png" />
<link rel="manifest" href="/manifest.json" />
<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 defer rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
</head>
<body>
<div id="content" class="content">
<header id="header">
<div class="todohead">
<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"><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> -->
<div class="ultaskscont">
<ul class="ultasks animate__animated animate__fadeIn">
</ul>
</div>
</div>
<div id="content" class="content">
<header id="header">
<div class="todohead">
<h1 class="animate__animated animate__fadeIn" id="title" style="font-family: 'Zen Tokyo Zoo'">
TO-DO LIST
</h1>
</div>
<!-- <div class="darkmodebtn">
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div> -->
</header>
<div class="formdiv">
<form>
<!-- <div class="form"> -->
<input type="text" placeholder="Add task..." class="addtasktxt" />
<button class="addtaskbtn" title="Add new task">
<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>
<!-- <footer class="footer">
Made with <span style="color: green;">&#9829;</span> in Lagos.
</footer> -->
<div class="tasklist">
<!-- <h1 class="animate__animated animate__fadeIn">TASKS</h1> -->
<div class="ultaskscont">
<ul class="ultasks animate__animated animate__fadeIn"></ul>
</div>
</div>
</div>
<script src="script.js"></script>
<script src="script.js"></script>
</body>
</html>
\ No newline at end of file
......@@ -26,7 +26,7 @@
"density": "2.0"
},
{
"src": "\/android-icon-144x144.png",
"src": "\/apple-icon-144x144.png",
"sizes": "144x144",
"type": "image\/png",
"density": "3.0"
......
......@@ -47,23 +47,23 @@ function pushToLocal() {
localStorage.setItem('tasks', JSON.stringify(taskStorage));
}
$(window).scroll(function () {
if (window.matchMedia("(max-width: 1000px)").matches) {
if ($(window).scrollTop() >= header.offsetHeight - 20) {
$('#content').addClass('fix-search');
} else {
$('#content').removeClass('fix-search');
}
}
else {
if ($(window).scrollTop() >= header.offsetHeight - 18) {
$('#content').addClass('fix-search');
} else {
$('#content').removeClass('fix-search');
}
}
});
// $(window).scroll(function () {
// if (window.matchMedia("(max-width: 1000px)").matches) {
// if ($(window).scrollTop() >= header.offsetHeight - 20) {
// $('#content').addClass('fix-search');
// } else {
// $('#content').removeClass('fix-search');
// }
// }
// else {
// if ($(window).scrollTop() >= header.offsetHeight - 18) {
// $('#content').addClass('fix-search');
// } else {
// $('#content').removeClass('fix-search');
// }
// }
// });
clearbtn.addEventListener('click', function () {
......@@ -130,18 +130,21 @@ function addTask(value = addtasktxt.value, noAnimation, Checked, isInit) {
completebtn.className = "completebtn";
completebtn.innerHTML = '<i class="fas fa-check"></i>';
completediv.appendChild(completebtn);
completebtn.title = "Mark as completed";
removebtn = document.createElement('button');
removebtn.className = "removebtn";
removebtn.innerHTML = '<i class="fas fa-trash"></i>';
completediv.appendChild(removebtn);
removebtn.title = "Delete task";
starbtn = document.createElement('button');
starbtn.className = "starbtn";
starbtn.innerHTML = '<i class="far fa-star"></i>';
completediv.appendChild(starbtn);
starbtn.title = "Star task";
}
......@@ -163,12 +166,23 @@ function onItemClick(event) {
item.classList.toggle('done');
item.classList.toggle('added');
taskStorage.forEach(e => {
if (item.textContent === e.taskText) {
e.isChecked = true;
}
});
pushToLocal();
if (event.target.closest('li').classList.contains('added')) {
taskStorage.forEach(e => {
if (item.textContent === e.taskText) {
e.isChecked = false;
}
});
pushToLocal();
}
else if(event.target.closest('li').classList.contains('done')) {
taskStorage.forEach(e => {
if (item.textContent === e.taskText) {
e.isChecked = true;
}
});
pushToLocal();
}
}
......
......@@ -20,7 +20,6 @@ body::-webkit-scrollbar-thumb {
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-size: 400% 400%;
......@@ -57,11 +56,11 @@ body {
.todohead {
/* font-family: 'Zen Tokyo Zoo', cursive; */
font-size: 30px;
/* color: #351c75; */
color: white;
margin: 0;
padding-top: 20px;
padding-bottom: 40px;
display: flex-inline;
}
.todohead h1 {
......@@ -87,7 +86,6 @@ form {
border-radius: 10px;
padding: 3px;
z-index: 3;
/* height: 42px; */
padding-right: 4px;
}
......@@ -110,9 +108,6 @@ form {
font-size: 20px;
}
.addtaskbtn i {
/* width: 15%; */
/* padding: 3; */
/* margin-bottom: 2px; */
font-size: 40px;
}
.ultaks li {
......@@ -144,6 +139,9 @@ form {
text-align: center;
align-items: center;
justify-content: center;
position: sticky;
top: 30px;
z-index: 3;
}
input:focus {
......@@ -151,17 +149,6 @@ input:focus {
}
.addtaskbtn {
/* font-size: 30px;
border-radius: 10px;
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;
......@@ -181,7 +168,6 @@ input:focus {
border: 3px solid black;
margin-left: 7px;
padding: 10px;
/* height: 50px; */
height: 100%;
background-color: white;
color: black;
......@@ -192,7 +178,6 @@ input:focus {
text-decoration: underline;
font-size: 40px;
font-family: 'Zen Tokyo Zoo', cursive;
/* color: #351c75; */
color: white;
padding-bottom: 15px;
}
......@@ -245,14 +230,11 @@ li.added {
.ultasks li button {
background: white;
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; */
}
li.done {
......@@ -321,24 +303,144 @@ li.done div:first-of-type {
}
.fix-search form {
box-shadow: 1px 1px 15px 2px rgba(0, 0, 0, 0.4);
}
.fix-search .formdiv {
position: fixed;
top: 20px;
box-shadow: 1px 1px 15px 2px rgba(0, 0, 0, 0.4);
width: 100%;
z-index: 3;
}
.fix-search .clearbtn {
visibility: hidden;
box-shadow: 1px 1px 15px 2px rgba(0, 0, 0, 0.4);
}
/* .footer {
width: 100%;
height: 3%;
padding: 3px;
background: white;
color: black;
position: fixed;
bottom: 0px;
text-align: center;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
z-index: 5;
} */
\ No newline at end of file
/* .darkmodebtn {
position: absolute;
right: 35px;
top: 45px;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #2196F3;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
} */
@media (prefers-color-scheme: dark) {
body {
background-image: linear-gradient(to left, rgb(150, 47, 15), rgb(162, 20, 75));
}
.ultasks li {
background-color: #181A1B;
border-color: rgb(140, 130, 115);
color: rgb(232, 230, 227);
}
.listxt {
color: #E8E6E3;
}
h1 {
/* color: #E8E6E3; */
color: #181A1B;
}
form {
background-color: #181A1B;
color: #E8E6E3;
border-color: rgb(140, 130, 115);
}
.ultasks li button {
background: rgb(24, 26, 27);
color: #E8E6E3;
border-color:rgb(140, 130, 115);
}
.completebtn i {
border-color: rgb(140, 130, 115);
}
.removebtn i{
border-color: rgb(140, 130, 115);
}
.starbtn i{
border-color: rgb(140, 130, 115);
}
.clearbtn {
border-color: rgb(140, 130, 115);
background-color: #181A1B;
color: #E8E6E3;
}
.formdiv {
color: #E8E6E3;
}
.addtasktxt{
background-color: #181A1B;
color: #E8E6E3;
}
.addtaskbtn{
background-color:#181A1B;
color: #E8E6E3;
}
}
\ No newline at end of file
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