Added in ability to edit the project data item, although backend is not completed yet.

Signed-off-by: rodude123 <rodude123@gmail.com>

src/css/projects.css

@@ -69,7 +69,7 @@ section#projects .otherProj > div .oProjItem {
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
     border-radius: 10px;
-    padding: 0 1em;
+    padding: 0.75em 1em;
 }
 
 section#projects .otherProj > div .oProjItem:nth-child(2) {

src/css/templateStyles.css

@@ -121,25 +121,6 @@ a.btn:active, form input[type="submit"]:active {
     text-shadow: 0 6px 4px var(--mutedBlack);
 }
 
-form .formControl {
-    width: 100%;
-}
-
-form .formControl input:not([type="submit"]), form .formControl textarea {
-    width: 100%;
-    border: 4px solid var(--primaryDefault);
-    background: none;
-    outline: none;
-    -webkit-border-radius: 1em;
-    -moz-border-radius: 1em;
-    border-radius: 0.5em;
-    padding: 0 0.5em;
-}
-
-form .formControl textarea {
-    padding: 0.5em;
-}
-
 form .formControl input:not([type="submit"]).invalid:invalid, form .formControl textarea.invalid:invalid {
     border: 4px solid var(--errorDefault);
 }
@@ -165,6 +146,10 @@ form .formControl {
     align-items: flex-start;
 }
 
+form .formControl.passwordControl {
+    display: block;
+}
+
 form input[type="submit"] {
     align-self: flex-start;
 }
@@ -277,10 +262,12 @@ form .formControl .checkContainer .checkmark:after {
 
 form .formControl input[type="file"] {
     padding: 0;
+    cursor: pointer;
 }
 
 form .formControl input[type="file"]::file-selector-button {
     background-color: var(--primaryDefault);
+    color: #FFFFFF;
     border: 0;
     border-right: 5px solid var(--mutedBlack);
     padding: 15px;
@@ -290,7 +277,6 @@ form .formControl input[type="file"]::file-selector-button {
     -ms-transition: all .5s;
     -o-transition: all .5s;
     transition: all .5s;
-    cursor: pointer;
 }
 
 form .formControl input[type="file"]:hover::file-selector-button {

src/editor/css/editor.css

@@ -1,5 +1,9 @@
 /*** Main editor styles ***/
 
+textarea {
+    resize: none;
+}
+
 section#curriculumVitae, section#projects, section#settings {
     margin: 0 2em;
 }
@@ -36,11 +40,11 @@ div.editorContainer > *, div.projectsGrid > * {
     width: 45%;
 }
 
-section#curriculumVitae {
+section#projects {
     display: block;
 }
 
-section#projects, section#settings {
+section#curriculumVitae, section#settings {
     display: none;
 }
 
@@ -50,6 +54,7 @@ div.modifyBtnContainer {
     justify-content: space-between;
     align-items: center;
     margin-bottom: 0.5em;
+    width: 100%;
 }
 
 div.dateContainer, div.companyAreaContainer {
@@ -70,14 +75,17 @@ section#curriculumVitae .timeline {
     height: 100%;
 }
 
-section#curriculumVitae .timelineItem {
-    color: #FFFFFF;
-    border: 2px solid var(--timelineItemBrdr);
+section#curriculumVitae .timelineItem, section#projects .projItem {
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
     border-radius: 10px;
-    padding: 0 1rem;
+    padding: 1rem;
     position: relative;
+}
+
+section#curriculumVitae .timelineItem {
+    border: 2px solid var(--timelineItemBrdr);
+    color: #FFFFFF;
     background-color: var(--primaryHover);
 }
 
@@ -85,6 +93,9 @@ section#curriculumVitae .timelineItem.editing {
     color: #000000;
     border: 5px solid var(--primaryDefault);
     padding: 0.5em;
+}
+
+section#curriculumVitae .timelineItem.editing {
     background-color: #FFFFFF;
 }
 
@@ -117,12 +128,15 @@ section#curriculumVitae form.timelineItem.editing div.gradeContainer.formControl
 section#curriculumVitae form.timelineItem:not(.editing) div.gradeContainer.formControl input,
 section#curriculumVitae form.timelineItem:not(.editing) div.companyAreaContainer.formControl input,
 section#curriculumVitae form.timelineItem:not(.editing) .formControl .courseText,
-section#curriculumVitae form.timelineItem:not(.editing) .formControl .jobTitleText {
+section#curriculumVitae form.timelineItem:not(.editing) .formControl .jobTitleText,
+section#projects form.projItem:not(.editing) div.formControl.projectTitleContainer input,
+section#projects form.projItem:not(.editing) div.formControl.infoContainer textarea {
     outline: none;
     border: none;
     -webkit-border-radius: 0;
     -moz-border-radius: 0;
     border-radius: 0;
+    resize: none;
 }
 
 section#curriculumVitae form.timelineItem:not(.editing) div.gradeContainer.formControl > *,
@@ -166,10 +180,6 @@ section#projects #projList .projItem {
     border: 1px solid var(--grey);
     gap: 1em;
     box-shadow: 0 6px 4px 0 var(--mutedBlack);
-    -webkit-border-radius: 10px;
-    -moz-border-radius: 10px;
-    border-radius: 10px;
-    padding: 1em;
 }
 
 section#projects #projList {
@@ -186,7 +196,7 @@ section#projects #projList .projItem img {
     padding: 0 1em;
 }
 
-section#projects .projItem .flexCol div:nth-child(2) {
+section#projects .projItem .linkContainer {
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
@@ -194,10 +204,32 @@ section#projects .projItem .flexCol div:nth-child(2) {
     margin-left: 2em;
 }
 
-section#projects .flexCol div:nth-child(2) .btn {
+section#projects .linkContainer .btn {
     padding: 0.25em 0.5em;
 }
 
-#isMainProject {
+section#projects #isMainProject {
     width: auto;
 }
+
+section#projects form.projItem:not(.editing) div.formControl.imageContainer,
+section#projects form.projItem:not(.editing) div.formControl.isMainProject,
+section#projects form.projItem:not(.editing) div.formControl.viewProjContainer,
+section#projects form.projItem:not(.editing) div.formControl.gitContainer,
+section#projects form.projItem:not(.editing) input[type="submit"],
+section#projects form.projItem.editing img.displayedImage,
+section#projects form.projItem.editing div.linkContainer {
+    display: none;
+}
+
+section#projects form.projItem:not(.editing) div.formControl.projectTitleContainer input {
+    font-size: 1.17em;
+    /*margin: 1em 0;*/
+    font-weight: bold;
+}
+
+section#projects form.projItem:not(.editing) div.formControl.projectTitleContainer input,
+section#projects form.projItem:not(.editing) div.formControl.infoContainer textarea{
+    color: #000000;
+}
+

src/editor/editor.html

@@ -3,6 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <title>Editor</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="css/main.css">
     <script src="https://kit.fontawesome.com/ed3c25598e.js" crossorigin="anonymous"></script>
 </head>
@@ -10,8 +11,8 @@
     <nav class="sideNav">
         <a href="#" class="closeBtn" id="navClose">&times;</a>
         <ul>
-            <li><a href="#" id="goToCV" class="active"><span>&lt;</span>CV<span>&gt;</span></a></li>
-            <li><a href="#" id="goToProjects"><span>&lt;</span>Projects<span>&gt;</span></a></li>
+            <li><a href="#" id="goToCV"><span>&lt;</span>CV<span>&gt;</span></a></li>
+            <li><a href="#" id="goToProjects" class="active"><span>&lt;</span>Projects<span>&gt;</span></a></li>
             <li><a href="#" id="goToSettings"><span>&lt;</span>Settings<span>&gt;</span></a></li>
             <li><a href="#" id="logout"><span>&lt;</span>Logout<span>&gt;</span></a></li>
         </ul>
@@ -33,22 +34,22 @@
                         <form action="" method="POST" id="addEdu">
                             <div class="formControl">
                                 <label for="dateFromE">Date From</label>
-                                <input type="date" id="dateFromE" name="dateFromE">
+                                <input type="date" id="dateFromE" name="dateFromE" required>
                             </div>
 
                             <div class="formControl">
                                 <label for="dateToE">Date To</label>
-                                <input type="date" id="dateToE" name="dateToE">
+                                <input type="date" id="dateToE" name="dateToE" required>
                             </div>
 
                             <div class="formControl">
                                 <label for="grade">Grade</label>
-                                <input type="text" id="grade" name="grade">
+                                <input type="text" id="grade" name="grade" required>
                             </div>
 
                             <div class="formControl">
                                 <label for="courseTitle">Course Title</label>
-                                <input type="text" id="courseTitle" name="courseTitle">
+                                <input type="text" id="courseTitle" name="courseTitle" required>
                             </div>
 
                             <div class="error hidden" id="eduError">
@@ -71,7 +72,7 @@
                         <form action="" method="POST" id="addWork">
                             <div class="formControl">
                                 <label for="dateFromW">Date From</label>
-                                <input type="date" id="dateFromW" name="dateFromW">
+                                <input type="date" id="dateFromW" name="dateFromW" required>
                             </div>
 
                             <div class="formControl">
@@ -81,17 +82,17 @@
 
                             <div class="formControl">
                                 <label for="company">Company</label>
-                                <input type="text" id="company" name="company">
+                                <input type="text" id="company" name="company" required>
                             </div>
                             
                             <div class="formControl">
                                 <label for="area">Area</label>
-                                <input type="text" id="area" name="area">
+                                <input type="text" id="area" name="area" required>
                             </div>
 
                             <div class="formControl">
                                 <label for="jobTitle">Job Title</label>
-                                <input type="text" id="jobTitle" name="jobTitle">
+                                <input type="text" id="jobTitle" name="jobTitle" required>
                             </div>
 
                             <div class="error hidden" id="workError">
@@ -125,8 +126,12 @@
                         </label>
                     </div>
                     <div class="formControl">
-                        <label for="imgLoc">Image</label>
-                        <input type="file" name="imgLoc" id="imgLoc">
+                        <label for="img">Image</label>
+                        <input type="file" name="img" id="img">
+                    </div>
+                    <div class="formControl">
+                        <label for="projectInfo">Description</label>
+                        <textarea name="projectInfo" id="projectInfo"></textarea>
                     </div>
                     <div class="formControl">
                         <label for="projectLink">Project Link</label>

src/editor/index.html

@@ -18,7 +18,7 @@
                 <input type="text" id="username" name="username" required>
             </div>
 
-            <div class="formControl">
+            <div class="formControl passwordControl">
                 <label for="password">Password</label>
                 <input type="password" id="password" name="password" required>
                 <i class="fa-solid fa-eye"></i>

src/editor/js/editor.js

@@ -1,15 +1,16 @@
 let dateOptions = {month: 'short', year: 'numeric'};
+let textareaLoaded = false;
 
 document.addEventListener('DOMContentLoaded', () =>
 {
     // check if the user is logged in, if not redirect to log in
-        fetch('/api/user/isLoggedIn').then(res => 
+    fetch('/api/user/isLoggedIn').then(res =>
+    {
+        if (!res.ok)
         {
-            if (!res.ok)
-            {
-                window.location.href = './';
-            }
-        });
+            window.location.href = './';
+        }
+    });
     document.querySelector("#dateFromE").max = new Date().toISOString().split("T")[0];
     document.querySelector("#dateFromW").max = new Date().toISOString().split("T")[0];
 
@@ -55,7 +56,7 @@ document.addEventListener('DOMContentLoaded', () =>
             {
                 json.forEach(item =>
                 {
-                    addProject(item["information"], item["projectLink"], item["gitLink"]);
+                    addProject(item["ID"], item["title"], item["information"], item["projectLink"], item["gitLink"]);
                 })
                 return;
             }
@@ -64,6 +65,28 @@ document.addEventListener('DOMContentLoaded', () =>
     })
 })
 
+document.querySelector("body").addEventListener("click", () =>
+{
+    if (textareaLoaded)
+    {
+        return;
+    }
+
+    const tx = document.querySelectorAll("main.editor textarea");
+    console.log(tx)
+    for (let i = 0; i < tx.length; i++)
+    {
+        console.log("height: " + tx[i].scrollHeight + "px");
+        tx[i].setAttribute("style", "height:" + (tx[i].scrollHeight) + "px;overflow-y:hidden;");
+        tx[i].oninput = e =>
+        {
+            e.target.style.height = "0";
+            e.target.style.height = (e.target.scrollHeight) + "px";
+        };
+    }
+    textareaLoaded = true;
+});
+
 document.querySelector("#navOpen").addEventListener("click", e =>
 {
     document.querySelector("nav.sideNav").style.removeProperty("width");
@@ -108,8 +131,7 @@ document.querySelector("#addEdu").addEventListener("submit", e =>
             return;
         }
 
-        document.querySelector("#eduError").classList.remove("hidden");
-        document.querySelector("#eduError div").innerHTML = json.error;
+        showErrorMessage(json.error, "edu");
     }));
 });
 
@@ -135,7 +157,7 @@ document.querySelector("#addWork").addEventListener("submit", e =>
         {
             let endPeriod = data.get("dateTo") === null ? "Present" : data.get("dateTo ");
             addWorkData(json.ID, data.get("dateFrom"), endPeriod, data.get("companyName"), data.get("area"), data.get("title"), true);
-            document.querySelector("#addEdu").reset();
+            document.querySelector("#addWork").reset();
             return;
         }
 
@@ -144,63 +166,87 @@ document.querySelector("#addWork").addEventListener("submit", e =>
             window.location.href = "./";
             return;
         }
-
-        document.querySelector("#eduError").classList.remove("hidden");
-        document.querySelector("#eduError div").innerHTML = json.error;
+        showErrorMessage(json.error, "work");
     }));
 });
 
+
 document.querySelector("#goToCV").addEventListener("click", () =>
 {
+    textareaLoaded = false;
     document.querySelector("#curriculumVitae").style.display = "block";
-    document.querySelector("#goToCV").classList.toggle("active");
+    document.querySelector("#goToCV").classList.add("active");
     document.querySelector("#projects").style.display = "none";
-    document.querySelector("#goToProjects").classList.toggle("active");
+    document.querySelector("#goToProjects").classList.remove("active");
 });
 
 document.querySelector("#goToProjects").addEventListener("click", () =>
 {
+    textareaLoaded = false;
     document.querySelector("#curriculumVitae").style.display = "none";
-    document.querySelector("#goToCV").classList.toggle("active");
+    document.querySelector("#goToCV").classList.remove("active");
     document.querySelector("#projects").style.display = "block";
-    document.querySelector("#goToProjects").classList.toggle("active");
+    document.querySelector("#goToProjects").classList.add("active");
 });
 
 document.querySelector("#logout").addEventListener("click", () =>
 {
-    document.cookie = "PHPSESSID=;Path=/cv;expires=Thu, 01 Jan 1970 00:00:01 GMT;";
-    window.location.reload();
+    fetch("/api/user/logout").then(res =>
+    {
+        if (res.ok)
+        {
+            localStorage.removeItem("token");
+            window.location.reload();
+        }
+    });
 });
 
+document.querySelector("#eduError .close").addEventListener("click", () =>
+    document.querySelector("#eduError").classList.toggle("hidden"));
+
+document.querySelector("#workError .close").addEventListener("click", () =>
+    document.querySelector("#workError").classList.toggle("hidden"));
+
+/**
+ * Shows respective error message for form
+ * @param {string} message The error message to show
+ * @param {string} form The form to show the error message for
+ */
+function showErrorMessage(message, form)
+{
+    document.querySelector(`#${form}Error`).classList.remove("hidden");
+    document.querySelector(`#${form}Error div`).innerText = message;
+}
 
 /**
  * Switches the timeline item between edit and view mode
- * @param id the id of the timeline item
+ * @param id the id of the timeline item from the database
  */
-function edit(id)
+function editCVItem(id)
 {
-    document.querySelector("#timelineItem" + id).classList.toggle("editing");
+    textareaLoaded = false;
+    document.querySelector(`#timelineItem${id}`).classList.toggle("editing");
     if (id.includes("e"))
     {
-        document.querySelector("#grade" + id).toggleAttribute("disabled");
-        document.querySelector("#course" + id).toggleAttribute("disabled");
+        document.querySelector(`#grade${id}`).toggleAttribute("disabled");
+        document.querySelector(`#course${id}`).toggleAttribute("disabled");
         return;
     }
-    document.querySelector("#companyName" + id).toggleAttribute("disabled");
-    document.querySelector("#area" + id).toggleAttribute("disabled");
-    document.querySelector("#jobTitle" + id).toggleAttribute("disabled");
+    document.querySelector(`#companyName${id}`).toggleAttribute("disabled");
+    document.querySelector(`#area${id}`).toggleAttribute("disabled");
+    document.querySelector(`#jobTitle${id}`).toggleAttribute("disabled");
 }
 
 /**
  * Updates the education timeline item with the given id
- * @param ID - the id of the course timeline item
- * @param startPeriod - the start date of the course
- * @param endPeriod - the end date of the course
- * @param grade - the grade of the course
- * @param course - the name of the course
- * @param prepend - whether to prepend the timeline item to the timeline
+ * @param {number} ID - the id of the course timeline item from the database
+ * @param {string} startPeriod - the start date of the course
+ * @param {string} endPeriod - the end date of the course
+ * @param {string} grade - the grade of the course
+ * @param {string} course - the name of the course
+ * @param {boolean} prepend - whether to prepend the timeline item to the timeline
  */
-function addEduData(ID, startPeriod, endPeriod, grade, course, prepend=false) 
+function addEduData(ID, startPeriod, endPeriod, grade, course, prepend=false)
 {
     let id = ID + "e";
     let timelineItem = document.createElement("form")
@@ -209,7 +255,7 @@ function addEduData(ID, startPeriod, endPeriod, grade, course, prepend=false)
     timelineItem.onsubmit = e => updateEduItem(ID, e);
     timelineItem.innerHTML = `
     <div class="modifyBtnContainer">
-        <button class="edit" type="button" id="edit${id}" onclick="edit('${id}')"><i class="fa-solid fa-pen-to-square"></i></button>
+        <button class="edit" type="button" id="edit${id}" onclick="editCVItem('${id}')"><i class="fa-solid fa-pen-to-square"></i></button>
         <button class="delete" type="button" id="delete${id}" onclick="deleteEduItem(${ID})"><i class="fa-solid fa-trash"></i></button>
     </div>
     <div class="dateContainer formControl">
@@ -242,13 +288,13 @@ function addEduData(ID, startPeriod, endPeriod, grade, course, prepend=false)
 
 /**
  * Adds a new work timeline item to the page
- * @param ID - the id of the work timeline item
- * @param startPeriod - the start date of the job
- * @param endPeriod - the end date of the job
- * @param companyName - the name of the company
- * @param area - the area of the company
- * @param jobTitle - the job title
- * @param prepend - whether to prepend the timeline item to the timeline
+ * @param {number} ID - the id of the work timeline item from the database
+ * @param {string} startPeriod - the start date of the job
+ * @param {string} endPeriod - the end date of the job
+ * @param {string} companyName - the name of the company
+ * @param {string} area - the area of the company
+ * @param {string} jobTitle - the job title
+ * @param {boolean} prepend - whether to prepend the timeline item to the timeline
  */
 function addWorkData(ID, startPeriod, endPeriod, companyName, area, jobTitle, prepend=false)
 {
@@ -259,7 +305,7 @@ function addWorkData(ID, startPeriod, endPeriod, companyName, area, jobTitle, pr
     timelineItem.onsubmit = e => updateWorkItem(ID, e);
     timelineItem.innerHTML = `
     <div class="modifyBtnContainer">
-        <button class="edit" type="button" id="edit${id}" onclick="edit('${id}')"><i class="fa-solid fa-pen-to-square"></i></button>
+        <button class="edit" type="button" id="edit${id}" onclick="editCVItem('${id}')"><i class="fa-solid fa-pen-to-square"></i></button>
         <button class="delete" type="button" id="delete${id}" onclick="deleteWorkItem(${ID})"><i class="fa-solid fa-trash"></i></button>
     </div>
     <div class="dateContainer formControl">
@@ -294,8 +340,9 @@ function addWorkData(ID, startPeriod, endPeriod, companyName, area, jobTitle, pr
 
 /**
  * Updates the edu timeline item with the given id
- * @param id the id of the edu timeline item
- * @param e the event that triggered the function
+ * and data from the form
+ * @param {number} id the id of the edu timeline item from the database
+ * @param {SubmitEvent} e the event that triggered the function
  */
 function updateEduItem(id, e)
 {
@@ -341,8 +388,9 @@ function updateEduItem(id, e)
 
 /**
  * Updates the work timeline item with the given id
- * @param id the id of the work timeline item
- * @param e the event that triggered the function
+ * and data from the form
+ * @param {number} id the id of the work timeline item from the database
+ * @param {SubmitEvent} e the event that triggered the function
  */
 function updateWorkItem(id, e)
 {
@@ -389,7 +437,7 @@ function updateWorkItem(id, e)
 
 /**
  * Deletes the timeline item with the given id
- * @param id the id of the timeline item
+ * @param {number} id the id of the timeline item
  */
 function deleteEduItem(id)
 {
@@ -417,7 +465,7 @@ function deleteEduItem(id)
 
 /**
  * Updates the timeline item with the given id
- * @param id the id of the timeline item
+ * @param {number} id the id of the timeline item from the database
  */
 function deleteWorkItem(id)
 {
@@ -444,21 +492,145 @@ function deleteWorkItem(id)
     }); 
 }
 
-
-function addProject(information, projectLink, gitLink)
+/**
+ * Updates the project item with the given id
+ * and data from the form
+ * @param {number} id the id from the database
+ * @param {SubmitEvent} e the event of the form that was submitted
+ */
+function updateProjectItem(id, e)
 {
-    document.querySelector("#projList").innerHTML += `
-        <div class="projItem">
-            <img src="../imgs/500x400.jpg" alt="">
-            <div class="flexCol">
-                <div>
-                    <p>${information}</p>
-                </div>
-                <div>
-                    <a href="${(projectLink === "N/A") ? "#" : projectLink}" class="btn btnPrimary boxShadowIn boxShadowOut"${(projectLink === "N/A") ? "disabled=\"disabled\"" : ""}>View Project</a>
-                    <a href="${(gitLink === "N/A") ? "#" : gitLink}" class="btn btnOutline boxShadowIn boxShadowOut">${(gitLink === "N/A") ? "disabled=\"disabled\"" : ""}Github</a>
-                </div>
-            </div>
+    e.preventDefault();
+    let data = {}
+    data["title"] = document.querySelector(`#title${id}`).value;
+    data["isMainProject"] = document.querySelector(`#isMainProject${id}`).checked;
+    data["img"] = document.querySelector(`#img${id}`).files[0];
+    data["information"] = document.querySelector(`#info${id}`).value;
+    data["projectLink"] = document.querySelector(`#viewProj${id}`).value;
+    data["gitLink"] = document.querySelector(`#git${id}`).value;
+
+    fetch("/api/projectData/" + id, {
+        method: "PATCH",
+        body: JSON.stringify(data),
+        headers: {
+            "Content-Type": "application/json",
+            "Authorization": "Bearer " + localStorage.getItem("token")
+        }
+    }).then(res =>
+    {
+        if (res.ok)
+        {
+            document.querySelector(`#projectItem${id}`).classList.toggle("editing");
+            document.querySelector(`#title${id}`).setAttribute("disabled", "");
+            document.querySelector(`#info${id}`).setAttribute("disabled", "");
+            return;
+        }
+
+        if (res.status === 401)
+        {
+            window.location.href = "./";
+            return;
+        }
+
+        res.json().then(json =>
+        {
+            document.querySelector(`#projectError${id}`).classList.remove("hidden");
+            document.querySelector(`#projectError${id} div`).innerHTML = json.error;
+        });
+    });
+
+}
+
+/**
+ * Toggles the editing mode of the project item with the given id
+ * @param id {number} the id of the project item from the database
+ */
+function editProjectItem(id)
+{
+    document.querySelector(`#projectItem${id}`).classList.toggle("editing");
+    document.querySelector(`#title${id}`).removeAttribute("disabled");
+    document.querySelector(`#info${id}`).removeAttribute("disabled");
+}
+
+/**
+ * Deletes the project item with the given id
+ * @param id {number} the id of the project item from the database
+ */
+function deleteProjectItem(id)
+{
+    fetch("/api/projectData/" + id, {
+        method: "DELETE",
+        headers: {
+            "Authorization": "Bearer " + localStorage.getItem("token")
+        }
+    }).then(res =>
+    {
+        if (res.ok)
+        {
+            document.querySelector(`#projectItem${id}`).remove();
+            return;
+        }
+
+        if (res.status === 401)
+        {
+            window.location.href = "./";
+            return;
+        }
+
+        res.json().then(json => alert(json.error));
+    });
+}
+
+/**
+ * Adds a new project to the page
+ * @param {number} id the id of the project from the database
+ * @param {string} title the title of the project
+ * @param {string} information the information about the project
+ * @param {string} projectLink the link to the project
+ * @param {string} gitLink the link to the git repository
+ */
+function addProject(id, title, information, projectLink, gitLink)
+{
+    let projectItem = document.createElement("form");
+    projectItem.id = "projectItem" + id;
+    projectItem.classList.add("projItem");
+    projectItem.onsubmit = e => updateProjectItem(id, e);
+    projectItem.innerHTML = `
+        <div class="modifyBtnContainer">
+            <button class="edit" type="button" id="edit${id}" onclick="editProjectItem(${id})"><i class="fa-solid fa-pen-to-square"></i></button>
+            <button class="delete" type="button" id="delete${id}" onclick="deleteProjectItem(${id})"><i class="fa-solid fa-trash"></i></button>
+        </div>
+        <img class="displayedImage" src="../imgs/500x400.jpg" alt="image preivew of the project">
+        <div class="formControl imageContainer">
+            <input type="file" name="img${id}" id="img${id}">
+        </div>
+        <div class="formControl projectTitleContainer">
+            <input type="text" name="title${id}" id="title${id}" value="${title}" disabled>
+        </div>
+        <div class="formControl isMainProject">
+            <label class="checkContainer" for="isMainProject${id}">Is It The Main Project
+                <input type="checkbox" id="isMainProject${id}" name="isMainProject${id}">
+                <span class="checkmark"></span>
+            </label>
+        </div> 
+        <div class="formControl infoContainer">
+            <textarea name="info${id}" id="info${id}" disabled>${information}</textarea>
+        </div>
+        <div class="formControl viewProjContainer">
+            <input type="text" name="viewProj${id}" id="viewProj${id}" value="${projectLink}">
+        </div>    
+        <div class="formControl gitContainer">
+            <input type="text" name="git${id}" id="git${id}" value="${gitLink}">
+        </div>    
+        <div class="error hidden" id="projError${id}">
+            <button class="close" type="button" onclick="this.parentElement.classList.toggle('hidden');">&times;</button>
+            <div></div>
+        </div>
+        <input type="submit" value="Change">
+        <div class="linkContainer">
+           <a href="${(projectLink === "N/A") ? "#" : projectLink}" class="btn btnPrimary boxShadowIn boxShadowOut"${(projectLink === "N/A") ? "disabled=\"disabled\"" : ""}>View Project</a>
+           <a href="${(gitLink === "N/A") ? "#" : gitLink}" class="btn btnOutline boxShadowIn boxShadowOut">${(gitLink === "N/A") ? "disabled=\"disabled\"" : ""}Git</a>
         </div>
     `;
+    document.querySelector("#projList").appendChild(projectItem);
 }

src/editor/js/index.js

@@ -11,12 +11,23 @@ document.addEventListener("DOMContentLoaded", _ =>
     });
 });
 
+/**
+ * Shows respective error message for form
+ * @param {string} message The error message to show
+ * @param {string} form The form to show the error message for
+ */
 function showErrorMessage(message, form) 
 {
     document.querySelector(`#${form}Error`).classList.remove("hidden");
     document.querySelector(`#${form}Error div`).innerText = message;
 }
 
+
+/**
+ * Switches between the different forms
+ * @param {string} from The css selector of form to switch from
+ * @param {string} to The css selector of form to switch to
+ */
 function switchView(from, to)
 {
     document.querySelector(from).classList.toggle("shown");

src/js/main.js

@@ -176,7 +176,7 @@ function getProjectData()
 								<p>${item["information"]}</p>
 								<div class="flexCol">
 									<a href="${(item["projectLink"] === "N/A") ? "#" : item["projectLink"]}" class="btn btnPrimary boxShadowIn boxShadowOut" ${(item["projectLink"] === "N/A") ? "disabled=\"disabled\"" : ""}>View Project</a>
-									<a href="${(item["gitLink"] === "N/A") ? "#" : item["gitLink"]}" class="btn btnOutline boxShadowIn boxShadowOut" ${(item["gitLink"] === "N/A") ? "disabled=\"disabled\"" : ""}>GitHub</a>
+									<a href="${(item["gitLink"] === "N/A") ? "#" : item["gitLink"]}" class="btn btnOutline boxShadowIn boxShadowOut" ${(item["gitLink"] === "N/A") ? "disabled=\"disabled\"" : ""}>Git</a>
 								</div>
 							</div>
 						</div>
@@ -189,11 +189,12 @@ function getProjectData()
                         <img src="imgs/500x400.jpg" alt="">
                         <div class="flexCol">
                             <div>
+                            	<h3>${item["title"]}</h3>
                                 <p>${item["information"]}</p>
                             </div>
                             <div>
                                 <a href="${(item["projectLink"] === "N/A") ? "#" : item["projectLink"]}" class="btn btnPrimary boxShadowIn boxShadowOut"${(item["projectLink"] === "N/A") ? "disabled=\"disabled\"" : ""}>View Project</a>
-                                <a href="${(item["githubLink"] === "N/A") ? "#" : item["gitubLink"]}" class="btn btnOutline boxShadowIn boxShadowOut">${(item["githubLink"] === "N/A") ? "disabled=\"disabled\"" : ""}Github</a>
+                                <a href="${(item["githubLink"] === "N/A") ? "#" : item["gitubLink"]}" class="btn btnOutline boxShadowIn boxShadowOut">${(item["githubLink"] === "N/A") ? "disabled=\"disabled\"" : ""}Git</a>
                             </div>
                         </div>
                     </div>