├── index.html ├── script.js └── style.css /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | CRUD 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | Cadastro de Funcionários 17 | 18 |
19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 |
NomeFunçãoSalárioEditarExcluir
34 |
35 | 36 |
37 |
38 |
39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 |
49 |
50 |
51 | 52 |
53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const modal = document.querySelector('.modal-container') 2 | const tbody = document.querySelector('tbody') 3 | const sNome = document.querySelector('#m-nome') 4 | const sFuncao = document.querySelector('#m-funcao') 5 | const sSalario = document.querySelector('#m-salario') 6 | const btnSalvar = document.querySelector('#btnSalvar') 7 | 8 | let itens 9 | let id 10 | 11 | function openModal(edit = false, index = 0) { 12 | modal.classList.add('active') 13 | 14 | modal.onclick = e => { 15 | if (e.target.className.indexOf('modal-container') !== -1) { 16 | modal.classList.remove('active') 17 | } 18 | } 19 | 20 | if (edit) { 21 | sNome.value = itens[index].nome 22 | sFuncao.value = itens[index].funcao 23 | sSalario.value = itens[index].salario 24 | id = index 25 | } else { 26 | sNome.value = '' 27 | sFuncao.value = '' 28 | sSalario.value = '' 29 | } 30 | 31 | } 32 | 33 | function editItem(index) { 34 | 35 | openModal(true, index) 36 | } 37 | 38 | function deleteItem(index) { 39 | itens.splice(index, 1) 40 | setItensBD() 41 | loadItens() 42 | } 43 | 44 | function insertItem(item, index) { 45 | let tr = document.createElement('tr') 46 | 47 | tr.innerHTML = ` 48 | ${item.nome} 49 | ${item.funcao} 50 | R$ ${item.salario} 51 | 52 | 53 | 54 | 55 | 56 | 57 | ` 58 | tbody.appendChild(tr) 59 | } 60 | 61 | btnSalvar.onclick = e => { 62 | 63 | if (sNome.value == '' || sFuncao.value == '' || sSalario.value == '') { 64 | return 65 | } 66 | 67 | e.preventDefault(); 68 | 69 | if (id !== undefined) { 70 | itens[id].nome = sNome.value 71 | itens[id].funcao = sFuncao.value 72 | itens[id].salario = sSalario.value 73 | } else { 74 | itens.push({'nome': sNome.value, 'funcao': sFuncao.value, 'salario': sSalario.value}) 75 | } 76 | 77 | setItensBD() 78 | 79 | modal.classList.remove('active') 80 | loadItens() 81 | id = undefined 82 | } 83 | 84 | function loadItens() { 85 | itens = getItensBD() 86 | tbody.innerHTML = '' 87 | itens.forEach((item, index) => { 88 | insertItem(item, index) 89 | }) 90 | 91 | } 92 | 93 | const getItensBD = () => JSON.parse(localStorage.getItem('dbfunc')) ?? [] 94 | const setItensBD = () => localStorage.setItem('dbfunc', JSON.stringify(itens)) 95 | 96 | loadItens() 97 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;700&family=Roboto:wght@100;300;400;500;700;900&family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap'); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: 'Poppins', sans-serif; 8 | } 9 | 10 | body { 11 | width: 100vw; 12 | height: 100vh; 13 | display: flex; 14 | align-items: center; 15 | justify-content: center; 16 | background-color: rgba(0,0,0,0.1); 17 | } 18 | 19 | button { 20 | cursor: pointer; 21 | } 22 | 23 | .container { 24 | width: 90%; 25 | height: 80%; 26 | border-radius: 10px; 27 | background: white; 28 | } 29 | 30 | .header { 31 | min-height: 70px; 32 | display: flex; 33 | align-items: center; 34 | justify-content: space-between; 35 | margin: auto 12px; 36 | } 37 | 38 | .header span { 39 | font-weight: 900; 40 | font-size: 20px; 41 | word-break: break-all; 42 | } 43 | 44 | #new { 45 | font-size: 16px; 46 | padding: 8px; 47 | border-radius: 5px; 48 | border: none; 49 | color: white; 50 | background-color: rgb(57, 57, 226); 51 | } 52 | 53 | .divTable { 54 | padding: 10px; 55 | width: auto; 56 | height:inherit; 57 | overflow:auto; 58 | } 59 | 60 | .divTable::-webkit-scrollbar { 61 | width: 12px; 62 | background-color: whitesmoke; 63 | } 64 | 65 | .divTable::-webkit-scrollbar-thumb { 66 | border-radius: 10px; 67 | background-color: darkgray; 68 | } 69 | 70 | table { 71 | width: 100%; 72 | border-spacing: 10px; 73 | word-break: break-all; 74 | border-collapse: collapse; 75 | } 76 | 77 | thead { 78 | background-color: whitesmoke; 79 | } 80 | 81 | tr { 82 | border-bottom: 1px solid rgb(238, 235, 235)!important; 83 | } 84 | 85 | tbody tr td { 86 | vertical-align: text-top; 87 | padding: 6px; 88 | max-width: 50px; 89 | } 90 | 91 | thead tr th { 92 | padding: 5px; 93 | text-align: start; 94 | margin-bottom: 50px; 95 | } 96 | 97 | tbody tr { 98 | margin-bottom: 50px; 99 | } 100 | 101 | thead tr th.acao { 102 | width: 100px!important; 103 | text-align: center; 104 | } 105 | 106 | tbody tr td.acao { 107 | text-align: center; 108 | } 109 | 110 | @media (max-width: 700px) { 111 | body { 112 | font-size: 10px; 113 | } 114 | 115 | .header span { 116 | font-size: 15px; 117 | } 118 | 119 | #new { 120 | padding: 5px; 121 | font-size: 10px; 122 | } 123 | 124 | thead tr th.acao { 125 | width: auto!important; 126 | } 127 | 128 | td button i { 129 | font-size: 20px!important; 130 | } 131 | 132 | td button i:first-child { 133 | margin-right: 0; 134 | } 135 | 136 | .modal { 137 | width: 90%!important; 138 | } 139 | 140 | .modal label { 141 | font-size: 12px!important; 142 | } 143 | } 144 | 145 | .modal-container { 146 | width: 100vw; 147 | height: 100vh; 148 | position: fixed; 149 | top: 0; 150 | left: 0; 151 | background-color: rgba(0, 0, 0, 0.5); 152 | display: none; 153 | z-index: 999; 154 | align-items: center; 155 | justify-content: center; 156 | } 157 | 158 | .modal { 159 | display: flex; 160 | flex-direction: column; 161 | align-items: center; 162 | padding: 40px; 163 | background-color: white; 164 | border-radius: 10px; 165 | width: 50%; 166 | } 167 | 168 | .modal label { 169 | font-size: 14px; 170 | width: 100%; 171 | } 172 | 173 | .modal input { 174 | width: 100%; 175 | outline: none; 176 | padding: 5px 10px; 177 | width: 100%; 178 | margin-bottom: 20px; 179 | border-top: none; 180 | border-left: none; 181 | border-right: none; 182 | } 183 | 184 | .modal button { 185 | width: 100%; 186 | margin: 10px auto; 187 | outline: none; 188 | border-radius: 20px; 189 | padding: 5px 10px; 190 | width: 100%; 191 | border: none; 192 | background-color: rgb(57, 57, 226); 193 | color: white; 194 | } 195 | 196 | .active { 197 | display: flex; 198 | } 199 | 200 | .active .modal { 201 | animation: modal .4s; 202 | } 203 | 204 | @keyframes modal { 205 | from { 206 | opacity: 0; 207 | transform: translate3d(0, -60px, 0); 208 | } 209 | to { 210 | opacity: 1; 211 | transform: translate3d(0, 0, 0); 212 | } 213 | } 214 | 215 | td button { 216 | border: none; 217 | outline: none; 218 | background: transparent; 219 | } 220 | 221 | td button i { 222 | font-size: 25px; 223 | } 224 | 225 | td button i:first-child { 226 | margin-right: 10px; 227 | } 228 | --------------------------------------------------------------------------------