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

Solution code for the technical test #70

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

Solution code for the technical test #70

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
55672d0
Routing and task utilities
RicardoCifuentes01 Jul 2, 2024
9a1f932
Model correction
RicardoCifuentes01 Jul 2, 2024
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
129 changes: 49 additions & 80 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,83 +1,52 @@
<!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>

<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" id="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" id="main">
<ul class="todo-list" id="todo-list">
</ul>
</section>
<!-- This footer should be hidden by default and shown when there are todos -->
<footer class="footer" id="footer">
<!-- This should be `0 items left` by default -->
<span class="todo-count" id="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" id="clear-completed">Clear completed</button>
</footer>
</div>
</section>
</body>

</html>
45 changes: 43 additions & 2 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,46 @@
import "./css/base.css";

import { sayHello } from "./js/utils";
import { read } from "./js/utils";
import { add } from "./js/utils";
import { write } from "./js/utils";
import { clear } from "./js/utils.js"

console.log(sayHello("Hello"));
const main = document.getElementById('main')
const footer = document.getElementById('footer')
const newTask = document.getElementById('new-todo')
const toDoList = document.getElementById('todo-list')
const toDoCount = document.getElementById('todo-count')
const filters = document.querySelectorAll('a[href]')
const clearButton = document.getElementById('clear-completed')

const selected = (filters, rute) => {
filters.forEach(filter => {
if (filter.hash == rute) {
filter.classList.add('selected')
}
else {
filter.classList.remove('selected')
}
})
}

read(main, footer)
add(newTask, toDoList, toDoCount, clearButton)
window.addEventListener('load', () => {
const rute = location.hash
write(toDoList, toDoCount, rute, clearButton)

selected(filters, rute)

if (location.hash == '') {
filters[0].className = 'selected'
}
})
clear(toDoList, toDoCount, clearButton)
window.addEventListener('hashchange', () => {
toDoList.innerHTML = ''
const rute = location.hash
write(toDoList, toDoCount, rute, clearButton)

selected(filters, rute)
})
194 changes: 191 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,191 @@
export const sayHello = (text) => {
return text;
};
//READ----READ----READ----READ----READ----READ----READ----READ----READ----READ----READ----READ----READ
export const read = (main, footer) => {

if (localStorage.length == 0 || localStorage['mydayapp-js'] == '[]') {
main.classList.add('hidden')
footer.classList.add('hidden')

const tasks = []

localStorage.setItem('mydayapp-js', JSON.stringify(tasks))
}
}

//CHECKCOMPLETED
const checkCompleted = (tasks, clearButton) => {
const completedTasks = tasks.filter(task => task.completed == true)
completedTasks.length != 0 ? clearButton.classList.remove('hidden') : clearButton.classList.add('hidden')
}

//VIEW----VIEW----VIEW----VIEW----VIEW----VIEW----VIEW----VIEW----VIEW----VIEW----VIEW----VIEW----VIEW
const view = (toDoList, tasks, task, index, clearButton) => {

const taskElement = document.createElement('li')
const taskDivElement = document.createElement('div')
const toogleTask = document.createElement('input')
const taskText = document.createElement('label')
const destroyTask = document.createElement('button')
const editTask = document.createElement('input')

if (task.completed) {
taskElement.setAttribute('class', 'completed')
toogleTask.checked = true
}

taskDivElement.setAttribute('class', 'view')

toogleTask.setAttribute('class', 'toggle')
toogleTask.setAttribute('type', 'checkbox')

taskText.textContent = task.title
taskText.addEventListener('dblclick', () => {
taskElement.setAttribute('class', 'editing')
editTask.focus()
if (taskElement.className == 'editing') {
editTask.addEventListener('keydown', (event) => {
if (event.key == 'Escape') {
taskElement.setAttribute('class', '')
}
})
}
})

toogleTask.addEventListener('change', () => {
const newTasks = JSON.parse(localStorage.getItem('mydayapp-js'))
if (toogleTask.checked) {
taskElement.setAttribute('class', 'completed')
newTasks[index].completed = true
localStorage.setItem('mydayapp-js', JSON.stringify(newTasks))
checkCompleted(newTasks, clearButton)
} else {
taskElement.setAttribute('class', '')
newTasks[index].completed = false
console.log(newTasks[index])
localStorage.setItem('mydayapp-js', JSON.stringify(newTasks))
checkCompleted(newTasks, clearButton)
}
})

destroyTask.setAttribute('class', 'destroy')

taskDivElement.append(toogleTask, taskText, destroyTask)

editTask.focus()
editTask.setAttribute('class', 'edit')
editTask.setAttribute('value', task.title)
editTask.setSelectionRange(task.title.length, task.title.length);
editTask.addEventListener('keydown', (event) => {
if (event.key == 'Enter' && editTask.value.trim() != '') {
taskText.textContent = editTask.value.trim()
taskElement.setAttribute('class', '')
tasks[index].title = taskText.textContent
localStorage.setItem('mydayapp-js', JSON.stringify(tasks))
}
})

taskElement.append(taskDivElement, editTask)
toDoList.appendChild(taskElement)
}

//COUNTER----COUNTER----COUNTER----COUNTER----COUNTER----COUNTER----COUNTER----COUNTER----COUNTER----COUNTER----COUNTER
const counter = (toDoList, toDoCount) => {
if (toDoList.childElementCount == 1) {
toDoCount.innerHTML = `<strong>${toDoList.childElementCount}</strong> item left`
} else {
toDoCount.innerHTML = `<strong>${toDoList.childElementCount}</strong> items left`
}
}

//ADD----ADD----ADD----ADD----ADD----ADD----ADD----ADD----ADD----ADD----ADD----ADD----ADD----ADD----ADD----ADD----ADD
export const add = (newTask, toDoList, toDoCount, clearButton) => {
newTask.addEventListener('keydown', (event) => {
if (event.key == 'Enter') {

const newTaskValue = newTask.value.trim()
if (newTaskValue != '') {

const task = { completed: false, title: newTaskValue }

const tasks = JSON.parse(localStorage.getItem('mydayapp-js'))
tasks.push(task)

const index = tasks.indexOf(task)

localStorage.setItem('mydayapp-js', JSON.stringify(tasks))

view(toDoList, tasks, task, index, clearButton)

newTask.value = ''

if (localStorage.length == 1) {
main.classList.remove('hidden')
footer.classList.remove('hidden')
}

counter(toDoList, toDoCount)
}
}
})
}

//WRITE----WRITE----WRITE----WRITE----WRITE----WRITE----WRITE----WRITE----WRITE----WRITE----WRITE----WRITE----WRITE
export const write = (toDoList, toDoCount, rute, clearButton) => {

const tasks = JSON.parse(localStorage.getItem('mydayapp-js'))

switch (rute) {
case '#/':
tasks.forEach(task => {
const index = tasks.indexOf(task)
view(toDoList, tasks, task, index, clearButton)
})
checkCompleted(tasks, clearButton)
break;
case '#/pending':
const pendingTasks = tasks.filter((task) => task.completed === false)
pendingTasks.forEach(task => {
const index = pendingTasks.indexOf(task)
view(toDoList, pendingTasks, task, index, clearButton)
})
clearButton.classList.add('hidden')
break;
case '#/completed':
const completedTasks = tasks.filter((task) => task.completed === true)
completedTasks.forEach(task => {
const index = completedTasks.indexOf(task)
view(toDoList, completedTasks, task, index, clearButton)
})
checkCompleted(tasks, clearButton)
break;
default:
tasks.forEach(task => {
const index = tasks.indexOf(task)
view(toDoList, tasks, task, index, clearButton)
})
checkCompleted(tasks, clearButton)
break;
}

counter(toDoList, toDoCount)
}

//CLEAR----CLEAR----CLEAR----CLEAR----CLEAR----CLEAR----CLEAR----CLEAR----CLEAR----CLEAR----CLEAR----CLEAR----CLEAR
export const clear = (toDoList, toDoCount, clearButton) => {
clearButton.addEventListener('click', () => {

const tasks = JSON.parse(localStorage.getItem('mydayapp-js'))

const pendingTasks = tasks.filter((task) => task.completed == false)
localStorage.setItem('mydayapp-js', JSON.stringify(pendingTasks))

const completedTasks = document.getElementsByClassName('completed')

Array.from(completedTasks).forEach(task => {
task.remove()
});

counter(toDoList, toDoCount)

checkCompleted(pendingTasks, clearButton)
})
}