├── .github └── FUNDING.yml ├── README.md ├── assets └── fonts │ ├── Lato │ ├── Lato-Black.ttf │ ├── Lato-BlackItalic.ttf │ ├── Lato-Bold.ttf │ ├── Lato-BoldItalic.ttf │ ├── Lato-Italic.ttf │ ├── Lato-Light.ttf │ ├── Lato-LightItalic.ttf │ ├── Lato-Regular.ttf │ ├── Lato-Thin.ttf │ ├── Lato-ThinItalic.ttf │ ├── OFL.txt │ └── lato.css │ └── fonts.css ├── index.html ├── script.js └── style.css /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [Gutoneitzke] 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # To do list 2 | To do listh with HTML + CSS + JAVASCRIPT 3 | ![Captura de Tela 2023-02-03 às 11 22 42](https://user-images.githubusercontent.com/18150462/216627043-60cce186-9bde-4b69-a484-fa2d6ddd3919.png) 4 | -------------------------------------------------------------------------------- /assets/fonts/Lato/Lato-Black.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gutoneitzke/to-do-list-javascript/7331dc612788f2ccd33fd58a462f8f5adc180496/assets/fonts/Lato/Lato-Black.ttf -------------------------------------------------------------------------------- /assets/fonts/Lato/Lato-BlackItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gutoneitzke/to-do-list-javascript/7331dc612788f2ccd33fd58a462f8f5adc180496/assets/fonts/Lato/Lato-BlackItalic.ttf -------------------------------------------------------------------------------- /assets/fonts/Lato/Lato-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gutoneitzke/to-do-list-javascript/7331dc612788f2ccd33fd58a462f8f5adc180496/assets/fonts/Lato/Lato-Bold.ttf -------------------------------------------------------------------------------- /assets/fonts/Lato/Lato-BoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gutoneitzke/to-do-list-javascript/7331dc612788f2ccd33fd58a462f8f5adc180496/assets/fonts/Lato/Lato-BoldItalic.ttf -------------------------------------------------------------------------------- /assets/fonts/Lato/Lato-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gutoneitzke/to-do-list-javascript/7331dc612788f2ccd33fd58a462f8f5adc180496/assets/fonts/Lato/Lato-Italic.ttf -------------------------------------------------------------------------------- /assets/fonts/Lato/Lato-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gutoneitzke/to-do-list-javascript/7331dc612788f2ccd33fd58a462f8f5adc180496/assets/fonts/Lato/Lato-Light.ttf -------------------------------------------------------------------------------- /assets/fonts/Lato/Lato-LightItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gutoneitzke/to-do-list-javascript/7331dc612788f2ccd33fd58a462f8f5adc180496/assets/fonts/Lato/Lato-LightItalic.ttf -------------------------------------------------------------------------------- /assets/fonts/Lato/Lato-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gutoneitzke/to-do-list-javascript/7331dc612788f2ccd33fd58a462f8f5adc180496/assets/fonts/Lato/Lato-Regular.ttf -------------------------------------------------------------------------------- /assets/fonts/Lato/Lato-Thin.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gutoneitzke/to-do-list-javascript/7331dc612788f2ccd33fd58a462f8f5adc180496/assets/fonts/Lato/Lato-Thin.ttf -------------------------------------------------------------------------------- /assets/fonts/Lato/Lato-ThinItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Gutoneitzke/to-do-list-javascript/7331dc612788f2ccd33fd58a462f8f5adc180496/assets/fonts/Lato/Lato-ThinItalic.ttf -------------------------------------------------------------------------------- /assets/fonts/Lato/OFL.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) 2010-2014 by tyPoland Lukasz Dziedzic (team@latofonts.com) with Reserved Font Name "Lato" 2 | 3 | This Font Software is licensed under the SIL Open Font License, Version 1.1. 4 | This license is copied below, and is also available with a FAQ at: 5 | http://scripts.sil.org/OFL 6 | 7 | 8 | ----------------------------------------------------------- 9 | SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 10 | ----------------------------------------------------------- 11 | 12 | PREAMBLE 13 | The goals of the Open Font License (OFL) are to stimulate worldwide 14 | development of collaborative font projects, to support the font creation 15 | efforts of academic and linguistic communities, and to provide a free and 16 | open framework in which fonts may be shared and improved in partnership 17 | with others. 18 | 19 | The OFL allows the licensed fonts to be used, studied, modified and 20 | redistributed freely as long as they are not sold by themselves. The 21 | fonts, including any derivative works, can be bundled, embedded, 22 | redistributed and/or sold with any software provided that any reserved 23 | names are not used by derivative works. The fonts and derivatives, 24 | however, cannot be released under any other type of license. The 25 | requirement for fonts to remain under this license does not apply 26 | to any document created using the fonts or their derivatives. 27 | 28 | DEFINITIONS 29 | "Font Software" refers to the set of files released by the Copyright 30 | Holder(s) under this license and clearly marked as such. This may 31 | include source files, build scripts and documentation. 32 | 33 | "Reserved Font Name" refers to any names specified as such after the 34 | copyright statement(s). 35 | 36 | "Original Version" refers to the collection of Font Software components as 37 | distributed by the Copyright Holder(s). 38 | 39 | "Modified Version" refers to any derivative made by adding to, deleting, 40 | or substituting -- in part or in whole -- any of the components of the 41 | Original Version, by changing formats or by porting the Font Software to a 42 | new environment. 43 | 44 | "Author" refers to any designer, engineer, programmer, technical 45 | writer or other person who contributed to the Font Software. 46 | 47 | PERMISSION & CONDITIONS 48 | Permission is hereby granted, free of charge, to any person obtaining 49 | a copy of the Font Software, to use, study, copy, merge, embed, modify, 50 | redistribute, and sell modified and unmodified copies of the Font 51 | Software, subject to the following conditions: 52 | 53 | 1) Neither the Font Software nor any of its individual components, 54 | in Original or Modified Versions, may be sold by itself. 55 | 56 | 2) Original or Modified Versions of the Font Software may be bundled, 57 | redistributed and/or sold with any software, provided that each copy 58 | contains the above copyright notice and this license. These can be 59 | included either as stand-alone text files, human-readable headers or 60 | in the appropriate machine-readable metadata fields within text or 61 | binary files as long as those fields can be easily viewed by the user. 62 | 63 | 3) No Modified Version of the Font Software may use the Reserved Font 64 | Name(s) unless explicit written permission is granted by the corresponding 65 | Copyright Holder. This restriction only applies to the primary font name as 66 | presented to the users. 67 | 68 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font 69 | Software shall not be used to promote, endorse or advertise any 70 | Modified Version, except to acknowledge the contribution(s) of the 71 | Copyright Holder(s) and the Author(s) or with their explicit written 72 | permission. 73 | 74 | 5) The Font Software, modified or unmodified, in part or in whole, 75 | must be distributed entirely under this license, and must not be 76 | distributed under any other license. The requirement for fonts to 77 | remain under this license does not apply to any document created 78 | using the Font Software. 79 | 80 | TERMINATION 81 | This license becomes null and void if any of the above conditions are 82 | not met. 83 | 84 | DISCLAIMER 85 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 86 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF 87 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT 88 | OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE 89 | COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 90 | INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL 91 | DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 92 | FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM 93 | OTHER DEALINGS IN THE FONT SOFTWARE. 94 | -------------------------------------------------------------------------------- /assets/fonts/Lato/lato.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Lato'; 3 | src: url(./Lato-Regular.ttf) format(woff2); 4 | } -------------------------------------------------------------------------------- /assets/fonts/fonts.css: -------------------------------------------------------------------------------- 1 | @import url(./Lato/lato.css); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | To Do List | GN 10 | 11 | 12 |

To Do List | GN

13 |
14 |
15 | 16 | 21 |
22 |
23 |
    24 |
25 |
26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const localStorageKey = 'to-do-list-gn' 2 | 3 | function validateIfExistsNewTask() 4 | { 5 | let values = JSON.parse(localStorage.getItem(localStorageKey) || "[]") 6 | let inputValue = document.getElementById('input-new-task').value 7 | let exists = values.find(x => x.name == inputValue) 8 | return !exists ? false : true 9 | } 10 | 11 | function newTask() 12 | { 13 | let input = document.getElementById('input-new-task') 14 | input.style.border = '' 15 | 16 | // validation 17 | if(!input.value) 18 | { 19 | input.style.border = '1px solid red' 20 | alert('Digite algo para inserir em sua lista') 21 | } 22 | else if(validateIfExistsNewTask()) 23 | { 24 | alert('Já existe uma task com essa descrição') 25 | } 26 | else 27 | { 28 | // increment to localStorage 29 | let values = JSON.parse(localStorage.getItem(localStorageKey) || "[]") 30 | values.push({ 31 | name: input.value 32 | }) 33 | localStorage.setItem(localStorageKey,JSON.stringify(values)) 34 | showValues() 35 | } 36 | input.value = '' 37 | } 38 | 39 | function showValues() 40 | { 41 | let values = JSON.parse(localStorage.getItem(localStorageKey) || "[]") 42 | let list = document.getElementById('to-do-list') 43 | list.innerHTML = '' 44 | for(let i = 0; i < values.length; i++) 45 | { 46 | list.innerHTML += `
  • ${values[i]['name']}
    • ` 47 | } 48 | } 49 | 50 | function removeItem(data) 51 | { 52 | let values = JSON.parse(localStorage.getItem(localStorageKey) || "[]") 53 | let index = values.findIndex(x => x.name == data) 54 | values.splice(index,1) 55 | localStorage.setItem(localStorageKey,JSON.stringify(values)) 56 | showValues() 57 | } 58 | 59 | showValues() -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | :root{ 2 | --color-dark: rgb(14, 14, 14); 3 | --color-dark2: rgb(32, 32, 32); 4 | --color-dark3: rgb(22, 22, 22); 5 | --color-white: #fff; 6 | --color-green: rgb(103, 195, 80); 7 | --color-green2: rgb(51, 149, 26); 8 | --color-red: rgb(184, 40, 35); 9 | --color-red2: rgb(146, 22, 17); 10 | } 11 | 12 | body{ 13 | font-family: 'Lato'; 14 | background-color: var(--color-dark); 15 | color: var(--color-white); 16 | display: flex; 17 | flex-direction: column; 18 | align-items: center; 19 | gap: 4rem; 20 | } 21 | 22 | .content{ 23 | display: flex; 24 | flex-direction: column; 25 | gap: 4rem; 26 | } 27 | 28 | .content--add-item{ 29 | display: flex; 30 | align-items: center; 31 | gap: 1rem; 32 | flex-wrap: wrap; 33 | } 34 | 35 | #input-new-task, 36 | #btn-new-task{ 37 | border: none; 38 | font-size: 1rem; 39 | outline: none; 40 | padding: 1rem; 41 | } 42 | 43 | #input-new-task{ 44 | width: 20rem; 45 | border-radius: 1rem; 46 | } 47 | 48 | #btn-new-task{ 49 | background-color: var(--color-dark2); 50 | color: var(--color-white); 51 | border-radius: 50%; 52 | width: 50px; 53 | height: 50px; 54 | cursor: pointer; 55 | transition: .4s; 56 | } 57 | 58 | #btn-new-task:hover{ 59 | background-color: var(--color-dark3); 60 | } 61 | 62 | #to-do-list{ 63 | display: flex; 64 | flex-direction: column; 65 | gap: 1rem; 66 | padding: 0; 67 | } 68 | 69 | #to-do-list li{ 70 | list-style-type: none; 71 | font-size: 1.4rem; 72 | text-transform: capitalize; 73 | display: flex; 74 | align-items: center; 75 | justify-content: space-between; 76 | } 77 | 78 | #to-do-list li:hover{ 79 | background-color: var(--color-dark3); 80 | transition: .4s; 81 | border-radius: 1rem; 82 | padding-left: 1rem; 83 | } 84 | 85 | #btn-ok{ 86 | border: none; 87 | background-color: var(--color-green); 88 | color: var(--color-white); 89 | padding: .4rem .8rem; 90 | border-radius: 50%; 91 | width: 50px; 92 | height: 50px; 93 | display: flex; 94 | justify-content: center; 95 | align-items: center; 96 | cursor: pointer; 97 | transition: .4s; 98 | } 99 | 100 | #btn-ok:hover{ 101 | background-color: var(--color-green2); 102 | } --------------------------------------------------------------------------------