├── .github
├── logo.png
└── preview.png
├── README.md
├── index.css
├── index.html
├── index.js
└── index.md
/.github/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rocketseat-education/nlw-unite-html-css-js/b1fb92bdbe7ba412a49e222e458e2a45d508e783/.github/logo.png
--------------------------------------------------------------------------------
/.github/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rocketseat-education/nlw-unite-html-css-js/b1fb92bdbe7ba412a49e222e458e2a45d508e783/.github/preview.png
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | 
3 |
4 |
5 |
6 | Aplicação desenvolvida no NLW Unite da Rocketseat na trilha HTML+CSS+JS.
7 |
8 |
9 |
10 | Tecnologias |
11 | Projeto |
12 | Licença
13 |
14 |
15 |
16 | 
17 |
18 |
19 |
20 |
21 |
22 | 
23 |
24 |
25 |
26 | ## 🚀 Tecnologias
27 |
28 | Esse projeto foi desenvolvido com as seguintes tecnologias:
29 |
30 | - HTML
31 | - CSS
32 | - JavaScript
33 |
34 | ## Projeto
35 |
36 | Nesse projeto iremos desenvolver a versão simplificada de um sistema de check-in para eventos presenciais.
--------------------------------------------------------------------------------
/index.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | :root {
8 | --border: 1px solid #ffffff1a;
9 | }
10 |
11 | body,
12 | table,
13 | input,
14 | button {
15 | font: 300 16px/140% 'Roboto', sans-serif;
16 | }
17 |
18 | body {
19 | background-color: #121214;
20 | color: #ffffff;
21 | }
22 |
23 | .container {
24 | max-width: 720px;
25 | margin: 0 auto;
26 | padding: 20px 32px;
27 | }
28 |
29 | header {
30 | padding: 20px 0;
31 | }
32 |
33 | form {
34 | border: var(--border);
35 | border-inline: none;
36 | padding: 20px 0;
37 | }
38 |
39 | fieldset {
40 | border: none;
41 | }
42 |
43 | fieldset>div {
44 | display: flex;
45 | gap: 12px;
46 | }
47 |
48 | .input-wrapper {
49 | flex: 1;
50 |
51 | display: flex;
52 | align-items: center;
53 | gap: 12px;
54 |
55 | border: var(--border);
56 | border-radius: 10px;
57 |
58 | padding: 8px 12px;
59 |
60 | font: 400 14px/150% 'Roboto', sans-serif;
61 | color: #C4C4CC;
62 | }
63 |
64 | input {
65 | all: unset;
66 | }
67 |
68 | fieldset legend,
69 | section h2 {
70 | font: 700 16px/140% 'Roboto', sans-serif;
71 | color: #E1E1E6;
72 | padding-bottom: 16px;
73 | }
74 |
75 | fieldset button {
76 | width: fit-content;
77 | border: 0;
78 | background: #F48F56;
79 | border-radius: 10px;
80 | padding: 7px 20px;
81 |
82 | font: 700 12px/24px 'Roboto', sans-serif;
83 | color: #00292E;
84 | }
85 |
86 | fieldset button:hover {
87 | background: #f37c37;
88 | }
89 |
90 | .lista-participantes {
91 | padding: 20px 0;
92 | }
93 |
94 | .lista-participantes > div {
95 | border: var(--border);
96 | border-radius: 8px;
97 | }
98 |
99 | table {
100 | border-collapse: collapse;
101 | }
102 |
103 | table thead {
104 | font-size: 14px;
105 | line-height: 16px;
106 | }
107 |
108 | thead th,
109 | tbody td {
110 | padding: 12px 16px;
111 | }
112 |
113 | tbody td {
114 | border-top: var(--border);
115 | font-size: 13px;
116 | line-height: 15px;
117 | color: #c4c4cc;
118 | }
119 |
120 | tbody td strong {
121 | color: white;
122 | font-size: 14px;
123 | line-height: 16px;
124 | font-weight: 600;
125 | }
126 |
127 | tbody td small {
128 | font-size: 12px;
129 | line-height: 16px;
130 | }
131 |
132 | tbody td button {
133 | all: unset;
134 | color: #9FF9CC;
135 | }
136 |
137 | tbody td button:hover {
138 | text-decoration: underline;
139 | }
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
10 |
11 |
12 |
13 |
16 |
17 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
39 |
40 |
41 |
42 |
95 |
96 |
97 | Participantes
98 |
99 |
100 |
101 |
102 |
103 | | Participante |
104 | Data da inscrição |
105 | Data do check-in |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
115 |
116 |
117 |
84 |
85 |
86 | ${participante.nome}
87 |
88 |
89 |
90 | ${participante.email}
91 |
92 | |
93 | ${dataInscricao} |
94 | ${dataCheckIn} |
95 |
96 | `
97 | }
98 |
99 | const atualizarLista = (participantes) => {
100 | let output = ""
101 | for(let participante of participantes) {
102 | output = output + criarNovoParticipante(participante)
103 | }
104 |
105 | // substituir informação do HTML
106 | document
107 | .querySelector('tbody')
108 | .innerHTML = output
109 | }
110 |
111 | atualizarLista(participantes)
112 |
113 | const adicionarParticipante = (event) => {
114 | event.preventDefault()
115 |
116 | const dadosDoFormulario = new FormData(event.target)
117 |
118 | const participante = {
119 | nome: dadosDoFormulario.get('nome'),
120 | email: dadosDoFormulario.get('email'),
121 | dataInscricao: new Date(),
122 | dataCheckIn: null
123 | }
124 |
125 | // verificar se o particpante já existe
126 | const participanteExiste = participantes.find(
127 | (p) => p.email == participante.email
128 | )
129 |
130 | if(participanteExiste) {
131 | alert('Email já cadastrado!')
132 | return
133 | }
134 |
135 | participantes = [participante, ...participantes]
136 | atualizarLista(participantes)
137 |
138 | // limpar o formulario
139 | event.target.querySelector('[name="nome"]').value = ""
140 | event.target.querySelector('[name="email"]').value = ""
141 | }
142 |
143 | const fazerCheckIn = (event) => {
144 | // confirmar se realmente quer o check-in
145 | const mensagemConfirmacao = 'Tem certeza que deseja fazer o check-in?'
146 |
147 | if(confirm(mensagemConfirmacao) == false) {
148 | return
149 | }
150 |
151 | // encontrar o participante dentro da lista
152 | const participante = participantes.find(
153 | (p) => p.email == event.target.dataset.email
154 | )
155 |
156 | // atualizar o check-in do participante
157 | participante.dataCheckIn = new Date()
158 |
159 | // atualizar a lista de participantes
160 | atualizarLista(participantes)
161 | }
--------------------------------------------------------------------------------
/index.md:
--------------------------------------------------------------------------------
1 | # HTML
2 |
3 | *Hypertext*
4 |
5 | *Markup*
6 | - Tag
7 | - Atributos
8 |
9 | *Language*
10 |
11 |
12 | # CSS
13 | Cascading StyleSheet
14 |
15 | ```css
16 | /* declarações */
17 | body {
18 | background-color: #121214;
19 | color: #ffffff;
20 | }
21 | ```
22 |
23 | # JavaScript
24 | ```js
25 | // variaveis
26 | const mensagem = `Oi, tudo bem?`
27 | // tipos de dados
28 | // number
29 | // string
30 | // funcao
31 | alert(mensagem)
32 |
33 | // Objeto javascript
34 | const participante = {
35 | nome: "Mayk Brito",
36 | email: "mayk@gmail.com",
37 | dataInscricao: new Date(2024, 2, 22, 19, 20),
38 | dataCheckIn: new Date(2024, 2, 25, 22, 00)
39 | }
40 |
41 | // Array
42 | let participantes = [
43 | {
44 | nome: "Mayk Brito",
45 | email: "mayk@gmail.com",
46 | dataInscricao: new Date(2024, 2, 22, 19, 20),
47 | dataCheckIn: new Date(2024, 2, 25, 22, 00)
48 | },
49 | ]
50 |
51 | // estrutura de repetição - loop
52 | for(let participante of participantes) {
53 | // faça alguma coisa aqui
54 | // enquanto tiver participantes nessa lista
55 | }
56 | ```
--------------------------------------------------------------------------------