Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

My Day App with all features #49

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
Open

My Day App with all features #49

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
76f6c9b
Hide sections main & footer
kevinrave1804 Dec 19, 2023
724f1dc
Hide sections main and footer
kevinrave1804 Dec 19, 2023
893a765
Create new task
kevinrave1804 Dec 19, 2023
d54d6a5
Complete, edit and count task
kevinrave1804 Dec 19, 2023
8f14e82
Edit-Clear Complete Tasks
kevinrave1804 Dec 20, 2023
5dc3c70
Navegacion
kevinrave1804 Dec 20, 2023
f3927c1
New index
kevinrave1804 Dec 20, 2023
9e24e93
My Day App complete
kevinrave1804 Dec 20, 2023
a056ef3
MyDayApp Full
kevinrave1804 Dec 20, 2023
c27734a
My-Day-App
kevinrave1804 Dec 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
157 changes: 76 additions & 81 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,83 +1,78 @@
<!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" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
rel="stylesheet"
/>
<title>MyDayApp - JS</title>
</head>
<body>
<section class="todoapp">
<header class="header">
<div class="container">
<h1>My Day</h1>
<p>All my tasks in one place</p>
<input
class="new-todo"
placeholder="Type new todo"
autofocus
type="text"
/>
</div>
</header>
<div class="container todoapp-wrapper">
<!-- This section should be hidden by default and shown when there are todos -->
<section class="main">
<ul class="todo-list">
<!-- These are here just to show the structure of the list items -->
<!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
<li class="completed">
<div class="view">
<input class="toggle" type="checkbox" checked />
<label>Learn JavaScript</label>
<button class="destroy"></button>
</div>
<input class="edit" value="Learn JavaScript" />
</li>
<li>
<div class="view">
<input class="toggle" type="checkbox" />
<label>Buy a unicorn</label>
<button class="destroy"></button>
</div>
<input class="edit" value="Buy a unicorn" />
</li>
<li class="editing">
<div class="view">
<input class="toggle" type="checkbox" />
<label>Make dishes</label>
<button class="destroy"></button>
</div>
<input class="edit" value="Make dishes" />
</li>
</ul>
</section>
<!-- This footer should be hidden by default and shown when there are todos -->
<footer class="footer">
<!-- This should be `0 items left` by default -->
<span class="todo-count"><strong>0</strong> item left</span>
<!-- Remove this if you don't implement routing -->
<ul class="filters">
<li>
<a href="#/" class="selected">All</a>
</li>
<li>
<a href="#/pending">Pending</a>
</li>
<li>
<a href="#/completed">Completed</a>
</li>
</ul>
<!-- Hidden if no completed items are left ↓ -->
<button class="clear-completed">Clear completed</button>
</footer>
<html lang="es">

<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" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet" />
<title>MyDayApp - JS</title>
</head>

<body>
<section class="todoapp">
<header class="header">
<div class="container">
<h1>My Day</h1>
<p>All my tasks in one place</p>
<input class="new-todo" placeholder="Type new todo" autofocus type="text" />
</div>
</section>
</body>
</html>
</header>
<div class="container todoapp-wrapper">
<!-- This section should be hidden by default and shown when there are todos -->
<section class="main">
<ul class="todo-list">
<!-- These are here just to show the structure of the list items -->
<!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
<!-- <li class="completed">
<div class="view">
<input class="toggle" type="checkbox" checked/>
<label>Learn JavaScript</label>
<button class="destroy"></button>
</div>
<input class="edit" value="Learn JavaScript" />
</li> -->
<!-- <li>
<div class="view">
<input class="toggle" type="checkbox" />
<label ondblclick="">Buy a unicorn</label>
<button class="destroy"></button>
</div>
<input class="edit" value="Buy a unicorn" />
</li> -->
<!-- <li class="editing">
<div class="view">
<input class="toggle" type="checkbox" />
<label>Make dishes</label>
<button class="destroy"></button>
</div>
<input class="edit" value="Hola" />
</li> -->
</ul>
</section>
<!-- This footer should be hidden by default and shown when there are todos -->
<footer class="footer">
<!-- This should be `0 items left` by default -->
<span class="todo-count"></span>
<!-- Remove this if you don't implement routing -->
<ul class="filters">
<li>
<a href="#/" class="selected">All</a>
</li>
<li>
<a href="#/pending">Pending</a>
</li>
<li>
<a href="#/completed">Completed</a>
</li>
</ul>
<!-- Hidden if no completed items are left ↓ -->
<button class="clear-completed"></button>
</footer>
</div>
</section>
</body>

</html>
125 changes: 123 additions & 2 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,126 @@
import "./css/base.css";
import { getTasks, setTask, removeTask } from "./js/storage";
import { itemChage, numbersItemsLeft } from "./js/utils";

import { sayHello } from "./js/utils";
const todoList = document.querySelector(".todo-list");
const footer = document.querySelector(".footer");
const todoCount = document.querySelector(".todo-count");
const clearCompleted = document.querySelector(".clear-completed");
const load = document.querySelector("body").onload = renderSections(getTasks());

console.log(sayHello("Hello"));
window.addEventListener("hashchange", locationHashNavigator, false)

clearCompleted.addEventListener("click", () => {
const itemsCompleted = getTasks().filter((item) => item.completed === true)
itemsCompleted.forEach((item) => removeTask(item))
renderSections(getTasks())
})

function renderSections(taskList) {
todoList.innerHTML = ""

if (getTasks()?.length === 0) {
todoList.classList.add("hidden");
footer.classList.add("hidden");
} else {
todoList.classList.remove("hidden");
footer.classList.remove("hidden");

todoList.innerHTML += taskList?.map((task) => (
`<li ${task.completed ? 'class="completed"' : ""}>
<div class="view">
<input class="toggle ${task.id}" type="checkbox" ${task.completed ? "checked" : ""}/>
<label>${task.title}</label>
<button class="destroy"></button>
</div>
<input class="edit ${task.id}" value="${task.title}"/>
</li>`
))

clearCompleted.innerHTML = taskList?.filter((item) => item.completed === true).length > 0 ? "Clear completed" : ""

completedTask()
editTask()

todoCount.innerHTML = `${numbersItemsLeft(taskList) === 1 ? `<strong>${numbersItemsLeft(taskList)}</strong> item left` : `<strong>${numbersItemsLeft(taskList)}</strong> items left`}`
}
}

function addTask() {
const mainInput = document.querySelector(".new-todo");

mainInput.addEventListener("keypress", (e) => {
if (e.key === "Enter") {
const task = {
id: `task${getTasks().length + 1}`,
title: (e.target.value).trim(),
completed: false
}
setTask(task)
e.target.value = "";
renderSections(getTasks())
}
})
}

function completedTask() {
const toggle = document.querySelectorAll(".toggle");
toggle.forEach((item) => {
item.addEventListener("click", (e) => {
itemChage(e.target, e.target.checked)
renderSections(getTasks())
})
})
}

function editTask() {
const labels = document.querySelectorAll("label");
labels.forEach(item => {
item.addEventListener("dblclick", (e) => {
e.target.parentElement.parentElement.classList.add("editing");
const edit = e.target.parentElement.nextElementSibling;
edit.focus()
edit.addEventListener("keypress", (e) => {
if (e.key === "Enter") {
const itemEdited = getTasks().find((item) => {
if (item.id === e.target.classList[1]) {
item.title = (e.target.value).trim()
item.completed = false
removeTask(item)
return item
}
})
setTask(itemEdited)
renderSections(getTasks())
// completedTask()
} else if (e.key === " ") {
//Leave editing mode
renderSections(getTasks())
}
})
})
})
}

export function locationHashNavigator() {
const hash = window.location.hash.substring(1)

switch (hash) {
case "/":
renderSections(getTasks())
break;
case "/pending":
const taskPending = getTasks().filter((item) => item.completed === false)
renderSections(taskPending)
break;

case "/completed":
const taskCompleted = getTasks().filter((item) => item.completed === true)
renderSections(taskCompleted)
break;
}
}

addTask()
completedTask()
editTask()
16 changes: 16 additions & 0 deletions src/js/storage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
export function getTasks() {
const data = localStorage.getItem('mydayapp-js')
return JSON.parse(data) || [];
}

export function setTask(task) {
const data = getTasks();
data.push(task);
localStorage.setItem('mydayapp-js', JSON.stringify(data));
}

export function removeTask(task) {
const data = JSON.parse(localStorage.getItem('mydayapp-js'));
const itemRemoved = data.filter((item) => item.id !== task.id);
localStorage.setItem('mydayapp-js', JSON.stringify(itemRemoved));
}
25 changes: 22 additions & 3 deletions src/js/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,22 @@
export const sayHello = (text) => {
return text;
};
// export const sayHello = (text) => {
// return text;
// };

import { getTasks, setTask, removeTask } from "./storage"

export function itemChage(e, state) {
e.parentElement.parentElement.classList.toggle("completed")
const itemCompletedState = getTasks().find((item) => {
if (item.id === e.classList[1]) {
item.completed = state
removeTask(item)
return item
}
})
setTask(itemCompletedState)
}

export function numbersItemsLeft(taskList) {
const itemsLeft = taskList.filter((item) => item.completed === false)
return itemsLeft.length
}