diff --git a/README.md b/README.md
new file mode 100644
index 0000000..d54f2c9
--- /dev/null
+++ b/README.md
@@ -0,0 +1,7 @@
+# Todo
+
+## Functionality
+
+1. Add todos
+2. Remove todos
+3. Cross out todos
diff --git a/images/checklist.svg b/images/checklist.svg
new file mode 100644
index 0000000..e6a1900
--- /dev/null
+++ b/images/checklist.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..4a8cb65
--- /dev/null
+++ b/index.html
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+
+
+
+
+
+ Todo
+
+
+
+
+
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..6af78f4
--- /dev/null
+++ b/index.js
@@ -0,0 +1,44 @@
+const input = document.getElementById("add-box");
+const addBtn = document.getElementById("add-todo");
+const list = document.getElementById("list")
+
+function addTodo() {
+ if (input.value === "") {
+ alert("Please enter in some text to the input box :)")
+ } else {
+ let listItem = document.createElement("li");
+ listItem.innerHTML = input.value.trim();
+
+ let cancel = document.createElement("span");
+ cancel.innerHTML = "\u00d7";
+
+ listItem.appendChild(cancel);
+ list.appendChild(listItem);
+
+ cancel.addEventListener("click", removeTodo);
+ listItem.addEventListener("click", toggleChecked);
+ }
+ input.value = "";
+}
+
+function removeTodo(event) {
+ event.target.parentElement.remove();
+}
+
+function toggleChecked(event) {
+ event.target.classList.toggle("checked")
+}
+
+addBtn.addEventListener("click", addTodo);
+
+function handleKeyPress(event) {
+ if (input.value.trim() === "" && event.keyCode === 13) {
+ alert("Please enter in some text to the input box :)")
+ }
+
+ if (input.value.trim() !== "" && event.keyCode === 13) {
+ addTodo();
+ }
+}
+
+input.addEventListener("keypress", handleKeyPress)
\ No newline at end of file
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..e69f809
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,134 @@
+* {
+ margin: 0;
+ padding: 0;
+ font-family: 'Roboto', sans-serif;
+ box-sizing: border-box;
+}
+
+body {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: rgb(34, 56, 67);
+}
+
+.container {
+ width: 100%;
+ background-color: rgb(216, 180, 160);
+ min-height: 100vh;
+ padding: 10px;
+}
+
+.card {
+ margin: 100px auto 100px;
+ max-width: 500px;
+ min-height: 100px;
+ padding: 40px 30px;
+ background-color: rgb(239, 241, 243);
+ border-radius: 20px;
+ text-align: center;
+}
+
+#add-box {
+ text-indent: 10px;
+ outline: none;
+ border: none;
+ width: 70%;
+ height: 40px;
+ border-radius: 25px;
+ background-color: rgba(255, 255, 255, 0.9);
+ font-size: 20px;
+ font-weight: 400;
+ transition: width 0.3s ease;
+ color: rgb(34, 56, 67);
+ padding: 12px;
+}
+
+#add-box:focus {
+ background-color: rgba(255, 255, 255, 0.95);
+}
+
+h1 {
+ color: rgb(34, 56, 67);
+ font-weight: 900;
+ margin-bottom: 10px;
+}
+
+.checklist {
+ width: 60px;
+ height: 35px;
+}
+
+.search {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 25px;
+}
+
+#add-todo {
+ width: 25%;
+ height: 40px;
+ border-radius: 25px;
+ background-color: rgb(215, 122, 97);
+ border: none;
+ font-size: 20px;
+ font-weight: 500;
+ color: rgb(34, 56, 67);
+ cursor: pointer;
+ user-select: none;
+}
+
+#add-todo:hover {
+ background-color: rgb(238, 147, 122);
+}
+
+#list {
+ max-width: 500px;
+ list-style-type: none;
+ text-align: left;
+ background-color: rgb(239, 241, 243);
+}
+
+#list li {
+ margin-bottom: 5px;
+ font-size: 20px;
+ font-weight: 400;
+ padding: 15px;
+ cursor: pointer;
+ user-select: none;
+ position: relative;
+ /* background-color: rgb(219, 211, 216); */
+ border-radius: 5px;
+ color: rgb(34, 56, 67);
+ background-color: rgb(239, 241, 243);
+ white-space: pre-wrap; /* This line makes the text wrap */
+ word-break: break-word;
+}
+
+#list li:last-child {
+ margin-bottom: 0;
+}
+
+.checked {
+ color: #555;
+ text-decoration: line-through;
+}
+
+#list li span {
+ position: absolute;
+ padding-left: 10px;
+ padding-right: 18px;
+ right: 0;
+ top: 5px;
+ width: 1px;
+ height: 40px;
+ font-size: 22px;
+ color: rgb(215, 122, 97);
+ line-height: 40px;
+ text-align: center;
+}
+
+#list li span:hover {
+ color: rgb(238, 147, 122);
+}
\ No newline at end of file