diff --git a/projects/todo-list/package.json b/projects/todo-list/package.json index 5633c69..ba6169d 100644 --- a/projects/todo-list/package.json +++ b/projects/todo-list/package.json @@ -3,6 +3,7 @@ "version": "1.0.0", "description": "A todo list", "main": "index.js", + "private":"true", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack", @@ -10,7 +11,7 @@ "start": "webpack server --open" }, "keywords": [], - "author": "", + "author": "kesava-karri", "license": "ISC", "devDependencies": { "css-loader": "^6.10.0", diff --git a/projects/todo-list/src/Form.js b/projects/todo-list/src/Form.js index ba6ee97..60c31ae 100644 --- a/projects/todo-list/src/Form.js +++ b/projects/todo-list/src/Form.js @@ -1,5 +1,6 @@ import { format } from "date-fns"; import { + BUTTON, DATE_TIME_LOCAL, DIV, INPUT, @@ -9,6 +10,8 @@ import { SELECT, } from "./constants"; +import createCloseBtn from "./myUtil.js"; + export default class Form { constructor() { } @@ -22,24 +25,27 @@ export default class Form { const dialogBox = document.createElement('dialog'); container.classList.add('form-container'); dialogBox.classList.add('dialog-box'); + + const closeBtn = createCloseBtn(); const form = document.createElement('form'); form.method = "dialog"; - const titleDiv = this.createDiv("Title", INPUT, TEXT); - const description = this.createDiv("Description", INPUT, TEXT); + const titleDiv = Form.createDiv("Title", INPUT, TEXT); + const description = Form.createDiv("Description", INPUT, TEXT); // const dueDate = new Date().toLocaleString(Date.now()); - const priority = this.createDiv("Priority", SELECT); - const notes = this.createDiv("Notes", TEXT_AREA); + const priority = Form.createDiv("Priority", SELECT); + const notes = Form.createDiv("Notes", TEXT_AREA); - const dateDiv = this.createDiv("Due-date", INPUT, DATE_TIME_LOCAL); + const dateDiv = Form.createDiv("Due-date", INPUT, DATE_TIME_LOCAL); form.appendChild(titleDiv); form.appendChild(description); form.appendChild(dateDiv); form.appendChild(priority); form.appendChild(notes); + form.appendChild(closeBtn); dialogBox.appendChild(form); container.appendChild(dialogBox); @@ -56,13 +62,13 @@ export default class Form { * set to null by default * @returns {HTMLDivElement} div */ - createDiv(nameOfLabel, element, inputTypeIfPresent = null) { + static createDiv(nameOfLabel, element, inputTypeIfPresent = null) { const div = document.createElement(DIV); const label = document.createElement(LABEL); label.for = nameOfLabel; label.textContent = nameOfLabel; div.appendChild(label); - + const ele = this.#createElement(nameOfLabel, element, inputTypeIfPresent); div.appendChild(ele); @@ -78,7 +84,7 @@ export default class Form { * set to null by default * @returns {HTMLElement} element */ - #createElement(nameOfLabel, element, inputTypeIfPresent = null) { + static #createElement(nameOfLabel, element, inputTypeIfPresent = null) { const ele = document.createElement(element); ele.id = nameOfLabel; ele.name = nameOfLabel; @@ -100,7 +106,7 @@ export default class Form { * @param {String} value The options in dropdown select menu * @returns {HTMLOptionElement} option */ - #createOption(value = "--Choose priortiy of the task--") { + static #createOption(value = "--Choose priortiy of the task--") { const option = document.createElement('option'); option.value = option.textContent = value; return option; diff --git a/projects/todo-list/src/constants.js b/projects/todo-list/src/constants.js index c195f3a..f3a543a 100644 --- a/projects/todo-list/src/constants.js +++ b/projects/todo-list/src/constants.js @@ -1,7 +1,11 @@ -export const DATE_TIME_LOCAL = "datetime-local"; +// HTML Elements +export const BUTTON = "button"; export const DIV = "div"; export const INPUT = "input"; export const LABEL = "label"; -export const TEXT_AREA = "textarea"; -export const TEXT = "text"; export const SELECT = "select"; + +// input type attributes +export const DATE_TIME_LOCAL = "datetime-local"; +export const TEXT = "text"; +export const TEXT_AREA = "textarea"; diff --git a/projects/todo-list/src/index.js b/projects/todo-list/src/index.js index 0c6d914..957639e 100644 --- a/projects/todo-list/src/index.js +++ b/projects/todo-list/src/index.js @@ -2,6 +2,11 @@ import Todo from './Todo.js'; import Project from './Project.js'; import Form from './Form.js'; import './style.css'; +import createCloseBtn from './myUtil.js'; +import { + INPUT, + TEXT, + } from './constants.js'; const todo = new Todo('oakley'); @@ -19,17 +24,38 @@ projectDiv.classList.add('project'); const createNewTodoBtn = document.createElement('button'); createNewTodoBtn.textContent = "Add new Todo"; -const formContainer = new Form().createFormContainer(); -createNewTodoBtn.appendChild(formContainer); +const newForm = new Form().createFormContainer(); +createNewTodoBtn.appendChild(newForm); -createNewTodoBtn.addEventListener('click', (e) => { - formContainer.querySelector('dialog').showModal(); - // formContainer.querySelector('form').reset(); +const dialog = createNewTodoBtn.querySelector('.dialog-box'); + +createNewTodoBtn.addEventListener('click', () => { + dialog.showModal(); }); const createNewProjectBtn = document.createElement('button'); createNewProjectBtn.textContent = "Create new Project"; +const innerHeading = document.createElement("h3"); +innerHeading.textContent = "Create New Project"; + +// const newProjContainer = new Form().createFormContainer(); +const projLabelAndInput = Form.createDiv("Name of the new project: ", INPUT, TEXT); + + +const newProjDialog = document.createElement('dialog'); +newProjDialog.id = "project-dialog"; + +newProjDialog.appendChild(innerHeading); +newProjDialog.appendChild(projLabelAndInput); + +createNewProjectBtn.appendChild(newProjDialog); +createNewProjectBtn.addEventListener('click', () => { + const diag = document.querySelector("#project-dialog"); + diag.showModal(); + console.log(diag.querySelector("input").value); +}); + document.body.appendChild(projectDiv); const createBtns = document.createElement("div"); diff --git a/projects/todo-list/src/myUtil.js b/projects/todo-list/src/myUtil.js new file mode 100644 index 0000000..7f314d4 --- /dev/null +++ b/projects/todo-list/src/myUtil.js @@ -0,0 +1,9 @@ +import { BUTTON } from './constants'; + +export default function createCloseBtn() { + const closeBtn = document.createElement(BUTTON); + closeBtn.classList.add('close-btn'); + closeBtn.textContent = "Close"; + + return closeBtn; +}