diff --git a/dist/index.html b/dist/index.html index a717dca..ed6484a 100644 --- a/dist/index.html +++ b/dist/index.html @@ -1,9 +1,19 @@ - + Output Management - + + +
TODOs
+ +
+ + +
+ - \ No newline at end of file + diff --git a/dist/main.js b/dist/main.js index 8e3fb9c..01366a7 100644 --- a/dist/main.js +++ b/dist/main.js @@ -16,7 +16,7 @@ \*************************************************************/ /***/ ((module, __webpack_exports__, __webpack_require__) => { -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \"body {\\r\\n background-color: blanchedalmond;\\r\\n}\", \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://todo/./src/style.css?./node_modules/css-loader/dist/cjs.js"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \"body {\\r\\n background-color: red;\\r\\n height: 100vh;\\r\\n display: grid;\\r\\n grid-template-columns: 1fr 4fr;\\r\\n grid-template-rows: 1fr 3fr 1fr;\\r\\n}\\r\\n\\r\\nheader {\\r\\n background-color: aliceblue;\\r\\n grid-column: 1/3;\\r\\n grid-row: 1/2;\\r\\n}\\r\\n\\r\\naside {\\r\\n grid-column: 1/2;\\r\\n grid-row: 2/3;\\r\\n}\\r\\n.content {\\r\\n background-color: coral;\\r\\n grid-column: 2/3;\\r\\n grid-row: 2/3;\\r\\n}\\r\\n\\r\\nfooter {\\r\\n background-color: aqua;\\r\\n grid-column: 1/3;\\r\\n grid-row: 3/4;\\r\\n}\", \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://todo/./src/style.css?./node_modules/css-loader/dist/cjs.js"); /***/ }), @@ -116,17 +116,17 @@ eval("\n\n/* istanbul ignore next */\nfunction styleTagTransform(css, styleElem \**********************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _print_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./print.js */ \"./src/print.js\");\n/* harmony import */ var _style_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./style.css */ \"./src/style.css\");\n\r\n\r\n(0,_print_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"])();\n\n//# sourceURL=webpack://todo/./src/index.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _todo_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./todo.js */ \"./src/todo.js\");\n/* harmony import */ var _style_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./style.css */ \"./src/style.css\");\n\r\n// import {} from \"./project\";\r\n\r\n\r\n\r\n// Create Todo module\r\n\r\n\r\nconst addButton = document.querySelector(\".content > button\");\r\nconst contentContainer = document.querySelector(\".content\");\r\nconst inputField = document.querySelector(\"#todoInputField\");\r\n\r\naddButton.addEventListener(\"click\", (e) => {\r\n const newTodo = new _todo_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"](inputField.value);\r\n const newItem = document.createElement(\"div\");\r\n newItem.textContent = newTodo.title;\r\n contentContainer.appendChild(newItem);\r\n});\r\n\r\n\r\n\r\n\r\n// Set todo status to complete module\r\n\r\n// Changing todo priority module\r\n\r\n// Dom manipulation module\n\n//# sourceURL=webpack://todo/./src/index.js?"); /***/ }), -/***/ "./src/print.js": -/*!**********************!*\ - !*** ./src/print.js ***! - \**********************/ +/***/ "./src/todo.js": +/*!*********************!*\ + !*** ./src/todo.js ***! + \*********************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ printMe)\n/* harmony export */ });\nfunction printMe() {\r\n console.log('I get called from print.js!');\r\n }\n\n//# sourceURL=webpack://todo/./src/print.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (/* binding */ Todo)\n/* harmony export */ });\n/* Todo objects\r\n- Title\r\n- Description\r\n- DueDate\r\n- Priority\r\n*/\r\n\r\nclass Todo {\r\n title;\r\n description;\r\n dueDate;\r\n priority;\r\n\r\n constructor(title, description, dueDate, priority) {\r\n this.title = title;\r\n this.description = description;\r\n this.dueDate = dueDate;\r\n this.priority = priority;\r\n }\r\n\r\n setTitle(title) {\r\n this.title = title;\r\n }\r\n\r\n getTitle() {\r\n return this.title;\r\n }\r\n\r\n setDescription(description) {\r\n this.description = description;\r\n }\r\n\r\n getDescription() {\r\n return this.description;\r\n }\r\n\r\n setDueDate(dueDate) {\r\n this.dueDate = dueDate;\r\n }\r\n\r\n getDueDate() {\r\n return this.dueDate;\r\n }\r\n\r\n setPriority(priority) {\r\n this.priority = priority;\r\n }\r\n\r\n getPriority() {\r\n return this.priority;\r\n }\r\n\r\n}\r\n\r\n\n\n//# sourceURL=webpack://todo/./src/todo.js?"); /***/ }) diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..b1152e5 --- /dev/null +++ b/src/index.html @@ -0,0 +1,19 @@ + + + + + Output Management + + + +
TODOs
+ +
+ + +
+ + + diff --git a/src/index.js b/src/index.js index 3fa15fd..47393b3 100644 --- a/src/index.js +++ b/src/index.js @@ -1,3 +1,27 @@ -import printMe from "./print.js"; +import Todo from "./todo.js"; +// import {} from "./project"; import css from './style.css'; -printMe(); \ No newline at end of file + + +// Create Todo module + + +const addButton = document.querySelector(".content > button"); +const contentContainer = document.querySelector(".content"); +const inputField = document.querySelector("#todoInputField"); + +addButton.addEventListener("click", (e) => { + const newTodo = new Todo(inputField.value); + const newItem = document.createElement("div"); + newItem.textContent = newTodo.title; + contentContainer.appendChild(newItem); +}); + + + + +// Set todo status to complete module + +// Changing todo priority module + +// Dom manipulation module \ No newline at end of file diff --git a/src/print.js b/src/print.js deleted file mode 100644 index 3ad81f5..0000000 --- a/src/print.js +++ /dev/null @@ -1,3 +0,0 @@ -export default function printMe() { - console.log('I get called from print.js!'); - } \ No newline at end of file diff --git a/src/project.js b/src/project.js new file mode 100644 index 0000000..51687e3 --- /dev/null +++ b/src/project.js @@ -0,0 +1,4 @@ +/* +A project is a container in which several todos live. +A project should have a theme like private, work, ... +*/ \ No newline at end of file diff --git a/src/style.css b/src/style.css index 565de4d..1ead0c1 100644 --- a/src/style.css +++ b/src/style.css @@ -1,3 +1,29 @@ body { - background-color: blanchedalmond; + background-color: red; + height: 100vh; + display: grid; + grid-template-columns: 1fr 4fr; + grid-template-rows: 1fr 3fr 1fr; +} + +header { + background-color: aliceblue; + grid-column: 1/3; + grid-row: 1/2; +} + +aside { + grid-column: 1/2; + grid-row: 2/3; +} +.content { + background-color: coral; + grid-column: 2/3; + grid-row: 2/3; +} + +footer { + background-color: aqua; + grid-column: 1/3; + grid-row: 3/4; } \ No newline at end of file diff --git a/src/todo.js b/src/todo.js new file mode 100644 index 0000000..a542b96 --- /dev/null +++ b/src/todo.js @@ -0,0 +1,54 @@ +/* Todo objects +- Title +- Description +- DueDate +- Priority +*/ + +export default class Todo { + title; + description; + dueDate; + priority; + + constructor(title, description, dueDate, priority) { + this.title = title; + this.description = description; + this.dueDate = dueDate; + this.priority = priority; + } + + setTitle(title) { + this.title = title; + } + + getTitle() { + return this.title; + } + + setDescription(description) { + this.description = description; + } + + getDescription() { + return this.description; + } + + setDueDate(dueDate) { + this.dueDate = dueDate; + } + + getDueDate() { + return this.dueDate; + } + + setPriority(priority) { + this.priority = priority; + } + + getPriority() { + return this.priority; + } + +} + diff --git a/webpack.config.js b/webpack.config.js index b17844c..c429aea 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -8,20 +8,23 @@ module.exports = { }, ], }, + + mode: "development", devServer: { static: "./dist", + hot: true, + port: 8080, }, - - mode: "development", entry: "./src/index.js", output: { filename: "main.js", - publicPath: "dist", + publicPath: "./", }, plugins: [ new HtmlWebpackPlugin({ - title: "Output Management", + title: "Todo list", + template: "./src/index.html", }), ], };