3 |
2 |
3 |
6 | Aplicação desenvolvida no NLW Journey da Rocketseat na trilha HTML+CSS+JS. 7 |
8 | 9 |10 | Tecnologias | 11 | Projeto | 12 | Licença 13 |
14 | 15 |
16 | 
22 | 
23 |
Nenhuma atividade cadastrada.
` 95 | return 96 | } 97 | 98 | for (let atividade of atividades) { 99 | section.innerHTML += criarItemDeAtividade(atividade) 100 | } 101 | } 102 | 103 | atualizarListaDeAtividades() 104 | 105 | const salvarAtividade = (event) => { 106 | event.preventDefault() 107 | const dadosDoFormulario = new FormData(event.target) 108 | 109 | const nome = dadosDoFormulario.get('atividade') 110 | const dia = dadosDoFormulario.get('dia') 111 | const hora = dadosDoFormulario.get('hora') 112 | const data = `${dia} ${hora}` 113 | 114 | const novaAtividade = { 115 | nome, 116 | data, 117 | finalizada: false 118 | } 119 | 120 | const atividadeExiste = atividades.find((atividade) => { 121 | return atividade.data == novaAtividade.data 122 | }) 123 | 124 | if (atividadeExiste) { 125 | return alert('Dia/Hora não disponível') 126 | } 127 | 128 | atividades = [novaAtividade, ...atividades] 129 | atualizarListaDeAtividades() 130 | } 131 | 132 | const criarDiasSelecao = () => { 133 | const dias = [ 134 | '2024-02-28', 135 | '2024-02-29', 136 | '2024-03-01', 137 | '2024-03-02', 138 | '2024-03-03', 139 | ] 140 | 141 | let diasSelecao = '' 142 | 143 | for (let dia of dias) { 144 | const formatar = formatador(dia) 145 | const diaFormatado = ` 146 | ${formatar.dia.numerico} de 147 | ${formatar.mes} 148 | ` 149 | diasSelecao += ` 150 | 151 | ` 152 | } 153 | 154 | document 155 | .querySelector('select[name="dia"]') 156 | .innerHTML = diasSelecao 157 | 158 | } 159 | criarDiasSelecao() 160 | 161 | 162 | const criarHorasSelecao = () => { 163 | let horasDisponiveis = '' 164 | 165 | for (let i = 6; i < 23; i++) { 166 | const hora = String(i).padStart(2, '0') 167 | horasDisponiveis += ` 168 | ` 169 | horasDisponiveis += ` 170 | ` 171 | } 172 | 173 | document 174 | .querySelector('select[name="hora"]') 175 | .innerHTML = horasDisponiveis 176 | } 177 | criarHorasSelecao() 178 | 179 | const concluirAtividade = (event) => { 180 | const input = event.target 181 | const dataDesteInput = input.value 182 | 183 | const atividade = atividades.find((atividade) => { 184 | return atividade.data == dataDesteInput 185 | }) 186 | 187 | if (!atividade) { 188 | return 189 | } 190 | 191 | atividade.finalizada = !atividade.finalizada 192 | } -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | 8 | html, input, select, button, option { 9 | font-family: 'Inter', sans-serif; 10 | background-color: #09090B; 11 | color: #FAFAFA; 12 | 13 | line-height: 120%; 14 | letter-spacing: -0.02em; 15 | } 16 | 17 | /* app */ 18 | #app { 19 | padding: 40px 20px; 20 | max-width: 320px; 21 | margin: auto; 22 | } 23 | 24 | 25 | /* form */ 26 | #place { 27 | display: flex; 28 | align-items: center; 29 | gap: 8px; 30 | 31 | padding: 22px 16px; 32 | 33 | font-size: 14px; 34 | margin-bottom:32px; 35 | } 36 | 37 | input, select { 38 | all: unset; 39 | } 40 | 41 | input, select, button { 42 | width: 100%; 43 | } 44 | 45 | .fields { 46 | display: grid; 47 | gap: 8px; 48 | } 49 | 50 | .field-wrapper { 51 | padding: 18px; 52 | background-color: #09090B; 53 | border: 1px solid #27272A; 54 | border-radius: 8px; 55 | 56 | display: flex; 57 | align-items: center; 58 | gap: 10px; 59 | } 60 | 61 | .field-wrapper:focus-within { 62 | outline: 2px solid yellowgreen; 63 | } 64 | 65 | button { 66 | margin-top: 12px; 67 | border: none; 68 | padding: 12px 20px; 69 | background-color: #AFF445; 70 | border-radius: 8px; 71 | 72 | font-weight: 500; 73 | font-size: 16px; 74 | 75 | color: #132F00; 76 | cursor: pointer; 77 | } 78 | 79 | .card-bg { 80 | background: #18181B; 81 | 82 | box-shadow: 83 | 0px 8px 8px rgba(0, 0, 0, 0.1), 84 | 0px 4px 4px rgba(0, 0, 0, 0.1), 85 | 0px 2px 2px rgba(0, 0, 0, 0.1), 86 | 0px 0px 0px 1px rgba(0, 0, 0, 0.1), 87 | inset 0px 0px 0px 1px rgba(255, 255, 255, 0.03), inset 0px 1px 0px rgba(255, 255, 255, 0.03); 88 | 89 | border-radius: 12px; 90 | } 91 | 92 | /* main */ 93 | main { 94 | margin-top: 32px; 95 | } 96 | 97 | h1 { 98 | text-align: center; 99 | font-weight: 600; 100 | font-size: 24px; 101 | 102 | margin-bottom: 24px; 103 | } 104 | 105 | section { 106 | display: grid; 107 | gap: 10px; 108 | } 109 | 110 | section input[type="checkbox"] { 111 | position: absolute; 112 | inset: 0; 113 | } 114 | 115 | section .card-bg { 116 | position: relative; 117 | padding: 10px 16px; 118 | 119 | display: flex; 120 | align-items: center; 121 | justify-content: space-between; 122 | } 123 | 124 | section .card-bg:has(:checked) .active, 125 | section .card-bg .inactive { 126 | display: block; 127 | } 128 | 129 | section .card-bg:has(:checked) .inactive, 130 | section .card-bg .active { 131 | display: none; 132 | } 133 | 134 | section .card-bg > div { 135 | display: flex; 136 | align-items: center; 137 | gap: 12px; 138 | } 139 | 140 | time { 141 | font-size: 14px; 142 | color: #A1A1AB; 143 | text-align: right; 144 | } 145 | 146 | time.full { 147 | display: none; 148 | } 149 | 150 | @media (width > 1024px) { 151 | #app { 152 | display: flex; 153 | max-width: 960px; 154 | gap: 32px; 155 | } 156 | 157 | main { 158 | margin-top: 0; 159 | flex: 1; 160 | } 161 | 162 | h1 { 163 | text-align: left; 164 | } 165 | 166 | time.full { 167 | display: block; 168 | } 169 | 170 | time.short { 171 | display: none; 172 | } 173 | } 174 | 175 | section .card-bg { 176 | animation: appear 300ms; 177 | } 178 | 179 | @keyframes appear { 180 | from { 181 | opacity: 0; 182 | } 183 | } --------------------------------------------------------------------------------