Skip to content

Commit

Permalink
Merge branch 'main' of https://github.com/shubhamgupta786/To-Do-List
Browse files Browse the repository at this point in the history
  • Loading branch information
@shubhamgupta786
shubhamgupta786 committed Oct 27, 2022
2 parents 7553105 + 80f2479 commit b951989
Show file tree
Hide file tree
Showing 3 changed files with 111 additions and 119 deletions.
76 changes: 46 additions & 30 deletions assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,7 @@ form button,

.myBtn {
text-align: center;
font-family:"Comic Sans MS", "Comic Sans", cursive;
font-family: "Comic Sans MS", "Comic Sans", cursive;
font-weight: bold;
-webkit-appearance: none;
-moz-appearance: none;
Expand Down Expand Up @@ -468,9 +468,10 @@ select {
background-size: 100% 111px;
height: 12vh;
/* background-repeat: no-repeat; */
/* display: flex; */
justify-content: space-around;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
margin-top: auto;
width: 100%;
background-color: var(--blue-shade-1);
Expand Down Expand Up @@ -511,11 +512,10 @@ select {
}

.social-icon {
width: 2rem;
margin: .5rem;
margin-top: 25px;
margin-left: 10px;
width: 32px;
height: auto;
float: left;
margin: 0.5rem;
/* border-radius: 50%; */
transition: all 0.2s;
}
Expand Down Expand Up @@ -596,7 +596,7 @@ select {
padding-top: 50px;
color: whitesmoke;
font-weight: lighter;
font-family:"Comic Sans MS", "Comic Sans", cursive;
font-family: "Comic Sans MS", "Comic Sans", cursive;

}

Expand Down Expand Up @@ -1017,42 +1017,58 @@ body {
.fa-moon {
color: pink;
}

.fa-sun {
color: yellow;
color: yellow;
}

/* scrollTop css codes */
#scrollTop {
display: none;
position: fixed;
bottom: 2%;
right: 5%;
width: 40px;
height: 50px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background: inherit;
color: white;
cursor: pointer;
border-radius: 8px;
display: none;
position: fixed;
bottom: 2%;
right: 5%;
width: 40px;
height: 50px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background: inherit;
color: white;
cursor: pointer;
border-radius: 8px;
}

#scrollTop:hover {
background-color: #555;
background-color: #555;
}

.navbar {
width: 100%;
/* background-color: #555; */
overflow: auto;
}
.navbar a {
}

.navbar a {
float: left;
/* padding: 12px; */
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
}
}

.navbar a img {
width: 80px;
height: 80px;
object-fit: contain;
}

.footer-desc {
margin-top: unset;
margin-bottom: unset;
}

.footer-creator-label h3 {
margin-top: unset;
}
2 changes: 1 addition & 1 deletion assets/js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -493,7 +493,7 @@ function closemodal() {
function show_alert() {
if (localStorage.getItem("todos") === null) {
let html = "Please add items first";
console.log(html);
console.log({html});
alert(html);
} else {
document.getElementById("confirmation_box").classList.remove("hide");
Expand Down
152 changes: 64 additions & 88 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,22 +9,11 @@
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
/> -->
<title>To-Do List</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,user-scalable=no"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no" />
<!-- favicon -->
<link
rel="shortcut icon"
type="image/jpg"
href="assets/images/favicon.png"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"
integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk="
crossorigin="anonymous"
/>
<link rel="shortcut icon" type="image/jpg" href="assets/images/favicon.png" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"
integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk=" crossorigin="anonymous" />

<!-- jquery CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
Expand All @@ -48,11 +37,13 @@
<header>
<div class="navbar">
<a href="#"><img src="assets\images\logo.png" alt="logo" width="120px"></a>

<a href="#">
<div class="header"><b>
<h1>To-Do List</h1>
</b></div>
</a>

<a href="#">
<div class="col-auto">
<input type="checkbox" id="light" class="checkbox" onclick="switchToDarkMode()">
Expand All @@ -67,65 +58,60 @@ <h1>To-Do List</h1>

</header>
<div class="modal red" id="Modal">
<div class="content" id="content">
<span id="modal-text"> Some Text </span>
<button onclick="closemodal()" class="modal-btn">
<i class="fas fa-times"></i>
</button>
</div>
<div class="content" id="content">
<span id="modal-text"> Some Text </span>
<button onclick="closemodal()" class="modal-btn">
<i class="fas fa-times"></i>
</button>
</div>
</div>

<!-- Clock Modification -->
<div class="Clock">
<div id="time"></div>
<div class="week">
<div id="day"></div>
<div id="date"></div>
</div>
<div id="time"></div>
<div class="week">
<div id="day"></div>
<div id="date"></div>
</div>
</div>

<div class="buttons-wrapper">
<div class="button-div">
<button type="button" id="myBtn" class="myBtn">Add a new task</button>
</div>
<div class="select">
<select name="todos" class="filter-todo" style="color: black">
<option value="all" style="color: black">All</option>
<option value="completed" style="color: black">Completed</option>
<option value="incomplete" style="color: black">Incomplete</option>
</select>
</div>
<div class="button-div">
<button type="button" id="myBtn" class="myBtn">Add a new task</button>
</div>
<div class="select">
<select name="todos" class="filter-todo" style="color: black">
<option value="all" style="color: black">All</option>
<option value="completed" style="color: black">Completed</option>
<option value="incomplete" style="color: black">Incomplete</option>
</select>
</div>
</div>

<!-- The Modal -->
<div id="myModal" class="modal-new">
<!-- Modal content -->
<div class="modal-content">
<span class="close">&times;</span>
<form class="todoform">
<div class="input-group mb-3">
<input
type="text"
placeholder="Add a new Task .."
class="todo-input form-control"
id="textInput"
required
/>
<div class="abc">
<button id="todo-button" class="todo-button" type="submit">
<i class="fas fa-plus-square"></i>
</button>
</div>
</div>
</form>
</div>
<!-- Modal content -->
<div class="modal-content">
<span class="close">&times;</span>
<form class="todoform">
<div class="input-group mb-3">
<input type="text" placeholder="Add a new Task .." class="todo-input form-control" id="textInput"
required />
<div class="abc">
<button id="todo-button" class="todo-button" type="submit">
<i class="fas fa-plus-square"></i>
</button>
</div>
</div>
</form>
</div>
</div>

<div style="color: whitesmoke; font-size: xx-small" class="no-to-do-item">
<h1>THE LIST IS EMPTY !</h1>
<h1>THE LIST IS EMPTY !</h1>
</div>
<div class="todo-container">
<ul class="todo-list"></ul>
<ul class="todo-list"></ul>
</div>
<button class="delete-all" onclick="show_alert()">Delete All Tasks</button>

Expand All @@ -142,30 +128,22 @@ <h1>THE LIST IS EMPTY !</h1>
<button class="proceed btn btn-success mt-5 col-3" id="txt-color" onclick="deleteAll();">Yes</button>
<button class="donot_proceed btn btn-danger mt-5 col-3" id="txt-color1" onclick="goback()">No</button>
</div>
<div class="confirmation_box hide" id="confirmation_box">
<div class="confirmation_box_inner">
<div class="optbox_header">
<i class="fas fa-times" onclick="goback()"></i>
</div>
<p id="text-modal">Are you sure you want to delete all tasks?</p>
<div class="option_box">
<button
class="proceed btn btn-success mt-5 col-3"
id="txt-color"
onclick="deleteAll();"
>
Yes
</button>
<button
class="donot_proceed btn btn-danger mt-5 col-3"
id="txt-color1"
onclick="goback()"
>
No
</button>
</div>
</div>
</div>
<div class="confirmation_box hide" id="confirmation_box">
<div class="confirmation_box_inner">
<div class="optbox_header">
<i class="fas fa-times" onclick="goback()"></i>
</div>
<p id="text-modal">Are you sure you want to delete all tasks?</p>
<div class="option_box">
<button class="proceed btn btn-success mt-5 col-3" id="txt-color" onclick="deleteAll();">
Yes
</button>
<button class="donot_proceed btn btn-danger mt-5 col-3" id="txt-color1" onclick="goback()">
No
</button>
</div>
</div>
</div>
</div>
</div>

Expand All @@ -189,13 +167,13 @@ <h1>THE LIST IS EMPTY !</h1>

</div>
<div class="2ndrow-foter">
<!-- <p class="footer-desc">This project is a part of <a class="footer-desc"
<p class="footer-desc">This project is a part of <a class="footer-desc"
href="https://hacktoberfest.digitalocean.com/" target="_blank"
rel="noopener noreferrer">Hacktoberfest
2022</a> -->
2022</a>
</p>
</div>
<div class="3rd-row-footer">
<div class="3rd-row-footer footer-creator-label">
<h3>Made with <i class="fas fa-heart fa-heart-custom"></i> by Avinash</h3>
</div>

Expand Down Expand Up @@ -232,6 +210,4 @@ <h3>Made with <i class="fas fa-heart fa-heart-custom"></i> by Avinash</h3>
</body>


</html>


</html>

0 comments on commit b951989

Please sign in to comment.