Merge pull request #1 from Dagic-zewdu/todo-list

Todo list
Dagic-zewdu · Feb 16, 2022 · 1f54d8a · 1f54d8a
2 parents e44ecc5 + f155a69
commit 1f54d8a
Show file tree

Hide file tree

Showing 23 changed files with 597 additions and 2 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,26 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "jest": true
+  },
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaVersion": 2018,
+    "sourceType": "module"
+  },
+  "extends": ["airbnb-base"],
+  "rules": {
+    "no-shadow": "off",
+    "no-param-reassign": "off",
+    "eol-last": "off"
+  },
+  "ignorePatterns": [
+    "dist/",
+    "build/",
+    "docs/",
+    "webpack.common.js",
+    "webpack.dev.js",
+    "webpack.prod.js"
+  ]
+}
diff --git a/.github/workflows/linters.yml b/.github/workflows/linters.yml
@@ -0,0 +1,36 @@
+name: Linters
+
+on: pull_request
+
+env:
+  FORCE_COLOR: 1
+
+jobs:
+  eslint:
+    name: ESLint
+    runs-on: ubuntu-18.04
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: "12.x"
+      - name: Setup ESLint
+        run: |
+          npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x
+          [ -f .eslintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/javascript/.eslintrc.json
+      - name: ESLint Report
+        run: npx eslint .
+  stylelint:
+    name: Stylelint
+    runs-on: ubuntu-18.04
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: "12.x"
+      - name: Setup Stylelint
+        run: |
+          npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x
+          [ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/javascript/.stylelintrc.json
+      - name: Stylelint Report
+        run: npx stylelint "**/*.{css,scss}"
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+node_modules/
+.vscode/
+package-lock.json
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -0,0 +1,21 @@
+{
+  "extends": [
+    "stylelint-config-standard"
+  ],
+  "plugins": [
+    "stylelint-scss",
+    "stylelint-csstree-validator"
+  ],
+  "rules": {
+    "at-rule-no-unknown": null,
+    "scss/at-rule-no-unknown": true,
+    "csstree/validator": true
+  },
+  "ignoreFiles": [
+    "build/**",
+    "dist/**",
+    "**/reset*.css",
+    "**/bootstrap*.css",
+    "docs/**"
+  ]
+}
diff --git a/README.md b/README.md
@@ -1,2 +1,59 @@
-# js-lintor-template
-This template is set up for js template
+
+# Todo-list-webpack-config
+
+> Sample Design of a todo List.
+
+## Screensot
+
+![screenshot](./Screen-Shot.png)
+
+## Built With
+
+-webpack
+## Getting Started
+
+This project is configure with webpack.
+## Available Scripts
+
+In the project directory, you can run:
+### `npm install`
+
+Installs basic  dependency for the project.
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:8080](http://localhost:8080) to view it in the browser.
+
+The page will reload if you make edits.\
+You will also see any lint errors in the console.
+
+### `npm run build`
+
+Builds the app for production to the `dist` folder.\
+It correctly bundles the app in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+## Live Demo
+
+Check the [Live Demo](https://dagic-zewdu.github.io/Todo-list) deployed on github pages.
+## Authors
+
+👤 **Dagic Zewdu**
+
+- GitHub: [@Dagic-zewdu ](https://github.com/Dagic-zewdu)
+
+## 🤝 Contributing
+
+Contributions, issues, and feature requests are welcome!
+
+Feel free to check the [issues page](../../issues/).
+
+## Show your support
+
+Give a ⭐️ if you like this project!
+
+## 📝 License
+
+This project is [MIT](./LICENSE) licensed.
diff --git a/Screen Shot 2022-02-16 at 2.46.54 AM.png b/Screen Shot 2022-02-16 at 2.46.54 AM.png
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Document</title><link href="main.%5BcontentHash%5D.css" rel="stylesheet"></head><body><section id="main"><div class="card"><div class="card-header"><p class="title">Add todo list</p><img src="https://icon-library.com/images/reset-icon-png/reset-icon-png-2.jpg" alt="" class="icon"></div><div class="card-body"><form id="add-form" action="#"><input required class="input" placeholder="Add todo item"></form><ul class="todo-list"></ul></div><button id="clear-completed d" class="card-footer">Clear completed</button></div></section><script defer="defer" src="main.%5BcontentHash%5D.bundle.js"></script></body></html>
diff --git a/docs/main.[contentHash].bundle.js b/docs/main.[contentHash].bundle.js
diff --git a/docs/main.[contentHash].css b/docs/main.[contentHash].css
@@ -0,0 +1,79 @@
+@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500&family=Ubuntu+Mono:ital@1&display=swap);
+body {
+  font-family: 'Poppins', sans-serif;
+  font-family: 'Ubuntu Mono', monospace;
+}
+
+#main {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+.card {
+  width: 50%;
+  border: 1px solid #eee;
+  box-shadow: 5px 5px 5px 5px #888;
+  padding: 10px;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #eee;
+  padding: 10px;
+}
+
+.input {
+  margin-top: 10px;
+  width: 96%;
+  padding: 10px;
+}
+
+.icon {
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+}
+
+.icon:hover {
+  box-shadow: 5px 5px 5px 5px #888;
+}
+
+.todo-list {
+  list-style: none;
+  width: 90%;
+}
+
+.list-item {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 0.5px solid #eee;
+}
+
+.description-container {
+  display: flex;
+  align-items: center;
+}
+
+.three-dots {
+  display: flex;
+  align-items: center;
+}
+
+.options {
+  height: 30px;
+  width: 30px;
+}
+
+.card-footer {
+  text-align: center;
+  width: 100%;
+  background-color: #eee;
+  padding: 10px;
+  border: none;
+  cursor: pointer;
+}
+
diff --git a/package.json b/package.json
@@ -0,0 +1,47 @@
+{
+  "name": "js-lintor-template",
+  "version": "1.0.0",
+  "description": "If you are not familiar with linters and GitHub Actions, read [root level README](../README.md).",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack-dev-server --config webpack.dev.js --open",
+    "build": "webpack --config webpack.prod.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Dagic-zewdu/js-lintor-template.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/Dagic-zewdu/js-lintor-template/issues"
+  },
+  "homepage": "https://github.com/Dagic-zewdu/js-lintor-template#readme",
+  "devDependencies": {
+    "babel-eslint": "^10.1.0",
+    "css-loader": "^6.6.0",
+    "eslint": "^7.32.0",
+    "eslint-config-airbnb-base": "^14.2.1",
+    "eslint-plugin-import": "^2.25.4",
+    "file-loader": "^6.2.0",
+    "html-loader": "^3.1.0",
+    "node-sass": "^7.0.1",
+    "sass-loader": "^12.5.0",
+    "source-map-loader": "^3.0.1",
+    "style-loader": "^3.3.1",
+    "stylelint": "^13.13.1",
+    "stylelint-config-standard": "^21.0.0",
+    "stylelint-csstree-validator": "^1.9.0",
+    "stylelint-scss": "^3.21.0",
+    "webpack": "^5.68.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.7.4"
+  },
+  "dependencies": {
+    "clean-webpack-plugin": "^4.0.0",
+    "html-webpack-plugin": "^5.5.0",
+    "mini-css-extract-plugin": "^2.5.3",
+    "webpack-merge": "^5.8.0"
+  }
+}
diff --git a/src/app.js b/src/app.js
@@ -0,0 +1,36 @@
+import { AddtoList, setCompleted } from './js/controller/action';
+import RenderList from './js/controller/render-list';
+import { addCompleteEventListener, addRemoveCompletedListener, addResetEventListener } from './js/controller/event';
+import { form, Input } from './js/dom/selector';
+import TodoList from './js/file/todo';
+import './styles/style.css';
+
+let checkboxs;
+let Todos = TodoList;
+const reset = () => { Todos = []; RenderList(Todos); };
+const removeCompleted = () => {
+  Todos = removeCompleted(Todos);
+  RenderList(Todos);
+};
+const setCompletedTodos = (id, value) => {
+  Todos = setCompleted(id, value, Todos);
+  RenderList(Todos);
+};
+const handleSubmit = (e) => {
+  e.preventDefault();
+  const todos = AddtoList(Input.value, Todos);
+  Todos = todos;
+  RenderList(todos);
+  window.addEventListener('DOMContentLoaded', () => {
+    checkboxs = document.querySelectorAll('input.checkbox');
+    addCompleteEventListener(checkboxs, setCompletedTodos);
+  });
+};
+RenderList(Todos);
+addResetEventListener(reset);
+addRemoveCompletedListener(removeCompleted);
+window.addEventListener('DOMContentLoaded', () => {
+  checkboxs = document.querySelectorAll('input.checkbox');
+  addCompleteEventListener(checkboxs, setCompletedTodos);
+});
+form.addEventListener('submit', handleSubmit);
diff --git a/src/asset/3VerticalDots.svg b/src/asset/3VerticalDots.svg
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+
+<body>
+    <section id="main">
+        <div class="card">
+            <div class="card-header">
+                <p class="title">Add todo list</p>
+                <img src="https://icon-library.com/images/reset-icon-png/reset-icon-png-2.jpg" alt="" class="icon">
+            </div>
+            <div class="card-body">
+                <form id="add-form" action="#">
+                    <input type="text" required class="input" placeholder="Add todo item">
+                </form>
+                <ul class="todo-list">
+
+                </ul>
+            </div>
+            <button id="clear-completed d" class="card-footer">
+                Clear completed
+            </button>
+        </div>
+    </section>
+</body>
+
+</html>
diff --git a/src/js/controller/action.js b/src/js/controller/action.js
@@ -0,0 +1,16 @@
+export const ArrangeList = (list) => list.map((item, index) => ({ ...item, index }));
+
+export const AddtoList = (description, list) => {
+  const todo = [{ index: 1, description, completed: false }, ...list];
+  return ArrangeList(todo);
+};
+
+export const setCompleted = (id, value, list) => {
+  const todos = list.map((todo) => {
+    if (todo.index === id) { return { ...todo, completed: value }; }
+    return todo;
+  });
+  return todos;
+};
+
+export const removeCompleted = (list) => list.filter((todo) => !todo.completed);