changed before cv

script.js

@@ -1,52 +1,62 @@
-let text = document.getElementById("text_input");
+let text_input = document.getElementById("text_input");
 let Add_Note = document.getElementById("add_note");
-
+// CREATE NEW NOTE
 Add_Note.addEventListener("click", (e) => {
   const field_notes = document.getElementById("all_notes");
 
-  const any_note = document.createElement("div");
-  any_note.classList.add("elements");
+  // create new note item
+  const new_note = document.createElement("div");
+  new_note.classList.add("new_note_style");
+
+  // make short variant of text
+  const full_text = text_input.value;
+  let short_text = full_text.substr(0, 10);
 
-  const short_str = text.value;
-  let result = short_str.substr(0, 10);
+  // create text field in new note
+  const note_text = document.createElement("h3");
+  note_text.classList.add("text_inside");
+  note_text.innerHTML = short_text;
 
-  const any_text = document.createElement("h3");
-  any_text.classList.add("text_inside");
-  any_text.innerHTML = result;
+  // create checkbox in note
+  const check_box = document.createElement("input");
+  check_box.type = "checkbox";
+  check_box.classList.add("checkbox");
+  // note_text.classList.add("text_inside");
+  // note_text.innerHTML = short_text;
 
+  // create button "view detail"
   const view_detail = document.createElement("button");
+  view_detail.innerHTML = "View Detail";
   view_detail.classList.add("button");
 
+  // create note with all components
+  field_notes.appendChild(new_note);
+  new_note.appendChild(note_text);
+  new_note.appendChild(view_detail);
+  new_note.appendChild(check_box);
+
+  text_input.value = "";
+
+  // create button to turn off view details mode
   const but_rem = document.createElement("button");
   but_rem.innerHTML = "x";
   but_rem.classList.add("but_rem");
 
-  let this_text = (text.innerHTML = result);
-  view_detail.innerHTML = "View Detail";
-
-  any_note.appendChild(any_text);
-  any_note.appendChild(view_detail);
-  field_notes.appendChild(any_note);
-
-  text.value = "";
-
-  const openPopUp = view_detail;
-  const popUp = any_note;
-
-  openPopUp.addEventListener("click", function (e) {
+  //open full text
+  view_detail.addEventListener("click", function (e) {
     e.preventDefault();
-    console.log(123);
-    any_note.removeChild(view_detail);
-    any_note.appendChild(but_rem);
-    popUp.classList.add("active");
+    new_note.removeChild(view_detail);
+    note_text.innerHTML = full_text;
+    new_note.appendChild(but_rem);
+    new_note.classList.add("active");
   });
 
-  const closePopUp = but_rem;
-
-  closePopUp.addEventListener("click", () => {
-    console.log("ok");
-    any_note.appendChild(view_detail);
-    popUp.classList.remove("active");
-    any_note.removeChild(but_rem);
+  // close full text
+  but_rem.addEventListener("click", () => {
+    new_note.classList.remove("active");
+    note_text.innerHTML = short_text;
+    new_note.appendChild(view_detail);
+    new_note.appendChild(check_box);
+    new_note.removeChild(but_rem);
   });
 });

style.css

@@ -69,6 +69,7 @@ input {
   position: absolute;
   bottom: 10px;
   right: 10px;
+  cursor: pointer;
 }
 
 .text_inside {
@@ -78,7 +79,7 @@ input {
   padding: auto;
 }
 
-.elements {
+.new_note_style {
   /* text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap; */
@@ -88,7 +89,6 @@ input {
   border-radius: 10px;
   background-color: rgb(246, 237, 237);
   margin: 5px;
-  cursor: pointer;
   position: relative;
 }
 
@@ -123,6 +123,17 @@ input {
   right: 10px;
 }
 
+.checkbox {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  height: 15px;
+  width: 15px;
+  margin: 0px;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
 /* #overlay {
   position: fixed;
   /* opacity: 1; */