JavaScript impl.

BaderSarah · Apr 27, 2024 · f5b2fe4 · f5b2fe4
1 parent 0467dfa
commit f5b2fe4
Show file tree

Hide file tree

Showing 3 changed files with 148 additions and 13 deletions.
diff --git a/courses.html b/courses.html
@@ -19,7 +19,7 @@
     </header>
     <main>
       <h1>Courses</h1>
-      <div class="addCourse">
+      <div class="addCourse" id="addCourseId">
         <h2>Here you can add a new course.</h2>
         <div class="name">
           <label> Name: </label>
@@ -28,8 +28,9 @@ <h2>Here you can add a new course.</h2>
         <p id="error"></p>
         <button id="add">Add</button>
       </div>
-      <div class="course">
-        <div id="courseOne">
+      <div class="course" id="courseId">
+        <!--
+        <div id="courseOdd">
           <h2>course one - example - title</h2>
           <h3 class="toDO">ToDo's :</h3>
           <span class="toDos">
@@ -82,7 +83,7 @@ <h3 class="addToDoTitle">Add ToDo :</h3>
           </span>
           <button id="addToDo">Add ToDO</button>
         </div>
-        <div id="courseTwo">
+        <div id="courseEven">
           <h2>course two - example - title</h2>
           <h3 class="toDO">ToDo's :</h3>
           <span class="toDos">
@@ -134,7 +135,7 @@ <h3 class="addToDoTitle">Add ToDo :</h3>
             </span>
           </span>
           <button id="addToDo">Add ToDO</button>
-        </div>
+        </div> -->
       </div>
     </main>
     <footer class="footer">

diff --git a/css/stylesheetCourses.css b/css/stylesheetCourses.css
@@ -140,7 +140,7 @@ input {
   font-size: 20pt;
 }
 
-.course .toDO {
+.course h3 {
   grid-row: 2;
   grid-column: 1;
   text-align: center;

diff --git a/src/CoursesComponent.js b/src/CoursesComponent.js
@@ -21,11 +21,12 @@ export default class CoursesComponent {
           "Course name is already in use or empty";
       } else {
         this.#addNameCourse(name);
+        this.#coursesRepository.addCourse(name);
       }
       document.getElementById("inputName").value = "";
       console.log(this.#names);
+      this.#toHtml();
     };
-
     this.#toHtml();
   }
 
@@ -35,9 +36,7 @@ export default class CoursesComponent {
   }
 
   #toHtml() {
-    this.#courseNamesToHtml();
     this.#coursesToHtml();
-    this.#addToDosToHtml;
   }
 
   #setNamesInStorage() {
@@ -51,12 +50,147 @@ export default class CoursesComponent {
     }
   }
 
-  #courseNamesToHtml() {}
+  #coursesToHtml() {
+    // parent div
+    const divAddCourse = document.getElementById("addCourseId");
+
+    this.#coursesRepository.courses.forEach((course) => {
+      const h2Element = document.createElement("h2");
+      h2Element.innerText = `Course : ${course.name}`;
+
+      const h3Element = document.createElement("h3");
+      h3Element.innerText = "toDo's : ";
+      h3Element.className = "toDo";
+
+      const spanElement = document.createElement("span");
+      spanElement.className = "toDos";
+
+      // list of toDos:
+      const ulElement = document.createElement("ul");
+      course.toDOs.forEach((t) => {
+        const liElement = document.createElement("li");
+        liElement.innerText = `${t[0]} - ${t[1]}`;
+        ulElement.appendChild(liElement);
+      });
+
+      spanElement.appendChild(ulElement);
+
+      // time indicator
+      const pElement = document.createElement("p");
+      pElement.innerText = "Total remaining time on toDos:"; // function needed to count all time
+      pElement.id = "timeIndicator";
+
+      // add toDO
+      const h3ElementSecond = document.createElement("h3");
+      h3ElementSecond.className = "addToDoTitle";
+      h3ElementSecond.innerText = "Add ToDo :";
+
+      const spanElementSecond = document.createElement("span");
+      spanElementSecond.className = "addToDo";
+      // inside the addToDO
+      //  title
+      const spanTitleEl = document.createElement("span");
+      spanTitleEl.className = "title";
+
+      const lblTitleEl = document.createElement("label");
+      lblTitleEl.innerText = "Title: ";
+      const inputTitleEl = document.createElement("input");
+      inputTitleEl.type = "text";
+      inputTitleEl.id = "inputTitle";
+      inputTitleEl.placeholder = "title";
+
+      spanTitleEl.appendChild(lblTitleEl);
+      spanTitleEl.appendChild(inputTitleEl);
+
+      // time
+      const spanTimeEl = document.createElement("span");
+      spanTimeEl.className = "time";
+
+      const lblTimeEl = document.createElement("label");
+      lblTimeEl.innerText = "Time estimation: ";
+      const inputTimeEl = document.createElement("input");
+      inputTimeEl.type = "time";
+      inputTimeEl.id = "inputTime";
+
+      spanTimeEl.appendChild(lblTimeEl);
+      spanTimeEl.appendChild(inputTimeEl);
+
+      // urgency
+      const spanUrgEl = document.createElement("span");
+      spanUrgEl.className = "urgency";
+
+      const lblUrgEl = document.createElement("label");
+      lblUrgEl.innerText = "Urgency: ";
+      const breakLine = document.createElement("br");
+
+      const inputUrgElOne = document.createElement("input");
+      inputUrgElOne.type = "radio";
+      inputUrgElOne.name = "option";
+      inputUrgElOne.id = "urgencyH";
+      inputUrgElOne.value = "high";
+      inputUrgElOne.className = "radioB";
+      const inputUrgElOneLbl = document.createElement("label");
+      inputUrgElOneLbl.innerText = "high";
+
+      const inputUrgElTwo = document.createElement("input");
+      inputUrgElTwo.type = "radio";
+      inputUrgElTwo.name = "option";
+      inputUrgElTwo.id = "urgencyM";
+      inputUrgElTwo.value = "medium";
+      inputUrgElTwo.className = "radioB";
+      const inputUrgElTwoLbl = document.createElement("label");
+      inputUrgElTwoLbl.innerText = "medium";
+
+      const inputUrgElThree = document.createElement("input");
+      inputUrgElThree.type = "radio";
+      inputUrgElThree.name = "option";
+      inputUrgElThree.id = "urgencyL";
+      inputUrgElThree.value = "low";
+      inputUrgElThree.className = "radioB";
+      const inputUrgElThreeLbl = document.createElement("label");
+      inputUrgElThreeLbl.innerText = "low";
+
+      spanUrgEl.appendChild(lblUrgEl);
+      spanUrgEl.appendChild(breakLine);
+      spanUrgEl.appendChild(inputUrgElOne);
+      spanUrgEl.appendChild(inputUrgElOneLbl);
+      spanUrgEl.appendChild(inputUrgElTwo);
+      spanUrgEl.appendChild(inputUrgElTwoLbl);
+      spanUrgEl.appendChild(inputUrgElThree);
+      spanUrgEl.appendChild(inputUrgElThreeLbl);
+
+      // all spans to span
+      spanElementSecond.appendChild(spanTitleEl);
+      spanElementSecond.appendChild(spanTimeEl);
+      spanElementSecond.appendChild(spanUrgEl);
+
+      // button add toDo
+      const btnElement = document.createElement("button");
+      btnElement.innerText = "Add ToDO";
+      btnElement.id = "addToDo";
+
+      // add all to div
+      const divCourse = document.createElement("div");
+      if (this.#coursesRepository.courses.indexOf(course) % 2 === 0) {
+        divCourse.id = "courseEven";
+      } else {
+        divCourse.id = "courseOdd";
+      }
+
+      divCourse.appendChild(h2Element);
+      divCourse.appendChild(h3Element);
+      divCourse.appendChild(spanElement);
+      divCourse.appendChild(pElement);
+      divCourse.appendChild(h3ElementSecond);
+      divCourse.appendChild(spanElementSecond);
+      divCourse.appendChild(btnElement);
 
-  #coursesToHtml() {}
+      // parent div
 
-  #addToDosToHtml(name) {
-    const toDos = this.#coursesRepository.giveToDosOfCourse(name);
+      // parent div
+      const divParentEl = document.getElementById("courseId");
+      divParentEl.appendChild(divCourse);
+    });
   }
 
   // help method