From 5d8b54fe7f6401e3dc2dab3c887f6901125988e0 Mon Sep 17 00:00:00 2001 From: Mike Smith <89040888+smiggiddy@users.noreply.github.com> Date: Tue, 2 Jan 2024 09:52:05 -0500 Subject: [PATCH] feat: styling for navbar --- todo/src/components/navbar.js | 4 +-- todo/src/components/todo.js | 4 +-- todo/src/components/todoComponent.js | 48 ++++++++++++++++++++++++++-- todo/src/index.js | 30 ++++++++++++----- todo/src/style.css | 34 ++++++++++++++++++++ 5 files changed, 106 insertions(+), 14 deletions(-) create mode 100644 todo/src/style.css diff --git a/todo/src/components/navbar.js b/todo/src/components/navbar.js index 2ab6b21..2fc53dd 100644 --- a/todo/src/components/navbar.js +++ b/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; diff --git a/todo/src/components/todo.js b/todo/src/components/todo.js index 10d5079..0d5f54d 100644 --- a/todo/src/components/todo.js +++ b/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!`); } diff --git a/todo/src/components/todoComponent.js b/todo/src/components/todoComponent.js index 84ff920..c9763df 100644 --- a/todo/src/components/todoComponent.js +++ b/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 }; diff --git a/todo/src/index.js b/todo/src/index.js index 471c6f4..2cfe90b 100644 --- a/todo/src/index.js +++ b/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 }; diff --git a/todo/src/style.css b/todo/src/style.css new file mode 100644 index 0000000..f931647 --- /dev/null +++ b/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; +}