From c1bf911be33395de8f3f3a141a2d753392c1aef5 Mon Sep 17 00:00:00 2001 From: Mike Smith <89040888+smiggiddy@users.noreply.github.com> Date: Tue, 2 Jan 2024 20:59:39 -0500 Subject: [PATCH] feat: navbar finished --- todo/src/components/navbar.js | 45 +++++++++++++++++++++-- todo/src/components/todoComponent.js | 23 ++++++++++-- todo/src/index.js | 16 +++++++-- todo/src/style.css | 54 ++++++++++++++++++++++++++-- 4 files changed, 128 insertions(+), 10 deletions(-) diff --git a/todo/src/components/navbar.js b/todo/src/components/navbar.js index 2fc53dd..b21a666 100644 --- a/todo/src/components/navbar.js +++ b/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 }; diff --git a/todo/src/components/todoComponent.js b/todo/src/components/todoComponent.js index c9763df..342c974 100644 --- a/todo/src/components/todoComponent.js +++ b/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 }; diff --git a/todo/src/index.js b/todo/src/index.js index 2cfe90b..1a8bcca 100644 --- a/todo/src/index.js +++ b/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'); @@ -35,6 +41,9 @@ function website() { 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); @@ -46,9 +55,10 @@ function updateDisplay() { document.body.appendChild(div); addProject(todos); + deleteProject(todos); } - +fontAwesome(); website(); save(todos.getEverything()); diff --git a/todo/src/style.css b/todo/src/style.css index f931647..817406b 100644 --- a/todo/src/style.css +++ b/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; }