testing

mxzmr · Dec 13, 2022 · ba8e8e7 · ba8e8e7
1 parent 57819e3
commit ba8e8e7
Show file tree

Hide file tree

Showing 8 changed files with 383 additions and 12 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -9,22 +9,29 @@
 </head>
 <body>
  <div id="header">Todo-list</div>
- <div id="side-bar">
- <div class="inbox">
+ <div id="sidebar">
+ <div class="sidebar__inbox">
  <i class="gg-inbox"></i>
  <p>Inbox</p>
  </div>
- <div class="today">
+ <div class="sidebar__today">
  <i class="gg-calendar-today"></i>
  <p>Today</p>
  </div>
- <div class="seven-days">
+ <div class="sidebar__seven-days">
  <i class="gg-calendar-dates"></i>
  <p>Next 7 Days</p>
  </div>
- <div class="projects">Projects</div>
+ <div class="sidebar__projects">Projects</div>
  </div>
  <div id="content">
+ <button class="js-new-task-button">+ Add a task</button>
+ <!-- <div class="js-task-container task-container">
+ <form action="" class="js-task-form task-form">
+ <input type="text" class="js-task-input task__input" placeholder="Write Your Task Here">
+ <input type="date" class="js-task-duedate task__date">
+ </form>
+ </div> -->
  </div>
  <div id="footer">Footer</div>
 </body>

diff --git a/src/create-task.js b/src/create-task.js
@@ -0,0 +1,90 @@
+import { saveTasksLocalStorage, removeTasksLocalStorage, changeTaskIdAfterDelete, getTaskHistory } from './storage';
+
+export default function createTask() {
+ const content = document.querySelector('#content');
+ const addTaskBtn = document.querySelector('.js-new-task-button');
+ const taskForm = document.createElement('form');
+ const taskText = document.createElement('input');
+ const taskCheckBox = document.createElement('input');
+ const dueDate = document.createElement('input');
+ const deleteTaskBtn = document.createElement('button');
+ const taskContainer = document.createElement('div');
+ const blackLine = document.createElement('div');
+ function appendTask() {
+ content.appendChild(taskContainer);
+ taskContainer.after(addTaskBtn);
+ taskContainer.classList.add('js-task-container');
+ taskContainer.append(taskForm, deleteTaskBtn);
+ taskForm.classList.add('js-task-form');
+ taskForm.append(taskText, dueDate, taskCheckBox);
+ blackLine.classList.add('line');
+ deleteTaskBtn.classList.add('js-delete-task-button');
+ deleteTaskBtn.textContent = 'X';
+ deleteTaskBtn.type = 'button';
+ taskCheckBox.type = 'checkbox';
+ taskCheckBox.classList.add('js-task-checkbox');
+ dueDate.type = 'date';
+ dueDate.classList.add('js-task-date');
+ taskText.classList.add('js-task-input');
+ taskText.type = 'text';
+ taskText.before(taskCheckBox);
+ taskText.focus();
+ }
+
+ function createIdForTasks(element, id) {
+ if (!element.id) element.setAttribute('id', `${id - 1}`);
+ if (id === null) element.setAttribute('id', '0');
+ }
+
+ function createTaskEventHandler() {
+ // e.preventDefault(() => taskForm.submit());
+ saveTasksLocalStorage(taskText.value, dueDate.value, taskContainer.id);
+ createIdForTasks(taskContainer, getTaskHistory().length);
+ taskText.blur();
+ }
+ addTaskBtn.addEventListener('click', () => {
+ appendTask();
+ createTaskEventHandler();
+ });
+
+ taskContainer.addEventListener('submit', (e) => {
+ e.preventDefault(() => taskForm.submit());
+ createTaskEventHandler(e);
+ });
+ taskForm.addEventListener('focusout', (e) => {
+ e.preventDefault(() => taskForm.submit());
+ createTaskEventHandler(e);
+ });
+ deleteTaskBtn.addEventListener('click', () => {
+ removeTasksLocalStorage(taskContainer.id, taskContainer);
+ changeTaskIdAfterDelete();
+ });
+ taskContainer.addEventListener('change', (e) => {
+ e.preventDefault(() => taskForm.submit());
+ if (e.target.checked) {
+ taskContainer.style.opacity = '0.4';
+ taskText.readOnly = true;
+ dueDate.readOnly = true;
+ } else {
+ taskContainer.style.opacity = '1';
+ taskText.readOnly = false;
+ dueDate.readOnly = false;
+ }
+ });
+ return {
+ content,
+ taskContainer,
+ taskForm,
+ taskText,
+ dueDate,
+ deleteTaskBtn,
+ taskCheckBox,
+ appendTask,
+ };
+}
+
+// export function ChangeTaskStatus(e) {
+// // const task = createTask;
+// // e.target.id.style.backgroundColor = "red";
+// console.log(e)
+// }
diff --git a/src/dom.js b/src/dom.js
@@ -0,0 +1,15 @@
+function createTask(task, duedate) {
+
+}
+
+function saveTask(id) {
+
+}
+
+function deleteTask(id) {
+
+}
+
+function ChangeTaskStatus() {
+
+}
diff --git a/src/index.js b/src/index.js
@@ -1,9 +1,16 @@
 import { compareAsc, format } from 'date-fns';
-import './styles.css';
-import {
- Projects, displayInbox,
-} from './tasks';
+import createTask from './create-task';
+import './style.css';
+// import'./styles.css';
+import { events, displayInbox } from './task-logic';
+// import { displayInbox } from './tasks';
+// import {
+// Projects, displayInbox,
+// } from './tasks';
 
 // newTodoList();
+// displayInbox();
+// Projects();
+createTask();
 displayInbox();
-Projects();
+// events();
diff --git a/src/storage.js b/src/storage.js
@@ -0,0 +1,35 @@
+export function saveTasksLocalStorage(taskInput, taskDueDate, taskId) {
+ const taskHistory = JSON.parse(localStorage.getItem('text')) || [];
+ const dueDateHistory = JSON.parse(localStorage.getItem('due-date')) || [];
+ if (taskId) {
+ taskHistory.splice(taskId, 1, taskInput);
+ dueDateHistory.splice(taskId, 1, taskDueDate);
+ } else {
+ taskHistory.push(taskInput);
+ dueDateHistory.push(taskDueDate);
+ }
+ localStorage.setItem('text', JSON.stringify(taskHistory));
+ localStorage.setItem('due-date', JSON.stringify(dueDateHistory));
+}
+export function removeTasksLocalStorage(taskId, element) {
+ const taskHistory = JSON.parse(localStorage.getItem('text')) || [];
+ const dueDateHistory = JSON.parse(localStorage.getItem('due-date')) || [];
+ // const content = document.querySelector('#content');
+ if (taskId) {
+ taskHistory.splice(taskId, 1);
+ dueDateHistory.splice(taskId, 1);
+ localStorage.setItem('text', JSON.stringify(taskHistory));
+ localStorage.setItem('due-date', JSON.stringify(dueDateHistory));
+ element.remove();
+ }
+ // change remaining task id's after deletion
+}
+
+export function changeTaskIdAfterDelete() {
+ const content = document.getElementById('content');
+ const getDivElements = content.querySelectorAll('div');
+ for (let i = 0; i < getDivElements.length; i += 1) {
+ getDivElements[i].setAttribute('id', `${i}`);
+ }
+}
+export const getTaskHistory = () => JSON.parse(localStorage.getItem('text'));
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,156 @@
+/* this is the current style sheet */
+@import url('https://css.gg/css');
+
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ }
+
+ :root{
+ --header-footer-bc-color: rgb(71, 71, 71);
+ --header-footer-font-color: rgb(255, 255, 255);
+ --content-bc-color: rgb(220, 235, 253);
+ }
+
+body {
+ display: grid;
+ background-color: rgb(255, 255, 255);
+ grid-template-areas:
+ 'header header'
+ 'side-bar content'
+ 'footer footer';
+ /* grid-template-columns: repeat(auto-fit, minmax(10px, 1fr)); */
+}
+
+#header{
+ grid-area: header;
+ height: 50px;
+ background-color: var(--header-footer-bc-color);
+ color: var(--header-footer-font-color);
+ height: 5vh;
+}
+
+#sidebar{
+ display: flex;
+ flex-direction: column;
+ padding: 30px;
+ gap: 25px;
+ background-color: rgb(227, 116, 116);
+ height: 90vh;
+ /* height: 100vh; */
+ /* width: 25vw; */
+ grid-area: side-bar;
+
+}
+
+.sidebar__today, .sidebar__seven-days, .sidebar__inbox{
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ cursor: pointer;
+ width: 25vw;
+}
+
+/* .sidebar__projects {
+
+} */
+
+#sidebar > div:hover{
+ background-color: #fff;
+}
+
+#content{
+ display: flex;
+ flex-direction: column;
+ padding: 30px;
+ background-color:var(--content-bc-color);
+ width: 70vw;
+ grid-area: content;
+ gap: 20px;
+}
+
+.js-new-task-button {
+ text-align: left;
+ padding-left: 20px;
+ height: 40px;
+ background-color: inherit;
+ border: none;
+ border-top: solid rgb(71, 71, 71, 0.5) 1px;
+ border-bottom: solid rgb(71, 71, 71, 0.5) 1px;
+}
+
+.js-new-task-button:hover {
+ background-color: #fff;
+}
+
+.js-task-container {
+ display: flex;
+ gap: 10px;
+ padding: 0 10px;
+ background-color: inherit;
+ height: 40px;
+ border-top: solid rgb(71, 71, 71, 0.5) 1px;
+ border-bottom: solid rgb(71, 71, 71, 0.5) 1px;
+}
+
+.js-task-container:hover {
+ background-color: #fff;
+ transform: rotate(45);
+}
+
+/* .line {
+ display: none;
+ position:absolute;
+ align-self: center;
+ background: black;
+ width: 100%; 
+ height: 1px;
+} */
+.js-task-form {
+ display: flex;
+ gap: 10px;
+ /* flex-wrap: wrap; */
+ /* grid-template-columns: 0.5fr 6fr 8fr; */
+ width: 100%;
+}
+
+.js-task-input{
+ justify-self: flex-start;
+ width: 80%;
+ border: none;
+ cursor: pointer;
+ background-color: inherit;
+}
+.js-task-input:focus{
+ /* cursor: auto; */
+ outline:none;
+ background-color: rgb(198, 213, 255);
+}
+
+.js-task-date {
+ justify-self: flex-end;
+ border: none;
+ /* width: 150px; */
+ background-color: inherit;
+ outline: none;
+}
+
+.js-task-checkbox {
+ justify-self: flex-start;
+ width: 25px;
+ background-color: inherit;
+}
+
+.js-delete-task-button {
+ border: none;
+ background-color: inherit;
+ font-weight: 600;
+}
+
+#footer{
+ background-color: var(--header-footer-bc-color);
+ color: var(--header-footer-font-color);
+ grid-area: footer;
+ height: 5vh;
+}