feat: navbar finished

todo/src/components/navbar.js

@@ -22,10 +22,34 @@ function projectButtons(projects) {
 
     projects.forEach(e => {
             let btn = document.createElement('button');
+            let iTag = document.createElement('i');
+            // let btnText = document.createTextNode(`${e.name}`);
+            let btnSpan = document.createElement('span');
+
+            btnSpan.textContent = ` ${e.name}`;
+            
+            
+            if (e.name === 'default') {
+                iTag.classList.add('fas', 'fa-home');
+            } else {
+                let closeSpan = document.createElement('span');
+                let closeITag = document.createElement('i')
+                iTag.classList.add('fas', 'fa-tasks');
+                closeITag.classList.add('fa', 'fa-trash');
+                closeSpan.classList.add('project-delete-btn');
+                closeSpan.appendChild(closeITag);
+                btn.appendChild(closeSpan);
+            }
+
+            // delete button
+
             btn.classList.add('btn', 'project-btn');
-            btn.textContent = e.name; 
+            
+            btn.addEventListener('click', activeProjectBtn);
+
+            btn.appendChild(iTag);
+            btn.appendChild(btnSpan);
             btn.dataset.projectName = e.name;
-            // btn.addEventListener('click', e => console.log(e.target.dataset.projectName));
             projectsDiv.append(btn);
     });
     return projectsDiv;
@@ -39,5 +63,22 @@ function addProject() {
 
 }
 
+function activeProjectBtn() {
+    const projectContainer = document.querySelector('.projects');
+    const btns = projectContainer.querySelectorAll('.project-btn');
+
+
+    for (let i=0; i < btns.length; i++) {
+
+        let current = document.getElementsByClassName('active');
+
+        if (current.length > 0) {
+            current[0].className = current[0].className.replace(' active', '');
+        }
+
+        this.className += ' active';
+    };
+}
+
 
 export { navbar };

todo/src/components/todoComponent.js

@@ -46,19 +46,22 @@ function projectComponent() {
     const input = document.createElement('input');
     const cancelButton = document.createElement('button');
     const submitButton = document.createElement('button');
+    const buttonDiv = document.createElement('div');
 
     div.classList.add('project-add');
     input.classList.add('project-input-name');
     cancelButton.classList.add('cancel-project-btn');
     submitButton.classList.add('submit-project-btn');
+    buttonDiv.classList.add('project-buttons');
 
     input.placeholder = 'Project name...';
     submitButton.textContent = 'Submit';
     cancelButton.textContent = 'Cancel';
 
     div.appendChild(input);
-    div.appendChild(submitButton);
-    div.appendChild(cancelButton);
+    buttonDiv.appendChild(submitButton);
+    buttonDiv.appendChild(cancelButton);
+    div.appendChild(buttonDiv);
 
     return div;
 }
@@ -83,5 +86,19 @@ function addProject(proj) {
     });
 }
 
+function deleteProject(proj) {
+    const deleteButtons = document.querySelectorAll('.project-delete-btn');
 
-export { projectComponent, todoTableComponent, addProject };
+    deleteButtons.forEach(e => {
+        e.addEventListener('click', element => {
+        let projectName = element.target.parentNode.parentNode.dataset.projectName; 
+        proj.delProject(projectName);
+        save(proj.getEverything());
+        updateDisplay();
+        });
+    });
+
+}
+
+
+export { projectComponent, todoTableComponent, addProject, deleteProject };

todo/src/index.js

@@ -1,4 +1,4 @@
-import { addProject, projectComponent, todoTableComponent } from "./components/todoComponent";
+import { addProject, deleteProject, projectComponent, todoTableComponent } from "./components/todoComponent";
 import { navbar } from "./components/navbar";
 import { todoHandler } from "./components/todo";
 import { save, load } from "./components/storage";
@@ -15,7 +15,6 @@ if (data) {
     todos = new todoHandler();
 }
 
-let projects = todos.getProjects();
 let selectedProject = todos.getTodosFromProject('default');
 console.table(todos.getEverything());
 // starter test data to remove
@@ -23,6 +22,13 @@ console.table(todos.getEverything());
 // todos.addTodo('default', 'test default 3', 'some stuff', 'today', 5);
 // todos.addTodo('job', 'default 5', 'some stuff', 'today', 5);
 
+function fontAwesome() {
+    let script = document.createElement('script');
+    script.src = 'https://kit.fontawesome.com/24f16b96cf.js';
+    script.crossOrigin = 'anonymous';
+
+    document.head.appendChild(script);
+}
 
 function website() {
     const div = document.createElement('div');
@@ -36,6 +42,9 @@ function updateDisplay() {
     const div = document.querySelector('.container');
     if (div) div.innerHTML = '';
    
+    // ensure grabbing latest projects
+    let projects = todos.getProjects();
+
     const _navbar = navbar(projects);
     const _todos = todoTableComponent(selectedProject);
     const _addProject = projectComponent();
@@ -46,9 +55,10 @@ function updateDisplay() {
 
     document.body.appendChild(div);
     addProject(todos);
+    deleteProject(todos);
 }
 
-
+fontAwesome();
 website();
 save(todos.getEverything());
 

todo/src/style.css

@@ -1,11 +1,24 @@
 :root {
     --color: 1234;
+    --font-size: 18px;
 }
 
 body,
 html {
     margin: 0;
     padding: 0;
+    font-size: var(--font-size);
+    line-height: 1.5;
+}
+
+button {
+    padding: 10px 20px;
+    margin: 10px;
+    border-radius: 5px;
+    cursor: pointer;
+    border: none;
+    width: 100%;
+    font-size: 1rem;
 }
 
 .container {
@@ -15,7 +28,9 @@ html {
 .nav {
     display: flex;
     flex-direction: column;
-    min-width: 30vw;
+    min-width: 250px;
+    width: 350px;
+    padding: 20px;
 }
 
 .projects {
@@ -23,12 +38,47 @@ html {
     flex-direction: column;
 }
 
+.project-heading {
+    padding-left: 15px;
+}
+
 .project-add {
     display: none;
+    width: 100%;
+}
+
+.project-add input {
+    padding: 10px;
 }
 
 .project-add-active {
     display: flex;
     flex-direction: column;
-    padding: 25px 0;
+    padding: 15px 10px;
+}
+
+.active,
+.project-btn:hover {
+    background-color: gray;
+}
+
+.project-btn .project-delete-btn {
+    visibility: hidden;
+    float: right;
+}
+
+.project-btn:hover .project-delete-btn {
+    visibility: visible;
+    float: right;
+}
+
+
+.project-buttons {
+    display: flex;
+    gap: 10px;
+}
+
+.project-buttons button {
+    width: 100%;
+    margin: 10px 0;
 }