Skip to content

Commit

Permalink
Merge pull request #289 from Harsh2504/UIenhancement
Browse files Browse the repository at this point in the history 
UI improvement, color scheme, dark mode improvement, footer & many more additional enhancement
  • Loading branch information
@Kritika30032002
Kritika30032002 authored Dec 13, 2023
2 parents 54dbca5 + bbcea1c commit e2243d2
Show file tree
Hide file tree
Showing 5 changed files with 584 additions and 211 deletions.
5 changes: 3 additions & 2 deletions .vscode/settings.json
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
{
"liveServer.settings.port": 5503
}
"liveServer.settings.port": 5503

}
Binary file added Roboto_Slab.zip
View file
Binary file not shown.
176 changes: 92 additions & 84 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>

<link rel="stylesheet" href="style.css" />
<title>To-Do List</title>
</head>
Expand All @@ -27,11 +29,13 @@
<i class="pen fas fa-pencil"></i>
</div>
</div>
<h1 id="todo-header" style="margin-top: 10%; " ></h1>
</div>
<!-- Preloader Ends -->
<div id="lblsuccess" class="message success-message" style="display: none"></div>
<div id="lblerror" class="message danger-message" style="display: none"></div>
<label class="switch">
<!--ThemeMode Switcher-->
<label class="switch animate__animated animate__fadeInLeftBig animate__slow animate__delay-2s" style="margin-left: 30px; margin-top: 30px;">
<span class="sun"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g fill="#ffd43b">
<circle r="5" cy="12" cx="12"></circle>
Expand All @@ -55,11 +59,13 @@
<i id="confirm-cancel" class="fas fa-times close-button"></i>
</div>
<h2>Confirmation</h2>
<h4 id="confirm-msg">Are you sure you want to delete this task?</h4>
<button id="confirm-yes">Yes</button>
<button id="confirm-no">No</button>
<h6 id="confirm-msg">Are you sure you want to delete this task?</h6>
<button id="confirm-yes" class="btn btn-outline-success">Yes</button>
<button id="confirm-no" class="btn btn-outline-danger">No</button>
</div>
</div>


<!-- ------------------- -->
<!-- Confirmation All- dialog -->
<div id="custom-confirm-all" class="custom-confirm-all">
Expand All @@ -68,99 +74,97 @@ <h4 id="confirm-msg">Are you sure you want to delete this task?</h4>
<i id="confirm-cancel-all" class="fas fa-times close-button"></i>
</div>
<h2>Confirmation</h2>
<h4 id="confirm-msg-all">Are you sure you want to delete this task?</h4>
<button id="confirm-yes-all">Yes</button>
<button id="confirm-no-all">No</button>
<h6 id="confirm-msg-all">Are you sure you want to delete this task?</h6>
<button id="confirm-yes-all" class="btn btn-outline-success">Yes</button>
<button id="confirm-no-all" class="btn btn-outline-danger">No</button>
</div>
</div>
<!-- ------------------- -->
<div class="container">

<!-- <header class="text-center">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 text-center">
@@ -90,125 +84,88 @@ <h4 id="confirm-msg-all">Are you sure you want to delete this task?</h4>
</div>
</div>
</div>
</header> -->
<h1 class="text-center text-primary"><span id="element"></span></h1>
<p class="text-center text-secondary">Simply add your tasks here</p>
<div class="container main">
<h3 class="text-center mb-4">Add your tasks below</h3>
<form id="addForm" class="">
<span class="">
<input class="" type="text" onkeyup="enableSubmit(this, 'submitBtn')" id="item" placeholder="Write your task here..." />
<span class="">
<textarea style="overflow-y: scroll; resize: none;width:100%;" placeholder="Write Description " id="description"></textarea>
</span>
<input class="btn btn-warning text-light" id="dueDate" placeholder="Date" />
<select id="priority">
<option value="" selected disabled hidden>Select priority</option>
<option value="Low" style="background:green" onfocus="this.size=3">Low</option>
<option value="Medium" style="background:yellow" onfocus="this.size=3">Medium</option>
<option value="High" style="background:red" onfocus="this.size=3">High</option>
</select>
</span>
<input type="submit" class="" id="submitBtn" value="Add" disabled/>
<button id="editTask"class="" style="display: none">
Edit
</button>

</form>

<div class="search-container">
<input type="text" id="searchBar" placeholder="Search tasks..." class="form-control w-75 mx-auto mt-3">
<h1 class="text-center titleText "><span id="element"></span></h1>
<p class="text-center animate__animated animate__flipInX animate__slow animate__delay-3s">Simply add your tasks here</p>
<div class="container main mt-5 w-80 animate__animated animate__fadeInDown animate__slow animate__delay-2s">
<h3 class="text-center mb-4" id="maintitle">Add your tasks below :</h3>
<form id="addForm" class="row w-100 d-flex flex-wrap justify-content-between align-items-center">

<input class="form-control inputcss" type="text" onkeyup="enableSubmit(this, 'submitBtn')" id="item"
placeholder="Write your task here..." />
<textarea style="overflow-y: scroll; resize: none;width:100%;" class="inputcss mb-3" placeholder="Write Description " id="description"></textarea>
<select id="priority">
<option value="" selected disabled hidden>select priority</option>
<option value="Low" style="background:rgba(84, 211, 0, 0.605); color:rgba(42, 105, 0, 0.395) ;" onfocus="this.size=3">Low</option>
<option value="Medium" style="background:rgba(255, 225, 125, 0.788); color: rgba(194, 149, 0, 0.788);" onfocus="this.size=3">Medium</option>
<option value="High" style="background:rgba(255, 120, 120, 0.786);color:rgba(191, 0, 0, 0.786);" onfocus="this.size=3">High</option>
</select>

<input class="btn btn-dark " id="dueDate" placeholder="Date" />


<input type="submit" class="btn btn-outline-success addbtn" id="submitBtn" value="Add" style="width:80px"
disabled />
<button id="editTask" class="form_btn btn btn-outline-primary " style="display: none; width:80px;">
Edit
</button>
</form>


<div class="text-center">
<h3 class="mt-4 text-center" id="heading-tasks">Tasks</h3>
<div class="search-container mb-3">
<input type="text" id="searchBar" placeholder=" Search tasks..." class="form-control w-75 mx-auto mt-3 inputcss">
</div>
<div class="text-center">
<h3 class="" id="heading-tasks">Tasks</h3>
<div class="dropdown">
<button class="btn btn-warning dropbtn d-flex align-items-center text-light ml-2"
onclick="myFunction();">
<ion-icon class="dropbtn" name="funnel-outline" style="font-size: 25px; margin-right: 6px"></ion-icon>
Sort By
<ion-icon class="dropbtn" name="chevron-down-outline"
style="font-size: 25px; margin-left: 6px"
></ion-icon>
</button>
<div id="myDropdown" class="dropdown-content ml-2 mt-0.5">
<a onclick="sortByPriority('highToLow');">High to Low Priority</a>
<a onclick="sortByPriority('lowToHigh');">Low to High Priority</a>
<a onclick="sortByDueDate('early');">Early To Do</a>
<a onclick="sortByDueDate('late');">Lately To Do</a>
</div>
</div>
<form id="newTaskForm">
<ul class="list-group" id="taskList"></ul>
</form>
<button id="clearAllTasks" class="btn btn-danger clear_btn" onclick="clearAllTasks();" >
<span class="d-flex align-items-center">
<ion-icon name="trash-outline" style="font-size: 25px; margin-right: 6px" ></ion-icon>Clear All Tasks</span>
<div class="dropdown">
<button class="btn btn-outline-dark dropbtn d-flex align-items-center ml-2" onclick="myFunction();">
<ion-icon class="dropbtn" name="funnel-outline" style="font-size: 20px; margin-right: 6px"></ion-icon>
Sort By
<ion-icon class="dropbtn" name="chevron-down-outline" style="font-size: 20px; margin-left: 6px"></ion-icon>
</button>
<div id="myDropdown" class="dropdown-content ml-2 mt-0.5" >
<a onclick="sortByPriority('highToLow');" class="a1" >High to Low Priority</a>
<a onclick="sortByPriority('lowToHigh');" class="a2" >Low to High Priority</a>
<a onclick="sortByDueDate('early');" class="a3" >Early To Do</a>
<a onclick="sortByDueDate('late');" class="a4" >Lately To Do</a>
</div>
</div>
<!--Dynamic Task list-->
<form id="newTaskForm" class="mt-3">
<ul class="list-group " id="taskList"></ul>
</form>
<button id="clearAllTasks" class="btn btn-outline-danger clear_btn" onclick="clearAllTasks();">
<span class="d-flex align-items-center">
<ion-icon name="trash-outline" style="font-size: 20px; margin-right: 6px"></ion-icon>Clear All Tasks</span>
</button>
</div>
</div>
<br /><br />
<h2 style="text-align: center" class="mb-3">Why SimplyTasked?</h2>
<p style="text-align: center" class="mb-5">
Simply, because it is a SIMPLE To-Do List Tool to organize your tasks
efficiently.
</p>
<br />
<div class="list" style="text-align: center">
<p>=> Intuitive task management</p>
<p>=> Seamless due date tracking</p>
<p>=> Beautiful and user-friendly design</p>
</div>
<script src="index.js"></script>
<script
type="module"
src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"
></script>
<script
nomodule
src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"
>
</div>
<br /><br />
<h2 style="text-align: center" class="mt-2 animate__animated animate__fadeInUp animate__slow animate__delay-3s">Why Simply Tasked?</h2>
<p style="text-align: center" class="mb-4 animate__animated animate__fadeInUp animate__slow animate__delay-3s">
Simply, because it is a SIMPLE To-Do List Tool to organize your tasks
efficiently.
</p>

<div class="list mb-5 animate__animated animate__fadeInUp animate__slow animate__delay-3s " style="text-align: center ">
<ul>
<li>Intuitive task management</li>
<li>Seamless due date tracking</li>
<li>Beautiful and user-friendly design</li>
</ul>
</div>


<script src="index.js"></script>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js">
</script>
<script src="https://unpkg.com/[email protected]/dist/typed.umd.js"></script>
<script>
Expand All @@ -173,8 +177,12 @@ <h2 style="text-align: center" class="mb-3">Why SimplyTasked?</h2>
- To Add Task: 'Add [task] due [date] priority [priority]'
- To Delete Task: 'Delete task [task]'
- To Edit Task: 'Edit task [old task] to [new task] due date [new due date] priority [new priority]'"
class="btn btn-primary">Start Voice Command</button>

class="btn btn-outline-primary btn-lg voice-input animate__animated animate__fadeInRightBig animate__slow animate__delay-2s"> <i class="fas fa-microphone"></i></button>
<section class="footer-down">
<div >
<marquee width="100%" direction="left" >Developed and Designed By <b>Kritika Gupta</b> | © All Rights Reserved</marque>
</div>
</section>
</body>

</html>
</html>
Loading

0 comments on commit e2243d2

Please sign in to comment.