├── README.md
├── index.css
├── signUp.css
├── index.html
├── style.css
├── createTask.html
├── signUp.js
├── createTask.css
└── createTask.js


/README.md:
--------------------------------------------------------------------------------
 1 | # BOOTCAMP - TASK MANAGEMENT WEBSITE
 2 | 
 3 | This project is build with several technologies that are:
 4 | 
 5 | - Javascript
 6 | - HTML & CSS
 7 | - Firebase Realtime Database
 8 | - Firebase Auth
 9 | 
10 | To clone this project please do
11 | 
12 | `git clone https://github.com/PLPAfrica/Power-Bootcamp-Project---web-dev.git`
13 | 
14 | ### Link to the website
15 | 
16 | Open Website: [https://melbite.com](ClickHere)
17 | 


--------------------------------------------------------------------------------
/index.css:
--------------------------------------------------------------------------------
 1 | 
 2 | h1 {
 3 |     margin-bottom: 8%;
 4 |     text-align: center;
 5 |     font-family: "Fredoka One", cursive;
 6 |     color: #01a2a8;
 7 |     letter-spacing: 0.1em;
 8 |   }
 9 |   
10 |   p {
11 |     margin-top: 5%;
12 |     margin-bottom: 5%;
13 |     width: 100%;
14 |     text-align: center;
15 |     border-bottom: 1px solid #000;
16 |     line-height: 0.1em;
17 |   }
18 |   
19 |   p span {
20 |     background:#fff;
21 |     padding:0 10px;
22 |   }
23 |   
24 |   input {
25 |     margin-bottom: 3%;
26 |   }
27 |   
28 |   input:last-of-type {
29 |     margin-bottom: 0;
30 |   }
31 |   
32 |   input, button {
33 |     padding: 3%;
34 |     width: 100%;
35 |   }
36 |   
37 |   .login-container {
38 |     background-color: white;
39 |     padding: 7%;
40 |     box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
41 |     width: 40vw;
42 |     margin: auto;
43 |     height: 70vh;
44 |     margin-top: 15vh;
45 |   }
46 |   
47 |   #submit, #create-acct-btn {
48 |     background-color: #AB1449;
49 |     color: white;
50 |     border: none;
51 |     margin-top: 5%;
52 |   }
53 |   
54 |   button:hover {
55 |     cursor: pointer;
56 |     opacity: 0.8;
57 |     transition: 0.3s;
58 |   }
59 |   
60 |   #sign-up {
61 |     border: none;
62 |   }
63 |   
64 |   #create-acct {
65 |     display: none;
66 |   }
67 |   
68 |   #return-btn {
69 |     background: none;
70 |     color: grey;
71 |     text-decoration: underline;
72 |     border: none;
73 |     margin-top: 3%;
74 |   }


--------------------------------------------------------------------------------
/signUp.css:
--------------------------------------------------------------------------------
 1 | 
 2 | h1 {
 3 |     margin-bottom: 8%;
 4 |     text-align: center;
 5 |     font-family: "Fredoka One", cursive;
 6 |     color: #01a2a8;
 7 |     letter-spacing: 0.1em;
 8 |   }
 9 |   
10 |   p {
11 |     margin-top: 5%;
12 |     margin-bottom: 5%;
13 |     width: 100%;
14 |     text-align: center;
15 |     border-bottom: 1px solid #000;
16 |     line-height: 0.1em;
17 |   }
18 |   
19 |   p span {
20 |     background:#fff;
21 |     padding:0 10px;
22 |   }
23 |   
24 |   input {
25 |     margin-bottom: 3%;
26 |   }
27 |   
28 |   input:last-of-type {
29 |     margin-bottom: 0;
30 |   }
31 |   
32 |   input, button {
33 |     padding: 3%;
34 |     width: 100%;
35 |   }
36 |   
37 |   .login-container {
38 |     background-color: white;
39 |     padding: 7%;
40 |     box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
41 |     width: 40vw;
42 |     margin: auto;
43 |     height: 70vh;
44 |     margin-top: 15vh;
45 |   }
46 |   
47 |   #submit, #create-acct-btn {
48 |     background-color: #AB1449;
49 |     color: white;
50 |     border: none;
51 |     margin-top: 5%;
52 |   }
53 |   
54 |   button:hover {
55 |     cursor: pointer;
56 |     opacity: 0.8;
57 |     transition: 0.3s;
58 |   }
59 |   
60 |   #sign-up {
61 |     border: none;
62 |   }
63 |   
64 |   #create-acct {
65 |     display: none;
66 |   }
67 |   
68 |   #return-btn {
69 |     background: none;
70 |     color: grey;
71 |     text-decoration: underline;
72 |     border: none;
73 |     margin-top: 3%;
74 |   }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |     <head>
 4 |         <title>BootCamp</title>
 5 |         <link rel="stylesheet" href="signUp.css">
 6 |         <link rel="stylesheet" href="style.css">
 7 |         <script  src="./signUp.js" defer type="module" ></script>
 8 |     </head>
 9 |     <body>
10 |         <div class="login-container">
11 |             <div id="main">
12 |                 <h1>Sign In</h1>  
13 |                 <input id="email" type="text" placeholder="Email"></input>
14 |                 <input id="password" type="password" placeholder="Password"></input>
15 |                 <button id="submit">Login</button>
16 |                 <p><span>or</span></p>
17 |                 <button id="sign-up">Sign Up</button>
18 |             </div>
19 |     
20 |             <div id="create-acct">
21 |                 <h1>Create an Account</h1>
22 |                 <input id="email-signup" type="text" placeholder="Email *"></input>
23 |                 <input id="confirm-email-signup" type="email" placeholder="Confirm Email *"></input>
24 |                 <input id="password-signup" type="password" placeholder="Password *"></input>
25 |                 <input id="confirm-password-signup" type="password" placeholder="Confirm Password *"></input>
26 |                 <button id="create-acct-btn">Create Account</button>
27 |                 <button id="return-btn">Return to Login</button>
28 |             </div>
29 |         </div>
30 |     </body>
31 | </html>
32 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
 1 | 
 2 | * {
 3 |     box-sizing: border-box;
 4 |     margin: 0;
 5 |     padding: 0;
 6 |   }
 7 |   
 8 |   body {
 9 |     font-family: sans-serif;
10 |   }
11 |   
12 |   header {
13 |     background-color: #01a2a8;
14 |     /* padding: 1rem 2rem; */
15 |   }
16 |   a {
17 |     text-decoration: none;
18 |     color: white;
19 |     font-size: 1.2rem;
20 |     font-weight: bold;
21 |     /* text-transform: uppercase; */
22 |   }
23 |   
24 |   /* nav styles */
25 |   
26 |   .nav {
27 |     width: 90%;
28 |     margin: auto;
29 |     display: flex;
30 |     justify-content: space-between;
31 |     align-items: center;
32 |     padding-top: 20px;
33 |   }
34 |   
35 |   .hamburger {
36 |     padding-right: 20px;
37 |     cursor: pointer;
38 |   }
39 |   
40 |   .hamburger .line {
41 |     display: block;
42 |     width: 40px;
43 |     height: 5px;
44 |     margin-bottom: 10px;
45 |     background-color: white;
46 |   }
47 |   
48 |   
49 |   .nav__link {
50 |     position: fixed;
51 |     width: 100%;
52 |     top: 5.5rem;
53 |     background-color: #01a2a8;
54 |   }
55 |   
56 |   .nav__link a {
57 |     display: block;
58 |     text-align: center;
59 |     padding: 10px 0;
60 |   }
61 |   
62 |   .nav__link a:hover {
63 |     color: #0c2344;
64 |   }
65 |   
66 |   .hide {
67 |     display: none;
68 |   }
69 | 
70 |   
71 |   
72 |   @media screen and (min-width: 600px) {
73 |     .nav__link {
74 |       display: block;
75 |       position: static;
76 |       width: auto;
77 |       margin-right: 20px;
78 |       background: none;
79 |     }
80 |   
81 |     .nav__link a {
82 |       display: inline-block;
83 |       padding: 15px 20px;
84 |     }
85 |   
86 |     .hamburger {
87 |       display: none;
88 |     }
89 |   }


--------------------------------------------------------------------------------
/createTask.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <title>Task Manager</title>
 7 |     <script src="https://www.gstatic.com/firebasejs/8.2.2/firebase-app.js"></script>
 8 |     <script src="https://www.gstatic.com/firebasejs/8.2.2/firebase-auth.js"></script>
 9 |     <script src="https://www.gstatic.com/firebasejs/8.2.2/firebase-database.js"></script>
10 |     <script src="https://kit.fontawesome.com/d733855d1a.js" crossorigin="anonymous"></script>
11 |     <link rel="stylesheet" href="./createTask.css">
12 | </head>
13 | <body>
14 | 
15 | 
16 | 
17 |     <div class="left-right-div-container">
18 |         <div class="left-div">
19 |             <form class="form" onsubmit = "storeTask(event)" id = "createTask">
20 | 
21 |                 <div class = "task-div" id="taskdiv">
22 |                     <label for="Task" class="label" id="tasklabel">Task</label>
23 |                     <input type="text" name="task" id="task" class="input-field" placeholder = "Enter task" required>
24 |                 </div>
25 | 
26 |                 <div class = "desc-div" id = "descdiv">
27 |                     <label for="Desc" class="label" id="desclabel">Description</label>
28 |                     <input type="text" name="desc" id="desc" class="input-field" placeholder = "Description" required>
29 |                 </div>
30 | 
31 |                 <div id = "form-btns">
32 |                     <button type="submit" class="button add" id = "addTask">󠀫󠀫<i class="fas fa-plus"></i> ADD TASK</button>
33 |                 </div>    
34 |             </form>
35 |         </div>
36 |     
37 |         <div class="right-div" id = "right-div">
38 |             <div class="show-delete" id="tasks-header">
39 |                 <h1 ><i class="fas fa-tasks"></i> My TASKS</h1>
40 |                 <button class="button showAll" id="showALL" onclick = "showAll()">SHOW ALL</button>
41 |                 <button class="button deleteAll" id="deleteALL" onclick = "deleteAll()">DELETE ALL</button>
42 |                
43 |                 
44 |             </div>
45 |         </div>
46 |     </div>
47 | 
48 | 
49 |     <script>
50 |         document.getElementById("task").addEventListener("focusin",function(){
51 |             document.getElementById("tasklabel").style.color = " rgb(61, 198, 243)";
52 |         });
53 |         document.getElementById("task").addEventListener("focusout",function(){
54 |             document.getElementById("tasklabel").style.color = " #aaaaaa";
55 |         });
56 |         document.getElementById("desc").addEventListener("focusin", function(){
57 |             document.getElementById("desclabel").style.color = " rgb(61, 198, 243)";
58 |         });
59 |         document.getElementById("desc").addEventListener("focusout", function(){
60 |             document.getElementById("desclabel").style.color = " #aaaaaa";
61 |         });
62 |     </script>
63 |     <script src="./createTask.js"></script>
64 | </body>
65 | </html>


--------------------------------------------------------------------------------
/signUp.js:
--------------------------------------------------------------------------------
  1 | // require('dotenv').config();
  2 | import { initializeApp } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-app.js";
  3 | import { getDatabase } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-database.js";
  4 | import {
  5 |   getAuth,
  6 |   createUserWithEmailAndPassword,
  7 |   signInWithEmailAndPassword,
  8 | } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-auth.js";
  9 | // import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.15.0/firebase-analytics.js";
 10 | 
 11 | const firebaseConfig = {
 12 |   apiKey: "AIzaSyBEC8nZF1gLS8mEJiNfpxyiLfC79JqXkA0",
 13 |   authDomain: "task-man-c7972.firebaseapp.com",
 14 |   projectId: "task-man-c7972",
 15 |   storageBucket: "task-man-c7972.appspot.com",
 16 |   messagingSenderId: "1047263220371",
 17 |   appId: "1:1047263220371:web:1b0b88233ba16509e4b366",
 18 |   measurementId: "G-9VR0K26NHG",
 19 | };
 20 | 
 21 | const app = initializeApp(firebaseConfig);
 22 | // const database = getDatabase(app);
 23 | const auth = getAuth();
 24 | 
 25 | const submitButton = document.getElementById("submit");
 26 | const signupButton = document.getElementById("sign-up");
 27 | const emailInput = document.getElementById("email");
 28 | const passwordInput = document.getElementById("password");
 29 | const main = document.getElementById("main");
 30 | const createacct = document.getElementById("create-acct");
 31 | 
 32 | const signupEmailIn = document.getElementById("email-signup");
 33 | const confirmSignupEmailIn = document.getElementById("confirm-email-signup");
 34 | const signupPasswordIn = document.getElementById("password-signup");
 35 | const confirmSignUpPasswordIn = document.getElementById(
 36 |   "confirm-password-signup"
 37 | );
 38 | const createacctbtn = document.getElementById("create-acct-btn");
 39 | 
 40 | const returnBtn = document.getElementById("return-btn");
 41 | 
 42 | var email,
 43 |   password,
 44 |   signupEmail,
 45 |   signupPassword,
 46 |   confirmSignupEmail,
 47 |   confirmSignUpPassword;
 48 | 
 49 | createacctbtn.addEventListener("click", function () {
 50 |   var isVerified = true;
 51 | 
 52 |   signupEmail = signupEmailIn.value;
 53 |   confirmSignupEmail = confirmSignupEmailIn.value;
 54 |   if (signupEmail != confirmSignupEmail) {
 55 |     window.alert("Email fields do not match. Try again.");
 56 |     isVerified = false;
 57 |   }
 58 | 
 59 |   signupPassword = signupPasswordIn.value;
 60 |   confirmSignUpPassword = confirmSignUpPasswordIn.value;
 61 |   if (signupPassword != confirmSignUpPassword) {
 62 |     window.alert("Password fields do not match. Try again.");
 63 |     isVerified = false;
 64 |   }
 65 | 
 66 |   if (
 67 |     signupEmail == null ||
 68 |     confirmSignupEmail == null ||
 69 |     signupPassword == null ||
 70 |     confirmSignUpPassword == null
 71 |   ) {
 72 |     window.alert("Please fill out all required fields.");
 73 |     isVerified = false;
 74 |   }
 75 | 
 76 |   if (isVerified) {
 77 |     createUserWithEmailAndPassword(auth, signupEmail, signupPassword)
 78 |       .then((userCredential) => {
 79 |         // Signed in
 80 |         // const user = userCredential.user;
 81 |         // ...
 82 |         window.alert("Success! Account created.");
 83 |         window.location = "./createTask.html";
 84 |       })
 85 |       .catch((error) => {
 86 |         const errorCode = error.code;
 87 |         const errorMessage = error.message;
 88 |         // ..
 89 |         window.alert("Error occurred. Try again.");
 90 |         window.alert(errorMessage);
 91 |       });
 92 |   }
 93 | });
 94 | 
 95 | submitButton.addEventListener("click", function () {
 96 |   email = emailInput.value;
 97 |   // console.log(email);
 98 |   password = passwordInput.value;
 99 |   // console.log(password);
100 | 
101 |   signInWithEmailAndPassword(auth, email, password)
102 |     .then((userCredential) => {
103 |       // Signed in
104 |       const user = userCredential.user;
105 | 
106 |       window.alert("Success! Welcome back!");
107 |       window.location = "./createTask.html";
108 | 
109 |       // ...
110 |     })
111 |     .catch((error) => {
112 |       // const errorCode = error.code;
113 |       // const errorMessage = error.message;
114 |       window.alert("Error occurred. Try again.");
115 |     });
116 | });
117 | 
118 | signupButton.addEventListener("click", () => {
119 |   main.style.display = "none";
120 |   createacct.style.display = "block";
121 | });
122 | 
123 | returnBtn.addEventListener("click", function () {
124 |   main.style.display = "block";
125 |   createacct.style.display = "none";
126 | });
127 | 


--------------------------------------------------------------------------------
/createTask.css:
--------------------------------------------------------------------------------
  1 | :root{
  2 |     --primary-color : #01a2a8;
  3 |     --primary-dark : #AB1449;
  4 |     --gray : #aaaaaa;
  5 |     --border : rgb(207, 207, 207);
  6 | }
  7 | 
  8 | @import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
  9 | 
 10 | *{
 11 |     transition: all 0.2s ease-in-out;
 12 | }
 13 | 
 14 | body{
 15 |     font-family: 'Work Sans', sans-serif;
 16 |     box-sizing : border-box;
 17 |     margin :0;
 18 |     background-color: rgb(231, 231, 231);
 19 |     scroll-behavior: smooth;
 20 | }
 21 | 
 22 | 
 23 | .left-right-div-container{
 24 |     margin-top: 6rem;
 25 | }
 26 | 
 27 | 
 28 | .left-div{
 29 |     width : 49%;
 30 |     margin : 0;
 31 |     padding : 0;
 32 |     display : inline-block;
 33 |     margin : auto;
 34 |     vertical-align: top;
 35 |     /* background-color: white; */
 36 | }
 37 | .right-div{
 38 |     width : 49%;
 39 |     margin : 0;
 40 |     padding : 0;
 41 |     display : inline-block;
 42 |     margin : auto;
 43 |     padding : 30px;
 44 |     color : gray;
 45 |     box-sizing: border-box;
 46 | }
 47 | 
 48 | .left-div .form{
 49 |     width : 90%;
 50 |     border : 2px solid var(--border);
 51 |     box-shadow: var(--border) 1.95px 1.95px 2.6px;
 52 |     padding : 3rem 2rem;
 53 |     box-sizing: border-box;
 54 |     margin : 30px auto;
 55 |     background-color: white;
 56 | }
 57 | .left-div .label{
 58 |     display : block;
 59 |     width : 100%;
 60 |     color : var(--gray);
 61 |     font-size: 28px;
 62 |     font-family: 'Oswald', sans-serif;
 63 |     font-stretch: semi-condensed;
 64 | }
 65 | .left-div .form .task-div, .left-div .form .desc-div{
 66 |     margin-bottom : 40px;
 67 | }
 68 | 
 69 | ::placeholder{
 70 |     color : var(--gray); 
 71 |     font-size : 16px;
 72 | }
 73 | .left-div .input-field{
 74 |     display : block;
 75 |     width : 100%;
 76 |     border : none;
 77 |     border-bottom: 2px solid var(--gray);
 78 |     padding : 11px 2px;
 79 |     margin : 15px 0;
 80 |     box-sizing: border-box;
 81 | }
 82 | 
 83 | .left-div .input-field:focus{
 84 |     outline: none;
 85 |     border-bottom: 2px solid var(--primary-color);
 86 | }
 87 | 
 88 | #tasks-header{
 89 |     color : var(--primary-color);
 90 |     font-family: 'Oswald', sans-serif;
 91 |     font-stretch: semi-condensed;
 92 |     margin-top:0;
 93 |     text-align: center;
 94 | }
 95 | 
 96 | 
 97 | 
 98 | 
 99 | /************* Task Items styles*************/
100 | .Task-item .Task{
101 |     font-size: 28px;
102 |     font-family: 'Oswald', sans-serif;
103 |     font-stretch: semi-condensed;
104 |     font-weight:500;
105 |     margin-top : 10px;
106 |     margin-bottom : 20px;
107 | }
108 | .Task-item .desc{
109 |     margin-bottom : 15px;
110 | }
111 | .Task-item{
112 |     border : 2px solid rgba(241, 241, 241, 0.733);
113 |     box-shadow: rgba(138, 137, 137, 0.733) 1.95px 1.95px 2.6px;
114 |     margin: 15px 0px;
115 |     background-color: white;
116 | }
117 | 
118 | .Task-item hr {
119 |     border: 1px solid rgb(238, 238, 238);
120 |     background-color:rgb(238, 238, 238);
121 |     margin :0;
122 | }
123 | .data, .buttons{
124 |     padding : 15px;
125 | }
126 | 
127 | 
128 | .button{
129 |     font-family:'Oswald', sans-serif;
130 |     padding : 10px 15px;
131 |     background-color: rgba(10, 158, 54, 0.945);
132 |     color : white;
133 |     border : none;
134 |     font-size: 15px;
135 |     box-shadow: rgba(50, 50, 93, 0.336) 0px 2px 5px -1px, rgba(0, 0, 0, 0.479) 0px 1px 3px -1px;
136 | }
137 | 
138 | .add:hover{
139 |     background-color: rgb(0, 138, 41);
140 | }
141 | 
142 | .edit{
143 |     background-color: #F97316;
144 | }
145 | .edit:hover{
146 |     background-color: #EA580C;
147 | }
148 | .delete{
149 |     background-color: #EF4444;
150 | }
151 | .delete:hover{
152 |     background-color: #DC2626;
153 | }
154 | 
155 | 
156 | .update{
157 |     background-color: rgba(0, 21, 211, 0.808);
158 | }
159 | .update:hover{
160 |     background-color: rgba(0, 21, 211, 0.932);
161 | }
162 | .cancel{
163 |     background-color : rgba(184, 0, 0, 0.89);
164 | }
165 | .cancel:hover{
166 |     background-color:rgb(184, 0, 0);
167 | }
168 | 
169 | 
170 | 
171 | .show-delete{
172 |     text-align: center;
173 | }
174 | .show-delete .button{
175 |     margin : 0 20px;
176 |     padding : 10px 20px;
177 |     width : 45%;
178 |     margin : 5px;
179 | }
180 | 
181 | .show-delete .showAll{
182 |     background-color: #06a170e0;
183 |     color : white;
184 |     font-weight : bolder;
185 | }
186 | .show-delete .showAll:hover{
187 |     background-color: #059769;
188 | }
189 | .show-delete .deleteAll{
190 |     background-color: #dc2626d7;
191 |     color : rgb(255, 255, 255);
192 |     font-weight : bolder;
193 | }
194 | .show-delete .deleteAll:hover{
195 |     background-color: #dc2626fb;
196 | }
197 | 
198 | .no-task-info{
199 |     color : rgb(0, 162, 255);
200 |     padding : 20px;
201 |     text-align: center;
202 |     margin : 20px;
203 |     border : 3px dotted rgba(0, 174, 255, 0.822);
204 |     font-size : 20px;
205 |     margin-top : 40px;
206 | }
207 | 
208 | :focus{
209 |     outline : none;
210 | }
211 | 
212 | 
213 | .Task-item{
214 |     position : relative;
215 | }
216 | 
217 | #done{
218 | background-color: white;
219 | border:none;
220 | font-size : 30px;
221 | position : absolute;
222 | right : 10px;
223 | color : gray;
224 | font-weight : bolder;
225 | cursor: pointer;
226 | }
227 | #done:hover{
228 |     color :#00b200ce !important;
229 | }
230 | 
231 | #status{
232 |     color :#00a529;
233 |     font-weight : bolder;
234 | }


--------------------------------------------------------------------------------
/createTask.js:
--------------------------------------------------------------------------------
  1 | const firebaseConfig = {
  2 |   apiKey: "AIzaSyBEC8nZF1gLS8mEJiNfpxyiLfC79JqXkA0",
  3 |   authDomain: "task-man-c7972.firebaseapp.com",
  4 |   projectId: "task-man-c7972",
  5 |   storageBucket: "task-man-c7972.appspot.com",
  6 |   messagingSenderId: "1047263220371",
  7 |   appId: "1:1047263220371:web:1b0b88233ba16509e4b366",
  8 |   measurementId: "G-9VR0K26NHG",
  9 | };
 10 | 
 11 | // Initialize Firebase
 12 | firebase.initializeApp(firebaseConfig);
 13 | 
 14 | var totalItems;
 15 | var maxCode;
 16 | var code;
 17 | 
 18 | //change the color and disabled attribute for edit button
 19 | // show or hide the innerHTML of element with status id
 20 | function changeStatus(code) {
 21 |   var status;
 22 |   firebase
 23 |     .database()
 24 |     .ref("TaskList/" + code)
 25 |     .on("value", function (snapshot) {
 26 |       status = snapshot.val().status;
 27 |     });
 28 | 
 29 |   if (status === "pending") {
 30 |     firebase
 31 |       .database()
 32 |       .ref("TaskList/" + code)
 33 |       .update({
 34 |         status: "completed",
 35 |       });
 36 |     document.getElementById(code).querySelector("#done").style.color =
 37 |       "#00b200";
 38 |     document.getElementById(code).querySelector("#editbtn").disabled = true;
 39 |     document
 40 |       .getElementById(code)
 41 |       .querySelector("#editbtn").style.backgroundColor =
 42 |       "rgba(116, 116, 116, 0.671)";
 43 |     document.getElementById(code).querySelector("#status").innerHTML = `
 44 |             <i class="far fa-check-circle"></i> Completed
 45 |             `;
 46 |   } else {
 47 |     firebase
 48 |       .database()
 49 |       .ref("TaskList/" + code)
 50 |       .update({
 51 |         status: "pending",
 52 |       });
 53 |     document.getElementById(code).querySelector("#done").style.color = "gray";
 54 |     document.getElementById(code).querySelector("#editbtn").disabled = false;
 55 |     if (
 56 |       document.getElementById(code).querySelector("#editbtn").style
 57 |         .removeProperty
 58 |     ) {
 59 |       document
 60 |         .getElementById(code)
 61 |         .querySelector("#editbtn")
 62 |         .style.removeProperty("background-color");
 63 |     } else {
 64 |       document
 65 |         .getElementById(code)
 66 |         .querySelector("#editbtn")
 67 |         .style.removeAttribute("background-color");
 68 |     }
 69 |     document.getElementById(code).querySelector("#status").innerHTML = "";
 70 |   }
 71 | }
 72 | 
 73 | function storeTask(event) {
 74 |   event.preventDefault();
 75 | 
 76 |   var task = document.getElementById("task").value;
 77 |   var desc = document.getElementById("desc").value;
 78 |   document.getElementById("task").value = "";
 79 |   document.getElementById("desc").value = "";
 80 | 
 81 |   //  store data to firebase
 82 | 
 83 |   firebase
 84 |     .database()
 85 |     .ref("TaskList/" + code)
 86 |     .set({
 87 |       task: task,
 88 |       desc: desc,
 89 |       status: "pending",
 90 |     });
 91 | 
 92 |   document.getElementById("tasks-header").insertAdjacentHTML(
 93 |     "afterend",
 94 | 
 95 |     `
 96 |         <div class="Task-item" id="${code}">
 97 |           <div class="data" id="${task}" >
 98 |             <button class="done" id="done" onclick="changeStatus('${code}')" > <i class="far far-check-circle"></i> </button>
 99 |             <h2 class="Task">${task}</h2>
100 |             <p class="desc">${desc}</p>
101 |             <p id="status"></p>
102 |           </div>
103 |           <hr>
104 |           <div class="buttons">
105 |             <button class=" button edit" id="editData" onclick = "editData('${code}')" >EDIT TASK</button>
106 |             <button class=" button delete" id="deleteData" onclick="deleteData('${code}')"  >DELETE TASK</button>
107 |           </div>
108 |         </div>
109 |       `
110 |   );
111 | }
112 | 
113 | function deleteData(code) {
114 |   firebase
115 |     .database()
116 |     .ref("TaskList/" + code)
117 |     .remove();
118 |   document.getElementById(code).remove();
119 | 
120 |   firebase
121 |     .database()
122 |     .ref("TotalTasks")
123 |     .update({
124 |       totalItems: totalItems - 1,
125 |     });
126 | }
127 | 
128 | // Edit Task
129 | 
130 | function editData(c) {
131 |   document.getElementById("task").value = document
132 |     .getElementById(c)
133 |     .querySelector(".data")
134 |     .querySelector(".Task").innerHTML;
135 | 
136 |   document.getElementById("desc").value = document
137 |     .getElementById(c)
138 |     .querySelector(".data")
139 |     .querySelector(".desc").innerHTML;
140 | 
141 |   if (document.getElementById("addTask") !== null) {
142 |     document.getElementById("addTask").remove();
143 |   }
144 |   document.getElementById("form-btns").innerHTML = `
145 |     <button class="button update" id = "updateTask" onclick = "updateData('${c}')">󠀫󠀫<i class="fas fa-sync-alt"></i> UPDATE TASK</button>
146 |     <button class="button cancel" id = "cancelTask" onclick = "cancelUpdation()"><i class="fas fa-ban"></i> CANCEL</button>
147 |     `;
148 | }
149 | 
150 | // Update Data and clear cancel and update task buttons
151 | 
152 | function updateData(c) {
153 |   var updateTask = document.getElementById("task").value;
154 |   var updateDesc = document.getElementById("desc").value;
155 | 
156 |   firebase
157 |     .database()
158 |     .ref("TaskList/" + c)
159 |     .update({
160 |       task: updateTask,
161 |       desc: updateDesc,
162 |     });
163 | 
164 |   document.getElementById("task").value = "";
165 |   document.getElementById("desc").value = "";
166 |   document.getElementById("updateTask").remove();
167 |   document.getElementById("cancelTask").remove();
168 | 
169 |   document.getElementById("form-btns").innerHTML = `
170 |   <button type="submit" class="button add" id = "addTask" >󠀫󠀫<i class="fas fa-plus"></i> ADD TASK</button>
171 |   `;
172 | 
173 |   // Updating the task in the side bar
174 |   document
175 |     .getElementById(c)
176 |     .querySelector(".data")
177 |     .querySelector(".Task").innerHTML = updatedTask;
178 |   document
179 |     .getElementById(c)
180 |     .querySelector(".data")
181 |     .querySelector(".desc").innerHTML = updatedDesc;
182 | }
183 | 
184 | function cancelUpdation() {
185 |   document.getElementById("task").value = "";
186 |   document.getElementById("desc").value = "";
187 |   document.getElementById("updateTask").remove();
188 |   document.getElementById("cancelTask").remove();
189 | 
190 |   document.getElementById("form-btns").innerHTML = `
191 |   <button type="submit" class="button add" id = "addTask" >󠀫󠀫<i class="fas fa-plus"></i> ADD TASK</button>
192 |   `;
193 | }
194 | 
195 | var data;
196 | firebase
197 |   .database()
198 |   .ref("TaskList")
199 |   .on("value", function (snapshot) {
200 |     data = snapshot.val();
201 |   });
202 | 
203 | // Show All Functionality
204 | function showAll() {
205 |   if (data === null && document.getElementById("info") == null) {
206 |     document.getElementById("tasks-header").insertAdjacentHTML(
207 |       "afterend",
208 |       `<div class="no-task-info" id = "info">
209 |             <i class="fas fa-info-circle"></i>
210 |             No pending tasks
211 |         </div>`
212 |     );
213 |   }
214 | 
215 |   for (code in data) {
216 |     var code = code;
217 |     var task = data[code]["task"];
218 |     var desc = data[code]["desc"];
219 |     var status = data[code]["status"];
220 | 
221 |     var color;
222 |     if (status === "pending") {
223 |       color = "gray";
224 |     } else {
225 |       color = "#00b200";
226 |     }
227 |   }
228 |   // Show the data in the body in form of card
229 |   document.getElementById("tasks-header").insertAdjacentHTML(
230 |     "afterend",
231 |     `<div class="Task-item" id="${code}">
232 |       <div class="data" id="${task}">
233 |           
234 |           <h2 class="Task">${task}</h2>
235 |           <p class="desc">${desc}</p>
236 |           <small id = "status"></small>
237 |       </div>
238 |       <hr>
239 |       <div class="buttons">
240 |           <button class="button edit" id="editbtn" onclick = "editData('${code}')"><i class="fas fa-edit"></i> EDIT TASK</button>
241 |           <button class="button delete" id="deletebtn" onclick = "deleteData('${code}')"><i class="fas fa-trash-alt"></i> DELETE TASK</button>
242 |       </div>
243 |       
244 |       </div>`
245 |   );
246 | 
247 |   if (status === "pending") {
248 |     document.getElementById(code).querySelector("#editbtn").disabled = false;
249 |     if (
250 |       document.getElementById(code).querySelector("#editbtn").style
251 |         .removeProperty
252 |     ) {
253 |       document
254 |         .getElementById(code)
255 |         .querySelector("#editbtn")
256 |         .style.removeProperty("background-color");
257 |     } else {
258 |       document
259 |         .getElementById(code)
260 |         .querySelector("#editbtn")
261 |         .style.removeAttribute("background-color");
262 |     }
263 |     document.getElementById(code).querySelector("#status").innerHTML = "";
264 |   } else {
265 |     document.getElementById(code).querySelector("#editbtn").disabled = true;
266 |     document
267 |       .getElementById(code)
268 |       .querySelector("#editbtn").style.backgroundColor =
269 |       "rgba(116, 116, 116, 0.671)";
270 |     document.getElementById(code).querySelector("#status").innerHTML = `
271 |           <i class="far fa-check-circle"></i> Completed
272 |           `;
273 |   }
274 | }
275 | 
276 | // Delete everything in our database
277 | function deleteAll() {
278 |   var option = false;
279 |   if (totalItems === 0 && document.getElementById("info") === null) {
280 |     document.getElementById("tasks-header").insertAdjacentHTML(
281 |       "afterend",
282 |       `<div class="no-task-info" id = "info">
283 |             <i class="fas fa-info-circle"></i>
284 |             No pending tasks
285 |         </div>`
286 |     );
287 |   }
288 | 
289 |   if (totalItems !== 0) {
290 |     option = confirm(
291 |       "The tasks will be permanently deleted. Do you want to continue?"
292 |     );
293 |     if (option === true) {
294 |       firebase.database().ref("TaskList").remove();
295 |       document.querySelectorAll(".Task-item").forEach((element) => {
296 |         element.remove();
297 |       });
298 |       firebase.database().ref("TotalTasks").update({
299 |         totalItems: 0,
300 |         maxCode: 0,
301 |       });
302 |       document.getElementById("tasks-header").insertAdjacentHTML(
303 |         "afterend",
304 |         `<div class="no-task-info" id = "info">
305 |                 <i class="fas fa-info-circle"></i>
306 |                 All items deleted
307 |             </div>`
308 |       );
309 |     }
310 |   }
311 | }
312 | 


--------------------------------------------------------------------------------