Skip to content

Commit

Permalink
ToDoList
Browse files Browse the repository at this point in the history
  • Loading branch information
@ibrunoc
ibrunoc committed Jul 21, 2022
0 parents commit 88da4c9
Show file tree
Hide file tree
Showing 4 changed files with 242 additions and 0 deletions.
Binary file added css/img/backgroundImg.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
131 changes: 131 additions & 0 deletions css/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
*{
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: 'Poppins', sans-serif;
list-style: none;
}

body{
background-image: url("/ToDoList/css/img/backgroundImg.jpg");
}

.container{
width: 50%;
background: rgba( 255, 255, 255, 0.6 );
box-shadow: rgb(0 0 0 / 25%) 0px 4px 24px -1px;
backdrop-filter: blur(13.5px);
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );
padding: 10px;
margin: 200px auto;
border-radius: 15px;
border: solid 1px;
}

h1{ text-align: center; }

.add{
padding: 10px;
display: flex;
align-items: center;
justify-content: space-between;
}

.add input{
width: 80%;
height: 50px;
padding: 10px;
font-size: 16px;
outline: none;
border: none;
border-radius: 15px;
}

.add button{
padding: 5px;
height: 50px;
}

.button-tasks{
width: 150px;
height: 10px;
padding: 5px;
font-size: 18px;
border: none;
border-radius: 30px;
}

.button-tasks:hover{
background-color: rgb(8, 83, 221);
color: white;
}


.close{
padding: 12px 16px 12px 16px;
border-radius: 5px;
border: none;
font-size: 16px;
}

.close:hover {
background-color: #f44336;
color: white;
}

li{
padding: 10px 60px;
font-size: 22px;
display: flex;
align-items: center;
justify-content: space-between;
}

ul li.checked {
background: rgb(109, 185, 128);
color: #fff;
text-decoration: line-through;
border-radius: 10px;
}

ul li.checked::before {
content: '';
position: absolute;
border-color: #fff;
border-style: solid;
border-width: 0 2px 2px 0;
left: 35px;
transform: rotate(45deg);
height: 15px;
width: 7px;
}


@media screen and (max-width: 768px){
.add{
display: block;
text-align: center;
}

.button-tasks{
width: 130px;
margin-top: 10px;
}

.container{ width: 90%; }
}

@media screen and (max-width: 350px){
.add{
display: block;
text-align: center;
}

.button-tasks{
width: 70%;
font-size: 13px;
}

.container{ width: 80%; }
}
29 changes: 29 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="pt-br">

<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="stylesheet" href="./css/style.css">
<title>To Do List</title>
</head>

<body>


<section class='container'>
<h1>LISTA DE TAREFAS</h1>

<div class='add'>
<input type="text" class='input-tasks' placeholder='Digite a nova tarefa'>
<button class='button-tasks'>ADICIONAR</buttoncl>
</div>

<ul class='tasks'></ul>
</section>


<script src='./js/main.js'></script>
</body>
</html>
82 changes: 82 additions & 0 deletions js/main.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
const inputTasks = document.querySelector('.input-tasks');
const buttonTasks = document.querySelector('.button-tasks');
const tasks = document.querySelector('.tasks');

function createLI() {
const li = document.createElement('li');
return li;
}

inputTasks.addEventListener('keypress', (e) => {
if (e.keyCode === 13) {
if (!inputTasks.value) return;
createTasks(inputTasks.value);
}
})

function clearImput() {
inputTasks.value = '';
inputTasks.focus();
}

function createButton(li) {
li.innerText += ' ';
const buttonClose = document.createElement('button');
buttonClose.innerText = 'X';
buttonClose.setAttribute('class', 'close');
li.appendChild(buttonClose);
}

function createTasks(textoInput) {
const li = createLI();
li.innerText = textoInput;
tasks.appendChild(li);
clearImput();
createButton(li);
saveTasks();
}

buttonTasks.addEventListener('click', () => {
if (!inputTasks.value) return;
createTasks(inputTasks.value);
});

document.addEventListener('click', (e) => {
const el = e.target;

if (el.classList.contains('close')) {
el.parentElement.remove();
saveTasks();
}
});

tasks.addEventListener('click', function(ev) {
if (ev.target.tagName === 'LI') {
ev.target.classList.toggle('checked');
}
}, false);

function saveTasks() {
const liTasks = tasks.querySelectorAll('li');
const todoList = [];

for (let tasks of liTasks) {
let tasksText = tasks.innerText;
tasksText = tasksText.replace('Close', '').trim();
todoList.push(tasksText);
}

const tasksJson = JSON.stringify(todoList);
localStorage.setItem('tasks', tasksJson);
}

function addSavedTasks() {
const tasks = localStorage.getItem('tasks');
const todoList = JSON.parse(tasks)

for (tasks of todoList) {
createTasks(tasks);
}
}

addSavedTasks();

1 comment on commit 88da4c9

@vercel
Copy link

@vercel vercel bot commented on 88da4c9 Jul 21, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

to-do-list – ./

to-do-list-seven-mu.vercel.app
to-do-list-git-main-ihyperbr.vercel.app
to-do-list-ihyperbr.vercel.app

Please sign in to comment.