├── index.css
├── index.html
└── index.js


/index.css:
--------------------------------------------------------------------------------
  1 | *{
  2 |     margin: 0;
  3 |     padding: 0;
  4 |     font-family: sans-serif;
  5 | }
  6 | .all
  7 | {
  8 |     height: 100vh;
  9 | }
 10 | .hidden
 11 | {
 12 |     height: 100%;
 13 |     width: 100%;
 14 |     position: absolute;
 15 |     background-color: rgba(0,0,0,0.5);
 16 |     display: flex;
 17 |     align-items: center;
 18 |     justify-content: center;
 19 |     visibility: hidden;
 20 | }
 21 | .nav
 22 | {
 23 |     display: flex;
 24 |     width: 100%;
 25 | }
 26 | .nav h1
 27 | {
 28 |     width: 55%;
 29 |     display: flex;
 30 |     justify-content: right;
 31 | }
 32 | .nav .b1
 33 | {
 34 |     width: 45%;
 35 |     display: flex;
 36 |     align-items: center;
 37 |     justify-content: right;
 38 | }
 39 | .nav .b1 button
 40 | {
 41 |     display: flex;
 42 |     align-items: center;
 43 |     justify-content: center;
 44 |     background-color: transparent;
 45 |     border: 0;
 46 |     margin-right: 10px;
 47 |     cursor: pointer;
 48 | }
 49 | .nav .b1 h1{
 50 |     height: auto;
 51 |     width: auto;
 52 |     color: rgb(68, 226, 147);
 53 | }
 54 | .box
 55 | {
 56 |     display: flex;
 57 |     position: absolute;
 58 |     flex-direction: column;
 59 |     background-color: rgb(71, 70, 70);
 60 |     height: 60%;
 61 |     width: 50%;
 62 |     border: 1px solid grey;
 63 |     border-radius: 10px;
 64 |     visibility:hidden;
 65 | }
 66 | .show
 67 | {
 68 |     display: flex;
 69 |     flex-direction: column;
 70 |     background-color: rgb(71, 70, 70);
 71 |     height: 50%;
 72 |     width: 50%;
 73 |     border: 1px solid grey;
 74 |     border-radius: 10px;
 75 |     visibility: hidden;
 76 | }
 77 | .box .r1,.show .r1
 78 | {
 79 |     display: flex;
 80 |     flex-direction: column;
 81 |     margin-left: 20px;
 82 |     margin-right: 20px;
 83 |     margin-top: 10px;
 84 | }
 85 | .box .r1 label,.show .r1 label
 86 | {
 87 |     color:rgb(68, 226, 147) ;
 88 |     font-size: 20px;
 89 |     font-weight: bold;
 90 | }
 91 | .box .r1 input,.show .r1 input{
 92 |     margin-left: 15px;
 93 |     height: 35px;
 94 |     border: 0;
 95 |     border-radius: 5px;
 96 | }
 97 | ::placeholder
 98 | {
 99 |     padding-left: 10px;
100 | }
101 | .box .r2,.show .r2
102 | {
103 |     display: flex;
104 |     flex-direction: column;
105 |     margin-left: 20px;
106 |     margin-right: 20px;
107 |     margin-top: 10px;
108 | }
109 | .box .r2 label,.show .r2 label
110 | {
111 |     color:rgb(68, 226, 147) ;
112 |     font-size: 20px;
113 |     font-weight: bold;
114 | }
115 | .box .r2 textarea,.show .r2 textarea
116 | {
117 |     margin-left: 15px;
118 |     height: 100px;
119 |     border: 0;
120 |     border-radius: 5px;
121 | }
122 | .box .r3
123 | {
124 |     display: flex;
125 |     flex-direction: column;
126 |     margin-left: 20px;
127 |     margin-right: 20px;
128 |     margin-top: 10px;
129 | }
130 | .show .r3
131 | {
132 |     display: flex;
133 |     align-items: center;
134 |     margin-left: 20px;
135 |     margin-right: 20px;
136 |     margin-top: 10px;
137 | }
138 | .show .r3 div{
139 |     display: flex;
140 |     align-items: center;
141 | }
142 | .show .r3 div label
143 | {
144 |     margin-left: 5px;
145 |     color: white;
146 | }
147 | .show .r3 div input[type='radio']
148 | {
149 |     accent-color: rgb(68, 226, 147);
150 | }
151 | .box .r3 label,.show .r3 label
152 | {
153 |     color:rgb(68, 226, 147) ;
154 |     font-size: 20px;
155 |     font-weight: bold;
156 | }
157 | .box .r3 input,.show .r3 input{
158 |     margin-left: 15px;
159 |     height: 35px;
160 |     border: 0;
161 |     border-radius: 5px;
162 | }
163 | .box .btn ,.show .btn
164 | {
165 |     display: flex;
166 |     width: 100%;
167 |     height: 100%;
168 |     align-items: center;
169 |     justify-content: center;
170 | }
171 | .box .btn button,.show .btn button
172 | {
173 |     height: 35px;
174 |     width: 80px;
175 |     background-color:rgb(68, 226, 147) ;
176 |     color: white;
177 |     border: 0;
178 |     border-radius: 20px;
179 |     cursor: pointer;
180 |     font-size: 17px;
181 |     font-weight: bold;
182 |     display: flex;
183 |     align-items: center;
184 |     justify-content: center;
185 |     margin-left: 10px;
186 |     margin-bottom: 10px;
187 | }
188 | .main
189 | {
190 |     height: 100%;
191 |     background-color: black;
192 |     color: white;
193 | }
194 | 
195 | .head
196 | {
197 |     display: flex;
198 |     align-items: center;
199 |     justify-content: center;
200 |     height: 10%;
201 |     color: rgb(68, 226, 147);
202 |     font-size: 20px;
203 | }
204 | .cont{
205 |     height: 75%;
206 |     overflow-y: auto;
207 |     display: flex;
208 |     flex-direction: column;
209 |     align-items: center;
210 | }
211 | .cont::-webkit-scrollbar
212 | {
213 |     background-color: transparent;
214 |     width: 5px;
215 | }
216 | .cont::-webkit-scrollbar-thumb
217 | {
218 |     background: rgb(68, 226, 147);
219 | }
220 | .foot
221 | {
222 |     height: 15%;
223 |     display: flex;
224 |     align-items: center;
225 |     justify-content: right;
226 | }
227 | .foot button{
228 |     border: 0;
229 |     height: 50px;
230 |     width: 50px;
231 |     border-radius: 50%;
232 |     margin-right: 2%;
233 |     cursor: pointer;
234 |     color: white;
235 |     background-color: rgb(68, 226, 147);
236 |     font-size: 20px;
237 |     display: flex;
238 |     align-items: center;
239 |     justify-content: center;
240 | }
241 | .cont .cd
242 | {
243 |     width: 80%;
244 |     display: flex;
245 |     align-items: center;
246 |     background-color:rgb(27, 25, 25);
247 |     margin-top: 10px;
248 |     min-height: 60px;
249 |     border: 0;
250 |     border-radius: 10px;
251 | }
252 | .cont .ct{
253 |     display: flex;
254 |     height: 30px;
255 |     align-items: center;
256 |     width: 80%;
257 |     background-color: rgb(54, 52, 52);
258 |     color: rgb(68, 226, 147);
259 | }
260 | .cont .ct .title
261 | {
262 |     width: 50%;
263 |     display: flex;
264 |     justify-content: center;
265 | }
266 | .cont .ct .date
267 | {
268 |     width: 25%;
269 |     display: flex;
270 |     justify-content: center;
271 | }
272 | .cont .ct .status
273 | {
274 |     width: 25%;
275 |     display: flex;
276 |     justify-content: center;
277 | }
278 | .cont .cd .db
279 | {
280 |     height: 100%;
281 |     width:100%;
282 |     display: flex;
283 |     align-items: center;
284 |     cursor: pointer;
285 |     background-color: transparent;
286 |     border: 0;
287 |     color: white;
288 |     
289 | }
290 | .cont .cd .db .d1{
291 |     width: 50%;
292 |     /* height: max-content; */
293 |     display: flex;
294 |     align-items: center;
295 |     justify-content: center;
296 |     hyphens: manual;
297 |     overflow-wrap: anywhere;
298 | }
299 | .cont .cd .db .d2{
300 |     width: 25%;
301 |     display: flex;
302 |     flex-direction: column;
303 |     align-items: center;
304 | }
305 | .cont .cd .db .d3{
306 |     width: 25%;
307 |     display: flex;
308 |     flex-direction: column;
309 |     align-items: center;
310 | }
311 | .cont .cd .bt1
312 | {
313 |     display: flex;
314 |     flex-direction: column;
315 |     align-items: end;
316 |     /* margin-left: 1%; */
317 |     position: absolute;
318 |     width: max-content;
319 |     right: 10%;
320 |     justify-content: right;
321 | }
322 | .cont .cd .bt1 button{
323 |     height: 40px;
324 |     width: 80px;
325 |     cursor: pointer;
326 |     background-color:rgb(68, 226, 147) ;
327 |     border: 0;
328 |     color: white;
329 |     border-radius: 20px;
330 |     font-size: 15px;
331 |     font-weight: bold;
332 | }


--------------------------------------------------------------------------------
/index.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</title>
 7 |     <link rel="stylesheet" href="./index.css" />
 8 | </head>
 9 | <body>
10 |     <div class="all">
11 |         <div class="hidden">
12 |             <div class="box">
13 |                 <div class="nav">
14 |                 <h1 style="text-align: center;color: rgb(68, 226, 147);">Task</h1>
15 |                 <div class="b1">
16 |                 <button onclick="cancel()"><h1>X</h1></button>
17 |                 </div>
18 |                 </div>
19 |                 <div class="r1">
20 |                 <label>Task Name:</label>
21 |                 <input type="text" placeholder="Enter the Task Name" id="name" />
22 |                 </div>
23 |                 <div class="r2">
24 |                     <label>Description :</label>
25 |                 <textarea placeholder="Enter the description about the task" id="desc" ></textarea>
26 |                 </div>
27 |                 <div class="r3">
28 |                     <label>Due Date :</label>
29 |                 <input type="datetime-local" id="dt" />
30 |                 </div>
31 |                 <div class="btn">
32 |                     <button onclick="add()">Add</button>
33 |                     <button onclick="cancel()">Cancel</button>
34 |                 </div>
35 |             </div>
36 |             <div class="show">
37 |                 <div class="nav">
38 |                     <h1 style="text-align: center;color: rgb(68, 226, 147);">Task</h1>
39 |                     <div class="b1">
40 |                     <button onclick="cancel()"><h1>X</h1></button>
41 |                     </div>
42 |                     </div>
43 |                     <div class="r1">
44 |                     <label>Task Name:</label>
45 |                     <input type="text" placeholder="Enter the Task Name" id="name" />
46 |                     </div>
47 |                     <div class="r2">
48 |                         <label>Description :</label>
49 |                     <textarea placeholder="Enter the description about the task" id="desc" ></textarea>
50 |                     </div>
51 |                     <div class="r3">
52 |                         <label>Status:</label>
53 |                         <div class="div1">
54 |                         <input type="radio" name="rd" value="Completed"/>
55 |                         <label>Completed:</label>
56 |                         </div>
57 |                         <div class="div2">
58 |                         <input type="radio" name="rd" value="Pending" checked/>
59 |                         <label>Pending:</label>
60 |                         </div>
61 |                     </div>
62 |                     <div class="btn">
63 |                         <button onclick="update()">Save</button>
64 |                         <button onclick="cancel()">Cancel</button>
65 |                     </div>                
66 |             </div>
67 |         </div>
68 |     <div class="main">
69 |         <div class="head">
70 |             <h1>Task App</h1>
71 |         </div>
72 |         <div class="cont">
73 |             <div class="ct">
74 |                 <div class="title">Title</div>
75 |                 <div class="date">Date & Time</div>
76 |                 <div class="status">Status</div>
77 |             </div>
78 |         </div>
79 |         <div class="foot">
80 |             <button onclick="box()"><h1>+</h1></button>
81 |         </div> 
82 |     </div>
83 |     </div>
84 |     <script src="./index.js"></script>
85 | </body>
86 | </html>


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | cont=document.querySelector(".cont")
 2 | hd=document.querySelector(".hidden");
 3 | sn=document.querySelector(".show");
 4 | bb=document.querySelector(".box");
 5 | function box()
 6 | { 
 7 |     sn.style.visibility="hidden"
 8 |     hd.style.visibility="visible"
 9 |     bb.style.visibility="visible"
10 | }
11 | function cancel()
12 | {
13 |     sn.style.visibility="hidden"
14 |     hd.style.visibility="hidden"
15 |     bb.style.visibility="hidden"
16 |     document.getElementById("name").value=""
17 |     document.getElementById("desc").value=""
18 |     document.getElementById("dt").value=""
19 | }
20 | document.getElementById("name").addEventListener("change",(event)=>{
21 |     event.target.style.border="0"
22 | })
23 | document.getElementById("desc").addEventListener("change",(event)=>{
24 |     event.target.style.border="0"
25 | })
26 | document.getElementById("dt").addEventListener("change",(event)=>{
27 |     event.target.style.border="0"
28 | })
29 | function add()
30 | {
31 |     if(document.getElementById("name").value!="" && document.getElementById("desc").value!="" && document.getElementById("dt").value!="" )
32 |     {
33 |         name=document.getElementById("name").value
34 |         desc=document.getElementById("desc").value
35 |         dt=document.getElementById("dt").value
36 |         ar=dt.split("T")
37 |        bx=document.createElement("div")
38 |         bx.className="cd"
39 |         bx.innerHTML=`<button class="db" onclick="show(this)")><div class="d1"><h1>${name}</h1></div>`+`<p class="desc" style="display:none;">${desc}</p>`+`<div class="d2"><b class="bo1">${ar[0]}</b><b class="bo2" style="text-align:center">${ar[1]}</b></div>`+
40 |         `<div class="d3"><b id="st">Pending</b></div></button><div class="bt1"><button onclick="del(this)">Delete</button></div>`
41 |         cont.appendChild(bx)
42 |         cancel()
43 |     }
44 |     else{
45 |        if(document.getElementById("name").value=="")
46 |        {
47 |         document.getElementById("name").style.border="2px solid red"
48 |        }
49 |        if(document.getElementById("desc").value=="")
50 |         {
51 |          document.getElementById("desc").style.border="2px solid red"
52 |         }
53 |         if(document.getElementById("dt").value=="")
54 |         {
55 |              document.getElementById("dt").style.border="2px solid red"
56 |         }
57 |     }
58 | }
59 | cur=""
60 | function show(e)
61 | {
62 |     cur=e
63 |     d11=e.querySelector(".d1").querySelector("h1").textContent
64 |     d22=e.querySelector("p").textContent
65 |     sn.style.visibility="visible"
66 |     hd.style.visibility="visible"
67 |     bb.style.visibility="hidden"
68 |     console.log(d22)
69 |     sn.querySelector(".r1").querySelector("#name").value=d11;
70 |     sn.querySelector(".r2").querySelector("#desc").value=d22;
71 | }
72 | function update()
73 | {
74 |     cur.querySelector(".d1").querySelector("h1").textContent=sn.querySelector(".r1").querySelector("#name").value;
75 |     cur.querySelector("p").textContent=sn.querySelector(".r2").querySelector("#desc").value;
76 |    if(sn.querySelector('input[name="rd"]:checked').value=="Completed")
77 |    {
78 |     cur.querySelector("#st").textContent="Completed"
79 |     cur.querySelector("#st").style.color="rgb(68, 226, 147)"
80 |    }
81 |    else
82 |    {
83 |     cur.querySelector("#st").textContent="Pending"
84 |     cur.querySelector("#st").style.color="white"
85 |    }
86 |     sn.style.visibility="hidden"
87 |     hd.style.visibility="hidden"
88 |     bb.style.visibility="hidden"
89 | }
90 | function del(e)
91 | {
92 |     e.parentElement.parentElement.remove()
93 | }


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