├── .gitignore ├── .DS_Store ├── .babelrc ├── jest.config.js ├── .hintrc ├── src ├── modules │ ├── displayTask.js │ ├── deleteTask.js │ ├── clearTask.js │ ├── createTask.js │ ├── completeTask.js │ ├── Task.js │ └── editTask.js ├── index.js ├── index.html ├── tests │ ├── addTask.test.js │ ├── editTask.test.js │ ├── deleteTask.test.js │ └── clearTask.test.js ├── img │ ├── menu-icon.svg │ ├── icons8-refresh.svg │ ├── save-icon.svg │ └── icons8-trash.svg └── style.css ├── .eslintrc.json ├── webpack.config.js ├── dist ├── index.html ├── 19c84313d62edb23795c.svg ├── 62ef7ea007720cc07b88.svg └── main.js ├── MIT.md ├── .stylelintrc.json ├── package.json ├── .github └── workflows │ └── linters.yml └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | coverage/ -------------------------------------------------------------------------------- /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ahmedeid6842/ToDo-List/main/.DS_Store -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env"], 3 | "plugins": ["@babel/plugin-transform-modules-commonjs"] 4 | } 5 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | transform: { 3 | '\\.(js|jsx)$': 'babel-jest', 4 | '\\.svg$': 'jest-transform-stub', 5 | }, 6 | moduleNameMapper: { 7 | '\\.(css|sass|scss)$': 'identity-obj-proxy', 8 | }, 9 | moduleFileExtensions: ['js', 'jsx', 'json', 'node', 'svg'], 10 | testEnvironment: 'jsdom', 11 | }; 12 | -------------------------------------------------------------------------------- /.hintrc: -------------------------------------------------------------------------------- 1 | { 2 | "connector": { 3 | "name": "local", 4 | "options": { 5 | "pattern": ["**", "!.git/**", "!node_modules/**"] 6 | } 7 | }, 8 | "extends": ["development"], 9 | "formatters": ["stylish"], 10 | "hints": [ 11 | "button-type", 12 | "disown-opener", 13 | "html-checker", 14 | "meta-charset-utf-8", 15 | "meta-viewport", 16 | "no-inline-styles:error" 17 | ] 18 | } -------------------------------------------------------------------------------- /src/modules/displayTask.js: -------------------------------------------------------------------------------- 1 | import Task from "./Task.js"; 2 | import completeTask from "./completeTask.js"; 3 | 4 | const tasksDisplay = () => { 5 | const inputs = document.querySelector(".task-input-item"); 6 | 7 | Task.parseTasks(); 8 | 9 | Task.tasks.forEach((task) => { 10 | const newItem = new Task(task.description, task.index); 11 | const html = newItem.buildTaskCard(task.description); 12 | inputs.insertAdjacentHTML("afterend", html); 13 | }); 14 | completeTask(); 15 | }; 16 | 17 | export default tasksDisplay; 18 | -------------------------------------------------------------------------------- /src/modules/deleteTask.js: -------------------------------------------------------------------------------- 1 | import Task from './Task.js'; 2 | 3 | const deleteTask = (event) => { 4 | if (event.target.classList.contains('delete-icon')) { 5 | const taskIndex = event.target.parentNode.parentNode.className.split(' ')[1]; 6 | const task = event.target.parentNode.parentNode; 7 | 8 | Task.tasks = Task.tasks.filter((task) => task.index !== parseInt(taskIndex, 10)) 9 | .map((task, index) => ({ ...task, index: index + 1 })); 10 | 11 | Task.storageManagement(Task.tasks); 12 | task.remove(); 13 | } 14 | }; 15 | 16 | export default deleteTask; -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import './style.css'; 2 | import tasksDisplay from './modules/displayTask.js'; 3 | import createTask from './modules/createTask.js'; 4 | import deleteTask from './modules/deleteTask.js'; 5 | import editTask from './modules/editTask.js'; 6 | import completeTask from './modules/completeTask.js'; 7 | import clearCompletedTask from './modules/clearTask.js'; 8 | 9 | const clearButton = document.querySelector('.clear-btn'); 10 | 11 | document.addEventListener('keypress', createTask); 12 | document.addEventListener('click', deleteTask); 13 | document.addEventListener('click', editTask); 14 | clearButton.addEventListener('click', clearCompletedTask); 15 | 16 | tasksDisplay(); 17 | completeTask(); -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es6": true, 5 | "jest": true 6 | }, 7 | "parser": "babel-eslint", 8 | "parserOptions": { 9 | "ecmaVersion": 2018, 10 | "sourceType": "module" 11 | }, 12 | "extends": [ 13 | "airbnb-base" 14 | ], 15 | "rules": { 16 | "no-shadow": "off", 17 | "no-param-reassign": "off", 18 | "eol-last": "off", 19 | "import/extensions": [ 20 | 1, 21 | { 22 | "js": "always", 23 | "json": "always" 24 | } 25 | ] 26 | }, 27 | "ignorePatterns": [ 28 | "dist/", 29 | "build/" 30 | ] 31 | } -------------------------------------------------------------------------------- /src/modules/clearTask.js: -------------------------------------------------------------------------------- 1 | import Task from './Task.js'; 2 | import tasksDisplay from './displayTask.js'; 3 | 4 | const reDisplayTask = () => { 5 | const taskItems = document.querySelectorAll('.task-item'); 6 | taskItems.forEach((task) => { 7 | task.remove(); 8 | }); 9 | 10 | tasksDisplay(); 11 | }; 12 | 13 | const clearCompletedTask = () => { 14 | const completedTasks = document.querySelectorAll('done'); 15 | 16 | completedTasks.forEach((task) => { 17 | task.parentNode.parentNode.remove(); 18 | }); 19 | 20 | Task.tasks = Task.tasks.filter((task) => task.completed !== true) 21 | .map((task, index) => ({ ...task, index: index + 1 })); 22 | 23 | Task.storageManagement(Task.tasks); 24 | reDisplayTask(); 25 | }; 26 | 27 | export default clearCompletedTask; -------------------------------------------------------------------------------- /src/modules/createTask.js: -------------------------------------------------------------------------------- 1 | import Task from "./Task.js"; 2 | import completeTask from "./completeTask.js"; 3 | 4 | const inputField = document.querySelector(".taks-input"); 5 | const taskList = document.querySelector(".task-input-item"); 6 | 7 | const createTask = (event) => { 8 | Task.parseTasks(); 9 | 10 | if (event.key === "Enter") { 11 | if (inputField.value === "") return; 12 | 13 | const newItem = new Task(inputField.value, Task.tasks.length + 1); 14 | Task.tasks.push(newItem); 15 | Task.storageManagement(Task.tasks); 16 | 17 | const html = newItem.buildTaskCard(newItem.description, newItem.index); 18 | taskList.insertAdjacentHTML("afterend", html); 19 | completeTask(); 20 | inputField.value = ""; 21 | } 22 | }; 23 | 24 | export default createTask; 25 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | To Do List 9 | 10 | 11 | 12 |
13 | 21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 3 | 4 | module.exports = { 5 | mode: 'development', 6 | entry: './src/index.js', 7 | output: { 8 | filename: 'main.js', 9 | path: path.resolve(__dirname, 'dist'), 10 | }, 11 | plugins: [ 12 | new HtmlWebpackPlugin({ 13 | title: 'Output Management', 14 | template: './src/index.html', 15 | }), 16 | ], 17 | module: { 18 | rules: [ 19 | { 20 | test: /\.css$/, 21 | use: ['style-loader', 'css-loader'], 22 | }, 23 | { 24 | test: /\.html$/, 25 | use: ['html-loader'], 26 | }, 27 | { 28 | test: /\.(png|svg|jpg|jpeg|gif)$/i, 29 | type: 'asset/resource', 30 | }, 31 | ], 32 | }, 33 | }; 34 | -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | To Do List 9 | 10 | 11 | 12 |
13 | 21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /src/tests/addTask.test.js: -------------------------------------------------------------------------------- 1 | import Task from '../modules/Task.js'; 2 | 3 | const localStorageMock = (() => { 4 | const store = {}; 5 | return { 6 | setItem: jest.fn((key, value) => { 7 | store[key] = value; 8 | }), 9 | }; 10 | })(); 11 | 12 | Object.defineProperty(global, 'localStorage', { 13 | value: localStorageMock, 14 | }); 15 | 16 | describe('addItem', () => { 17 | beforeEach(() => { 18 | localStorageMock.setItem('taskList', JSON.stringify([])); 19 | }); 20 | 21 | it('should add an item to localStorage', () => { 22 | const description = 'Test item'; 23 | const index = 1; 24 | 25 | Task.storageManagement([{ description, index, completed: false }]); 26 | 27 | expect(localStorageMock.setItem).toHaveBeenCalledWith( 28 | 'taskList', 29 | JSON.stringify([{ description, index, completed: false }]), 30 | ); 31 | }); 32 | }); 33 | -------------------------------------------------------------------------------- /src/modules/completeTask.js: -------------------------------------------------------------------------------- 1 | import Task from './Task.js'; 2 | 3 | const boxChangeHanlder = (event) => { 4 | const targetID = parseInt(event.target.parentNode.parentNode.className.split(' ')[1], 10) - 1; 5 | if (event.target.checked) { 6 | event.target.nextElementSibling.classList.add('done'); 7 | Task.tasks[targetID].completed = true; 8 | Task.storageManagement(Task.tasks); 9 | } else if (!event.target.checked) { 10 | event.target.nextElementSibling.classList.remove('done'); 11 | Task.tasks[targetID].completed = false; 12 | Task.storageManagement(Task.tasks); 13 | } 14 | }; 15 | 16 | const completeTask = () => { 17 | const checkBoxes = document.querySelectorAll('.checkbox'); 18 | checkBoxes.forEach((box) => { 19 | box.addEventListener('change', (event) => { 20 | boxChangeHanlder(event); 21 | }); 22 | }); 23 | }; 24 | 25 | export default completeTask; -------------------------------------------------------------------------------- /MIT.md: -------------------------------------------------------------------------------- 1 | ## Copyright 2023, Ahmed Eid 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this webpage and associated documentation files, to deal in the webpage without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the webpage, and to permit persons to whom the webpage is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the webpage. 6 | 7 | THE webpage IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE webpage OR THE USE OR OTHER DEALINGS IN THE webpage. -------------------------------------------------------------------------------- /src/img/menu-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /dist/19c84313d62edb23795c.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "stylelint-config-standard" 4 | ], 5 | "plugins": [ 6 | "stylelint-scss", 7 | "stylelint-csstree-validator" 8 | ], 9 | "rules": { 10 | "at-rule-no-unknown": [ 11 | true, 12 | { 13 | "ignoreAtRules": [ 14 | "tailwind", 15 | "apply", 16 | "variants", 17 | "responsive", 18 | "screen" 19 | ] 20 | } 21 | ], 22 | "scss/at-rule-no-unknown": [ 23 | true, 24 | { 25 | "ignoreAtRules": [ 26 | "tailwind", 27 | "apply", 28 | "variants", 29 | "responsive", 30 | "screen" 31 | ] 32 | } 33 | ], 34 | "csstree/validator": true 35 | }, 36 | "ignoreFiles": [ 37 | "build/**", 38 | "dist/**", 39 | "**/reset*.css", 40 | "**/bootstrap*.css", 41 | "**/*.js", 42 | "**/*.jsx" 43 | ] 44 | } -------------------------------------------------------------------------------- /src/img/icons8-refresh.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/62ef7ea007720cc07b88.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/modules/Task.js: -------------------------------------------------------------------------------- 1 | import menuIcon from "../img/menu-icon.svg"; 2 | import deleteIcon from "../img/icons8-trash.svg"; 3 | export default class Task { 4 | static tasks = []; 5 | constructor(description, index) { 6 | this.description = description; 7 | this.index = index; 8 | this.completed = false; 9 | } 10 | 11 | static storageManagement(task) { 12 | localStorage.setItem("taskList", JSON.stringify(task)); 13 | } 14 | 15 | static rearrangement() { 16 | Task.tasks.forEach((task, index) => { 17 | task.index = index + 1; 18 | }); 19 | } 20 | 21 | buildTaskCard(description, index) { 22 | return ` 23 |
  • 24 |
    25 | 26 |
    27 |
    28 | option-icon 29 | delete-icon 30 |
    31 |
    • 32 | `; 33 | } 34 | 35 | static parseTasks() { 36 | if (JSON.parse(localStorage.getItem("taskList"))) { 37 | Task.tasks = JSON.parse(localStorage.getItem("taskList")); 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/modules/editTask.js: -------------------------------------------------------------------------------- 1 | import Task from './Task.js'; 2 | import saveIcon from '../img/save-icon.svg'; 3 | 4 | const editTask = (event) => { 5 | if (event.target.classList.contains('menu-icon')) { 6 | const taskIndex = event.target.parentNode.parentNode.className.split(' ')[1]; 7 | const menuIcon = event.target; 8 | const taskInput = event.target.parentNode.parentNode.firstChild.nextSibling.childNodes[3]; 9 | 10 | taskInput.removeAttribute('readonly'); 11 | taskInput.focus(); 12 | 13 | const spanIcon = document.createElement('span'); 14 | const img = document.createElement('img'); 15 | 16 | img.setAttribute('src', saveIcon); 17 | img.setAttribute('alt', 'Save Icon'); 18 | img.classList.add('save-icon'); 19 | 20 | spanIcon.appendChild(img); 21 | menuIcon.parentNode.insertAdjacentElement('afterbegin', spanIcon); 22 | menuIcon.classList.add('hidden'); 23 | 24 | spanIcon.addEventListener('click', () => { 25 | const task = Task.tasks.find((t) => t.index === parseInt(taskIndex, 10)); 26 | 27 | if (task) { 28 | task.description = taskInput.value; 29 | } 30 | 31 | Task.storageManagement(Task.tasks); 32 | taskInput.setAttribute('readonly', 'readonly'); 33 | menuIcon.classList.remove('hidden'); 34 | spanIcon.classList.add('hidden'); 35 | }); 36 | } 37 | }; 38 | 39 | export default editTask; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "todo-list", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "webpack-dev-server --config webpack.config.js --open", 8 | "build": "webpack --config webpack.config.js", 9 | "test": "jest --config jest.config.js --coverage" 10 | 11 | }, 12 | "devDependencies": { 13 | "@babel/plugin-transform-modules-commonjs": "^7.22.5", 14 | "@babel/preset-env": "^7.22.5", 15 | "babel-eslint": "^10.1.0", 16 | "babel-jest": "^29.5.0", 17 | "css-loader": "^6.8.1", 18 | "eslint": "^7.32.0", 19 | "eslint-config-airbnb-base": "^14.2.1", 20 | "eslint-plugin-import": "^2.27.5", 21 | "file-loader": "^6.2.0", 22 | "hint": "^7.1.8", 23 | "html-loader": "^4.2.0", 24 | "html-webpack-plugin": "^5.5.1", 25 | "identity-obj-proxy": "^3.0.0", 26 | "jest": "^29.5.0", 27 | "jest-environment-jsdom": "^29.5.0", 28 | "jest-svg-transformer": "^1.0.0", 29 | "jest-transform-stub": "^2.0.0", 30 | "style-loader": "^3.3.3", 31 | "stylelint": "^13.13.1", 32 | "stylelint-config-standard": "^21.0.0", 33 | "stylelint-csstree-validator": "^1.9.0", 34 | "stylelint-scss": "^3.21.0", 35 | "webpack": "^5.85.1", 36 | "webpack-cli": "^5.1.3", 37 | "webpack-dev-server": "^4.15.0", 38 | "webpack-merge": "^5.9.0" 39 | }, 40 | "keywords": [], 41 | "author": "", 42 | "license": "ISC", 43 | "jest": { 44 | "testEnvironment": "jsdom" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/tests/editTask.test.js: -------------------------------------------------------------------------------- 1 | const localStorageMock = (() => { 2 | const store = {}; 3 | return { 4 | getItem: jest.fn((key) => store[key]), 5 | setItem: jest.fn((key, value) => { 6 | store[key] = value; 7 | }), 8 | editItem: jest.fn((key, updatedTask) => { 9 | const tasks = JSON.parse(store[key]); 10 | const index = tasks.findIndex((task) => task.index === updatedTask.index); 11 | tasks[index] = updatedTask; 12 | store[key] = JSON.stringify(tasks); 13 | }), 14 | }; 15 | })(); 16 | 17 | Object.defineProperty(global, 'localStorage', { 18 | value: localStorageMock, 19 | }); 20 | 21 | describe('editItem', () => { 22 | let tasks; 23 | 24 | beforeAll(() => { 25 | tasks = [ 26 | { description: 'task1', index: 1, completed: false }, 27 | { description: 'task2', index: 2, completed: false }, 28 | { description: 'task3', index: 3, completed: false }, 29 | ]; 30 | localStorageMock.setItem('taskList', JSON.stringify(tasks)); 31 | }); 32 | 33 | it('should update the task with the matching index', () => { 34 | const updatedTask = { description: 'updated task', index: 2, completed: true }; 35 | localStorageMock.editItem('taskList', updatedTask); 36 | 37 | const retrievedTasks = JSON.parse(localStorageMock.getItem('taskList')); 38 | expect(retrievedTasks).toEqual([ 39 | { description: 'task1', index: 1, completed: false }, 40 | { description: 'updated task', index: 2, completed: true }, 41 | { description: 'task3', index: 3, completed: false }, 42 | ]); 43 | }); 44 | }); -------------------------------------------------------------------------------- /src/style.css: -------------------------------------------------------------------------------- 1 | *, 2 | ::after, 3 | ::before { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | html { 10 | font-size: 65%; 11 | } 12 | 13 | body { 14 | font-size: 15px; 15 | background-color: #f5f5f5; 16 | color: #5c5959; 17 | } 18 | 19 | .hidden { 20 | display: none; 21 | } 22 | 23 | .todo-list-menu { 24 | width: 60rem; 25 | margin: 10rem auto; 26 | background-color: #fff; 27 | box-shadow: 0.5rem 0.5rem 2rem #040720; 28 | font-size: 2rem; 29 | list-style: none; 30 | } 31 | 32 | .list-header, 33 | .task-item { 34 | display: flex; 35 | justify-content: space-between; 36 | align-items: center; 37 | padding: 1rem; 38 | flex-wrap: wrap; 39 | color: #040720; 40 | } 41 | 42 | .task-text { 43 | border: none; 44 | padding: 0 0.5rem; 45 | font-size: 1.8rem; 46 | letter-spacing: 1px; 47 | color: #040720; 48 | outline: none; 49 | } 50 | 51 | .todo-list-menu li:not(:nth-last-of-type(2))::after { 52 | content: ""; 53 | flex-basis: 100%; 54 | border-bottom: 0.5px solid #d9d9d9; 55 | padding: 1rem 0; 56 | } 57 | 58 | .menu-icon, 59 | .refresh-icon, 60 | .save-icon { 61 | cursor: pointer; 62 | width: 3rem; 63 | height: 3rem; 64 | } 65 | 66 | .delete-icon { 67 | cursor: pointer; 68 | width: 3.5rem; 69 | } 70 | 71 | .taks-input { 72 | width: 100%; 73 | height: 5rem; 74 | padding: 1rem 1.5rem; 75 | font-size: 2rem; 76 | border: none; 77 | outline: none; 78 | margin-bottom: 2rem; 79 | } 80 | 81 | .clear-btn { 82 | text-align: center; 83 | cursor: pointer; 84 | padding: 2rem; 85 | margin-top: 1.5rem; 86 | background-color: #d9d9d9; 87 | } 88 | 89 | .done { 90 | text-decoration: line-through; 91 | } 92 | -------------------------------------------------------------------------------- /src/tests/deleteTask.test.js: -------------------------------------------------------------------------------- 1 | const localStorageMock = (() => { 2 | const store = {}; 3 | return { 4 | getItem: jest.fn((key) => JSON.stringify(store[key])), 5 | setItem: jest.fn((key, value) => { 6 | store[key] = JSON.parse(value); 7 | }), 8 | removeItem: jest.fn((key, index) => { 9 | if (store[key]) { 10 | store[key] = store[key] 11 | .filter((item) => item.index !== index) 12 | .map((task, index) => ({ ...task, index: index + 1 })); 13 | } 14 | }), 15 | }; 16 | })(); 17 | 18 | Object.defineProperty(global, 'localStorage', { 19 | value: localStorageMock, 20 | }); 21 | 22 | describe('removeItem', () => { 23 | beforeEach(() => { 24 | const items = [ 25 | { description: 'item1', index: 1, completed: false }, 26 | { description: 'item2', index: 2, completed: false }, 27 | { description: 'item3', index: 3, completed: false }, 28 | ]; 29 | localStorageMock.setItem('taskList', JSON.stringify(items)); 30 | }); 31 | 32 | it('should remove the item with the given index from the array stored under the given key', () => { 33 | localStorageMock.removeItem('taskList', 2); 34 | 35 | const retrievedItems = JSON.parse(localStorageMock.getItem('taskList') || '[]'); 36 | 37 | expect(retrievedItems).toEqual([ 38 | { description: 'item1', index: 1, completed: false }, 39 | { description: 'item3', index: 2, completed: false }, 40 | ]); 41 | }); 42 | 43 | it('should not modify the array if there is no item with the given index', () => { 44 | localStorageMock.removeItem('taskList', 4); 45 | 46 | const retrievedItems = JSON.parse(localStorageMock.getItem('taskList') || '[]'); 47 | expect(retrievedItems).toEqual([ 48 | { description: 'item1', index: 1, completed: false }, 49 | { description: 'item2', index: 2, completed: false }, 50 | { description: 'item3', index: 3, completed: false }, 51 | ]); 52 | }); 53 | }); -------------------------------------------------------------------------------- /src/tests/clearTask.test.js: -------------------------------------------------------------------------------- 1 | const localStorageMock = (() => { 2 | const store = {}; 3 | return { 4 | getItem: jest.fn((key) => store[key]), 5 | setItem: jest.fn((key, value) => { 6 | store[key] = value; 7 | }), 8 | removeItem: jest.fn((key) => { 9 | delete store[key]; 10 | }), 11 | clearCompletedTasks: jest.fn((key) => { 12 | const tasks = JSON.parse(store[key]); 13 | const updatedTasks = tasks.filter((task) => !task.completed); 14 | store[key] = JSON.stringify(updatedTasks); 15 | }), 16 | }; 17 | })(); 18 | 19 | Object.defineProperty(global, 'localStorage', { 20 | value: localStorageMock, 21 | }); 22 | 23 | describe('clearCompletedTasks', () => { 24 | beforeEach(() => { 25 | const tasks = [ 26 | { description: 'task1', index: 1, completed: true }, 27 | { description: 'task2', index: 2, completed: false }, 28 | { description: 'task3', index: 3, completed: true }, 29 | ]; 30 | localStorageMock.setItem('tasks', JSON.stringify(tasks)); 31 | }); 32 | it('should remove all completed tasks', () => { 33 | localStorageMock.clearCompletedTasks('tasks'); 34 | const retrievedTasks = JSON.parse(localStorageMock.getItem('tasks') || '[]'); 35 | const completedTasks = retrievedTasks.filter((task) => task.completed); 36 | expect(completedTasks).toEqual([]); 37 | expect(retrievedTasks).toEqual([{ description: 'task2', index: 2, completed: false }]); 38 | }); 39 | it('should not remove anything if there are no completed tasks', () => { 40 | const tasks = [ 41 | { description: 'task1', index: 1, completed: false }, 42 | { description: 'task2', index: 2, completed: false }, 43 | { description: 'task3', index: 3, completed: false }, 44 | ]; 45 | localStorageMock.setItem('tasks', JSON.stringify(tasks)); 46 | localStorageMock.clearCompletedTasks('tasks'); 47 | const retrievedTasks = JSON.parse(localStorageMock.getItem('tasks') || '[]'); 48 | expect(retrievedTasks).toEqual(tasks); 49 | }); 50 | }); -------------------------------------------------------------------------------- /src/img/save-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | save_item [#80808008080] Created with Sketch. 7 | -------------------------------------------------------------------------------- /.github/workflows/linters.yml: -------------------------------------------------------------------------------- 1 | name: Linters 2 | 3 | on: pull_request 4 | 5 | env: 6 | FORCE_COLOR: 1 7 | 8 | jobs: 9 | lighthouse: 10 | name: Lighthouse 11 | runs-on: ubuntu-22.04 12 | steps: 13 | - uses: actions/checkout@v3 14 | - uses: actions/setup-node@v3 15 | with: 16 | node-version: "18.x" 17 | - name: Setup Lighthouse 18 | run: npm install -g @lhci/cli@0.11.x 19 | - name: Lighthouse Report 20 | run: lhci autorun --upload.target=temporary-public-storage --collect.staticDistDir=. 21 | webhint: 22 | name: Webhint 23 | runs-on: ubuntu-22.04 24 | steps: 25 | - uses: actions/checkout@v3 26 | - uses: actions/setup-node@v3 27 | with: 28 | node-version: "18.x" 29 | - name: Setup Webhint 30 | run: | 31 | npm install --save-dev hint@7.x 32 | [ -f .hintrc ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.hintrc 33 | - name: Webhint Report 34 | run: npx hint . 35 | stylelint: 36 | name: Stylelint 37 | runs-on: ubuntu-22.04 38 | steps: 39 | - uses: actions/checkout@v3 40 | - uses: actions/setup-node@v3 41 | with: 42 | node-version: "18.x" 43 | - name: Setup Stylelint 44 | run: | 45 | npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x 46 | [ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.stylelintrc.json 47 | - name: Stylelint Report 48 | run: npx stylelint "**/*.{css,scss}" 49 | eslint: 50 | name: ESLint 51 | runs-on: ubuntu-22.04 52 | steps: 53 | - uses: actions/checkout@v3 54 | - uses: actions/setup-node@v3 55 | with: 56 | node-version: "18.x" 57 | - name: Setup ESLint 58 | run: | 59 | npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x 60 | [ -f .eslintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.eslintrc.json 61 | - name: ESLint Report 62 | run: npx eslint . 63 | nodechecker: 64 | name: node_modules checker 65 | runs-on: ubuntu-22.04 66 | steps: 67 | - uses: actions/checkout@v3 68 | - name: Check node_modules existence 69 | run: | 70 | if [ -d "node_modules/" ]; then echo -e "\e[1;31mThe node_modules/ folder was pushed to the repo. Please remove it from the GitHub repository and try again."; echo -e "\e[1;32mYou can set up a .gitignore file with this folder included on it to prevent this from happening in the future." && exit 1; fi -------------------------------------------------------------------------------- /src/img/icons8-trash.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |
    6 | 7 |

    Todo List

    8 | 9 |
    10 | 11 | 12 | 13 | # 📗 Table of Contents 14 | 15 | - [📖 About the Project](#about-project) 16 | - [🛠 Built With](#built-with) 17 | - [Tech Stack](#tech-stack) 18 | - [Key Features](#key-features) 19 | - [🚀 Live Demo](#live-demo) 20 | - [💻 Getting Started](#getting-started) 21 | - [Setup](#setup) 22 | - [Prerequisites](#prerequisites) 23 | - [Install](#install) 24 | - [Usage](#usage) 25 | - [Run tests](#run-tests) 26 | - [Deployment](#triangular_flag_on_post-deployment) 27 | - [👥 Authors](#authors) 28 | - [🔭 Future Features](#future-features) 29 | - [🤝 Contributing](#contributing) 30 | - [⭐️ Show your support](#support) 31 | - [🙏 Acknowledgements](#acknowledgements) 32 | - [📝 License](#license) 33 | 34 | 35 | 36 | # 📖 Todo List 37 | 38 | 39 | **Todo List** Todo List" is a web application that assists in organizing your daily tasks. With this app, you can easily list the things that you need to do and mark them as complete once they are done. The app is built using ES6 and Webpack, and it provides a simple and intuitive interface for managing your tasks. Use "Todo List" to streamline your day and increase your productivity. 40 | 41 | ## 🛠 Built With 42 | 43 | ### Tech Stack 44 | 45 | 46 |
    47 | Client 48 | 54 |
    55 | 56 | 57 | 58 | ### Key Features 59 | 60 | 61 | - A good HTML and CSS Design. 62 | - Using Webpack 63 | - Check Linters 64 | - Good RADME 65 | 66 |

    (back to top)

    67 | 68 | ## 🚀 Live Demo 69 | 70 | 71 | - Here is the [live-demo](https://ahmedeid6842.github.io/ToDo-List/) 72 | 73 |

    (back to top)

    74 | 75 | 76 | 77 | ## 💻 Getting Started 78 | 79 | To get a local copy up and running, follow these steps. 80 | 81 | ### Prerequisites 82 | 83 | In order to run this project you need: 84 | 85 | - Create a repo on your repositores files. 86 | - Clone or make a copy of this repo on your local machine. 87 | - Follow GitHub flow. 88 | - A carefully reading of this README.md is required. 89 | 90 | 91 | ### Setup 92 | 93 | Clone this repository to your desired folder: 94 | 95 | ```bash 96 | cd my-folder 97 | git clone https://github.com/ahmedeid6842/ToDo-List.git 98 | ``` 99 | 100 | ### Install 101 | 102 | Install this project with: 103 | 104 | ```bash 105 | npm install 106 | ``` 107 | 108 | ### Usage 109 | 110 | To run the project: 111 | ```bash 112 | npm start 113 | ``` 114 | 115 | To build the project: 116 | ```bash 117 | npm run build 118 | ``` 119 | 120 | ### Run tests 121 | 122 | To run tests, execute the following command: 123 | 124 | ```bash 125 | npx hint . 126 | ``` 127 | 128 |

    (back to top)

    129 | 130 | 131 | 132 | ## 👥 Authors 133 | 134 | 👤 **Ahmed Eid** 135 | 136 | - GitHub: [@ahmedeid6842](https://github.com/ahmedeid6842) 137 | - Twitter: [ahmedeid2684](https://twitter.com/ahmedeid2684 138 | ) 139 | - LinkedIn: [Ahmed Eid](https://www.linkedin.com/in/ahmed-eid-0018571b1/) 140 | 141 |

    (back to top)

    142 | 143 | 144 | 145 | ## 🔭 Future Features 146 | 147 | 148 | - [ ] Apply the Addition and removal functionality 149 | - [ ] Make the project more interactive 150 | 151 |

    (back to top)

    152 | 153 | 154 | 155 | ## 🤝 Contributing 156 | 157 | Contributions, issues, and feature requests are welcome! 158 | 159 | Feel free to check the [issues page](../../issues/). 160 | 161 |

    (back to top)

    162 | 163 | 164 | 165 | ## ⭐️ Show your support 166 | 167 | 168 | If you like this project feel free to leave a start, all contributions are welcome!. 169 | 170 |

    (back to top)

    171 | 172 | 173 | 174 | ## 🙏 Acknowledgments 175 | 176 | We would like to thank Microverse comunity, they do an excellent job. 177 | 178 |

    (back to top)

    179 | 180 | ## 📝 License 181 | 182 | This project is [MIT](./MIT.md) licensed. 183 | 184 | _NOTE: we recommend using the [MIT license] 185 | 186 |

    (back to top)

    187 | -------------------------------------------------------------------------------- /dist/main.js: -------------------------------------------------------------------------------- 1 | /* 2 | * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development"). 3 | * This devtool is neither made for production nor for readable output files. 4 | * It uses "eval()" calls to create a separate source file in the browser devtools. 5 | * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/) 6 | * or disable the default devtool with "devtool: false". 7 | * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/). 8 | */ 9 | /******/ (() => { // webpackBootstrap 10 | /******/ "use strict"; 11 | /******/ var __webpack_modules__ = ({ 12 | 13 | /***/ "./node_modules/css-loader/dist/cjs.js!./src/style.css": 14 | /*!*************************************************************!*\ 15 | !*** ./node_modules/css-loader/dist/cjs.js!./src/style.css ***! 16 | \*************************************************************/ 17 | /***/ ((module, __webpack_exports__, __webpack_require__) => { 18 | 19 | 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, `*,\n::after,\n::before {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nhtml {\n font-size: 65%;\n}\n\nbody {\n font-size: 15px;\n background-color: #F5F5F5;\n color: #5c5959;\n}\n\n.todo-list-menu {\n width: 60rem;\n margin: 10rem auto;\n background-color: #fff;\n box-shadow: 0.5rem 0.5rem 2rem #040720;\n font-size: 2rem;\n list-style: none;\n}\n\n.list-header,\n.task-item {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1rem;\n flex-wrap: wrap;\n}\n\n.todo-list-menu li:not(:nth-last-of-type(2))::after {\n content: \"\";\n flex-basis: 100%;\n border-bottom: 0.5px solid #d9d9d9;\n padding: 1rem 0;\n}\n\n.menu-icon,\n.refresh-icon {\n cursor: pointer;\n width: 3rem;\n height: 3rem;\n}\n\n.taks-input {\n width: 100%;\n height: 5rem;\n padding: 1rem 1.5rem;\n font-size: 2rem;\n border: none;\n outline: none;\n margin-bottom: 2rem;\n}\n\n\n.clear-btn {\n text-align: center;\n cursor: pointer;\n padding: 2rem;\n margin-top: 1.5rem;\n background-color: #d9d9d9;\n}`, \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://todo-list/./src/style.css?./node_modules/css-loader/dist/cjs.js"); 20 | 21 | /***/ }), 22 | 23 | /***/ "./node_modules/css-loader/dist/runtime/api.js": 24 | /*!*****************************************************!*\ 25 | !*** ./node_modules/css-loader/dist/runtime/api.js ***! 26 | \*****************************************************/ 27 | /***/ ((module) => { 28 | 29 | eval("\n\n/*\n MIT License http://www.opensource.org/licenses/mit-license.php\n Author Tobias Koppers @sokra\n*/\nmodule.exports = function (cssWithMappingToString) {\n var list = [];\n\n // return the list of modules as css string\n list.toString = function toString() {\n return this.map(function (item) {\n var content = \"\";\n var needLayer = typeof item[5] !== \"undefined\";\n if (item[4]) {\n content += \"@supports (\".concat(item[4], \") {\");\n }\n if (item[2]) {\n content += \"@media \".concat(item[2], \" {\");\n }\n if (needLayer) {\n content += \"@layer\".concat(item[5].length > 0 ? \" \".concat(item[5]) : \"\", \" {\");\n }\n content += cssWithMappingToString(item);\n if (needLayer) {\n content += \"}\";\n }\n if (item[2]) {\n content += \"}\";\n }\n if (item[4]) {\n content += \"}\";\n }\n return content;\n }).join(\"\");\n };\n\n // import a list of modules into the list\n list.i = function i(modules, media, dedupe, supports, layer) {\n if (typeof modules === \"string\") {\n modules = [[null, modules, undefined]];\n }\n var alreadyImportedModules = {};\n if (dedupe) {\n for (var k = 0; k < this.length; k++) {\n var id = this[k][0];\n if (id != null) {\n alreadyImportedModules[id] = true;\n }\n }\n }\n for (var _k = 0; _k < modules.length; _k++) {\n var item = [].concat(modules[_k]);\n if (dedupe && alreadyImportedModules[item[0]]) {\n continue;\n }\n if (typeof layer !== \"undefined\") {\n if (typeof item[5] === \"undefined\") {\n item[5] = layer;\n } else {\n item[1] = \"@layer\".concat(item[5].length > 0 ? \" \".concat(item[5]) : \"\", \" {\").concat(item[1], \"}\");\n item[5] = layer;\n }\n }\n if (media) {\n if (!item[2]) {\n item[2] = media;\n } else {\n item[1] = \"@media \".concat(item[2], \" {\").concat(item[1], \"}\");\n item[2] = media;\n }\n }\n if (supports) {\n if (!item[4]) {\n item[4] = \"\".concat(supports);\n } else {\n item[1] = \"@supports (\".concat(item[4], \") {\").concat(item[1], \"}\");\n item[4] = supports;\n }\n }\n list.push(item);\n }\n };\n return list;\n};\n\n//# sourceURL=webpack://todo-list/./node_modules/css-loader/dist/runtime/api.js?"); 30 | 31 | /***/ }), 32 | 33 | /***/ "./node_modules/css-loader/dist/runtime/noSourceMaps.js": 34 | /*!**************************************************************!*\ 35 | !*** ./node_modules/css-loader/dist/runtime/noSourceMaps.js ***! 36 | \**************************************************************/ 37 | /***/ ((module) => { 38 | 39 | eval("\n\nmodule.exports = function (i) {\n return i[1];\n};\n\n//# sourceURL=webpack://todo-list/./node_modules/css-loader/dist/runtime/noSourceMaps.js?"); 40 | 41 | /***/ }), 42 | 43 | /***/ "./src/style.css": 44 | /*!***********************!*\ 45 | !*** ./src/style.css ***! 46 | \***********************/ 47 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 48 | 49 | 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_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js */ \"./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/styleDomAPI.js */ \"./node_modules/style-loader/dist/runtime/styleDomAPI.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/insertBySelector.js */ \"./node_modules/style-loader/dist/runtime/insertBySelector.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js */ \"./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/insertStyleElement.js */ \"./node_modules/style-loader/dist/runtime/insertStyleElement.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! !../node_modules/style-loader/dist/runtime/styleTagTransform.js */ \"./node_modules/style-loader/dist/runtime/styleTagTransform.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__);\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_style_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! !!../node_modules/css-loader/dist/cjs.js!./style.css */ \"./node_modules/css-loader/dist/cjs.js!./src/style.css\");\n\n \n \n \n \n \n \n \n \n \n\nvar options = {};\n\noptions.styleTagTransform = (_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default());\noptions.setAttributes = (_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default());\n\n options.insert = _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default().bind(null, \"head\");\n \noptions.domAPI = (_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default());\noptions.insertStyleElement = (_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default());\n\nvar update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default()(_node_modules_css_loader_dist_cjs_js_style_css__WEBPACK_IMPORTED_MODULE_6__[\"default\"], options);\n\n\n\n\n /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_css_loader_dist_cjs_js_style_css__WEBPACK_IMPORTED_MODULE_6__[\"default\"] && _node_modules_css_loader_dist_cjs_js_style_css__WEBPACK_IMPORTED_MODULE_6__[\"default\"].locals ? _node_modules_css_loader_dist_cjs_js_style_css__WEBPACK_IMPORTED_MODULE_6__[\"default\"].locals : undefined);\n\n\n//# sourceURL=webpack://todo-list/./src/style.css?"); 50 | 51 | /***/ }), 52 | 53 | /***/ "./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js": 54 | /*!****************************************************************************!*\ 55 | !*** ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js ***! 56 | \****************************************************************************/ 57 | /***/ ((module) => { 58 | 59 | eval("\n\nvar stylesInDOM = [];\nfunction getIndexByIdentifier(identifier) {\n var result = -1;\n for (var i = 0; i < stylesInDOM.length; i++) {\n if (stylesInDOM[i].identifier === identifier) {\n result = i;\n break;\n }\n }\n return result;\n}\nfunction modulesToDom(list, options) {\n var idCountMap = {};\n var identifiers = [];\n for (var i = 0; i < list.length; i++) {\n var item = list[i];\n var id = options.base ? item[0] + options.base : item[0];\n var count = idCountMap[id] || 0;\n var identifier = \"\".concat(id, \" \").concat(count);\n idCountMap[id] = count + 1;\n var indexByIdentifier = getIndexByIdentifier(identifier);\n var obj = {\n css: item[1],\n media: item[2],\n sourceMap: item[3],\n supports: item[4],\n layer: item[5]\n };\n if (indexByIdentifier !== -1) {\n stylesInDOM[indexByIdentifier].references++;\n stylesInDOM[indexByIdentifier].updater(obj);\n } else {\n var updater = addElementStyle(obj, options);\n options.byIndex = i;\n stylesInDOM.splice(i, 0, {\n identifier: identifier,\n updater: updater,\n references: 1\n });\n }\n identifiers.push(identifier);\n }\n return identifiers;\n}\nfunction addElementStyle(obj, options) {\n var api = options.domAPI(options);\n api.update(obj);\n var updater = function updater(newObj) {\n if (newObj) {\n if (newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap && newObj.supports === obj.supports && newObj.layer === obj.layer) {\n return;\n }\n api.update(obj = newObj);\n } else {\n api.remove();\n }\n };\n return updater;\n}\nmodule.exports = function (list, options) {\n options = options || {};\n list = list || [];\n var lastIdentifiers = modulesToDom(list, options);\n return function update(newList) {\n newList = newList || [];\n for (var i = 0; i < lastIdentifiers.length; i++) {\n var identifier = lastIdentifiers[i];\n var index = getIndexByIdentifier(identifier);\n stylesInDOM[index].references--;\n }\n var newLastIdentifiers = modulesToDom(newList, options);\n for (var _i = 0; _i < lastIdentifiers.length; _i++) {\n var _identifier = lastIdentifiers[_i];\n var _index = getIndexByIdentifier(_identifier);\n if (stylesInDOM[_index].references === 0) {\n stylesInDOM[_index].updater();\n stylesInDOM.splice(_index, 1);\n }\n }\n lastIdentifiers = newLastIdentifiers;\n };\n};\n\n//# sourceURL=webpack://todo-list/./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js?"); 60 | 61 | /***/ }), 62 | 63 | /***/ "./node_modules/style-loader/dist/runtime/insertBySelector.js": 64 | /*!********************************************************************!*\ 65 | !*** ./node_modules/style-loader/dist/runtime/insertBySelector.js ***! 66 | \********************************************************************/ 67 | /***/ ((module) => { 68 | 69 | eval("\n\nvar memo = {};\n\n/* istanbul ignore next */\nfunction getTarget(target) {\n if (typeof memo[target] === \"undefined\") {\n var styleTarget = document.querySelector(target);\n\n // Special case to return head of iframe instead of iframe itself\n if (window.HTMLIFrameElement && styleTarget instanceof window.HTMLIFrameElement) {\n try {\n // This will throw an exception if access to iframe is blocked\n // due to cross-origin restrictions\n styleTarget = styleTarget.contentDocument.head;\n } catch (e) {\n // istanbul ignore next\n styleTarget = null;\n }\n }\n memo[target] = styleTarget;\n }\n return memo[target];\n}\n\n/* istanbul ignore next */\nfunction insertBySelector(insert, style) {\n var target = getTarget(insert);\n if (!target) {\n throw new Error(\"Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.\");\n }\n target.appendChild(style);\n}\nmodule.exports = insertBySelector;\n\n//# sourceURL=webpack://todo-list/./node_modules/style-loader/dist/runtime/insertBySelector.js?"); 70 | 71 | /***/ }), 72 | 73 | /***/ "./node_modules/style-loader/dist/runtime/insertStyleElement.js": 74 | /*!**********************************************************************!*\ 75 | !*** ./node_modules/style-loader/dist/runtime/insertStyleElement.js ***! 76 | \**********************************************************************/ 77 | /***/ ((module) => { 78 | 79 | eval("\n\n/* istanbul ignore next */\nfunction insertStyleElement(options) {\n var element = document.createElement(\"style\");\n options.setAttributes(element, options.attributes);\n options.insert(element, options.options);\n return element;\n}\nmodule.exports = insertStyleElement;\n\n//# sourceURL=webpack://todo-list/./node_modules/style-loader/dist/runtime/insertStyleElement.js?"); 80 | 81 | /***/ }), 82 | 83 | /***/ "./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js": 84 | /*!**********************************************************************************!*\ 85 | !*** ./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js ***! 86 | \**********************************************************************************/ 87 | /***/ ((module, __unused_webpack_exports, __webpack_require__) => { 88 | 89 | eval("\n\n/* istanbul ignore next */\nfunction setAttributesWithoutAttributes(styleElement) {\n var nonce = true ? __webpack_require__.nc : 0;\n if (nonce) {\n styleElement.setAttribute(\"nonce\", nonce);\n }\n}\nmodule.exports = setAttributesWithoutAttributes;\n\n//# sourceURL=webpack://todo-list/./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js?"); 90 | 91 | /***/ }), 92 | 93 | /***/ "./node_modules/style-loader/dist/runtime/styleDomAPI.js": 94 | /*!***************************************************************!*\ 95 | !*** ./node_modules/style-loader/dist/runtime/styleDomAPI.js ***! 96 | \***************************************************************/ 97 | /***/ ((module) => { 98 | 99 | eval("\n\n/* istanbul ignore next */\nfunction apply(styleElement, options, obj) {\n var css = \"\";\n if (obj.supports) {\n css += \"@supports (\".concat(obj.supports, \") {\");\n }\n if (obj.media) {\n css += \"@media \".concat(obj.media, \" {\");\n }\n var needLayer = typeof obj.layer !== \"undefined\";\n if (needLayer) {\n css += \"@layer\".concat(obj.layer.length > 0 ? \" \".concat(obj.layer) : \"\", \" {\");\n }\n css += obj.css;\n if (needLayer) {\n css += \"}\";\n }\n if (obj.media) {\n css += \"}\";\n }\n if (obj.supports) {\n css += \"}\";\n }\n var sourceMap = obj.sourceMap;\n if (sourceMap && typeof btoa !== \"undefined\") {\n css += \"\\n/*# sourceMappingURL=data:application/json;base64,\".concat(btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))), \" */\");\n }\n\n // For old IE\n /* istanbul ignore if */\n options.styleTagTransform(css, styleElement, options.options);\n}\nfunction removeStyleElement(styleElement) {\n // istanbul ignore if\n if (styleElement.parentNode === null) {\n return false;\n }\n styleElement.parentNode.removeChild(styleElement);\n}\n\n/* istanbul ignore next */\nfunction domAPI(options) {\n if (typeof document === \"undefined\") {\n return {\n update: function update() {},\n remove: function remove() {}\n };\n }\n var styleElement = options.insertStyleElement(options);\n return {\n update: function update(obj) {\n apply(styleElement, options, obj);\n },\n remove: function remove() {\n removeStyleElement(styleElement);\n }\n };\n}\nmodule.exports = domAPI;\n\n//# sourceURL=webpack://todo-list/./node_modules/style-loader/dist/runtime/styleDomAPI.js?"); 100 | 101 | /***/ }), 102 | 103 | /***/ "./node_modules/style-loader/dist/runtime/styleTagTransform.js": 104 | /*!*********************************************************************!*\ 105 | !*** ./node_modules/style-loader/dist/runtime/styleTagTransform.js ***! 106 | \*********************************************************************/ 107 | /***/ ((module) => { 108 | 109 | eval("\n\n/* istanbul ignore next */\nfunction styleTagTransform(css, styleElement) {\n if (styleElement.styleSheet) {\n styleElement.styleSheet.cssText = css;\n } else {\n while (styleElement.firstChild) {\n styleElement.removeChild(styleElement.firstChild);\n }\n styleElement.appendChild(document.createTextNode(css));\n }\n}\nmodule.exports = styleTagTransform;\n\n//# sourceURL=webpack://todo-list/./node_modules/style-loader/dist/runtime/styleTagTransform.js?"); 110 | 111 | /***/ }), 112 | 113 | /***/ "./src/index.js": 114 | /*!**********************!*\ 115 | !*** ./src/index.js ***! 116 | \**********************/ 117 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 118 | 119 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _style_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./style.css */ \"./src/style.css\");\n/* harmony import */ var _modules_taskDisplay_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./modules/taskDisplay.js */ \"./src/modules/taskDisplay.js\");\n\n\n\n(0,_modules_taskDisplay_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"])();\n\n//# sourceURL=webpack://todo-list/./src/index.js?"); 120 | 121 | /***/ }), 122 | 123 | /***/ "./src/modules/taskDisplay.js": 124 | /*!************************************!*\ 125 | !*** ./src/modules/taskDisplay.js ***! 126 | \************************************/ 127 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 128 | 129 | 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 _taskObjects_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./taskObjects.js */ \"./src/modules/taskObjects.js\");\n/* harmony import */ var _img_menu_icon_svg__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../img/menu-icon.svg */ \"./src/img/menu-icon.svg\");\n\n\n\nconst inputs = document.querySelector('.task-input-item');\n\nconst tasksDisplay = () => {\n _taskObjects_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"].sort((a, b) => a.index - b.index).reverse().forEach((task) => {\n const html = `\n
  • \n
    \n ${task.description}\n
    \n \"option-icon\"\n
    • \n `;\n inputs.insertAdjacentHTML('afterend', html);\n });\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (tasksDisplay);\n\n//# sourceURL=webpack://todo-list/./src/modules/taskDisplay.js?"); 130 | 131 | /***/ }), 132 | 133 | /***/ "./src/modules/taskObjects.js": 134 | /*!************************************!*\ 135 | !*** ./src/modules/taskObjects.js ***! 136 | \************************************/ 137 | /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 138 | 139 | eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nconst tasks = [\n {\n description: 'Study JavaScript',\n completed: false,\n index: 1,\n },\n {\n description: 'Study Arabic',\n completed: false,\n index: 2,\n },\n {\n description: 'Study English',\n completed: false,\n index: 3,\n },\n {\n description: 'Study Math',\n completed: false,\n index: 4,\n },\n];\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (tasks);\n\n\n//# sourceURL=webpack://todo-list/./src/modules/taskObjects.js?"); 140 | 141 | /***/ }), 142 | 143 | /***/ "./src/img/menu-icon.svg": 144 | /*!*******************************!*\ 145 | !*** ./src/img/menu-icon.svg ***! 146 | \*******************************/ 147 | /***/ ((module, __unused_webpack_exports, __webpack_require__) => { 148 | 149 | eval("module.exports = __webpack_require__.p + \"19c84313d62edb23795c.svg\";\n\n//# sourceURL=webpack://todo-list/./src/img/menu-icon.svg?"); 150 | 151 | /***/ }) 152 | 153 | /******/ }); 154 | /************************************************************************/ 155 | /******/ // The module cache 156 | /******/ var __webpack_module_cache__ = {}; 157 | /******/ 158 | /******/ // The require function 159 | /******/ function __webpack_require__(moduleId) { 160 | /******/ // Check if module is in cache 161 | /******/ var cachedModule = __webpack_module_cache__[moduleId]; 162 | /******/ if (cachedModule !== undefined) { 163 | /******/ return cachedModule.exports; 164 | /******/ } 165 | /******/ // Create a new module (and put it into the cache) 166 | /******/ var module = __webpack_module_cache__[moduleId] = { 167 | /******/ id: moduleId, 168 | /******/ // no module.loaded needed 169 | /******/ exports: {} 170 | /******/ }; 171 | /******/ 172 | /******/ // Execute the module function 173 | /******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__); 174 | /******/ 175 | /******/ // Return the exports of the module 176 | /******/ return module.exports; 177 | /******/ } 178 | /******/ 179 | /************************************************************************/ 180 | /******/ /* webpack/runtime/compat get default export */ 181 | /******/ (() => { 182 | /******/ // getDefaultExport function for compatibility with non-harmony modules 183 | /******/ __webpack_require__.n = (module) => { 184 | /******/ var getter = module && module.__esModule ? 185 | /******/ () => (module['default']) : 186 | /******/ () => (module); 187 | /******/ __webpack_require__.d(getter, { a: getter }); 188 | /******/ return getter; 189 | /******/ }; 190 | /******/ })(); 191 | /******/ 192 | /******/ /* webpack/runtime/define property getters */ 193 | /******/ (() => { 194 | /******/ // define getter functions for harmony exports 195 | /******/ __webpack_require__.d = (exports, definition) => { 196 | /******/ for(var key in definition) { 197 | /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) { 198 | /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] }); 199 | /******/ } 200 | /******/ } 201 | /******/ }; 202 | /******/ })(); 203 | /******/ 204 | /******/ /* webpack/runtime/global */ 205 | /******/ (() => { 206 | /******/ __webpack_require__.g = (function() { 207 | /******/ if (typeof globalThis === 'object') return globalThis; 208 | /******/ try { 209 | /******/ return this || new Function('return this')(); 210 | /******/ } catch (e) { 211 | /******/ if (typeof window === 'object') return window; 212 | /******/ } 213 | /******/ })(); 214 | /******/ })(); 215 | /******/ 216 | /******/ /* webpack/runtime/hasOwnProperty shorthand */ 217 | /******/ (() => { 218 | /******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop)) 219 | /******/ })(); 220 | /******/ 221 | /******/ /* webpack/runtime/make namespace object */ 222 | /******/ (() => { 223 | /******/ // define __esModule on exports 224 | /******/ __webpack_require__.r = (exports) => { 225 | /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { 226 | /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); 227 | /******/ } 228 | /******/ Object.defineProperty(exports, '__esModule', { value: true }); 229 | /******/ }; 230 | /******/ })(); 231 | /******/ 232 | /******/ /* webpack/runtime/publicPath */ 233 | /******/ (() => { 234 | /******/ var scriptUrl; 235 | /******/ if (__webpack_require__.g.importScripts) scriptUrl = __webpack_require__.g.location + ""; 236 | /******/ var document = __webpack_require__.g.document; 237 | /******/ if (!scriptUrl && document) { 238 | /******/ if (document.currentScript) 239 | /******/ scriptUrl = document.currentScript.src; 240 | /******/ if (!scriptUrl) { 241 | /******/ var scripts = document.getElementsByTagName("script"); 242 | /******/ if(scripts.length) { 243 | /******/ var i = scripts.length - 1; 244 | /******/ while (i > -1 && !scriptUrl) scriptUrl = scripts[i--].src; 245 | /******/ } 246 | /******/ } 247 | /******/ } 248 | /******/ // When supporting browsers where an automatic publicPath is not supported you must specify an output.publicPath manually via configuration 249 | /******/ // or pass an empty string ("") and set the __webpack_public_path__ variable from your code to use your own logic. 250 | /******/ if (!scriptUrl) throw new Error("Automatic publicPath is not supported in this browser"); 251 | /******/ scriptUrl = scriptUrl.replace(/#.*$/, "").replace(/\?.*$/, "").replace(/\/[^\/]+$/, "/"); 252 | /******/ __webpack_require__.p = scriptUrl; 253 | /******/ })(); 254 | /******/ 255 | /******/ /* webpack/runtime/nonce */ 256 | /******/ (() => { 257 | /******/ __webpack_require__.nc = undefined; 258 | /******/ })(); 259 | /******/ 260 | /************************************************************************/ 261 | /******/ 262 | /******/ // startup 263 | /******/ // Load entry module and return exports 264 | /******/ // This entry module can't be inlined because the eval devtool is used. 265 | /******/ var __webpack_exports__ = __webpack_require__("./src/index.js"); 266 | /******/ 267 | /******/ })() 268 | ; --------------------------------------------------------------------------------