diff --git a/index.html b/index.html
index 5170d2c6eb275559bff9b565a74095bd43c56d75..56c1b81051917098c938cfdf804ae5ac2f7d5451 100644
--- a/index.html
+++ b/index.html
@@ -1,28 +1,39 @@
<!DOCTYPE html>
-<html lang="hu">
- <head>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <meta http-equiv="X-UA-Compatible" content="ie=edge" />
- <link rel="stylesheet" href="style.css" />
- <title>Schdesign Todo</title>
- </head>
- <body>
- <h1>My first todo project</h1>
- <input type="text" id="task-input" />
- <button id="add-task">Click me!</button>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Todo list</title>
+ <link rel="stylesheet" href="style.css">
+ <script src="https://kit.fontawesome.com/5b66e23923.js" crossorigin="anonymous"></script>
+ <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap" rel="stylesheet">
+</head>
+<body>
+
+ <div id="todo-container">
+ <span>
+ <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjU5LjUxIDM3OC44NSI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6I2Y4NDg1ZX08L3N0eWxlPjwvZGVmcz48cGF0aCBjbGFzcz0iYSIgZD0iTTU2MyA0MS40NHY5My4yM2wtLjA4LS4wN2E3MCA3MCAwIDAgMC0xMTMuMzUgNTIuNTV2NC43N2E3MCA3MCAwIDAgMCAxMTMuMzUgNTIuNTVsLjA4LS4wN2E3MCA3MCAwIDAgMCAyNi41OS01NC4yMVYxMTkuNGguMTR2LTc4em0tNDMuNDkgMTkxLjQyQTQzLjM5IDQzLjM5IDAgMSAxIDU2Mi44NyAxODh2Mi45OGE0My4zOSA0My4zOSAwIDAgMS00My4zNiA0MS44OXptNDAwLjE1LTExMi44OWgyNi40OXYxMzkuNTdoLTI2LjQ5em0zMjkuNDIgMzIuNjFhNzAgNzAgMCAwIDAtMTI5LjU5IDM0LjM1djVhNzAuMDcgNzAuMDcgMCAwIDAgMjYuNjcgNTIuNTh2LTUyLjg1cS0uMDYtMS4xMy0uMDYtMi4yOHQuMDYtMi4yOGE0My4xMyA0My4xMyAwIDAgMSA2LjQxLTIwLjUyIDQzLjQxIDQzLjQxIDAgMCAxIDczLjg0IDAgNDMuMTMgNDMuMTMgMCAwIDEgNi40MyAyMS4yOXY3MS41NWgyNi42N3YtNzAuNzZhNjkuNjggNjkuNjggMCAwIDAtMTAuNDMtMzYuMDh6TTc0NSAxNzYuMDdhNzAgNzAgMCAwIDAtMTM4LjczIDExVjE5MmE3MCA3MCAwIDAgMCAxMTkuNDcgNDcuMTFsLTE4LjgzLTE4Ljg1QTQzLjM5IDQzLjM5IDAgMCAxIDYzNSAyMDIuOTNoMTEwYTcwLjIzIDcwLjIzIDAgMCAwIDEuMjgtMTIuN3YtMS40NWE3MC4yMSA3MC4yMSAwIDAgMC0xLjI4LTEyLjcxem0tMTEwIDBhNDMuNCA0My40IDAgMCAxIDgyLjUyIDB6bTQ1Ny40LTIzLjUzYTcwLjA3IDcwLjA3IDAgMCAwLTExOS4xNyAwIDY5LjYgNjkuNiAwIDAgMC0xMCAyOXEtLjMgMi42OS0uNCA1LjQ0djQuODlhNzAgNzAgMCAwIDAgMTQwLTEuNzJ2LTEuNDVhNjkuNjkgNjkuNjkgMCAwIDAtMTAuNDMtMzYuMTZ6bS01OS42IDgwLjE4YTQzLjM3IDQzLjM3IDAgMCAxLTQzLjMyLTQxLjFxLS4wNi0xLjEzLS4wNi0yLjI4dC4wNi0yLjI4YTQzLjEzIDQzLjEzIDAgMCAxIDYuNDEtMjAuNTIgNDMuNDEgNDMuNDEgMCAwIDEgNzMuODQgMCA0My4xMyA0My4xMyAwIDAgMSA2LjQzIDIxLjI5djIuOThhNDMuMzggNDMuMzggMCAwIDEtNDMuMzYgNDEuODl6bTcwLjAzIDc2LjA5YTcwIDcwIDAgMCAxLTExOS41IDQ5LjU3bDYuMTUtNi4xNiAxMi42OC0xMi43YTQzLjM4IDQzLjM4IDAgMCAwIDc0LTI5LjIydi0yLjk4YTQzLjMgNDMuMyAwIDAgMC0xMi43MS0yOS4yMWwxMi43MS0xMi43MyA2LjEyLTYuMTNhNjkuODcgNjkuODcgMCAwIDEgMjAuNTUgNDkuNTZ6Ii8+PHBhdGggZD0iTTI3Ni4xNSAyMzkuMDdBNzAgNzAgMCAwIDEgMTU2LjY4IDE5MnYtNC44OUE3MCA3MCAwIDAgMSAyNzYuMTUgMTQwbC0xOC44MyAxOC44NmE0My4zOCA0My4zOCAwIDEgMCAwIDYxLjR6bTEzNi4xNi05OS4xNmE3MCA3MCAwIDAgMC05Mi44LTUuNDd2LTkzaC0yNi43VjE5MS45YTcwLjA4IDcwLjA4IDAgMCAwIDI2LjY5IDUyLjZ2LTUyLjc0cS0uMDYtMS4xMy0uMDYtMi4yOHQuMDYtMi4yOGE0My4xMyA0My4xMyAwIDAgMSA2LjQxLTIwLjUyIDQzLjM5IDQzLjM5IDAgMCAxIDgwLjI1IDIwLjg3djcxLjk5aDI2LjY5di03MC4wNmE2OS44MSA2OS44MSAwIDAgMC0yMC41NC00OS41N3ptLTI3My41OCAzNi4xNmgtMTEwYTQzLjEzIDQzLjEzIDAgMCAxIDQuMzUtOS4zNyA0My4zOSA0My4zOSAwIDAgMSA2Ny41Ni03Ljg5bDE4LjgzLTE4Ljg2QTcwIDcwIDAgMCAwIDAgMTg3LjA2VjE5MmE3MC4wOSA3MC4wOSAwIDAgMCAxLjI0IDExaDExMGE0My4zOSA0My4zOSAwIDAgMS03MS45MSAxNy4yOWwtMTIuNjggMTIuNy02LjE1IDYuMTZBNzAgNzAgMCAwIDAgMTQwIDE5MC4yM3YtMS40NWE3MC4yMiA3MC4yMiAwIDAgMC0xLjI3LTEyLjcxek03MCAxODkuNTdsLS4xNi4xLjEyLS4xMi4wNy4wN3oiIGZpbGw9IiNmZmYiLz48Y2lyY2xlIGNsYXNzPSJhIiBjeD0iOTMyLjM1IiBjeT0iNTQuNzciIHI9IjEzLjMzIi8+PHBhdGggY2xhc3M9ImEiIGQ9Ik05MDEuNzIgMTc2LjA3aC0xMTBhNDMuMTMgNDMuMTMgMCAwIDEgNC4zNS05LjM3IDQzLjM5IDQzLjM5IDAgMCAxIDY3LjU2LTcuODlsMTguODMtMTguODZBNzAgNzAgMCAwIDAgNzYzIDE4Ny4wNlYxOTJhNzAuMDkgNzAuMDkgMCAwIDAgMS4yNCAxMWgxMTBhNDMuMzkgNDMuMzkgMCAwIDEtNzEuOTEgMTcuMjlsLTEyLjY4IDEyLjctNi4xNSA2LjE2QTcwIDcwIDAgMCAwIDkwMyAxOTAuMjN2LTEuNDVhNzAuMjIgNzAuMjIgMCAwIDAtMS4yOC0xMi43MXpNODMzIDE4OS41N2wtLjE2LjEuMTItLjEyLjA3LjA3eiIvPjwvc3ZnPg==" alt="schdesign logo">
+ </span>
+
+ <div id="todo-header">
+ <input type="text" id="task-input" placeholder="Írd ide a tennivalód">
+ <button id="add-task">+</button>
+ </div>
+
+ <div id="todo-list">
+ <ul id="tasks">
+ <!-- <li class="task">
+ <input type="checkbox" id="task0">
+ <label for="task0">Lemenni tejért</label>
+ <button>
+ <i class="fas fa-trash-alt"></i>
+ </button>
+ </li> -->
+ </ul>
+ </div>
- <div id="todo-list">
- <ul id="tasks">
- <li class="task">
- <input type="checkbox" id="task0" />
- <label for="task0">1. tennivaló</label>
- <button>X</button>
- </li>
- <li>2. tennivaló</li>
- </ul>
</div>
- <script src="script.js"></script>
- </body>
-</html>
+ <script src="script.js">
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/notes.txt b/notes.txt
deleted file mode 100644
index f4910567ec2eef9b3c77fbf72c9229e505b4623c..0000000000000000000000000000000000000000
--- a/notes.txt
+++ /dev/null
@@ -1,8 +0,0 @@
-Font-awesome
-#DDD
-placeholder (input type = "text"-re)
-
-
-///////
-To look up later:
-• position:relative; position:absolute;
diff --git a/script.js b/script.js
index a2cae5f17839ff1ad1cf7eed53ce70a07b96b08e..d3ab1b5590e1df780fd498cc241861c8c062973f 100644
--- a/script.js
+++ b/script.js
@@ -1,14 +1,54 @@
-addBttn = document.getElementById("add-task");
-addBttn.onclick = addTask;
-function addTask() {
- inputValue = document.getElementById("task-input").value;
- taskList = document.getElementById("tasks");
- taskLi = document.createElement("li");
- taskLi.setAttribute("class", "task");
+indexNum = 0;
- taskLi.innerText = inputValue;
+addBtn = document.getElementById("add-task");
+addBtn.onclick = addTask;
- taskList.appendChild(taskLi);
+
+taskInp = document.getElementById("task-input");
+taskInp.addEventListener("keyup",function(event){
+ // If enter is pressed
+ if (event.keyCode == 13) {
+ addTask();
+ }
+});
+
+ function addTask() {
+ taskInput = document.getElementById("task-input").value;
+ taskList = document.getElementById("tasks");
+
+ taskLi = document.createElement("li");
+ taskLi.setAttribute("class", "task");
+
+ taskCheckbox = document.createElement("input");
+ taskCheckbox.setAttribute("type", "checkbox");
+ taskCheckbox.setAttribute("id", "task" + indexNum);
+
+ taskVal = document.createElement("label");
+ taskVal.setAttribute("for", "task" + indexNum);
+ taskVal.innerText = taskInput;
+
+ taskBtn = document.createElement("button");
+ taskBtn.setAttribute("id","bin" + indexNum);
+ taskBtn.onclick = function(){
+ removeTask(this.id);
+ }
+
+ trashIcon = document.createElement("i");
+ trashIcon.setAttribute("class", "fas fa-trash-alt");
+ taskBtn.appendChild(trashIcon);
+
+ taskLi.appendChild(taskCheckbox);
+ taskLi.appendChild(taskVal);
+ taskLi.appendChild(taskBtn);
+
+ taskList.appendChild(taskLi);
+
+ document.getElementById("task-input").value = "";
+ indexNum++;
}
+
+function removeTask(id){
+ taskList.removeChild(document.getElementById(id).parentElement);
+ }
\ No newline at end of file
diff --git a/style.css b/style.css
index cacb9b30faa93db73a1fe6bf46a062b40a05ab33..d3c92ccfa2b7e8b509b8a3e0558d335166bd6e8f 100644
--- a/style.css
+++ b/style.css
@@ -1,3 +1,102 @@
+* {
+ margin: 0;
+ padding: 0;
+ border: none;
+ outline: none;
+ background: transparent;
+ font-family: 'Ubuntu', sans-serif;
+ font-size: 19px;
+}
+
+body {
+ background: #3d3d3d;
+ margin-top: 20px;
+}
+
+#todo-container {
+ max-width: 400px;
+ margin: 0 auto;
+}
+
+#todo-container ul {
+ background: #2d2d2d;
+ color: #DDD;
+ list-style-type:none;
+}
+
+#todo-header button {
+ background: #f8485e;
+ position: absolute;
+ right: 0;
+}
+
+#todo-header button:hover {
+ filter: brightness(1.15);
+}
+
+#todo-header {
+ position: relative;
+ background: #212121;
+ width: 100%;
+ margin-bottom: 20px;
+ margin-top: 20px;
+}
+
+#todo-header {
+ border-radius: 18px 18px 18px 18px;
+}
+
+#todo-header button {
+ border-radius: 0 18px 18px 0;
+}
+
+#todo-header button,
+#todo-header input {
+ color: #ddd;
+ padding: 12px;
+}
+
+#todo-list,
#tasks {
- color: red;
+ border-radius: 18px;
+}
+
+#todo-list .task {
+ position: relative;
+ border-bottom: 2px solid rgba(0,0,0,0.1);
+}
+
+#todo-list .task:last-child {
+ border-bottom: none;
+}
+
+#todo-list input{
+ display: none;
+}
+
+#todo-list input:checked + label {
+ text-decoration: line-through;
+ color: #a2a2a2;
+}
+
+#todo-list .task label {
+ display: block;
+ width: 100%;
+ padding: 14px 40px 14px 14px;
+}
+
+#todo-list .task button {
+ color: #cdcdcd;
+ padding: 14px;
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
+#todo-list .task button:hover {
+ color: #fff;
}
+
+#todo-list .task i {
+ font-size: 14px;
+}
\ No newline at end of file