feat: styling for navbar

todo/src/components/navbar.js

@@ -22,7 +22,7 @@ function projectButtons(projects) {
 
     projects.forEach(e => {
             let btn = document.createElement('button');
-            btn.classList.add(['btn', 'project-btn']);
+            btn.classList.add('btn', 'project-btn');
             btn.textContent = e.name; 
             btn.dataset.projectName = e.name;
             // btn.addEventListener('click', e => console.log(e.target.dataset.projectName));
@@ -33,7 +33,7 @@ function projectButtons(projects) {
 
 function addProject() {
     let btn = document.createElement('button');
-    btn.classList.add(['btn', 'add-project']);
+    btn.classList.add('btn','add-project-btn');
     btn.textContent = 'New Project';
     return btn;
 

todo/src/components/todo.js

@@ -47,7 +47,7 @@ class todoHandler {
         if (!_titleExists) {
             this.projects[index].todos.push(new createTodo(title, description, dueDate, pomodoros));
         } else {
-            console.log('unable to create duplicate note');
+            alert('unable to create duplicate note');
             return
         }
 
@@ -84,7 +84,7 @@ class todoHandler {
             this.projects.push(createProject(name));
             return
         }
-        console.log(`Project ${name} already exists!`);
+        alert(`Project ${name} already exists!`);
 
     } 
 

todo/src/components/todoComponent.js

@@ -1,3 +1,6 @@
+import { updateDisplay } from "..";
+import { save } from "./storage";
+
 function todoTableComponent(todos) {
     const div = document.createElement('div');
     div.classList.add('todos');
@@ -14,6 +17,8 @@ function todoTableComponent(todos) {
             const tdPomodoro = document.createElement('td');
             const tdCompleted = document.createElement('td');
 
+            tr.classList.add('todo-row');
+            tr.dataset.todoId = element.title;
             tdTitle.textContent = element.title;
             tdDesc.textContent = element.description;
             tdDueDate.textContent = element.dueDate;
@@ -36,8 +41,47 @@ function todoTableComponent(todos) {
     return div;
 }
 
-function addTodo() {
+function projectComponent() {
+    const div = document.createElement('div');
+    const input = document.createElement('input');
+    const cancelButton = document.createElement('button');
+    const submitButton = document.createElement('button');
 
+    div.classList.add('project-add');
+    input.classList.add('project-input-name');
+    cancelButton.classList.add('cancel-project-btn');
+    submitButton.classList.add('submit-project-btn');
+
+    input.placeholder = 'Project name...';
+    submitButton.textContent = 'Submit';
+    cancelButton.textContent = 'Cancel';
+
+    div.appendChild(input);
+    div.appendChild(submitButton);
+    div.appendChild(cancelButton);
+
+    return div;
 }
 
-export { todoTableComponent }
+function addProject(proj) {
+    const button = document.querySelector('.add-project-btn');
+    const submitButton = document.querySelector('.submit-project-btn')
+    const cancelButton = document.querySelector('.cancel-project-btn');
+    const div = document.querySelector('.project-add');
+    const input = document.querySelector('.project-input-name');
+
+    button.addEventListener('click', () => div.classList.add('project-add-active'));
+    cancelButton.addEventListener('click', () => div.classList.remove('project-add-active'));
+    submitButton.addEventListener('click', () => { 
+        let name = input.value;
+        
+        // Add project via the global todos component
+        proj.addProject(name);
+        div.classList.remove('project-add-active');
+        updateDisplay();
+        save(proj.getEverything());
+    });
+}
+
+
+export { projectComponent, todoTableComponent, addProject };

todo/src/index.js

@@ -1,7 +1,8 @@
-import { todoTableComponent } from "./components/todoComponent";
+import { addProject, projectComponent, todoTableComponent } from "./components/todoComponent";
 import { navbar } from "./components/navbar";
 import { todoHandler } from "./components/todo";
 import { save, load } from "./components/storage";
+import './style.css';
 
 let todos; 
 let data = load();
@@ -15,27 +16,40 @@ if (data) {
 }
 
 let projects = todos.getProjects();
-
+let selectedProject = todos.getTodosFromProject('default');
+console.table(todos.getEverything());
 // starter test data to remove
-todos.addProject('job');
-todos.addTodo('default', 'test default 3', 'some stuff', 'today', 5);
-todos.addTodo('job', 'default 5', 'some stuff', 'today', 5);
+// todos.addProject('job');
+// todos.addTodo('default', 'test default 3', 'some stuff', 'today', 5);
+// todos.addTodo('job', 'default 5', 'some stuff', 'today', 5);
 
 
 function website() {
-    const currentProject = todos.getTodosFromProject('default');
     const div = document.createElement('div');
     div.classList.add('container');
+    document.body.appendChild(div);
+    
+    updateDisplay();
+}
+
+function updateDisplay() {
+    const div = document.querySelector('.container');
+    if (div) div.innerHTML = '';
 
     const _navbar = navbar(projects);
-    const _todos = todoTableComponent(currentProject);
+    const _todos = todoTableComponent(selectedProject);
+    const _addProject = projectComponent();
 
+    _navbar.appendChild(_addProject);
     div.appendChild(_navbar);
     div.appendChild(_todos);
 
     document.body.appendChild(div);
-
+    addProject(todos);
 }
 
+
 website();
 save(todos.getEverything());
+
+export { updateDisplay };

todo/src/style.css

@@ -0,0 +1,34 @@
+:root {
+    --color: 1234;
+}
+
+body,
+html {
+    margin: 0;
+    padding: 0;
+}
+
+.container {
+    display: flex;
+}
+
+.nav {
+    display: flex;
+    flex-direction: column;
+    min-width: 30vw;
+}
+
+.projects {
+    display: flex;
+    flex-direction: column;
+}
+
+.project-add {
+    display: none;
+}
+
+.project-add-active {
+    display: flex;
+    flex-direction: column;
+    padding: 25px 0;
+}