├── css
├── style.min.css.map
├── style.min.css
└── style.scss
├── js
└── script.js
└── index.html
/css/style.min.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["style.scss"],"names":[],"mappings":"AAAA,EACI,QAAA,CACA,SAAA,CACA,6BAAA,CAAA,0BAAA,CAAA,qBAAA,CAGJ,MACI,UAAA,CACA,YAAA,CACA,mBAAA,CAAA,oBAAA,CAAA,gBAAA,CAAA,mBAAA,CAAA,YAAA,CACA,YACI,yBAAA,CAAA,sBAAA,CAAA,iBAAA,CACA,YAAA,CACA,yBAAA,CAAA,sBAAA,CAAA,iBAAA,CACA,WAAA,CACA,qBAAA,CACA,sCAAA,CAAA,mCAAA,CAAA,8BAAA,CACA,+CAAA,CAAA,uCAAA,CACA,iBACI,mBAAA,CAAA,oBAAA,CAAA,gBAAA,CAAA,mBAAA,CAAA,YAAA,CAkBA,kBAAA,CAjBA,kCACA,WAAA,CACA,YAAA,CACA,cAAA,CACA,qCAAA,CAAA,kCAAA,CAAA,6BAAA,CACI,wCACI,YAAA,CAGR,oCACI,yBAAA,CAAA,sBAAA,CAAA,iBAAA,CACA,YAAA,CACA,qBAAA,CACA,WAAA,CACA,qCAAA,CAAA,kCAAA,CAAA,6BAAA,CACA,cAAA,CAKJ,0BACI,cAAA,CACA,kBAAA,CACA,gCACI,4BAAA,CACA,cAAA","file":"style.min.css"}
--------------------------------------------------------------------------------
/js/script.js:
--------------------------------------------------------------------------------
1 | const taskForm = document.querySelector('#taskForm');
2 | const tsakList = document.querySelector('#tsakList');
3 | taskForm.addEventListener('submit', (e) => {
4 | e.preventDefault();
5 | const formData = new FormData(taskForm);
6 | const div = document.createElement('div');
7 | div.classList.add('task');
8 | div.textContent = formData.get('ytask');
9 | tsakList.appendChild(div);
10 | taskForm.reset();
11 | taskFunc();
12 | });
13 |
14 | const taskFunc = () => {
15 | const tasks = document.querySelectorAll('.task');
16 | Array.from(tasks).map((task) => {
17 | task.addEventListener('click', (e) => {
18 | e.target.remove();
19 | });
20 | });
21 | }
22 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Document
9 |
10 |
11 |
12 |
13 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/css/style.min.css:
--------------------------------------------------------------------------------
1 | *{margin:0;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.main{width:100%;height:100vh;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex}.main>.pain{width:-webkit-max-content;width:-moz-max-content;width:max-content;padding:20px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;margin:auto;border:1px solid #ccc;-webkit-box-shadow:10px 10px 10px #ccc;-moz-box-shadow:10px 10px 10px #ccc;box-shadow:10px 10px 10px #ccc;-webkit-filter:drop-shadow(10px 10px 10px #ccc);filter:drop-shadow(10px 10px 10px #ccc)}.main>.pain>form{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;margin-bottom:20px}.main>.pain>form input[type=text]{width:300px;padding:10px;border-width:0;-webkit-border-radius:6px 0px 0px 6px;-moz-border-radius:6px 0px 0px 6px;border-radius:6px 0px 0px 6px}.main>.pain>form input[type=text]:focus{outline:none}.main>.pain>form input[type=submit]{width:-webkit-max-content;width:-moz-max-content;width:max-content;padding:10px;background-color:#ccc;border:none;-webkit-border-radius:0px 6px 6px 0px;-moz-border-radius:0px 6px 6px 0px;border-radius:0px 6px 6px 0px;cursor:pointer}.main>.pain #tsakList>div{padding:0 10px;margin-bottom:10px}.main>.pain #tsakList>div:hover{text-decoration:line-through;cursor:pointer}/*# sourceMappingURL=style.min.css.map */
--------------------------------------------------------------------------------
/css/style.scss:
--------------------------------------------------------------------------------
1 | *{
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | .main{
8 | width: 100%;
9 | height: 100vh;
10 | display: flex;
11 | >.pain{
12 | width: max-content;
13 | padding: 20px;
14 | border-radius: 6px;
15 | margin: auto;
16 | border: 1px solid #ccc;
17 | box-shadow: 10px 10px 10px #ccc;
18 | filter: drop-shadow(10px 10px 10px #ccc);
19 | >form{
20 | display: flex;
21 | input[type="text"]{
22 | width: 300px;
23 | padding: 10px;
24 | border-width: 0;
25 | border-radius: 6px 0px 0px 6px;
26 | &:focus{
27 | outline: none;
28 | }
29 | }
30 | input[type="submit"]{
31 | width: max-content;
32 | padding: 10px;
33 | background-color: #ccc;
34 | border: none;
35 | border-radius: 0px 6px 6px 0px;
36 | cursor: pointer;
37 | }
38 | margin-bottom: 20px;
39 | }
40 | #tsakList{
41 | >div{
42 | padding: 0 10px;
43 | margin-bottom: 10px;
44 | &:hover{
45 | text-decoration: line-through;
46 | cursor: pointer;
47 | }
48 | }
49 | }
50 | }
51 | }
--------------------------------------------------------------------------------