Skip to content

To do feature added #258

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ShambhaviSharma0110 wants to merge 7 commits into
base: master
Choose a base branch
from
Open

To do feature added #258

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8c73322
to-do.js added
ShambhaviSharma0110 Mar 26, 2021
2ebf4c2
to-do-style added
ShambhaviSharma0110 Mar 26, 2021
abe2b8f
To do files added
ShambhaviSharma0110 Mar 26, 2021
9e65147
updated to-do html
ShambhaviSharma0110 Mar 26, 2021
5db66af
Update todo.js
ShambhaviSharma0110 May 17, 2021
527a05b
Update Todo.html
ShambhaviSharma0110 May 17, 2021
52eeb8c
Update Todo.html
ShambhaviSharma0110 May 17, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
105 changes: 105 additions & 0 deletions Todo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TODO List</title>
<link rel="stylesheet" href="./css/todo-style.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="wrapper">
Copy link
Collaborator

@harikesh409 harikesh409 May 14, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use bootstrap container instead of writing whole new styles for the wrapper.

<header>Todo App</header>
Copy link
Collaborator

@harikesh409 harikesh409 May 14, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add the navbar that is present on the home page.

<div class="inputField">
Copy link
Collaborator

@harikesh409 harikesh409 May 14, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use bootstrap form styles.

<input type="text" placeholder="Add your new todo">
<button><i class="fas fa-plus"></i></button>
</div>
<ul class="todoList">
<!-- data are comes from local storage -->
</ul>
<div class="footer">
<span>You have <span class="pendingTasks"></span> pending tasks</span>
<button>Clear All</button>
</div>
<footer id="footer">
<div class="container">
<div class="row subscribe-box py-5">
<div class="col-lg-4 col-md-4 col-sm-12 col-12 offset-lg-1">
<h2 class="text-white font-weight-bold py-2">Contact Us</h2>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-12">
<form action="">
<div class="input-group">
<input type="email" class="form-control py-3" placeholder="Enter your Email">
<div class="input-group-append">
<button class="input-group-text subscribe-button text-white px-5 font-weight-bold">
Contact Us
</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="container mt-5 pt-lg-5">
<div class="row">
<div class="col-md-3 col-sm-6 col-lg-3 col-12">
<div class="">
<img src="./images/icon.png" alt="" class="img-fluid mb-lg-4" width="100px" height="100px">
</div>
<p class="text-white">An Open Source organization focuses on Data Structure and Algorithms.</p>
</div>
<div class="col-lg-2 col-md-2 col-sm-6 col-12 offset-lg-1">
<h5 class="font-weight-bold text-white mb-lg-4 pb-2 margin-top-mobile">Useful Links</h5>
<ul>
<a class="text-white mb-lg-3" href="#about">About</a><br>
<a class="text-white mb-lg-3" href="./team.html">Our Team</a><br>
<a class="text-white mb-lg-3" href="#footer">Contact</a><br>
<a class="text-white mb-lg-3" href="./sitemap.html">SiteMap</a>
</ul>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-12">
<h5 class="font-weight-bold text-white mb-lg-4 pb-2 margin-top-mobile">Features</h5>
<ul class="list-group">

<a class="text-white mb-lg-3" href="https://www.codechef.com/ide" target="_blank">Code
Editor</a>
<a class="text-white mb-lg-3" href="https://www.geeksforgeeks.org/data-structure-gq/"
target="_blank">Quizzes</a>
<a class="text-white mb-lg-3" href="https://github.com/Algo-Phantoms/Algo-Tree"
target="_blank">DSA Guidance</a>
<a class="text-white mb-lg-3" href="https://dare2compete.com/" target="_blank">Opportunities</a>

</ul>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-12">
<h5 class="font-weight-bold text-white mb-lg-4 pb-2 margin-top-mobile">Follow Us</h5>
<a href="#" target="_blank"><i class="fa fa-github p-2 text-white" aria-hidden="true"
style="background:#3caea3; border-radius: 50%;"></i>
</a>
<a href="#" target="_blank"><i class="fa fa-instagram p-2 text-white" aria-hidden="true"
style="background:#3caea3; border-radius: 50%;"></i>
</a>
<a href="#" target="_blank"><i class="fa fa-linkedin p-2 text-white" aria-hidden="true"
style="background:#3caea3; border-radius: 50%;"></i>
</a>
<a href="#" target="_blank"><i class="fa fa-twitter p-2 text-white" aria-hidden="true"
style="background:#3caea3; border-radius: 50%;"></i>
</a>
</div>
</div>
<hr style="background: white;" class="mt-5">
<div class="text-center text-white mt-lg-4 pt-lg-2 copyright-text">
Copyright &copy; 2021 <a href="#" style="color: #3caea3; text-decoration: none;" target="_blank"><span
class="font-weight-bold">AlgoPhantoms.</span></a> All Rights Reserved</div>
</div>
</footer>
</div>

Copy link
Collaborator

@harikesh409 harikesh409 May 14, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Keep the footer that is present on the home page.

<script src="./js/todo.js"></script>

</body>
</html>
131 changes: 131 additions & 0 deletions css/todo-style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,700;0,900;1,900&display=swap");
/*To do list style */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
::selection{
color: #ffff;
background: rgb(142, 73, 232);
}
body{
width: 100%;
height: 100vh;
/* overflow: hidden; */
padding: 10px;
background: linear-gradient(to bottom, #68EACC 0%, #497BE8 100%);
Copy link
Collaborator

@harikesh409 harikesh409 May 14, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pick colours from the existing scheme, this gradient looks far off.

}
.wrapper{
background: #fff;
max-width: 400px;
width: 100%;
margin: 120px auto;
padding: 25px;
border-radius: 5px;
box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
}
.wrapper header{
font-size: 30px;
font-weight: 600;
}
.wrapper .inputField{
margin: 20px 0;
width: 100%;
display: flex;
height: 45px;
}
.inputField input{
width: 85%;
height: 100%;
outline: none;
border-radius: 3px;
border: 1px solid #ccc;
font-size: 17px;
padding-left: 15px;
transition: all 0.3s ease;
}
.inputField input:focus{
border-color: #8E49E8;
}
.inputField button{
width: 50px;
height: 100%;
border: none;
color: #fff;
margin-left: 5px;
font-size: 21px;
outline: none;
background: #8E49E8;
cursor: pointer;
border-radius: 3px;
opacity: 0.6;
pointer-events: none;
transition: all 0.3s ease;
}
.inputField button:hover,
.footer button:hover{
background: #721ce3;
}
.inputField button.active{
opacity: 1;
pointer-events: auto;
}
.wrapper .todoList{
max-height: 250px;
overflow-y: auto;
}
.todoList li{
position: relative;
list-style: none;
height: 45px;
line-height: 45px;
margin-bottom: 8px;
background: #f2f2f2;
border-radius: 3px;
padding: 0 15px;
cursor: default;
overflow: hidden;
}
.todoList li .icon{
position: absolute;
right: -45px;
background: #e74c3c;
width: 45px;
text-align: center;
color: #fff;
border-radius: 0 3px 3px 0;
cursor: pointer;
transition: all 0.2s ease;
}
.todoList li:hover .icon{
right: 0px;
}
.wrapper .footer{
display: flex;
width: 100%;
margin-top: 20px;
align-items: center;
justify-content: space-between;
}
.footer button{
padding: 6px 10px;
border-radius: 3px;
border: none;
outline: none;
color: #fff;
font-weight: 400;
font-size: 16px;
margin-left: 5px;
background: #8E49E8;
cursor: pointer;
user-select: none;
opacity: 0.6;
pointer-events: none;
transition: all 0.3s ease;
}
.footer button.active{
opacity: 1;
pointer-events: auto;
}
75 changes: 75 additions & 0 deletions js/todo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
//to-do

// getting all required elements
const inputBox = document.querySelector(".inputField input");
const addBtn = document.querySelector(".inputField button");
const todoList = document.querySelector(".todoList");
const deleteAllBtn = document.querySelector(".footer button");

// onkeyup event
inputBox.onkeyup = () => {
let userEnteredValue = inputBox.value; //getting user entered value
if (userEnteredValue.trim() != 0) {
//if the user value isn't only spaces
addBtn.classList.add("active"); //active the add button
} else {
addBtn.classList.remove("active"); //unactive the add button
Copy link
Collaborator

@harikesh409 harikesh409 May 14, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Try adding the disabled bootstrap class so the cursor also gets changed.

}
};

showTasks(); //calling showTask function

addBtn.onclick = () => {
//when user click on plus icon button
let userEnteredValue = inputBox.value; //getting input field value
let getLocalStorageData = localStorage.getItem("algo-phantoms-todo-list"); //getting localstorage
if (getLocalStorageData == null) {
//if localstorage has no data
listArray = []; //create a blank array
} else {
listArray = JSON.parse(getLocalStorageData); //transforming json string into a js object
}
listArray.push(userEnteredValue); //pushing or adding new value in array
localStorage.setItem("New Todo", JSON.stringify(listArray)); //transforming js object into a json string
showTasks(); //calling showTask function
addBtn.classList.remove("active"); //unactive the add button once the task added
};

function showTasks() {
let getLocalStorageData = localStorage.getItem("New Todo");
if (getLocalStorageData == null) {
listArray = [];
} else {
listArray = JSON.parse(getLocalStorageData);
}
const pendingTasksNumb = document.querySelector(".pendingTasks");
pendingTasksNumb.textContent = listArray.length; //passing the array length in pendingtask
if (listArray.length > 0) {
//if array length is greater than 0
deleteAllBtn.classList.add("active"); //active the delete button
} else {
deleteAllBtn.classList.remove("active"); //unactive the delete button
}
let newLiTag = "";
listArray.forEach((element, index) => {
newLiTag += `<li>${element}<span class="icon" onclick="deleteTask(${index})"><i class="fas fa-trash"></i></span></li>`;
});
todoList.innerHTML = newLiTag; //adding new li tag inside ul tag
inputBox.value = ""; //once task added leave the input field blank
}

// delete task function
function deleteTask(index) {
let getLocalStorageData = localStorage.getItem("New Todo");
listArray = JSON.parse(getLocalStorageData);
listArray.splice(index, 1); //delete or remove the li
localStorage.setItem("New Todo", JSON.stringify(listArray));
showTasks(); //call the showTasks function
}

// delete all tasks function
deleteAllBtn.onclick = () => {
listArray = []; //empty the array
localStorage.setItem("New Todo", JSON.stringify(listArray)); //set the item in localstorage
showTasks(); //call the showTasks function
};