Project: Todo List

projects/todo-list/package.json

@@ -3,14 +3,15 @@
   "version": "1.0.0",
   "description": "A todo list",
   "main": "index.js",
+  "private":"true",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "webpack",
     "watch": "webpack --watch",
     "start": "webpack server --open"
   },
   "keywords": [],
-  "author": "",
+  "author": "kesava-karri",
   "license": "ISC",
   "devDependencies": {
     "css-loader": "^6.10.0",

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;

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";

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");

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;
+}