Skip to content
GitLab
Commit 2f266b45 authored by sparshtripathi's avatar sparshtripathi
Browse files

Made webpage more efficient and added option of installing as PWA

parent 1729ee21
Expand all Hide whitespace changes
Inline Side-by-side
css/all.css 0 → 100644
View file @ 2f266b45
This diff is collapsed.
css/icons.css 0 → 100644
View file @ 2f266b45
.fa, .fas, .far, .fal, .fad, .fab {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
}
.fa-plus-square:before {
content: "\f0fe";
}
.fa-eraser:before {
content: "\f12d";
}
.fa-check:before {
content: "\f00c";
}
.fa-trash:before {
content: "\f1f8";
}
.fa-star:before {
content: "\f005";
}
.sr-only {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px; }
.sr-only-focusable:active, .sr-only-focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto; }
@font-face {
font-family: 'Font Awesome 5 Brands';
font-style: normal;
font-weight: 400;
font-display: block;
src: url("../webfonts/fa-brands-400.eot");
src: url("../webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.woff") format("woff"), url("../webfonts/fa-brands-400.ttf") format("truetype"), url("../webfonts/fa-brands-400.svg#fontawesome") format("svg"); }
.fab {
font-family: 'Font Awesome 5 Brands';
font-weight: 400; }
@font-face {
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 400;
font-display: block;
src: url("../webfonts/fa-regular-400.eot");
src: url("../webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.woff") format("woff"), url("../webfonts/fa-regular-400.ttf") format("truetype"), url("../webfonts/fa-regular-400.svg#fontawesome") format("svg"); }
.far {
font-family: 'Font Awesome 5 Free';
font-weight: 400; }
@font-face {
font-family: 'Font Awesome 5 Free';
font-style: normal;
font-weight: 900;
font-display: block;
src: url("../webfonts/fa-solid-900.eot");
src: url("../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.woff") format("woff"), url("../webfonts/fa-solid-900.ttf") format("truetype"), url("../webfonts/fa-solid-900.svg#fontawesome") format("svg"); }
.fa,
.fas {
font-family: 'Font Awesome 5 Free';
font-weight: 900; }
\ No newline at end of file
style.css → css/style.css
View file @ 2f266b45
......@@ -11,7 +11,7 @@ body::-webkit-scrollbar-track {
}
body::-webkit-scrollbar-thumb {
background-color: white;
/* background-color: white; */
border-radius: 50px;
background-clip: padding-box;
-webkit-background-clip: padding-box;
......@@ -39,11 +39,6 @@ body {
}
} */
.data-netlify-identity-menu {
color: white;
font-size: 10px;
}
.content {
display: flexbox;
flex-direction: row;
......@@ -298,9 +293,9 @@ li.done div:first-of-type {
border-color: gold;
}
.starred {
/* .starred {
order: 100;
}
} */
.fix-search form {
box-shadow: 1px 1px 15px 2px rgba(0, 0, 0, 0.4);
......@@ -317,7 +312,6 @@ li.done div:first-of-type {
box-shadow: 1px 1px 15px 2px rgba(0, 0, 0, 0.4);
}
/* .darkmodebtn {
position: absolute;
right: 35px;
......@@ -389,11 +383,19 @@ input:checked+.slider:before {
border-radius: 50%;
} */
@media (prefers-color-scheme: light) {
body::-webkit-scrollbar-thumb {
background-color: white;
}
}
@media (prefers-color-scheme: dark) {
body {
background-image: linear-gradient(to left, rgb(150, 47, 15), rgb(162, 20, 75));
}
body::-webkit-scrollbar-thumb {
background-color: #181A1B;
}
.ultasks li {
background-color: #181A1B;
border-color: rgb(140, 130, 115);
......@@ -403,7 +405,6 @@ input:checked+.slider:before {
color: #E8E6E3;
}
h1 {
/* color: #E8E6E3; */
color: #181A1B;
}
form {
......@@ -414,17 +415,15 @@ input:checked+.slider:before {
.ultasks li button {
background: rgb(24, 26, 27);
color: #E8E6E3;
border-color:rgb(140, 130, 115);
border-color: rgb(140, 130, 115);
}
.completebtn i {
border-color: rgb(140, 130, 115);
}
.removebtn i{
.removebtn i {
border-color: rgb(140, 130, 115);
}
.starbtn i{
.starbtn i {
border-color: rgb(140, 130, 115);
}
.clearbtn {
......@@ -435,12 +434,12 @@ input:checked+.slider:before {
.formdiv {
color: #E8E6E3;
}
.addtasktxt{
.addtasktxt {
background-color: #181A1B;
color: #E8E6E3;
}
.addtaskbtn{
background-color:#181A1B;
.addtaskbtn {
background-color: #181A1B;
color: #E8E6E3;
}
}
\ No newline at end of file
index.html
View file @ 2f266b45
......@@ -3,15 +3,17 @@
<title>To-do List</title>
<head>
<link rel="preload" as="font">
<!-- <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"
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/icons.css" />
<link href="https://fonts.googleapis.com/css?family=Zen Tokyo Zoo" rel="stylesheet" media="none"
onload="if(media!=='all')media='all'" />
<!-- <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>
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" />
......@@ -31,8 +33,9 @@
<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" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" media="none"
onload="if(media!=='all')media='all'" />
<meta name="apple-mobile-web-app-status-bar-style" content="default">
</head>
<body>
......@@ -74,7 +77,33 @@
</div>
</div>
<script src="script.js"></script>
<script src="js/script.js"></script>
<!-- <script>
if ("serviceWorker" in navigator) {
// register service worker
console.log('hello');
navigator.serviceWorker.register("js/service-worker.js");
console.log('test');
}
</script> -->
<script type="text/javascript">
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('service-worker.js').then(function (registration) {
// Registration was successful
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function (err) {
// registration failed :(
console.log('ServiceWorker registration failed: ', err);
});
});
}
</script>
</body>
</html>
\ No newline at end of file
script.js → js/script.js
View file @ 2f266b45
// if ("serviceWorker" in navigator) {
// // register service worker
// navigator.serviceWorker.register("js/service-worker.js");
// }
let addtasktxt = document.querySelector('.addtasktxt');
let addtaskbtn = document.querySelector('.addtaskbtn');
let ultasks = document.querySelector('.ultasks');
......@@ -39,7 +44,7 @@ let taskStorage = defaultTasks;
taskStorage = localTasks ? (JSON.parse(localTasks)) : defaultTasks;
taskStorage.forEach(e => {
addTask(e.taskText, 1, e.isChecked, true);
addTask(e.taskText, 1, e.isChecked, true, e.isStarred);
});
......@@ -82,14 +87,14 @@ clearbtn.addEventListener('click', function () {
taskStorage = [];
});
function addTask(value = addtasktxt.value, noAnimation, Checked, isInit) {
function addTask(value = addtasktxt.value, noAnimation, checked, isInit, starred) {
if (value) {
taskInfo = {
taskText: value,
taskId: Math.random(),
isChecked: Checked ? true : false,
isStarred: false
isChecked: checked ? true : false,
isStarred: starred ? true : false
};
if (!isInit) {
taskStorage.push(taskInfo);
......@@ -108,10 +113,11 @@ function addTask(value = addtasktxt.value, noAnimation, Checked, isInit) {
listtxt.classList.add("listxt");
if (noAnimation) {
listitem.classList.add('added');
if (Checked) {
if (checked) {
listitem.classList.remove('added');
listitem.classList.add("done");
}
}
else {
listitem.classList.add('added');
......@@ -142,10 +148,18 @@ function addTask(value = addtasktxt.value, noAnimation, Checked, isInit) {
starbtn = document.createElement('button');
starbtn.className = "starbtn";
starbtn.innerHTML = '<i class="far fa-star"></i>';
if (starred && isInit) {
starbtn.innerHTML = '<i class="fas fa-star"></i>';
listitem.style.order = starredCount;
starredCount--;
}
else {
starbtn.innerHTML = '<i class="far fa-star"></i>';
}
completediv.appendChild(starbtn);
starbtn.title = "Star task";
}
listitem.style.fontSize = '25px';
......@@ -155,7 +169,7 @@ function addTask(value = addtasktxt.value, noAnimation, Checked, isInit) {
function onItemClick(event) {
console.log(event);
// console.log(event);
let classList = event.target.classList;
let item = event.target.closest('li');
......@@ -175,7 +189,7 @@ function onItemClick(event) {
pushToLocal();
}
else if(event.target.closest('li').classList.contains('done')) {
else if (event.target.closest('li').classList.contains('done')) {
taskStorage.forEach(e => {
if (item.textContent === e.taskText) {
e.isChecked = true;
......@@ -208,17 +222,19 @@ function onItemClick(event) {
}
let i_element = event.target.closest('i');
if (classList.contains('far')) {
i_element.classList = "fas fa-star";
if (event.target.closest('li')) {
starredCount--;
item.style.order = starredCount;
taskStorage.forEach(e => {
if (item.textContent === e.taskText) {
e.isStarred = true;
// index = taskStorage.indexOf(e);
// let starredItem = taskStorage[index];
// taskStorage.splice(index, 1);
// taskStorage.unshift(starredItem);
}
});
pushToLocal();
......@@ -227,6 +243,12 @@ function onItemClick(event) {
else if (classList.contains('fas')) {
i_element.classList = "far fa-star";
item.style.order = 0;
taskStorage.forEach(e => {
if (item.textContent === e.taskText) {
e.isStarred = false;
}
});
pushToLocal();
}
}
}
......
manifest.json
View file @ 2f266b45
This diff is collapsed.
service-worker.js 0 → 100644
View file @ 2f266b45
This diff is collapsed.
webfonts/fa-regular-400.svg 0 → 100644
View file @ 2f266b45
This diff is collapsed.
webfonts/fa-solid-900.svg 0 → 100644
View file @ 2f266b45
This diff is collapsed.
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