Skip to content

Commit

Permalink
Aula 3
Browse files Browse the repository at this point in the history
  • Loading branch information
@udanielnogueira
udanielnogueira committed Jul 15, 2024
1 parent 05de184 commit 74e7f28
Show file tree
Hide file tree
Showing 4 changed files with 264 additions and 34 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
# nlw-journey-fullstack

Um Planejador de Viagens desenvolvido em HTML, CSS e JavaScript na NLW Journey da Rocketseat.
Um Planejador de Atividades para Viagens desenvolvido em HTML, CSS e JavaScript na NLW Journey da Rocketseat.
99 changes: 72 additions & 27 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,48 +1,93 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<title>NLW Journey</title>

<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/locale/pt-br.js"></script>
<script>dayjs.locale('pt-br')</script>

<link rel="stylesheet" href="style.css">
<script src="./script.js" defer></script>
</head>

<body>
<form onsubmit="salvarAtividade(event)">

<div>
<input type="text" placeholder="Qual é a atividade?" name="atividade" required>
</div>

<div>
<select name="dia">
<option value="2024-03-01">01 de fevereiro</option>
</select>
</div>
<div id="app">
<form onsubmit="salvarAtividade(event)">

<div>
<select name="hora">
<option value="10:30">10:30</option>
</select>
</div>
<div id="place" class="card-bg">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M16.6668 8.33329C16.6668 13.3333 10.0002 18.3333 10.0002 18.3333C10.0002 18.3333 3.3335 13.3333 3.3335 8.33329C3.3335 6.56518 4.03588 4.86949 5.28612 3.61925C6.53636 2.36901 8.23205 1.66663 10.0002 1.66663C11.7683 1.66663 13.464 2.36901 14.7142 3.61925C15.9645 4.86949 16.6668 6.56518 16.6668 8.33329Z"
stroke="#A1A1AA"
style="stroke:#A1A1AA;stroke:color(display-p3 0.6314 0.6314 0.6667);stroke-opacity:1;"
stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" />
<path
d="M10.0002 10.8333C11.3809 10.8333 12.5002 9.714 12.5002 8.33329C12.5002 6.95258 11.3809 5.83329 10.0002 5.83329C8.61945 5.83329 7.50016 6.95258 7.50016 8.33329C7.50016 9.714 8.61945 10.8333 10.0002 10.8333Z"
stroke="#A1A1AA"
style="stroke:#A1A1AA;stroke:color(display-p3 0.6314 0.6314 0.6667);stroke-opacity:1;"
stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" />
</svg>
Florianópolis, SC
</div>

<button>Salvar atividade</button>
<div class="fields">
<div class="field-wrapper">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M10.4882 2.15502C10.1757 1.84244 9.75183 1.66678 9.30984 1.66669H3.33317C2.89114 1.66669 2.46722 1.84228 2.15466 2.15484C1.8421 2.4674 1.6665 2.89133 1.6665 3.33335V9.31002C1.6666 9.75201 1.84225 10.1759 2.15484 10.4884L9.40817 17.7417C9.78693 18.1181 10.2992 18.3293 10.8332 18.3293C11.3671 18.3293 11.8794 18.1181 12.2582 17.7417L17.7415 12.2584C18.1179 11.8796 18.3291 11.3673 18.3291 10.8334C18.3291 10.2994 18.1179 9.78712 17.7415 9.40835L10.4882 2.15502Z"
stroke="#A1A1AA"
style="stroke:#A1A1AA;stroke:color(display-p3 0.6314 0.6314 0.6667);stroke-opacity:1;"
stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" />
<path
d="M6.24984 6.66669C6.47996 6.66669 6.6665 6.48014 6.6665 6.25002C6.6665 6.0199 6.47996 5.83335 6.24984 5.83335C6.01972 5.83335 5.83317 6.0199 5.83317 6.25002C5.83317 6.48014 6.01972 6.66669 6.24984 6.66669Z"
stroke="#A1A1AA"
style="stroke:#A1A1AA;stroke:color(display-p3 0.6314 0.6314 0.6667);stroke-opacity:1;"
stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<input type="text" placeholder="Qual a atividade?" name="atividade" required>
</div>

</form>
<div class="field-wrapper">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M6.66667 1.66669V5.00002M13.3333 1.66669V5.00002M2.5 8.33335H17.5M4.16667 3.33335H15.8333C16.7538 3.33335 17.5 4.07955 17.5 5.00002V16.6667C17.5 17.5872 16.7538 18.3334 15.8333 18.3334H4.16667C3.24619 18.3334 2.5 17.5872 2.5 16.6667V5.00002C2.5 4.07955 3.24619 3.33335 4.16667 3.33335Z"
stroke="#A1A1AA"
style="stroke:#A1A1AA;stroke:color(display-p3 0.6314 0.6314 0.6667);stroke-opacity:1;"
stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<select name="dia">
<option value="2024-03-01">01 de fevereiro</option>
</select>
</div>

<main>
<h1>Atividades</h1>
<div class="field-wrapper">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M9.99984 5.00002V10L13.3332 11.6667M18.3332 10C18.3332 14.6024 14.6022 18.3334 9.99984 18.3334C5.39746 18.3334 1.6665 14.6024 1.6665 10C1.6665 5.39765 5.39746 1.66669 9.99984 1.66669C14.6022 1.66669 18.3332 5.39765 18.3332 10Z"
stroke="#A1A1AA"
style="stroke:#A1A1AA;stroke:color(display-p3 0.6314 0.6314 0.6667);stroke-opacity:1;"
stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<select name="hora">
<option value="10:30">10:30</option>
</select>
</div>
</div>

<section>
<button>Salvar atividade</button>
</form>

</section>
</main>
<main>
<h1> Atividades </h1>
<section></section>
</main>
</div>
</body>
</html>
23 changes: 18 additions & 5 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,11 @@ let atividades = [
atividade,
{
nome: "Academia",
data: new Date("2024-07-27 12:00"),
data: new Date("2024-07-24 12:00"),
finalizada: false
},
{
nome: "Jogar",
nome: "Jogar League of Legends",
data: new Date("2024-07-29 13:00"),
finalizada: false
}
Expand All @@ -51,10 +51,23 @@ const criarItemDeAtividade = (atividade) => {

const formatar = formatador(atividade.data)

return `<div>
return `<div class="card-bg">
${input}
<span>${atividade.nome}</span>
<time>${formatar.dia.semana.longo}, dia ${formatar.dia.numerico} de ${formatar.mes} às ${formatar.hora}h</time>
<div>
<svg class="active" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.50008 10L9.16675 11.6667L12.5001 8.33335M18.3334 10C18.3334 14.6024 14.6025 18.3334 10.0001 18.3334C5.39771 18.3334 1.66675 14.6024 1.66675 10C1.66675 5.39765 5.39771 1.66669 10.0001 1.66669C14.6025 1.66669 18.3334 5.39765 18.3334 10Z" stroke="#BEF264" style="stroke:#BEF264;stroke:color(display-p3 0.7451 0.9490 0.3922);stroke-opacity:1;" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<svg class="inactive" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.41664 1.81836C9.46249 1.61597 10.5374 1.61597 11.5833 1.81836M11.5833 18.1817C10.5374 18.3841 9.46249 18.3841 8.41664 18.1817M14.6741 3.10086C15.5587 3.70022 16.3197 4.46409 16.9158 5.35086M1.8183 11.5834C1.6159 10.5375 1.6159 9.46255 1.8183 8.4167M16.8991 14.6742C16.2998 15.5588 15.5359 16.3198 14.6491 16.9159M18.1816 8.4167C18.384 9.46255 18.384 10.5375 18.1816 11.5834M3.1008 5.32586C3.70016 4.44131 4.46403 3.68026 5.3508 3.0842M5.3258 16.8992C4.44124 16.2998 3.6802 15.536 3.08414 14.6492" stroke="#A1A1AA" style="stroke:#A1A1AA;stroke:color(display-p3 0.6314 0.6314 0.6667);stroke-opacity:1;" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span>${atividade.nome}</span>
</div>
<time class="short">${formatar.dia.semana.curto}.${formatar.dia.numerico} <br> ${formatar.hora}h</time>
<time class="full">${formatar.dia.semana.longo}, dia ${formatar.dia.numerico} de ${formatar.mes} às ${formatar.hora}h</time>
</div>`
}

Expand Down
174 changes: 173 additions & 1 deletion style.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,176 @@
html {
* {
margin: 0;
padding: 0;
}

html, input, select, button, option {
font-family: 'Inter', sans-serif;
background-color: #09090b;
letter-spacing: -0.02em;
line-height: 120%;
color: #fafafa;
}

/* app */
#app {
padding: 40px 20px;
max-width: 320px;
margin: auto;
}

/* form */
#place {
display: flex;
padding: 22px 16px;
align-items: center;
gap: 8px;

font-size: 14px;
margin-bottom: 32px;
letter-spacing: -0.02em;
}

input, select {
all: unset;
}

input, select, button {
width: 100%;
}

.fields {
display: grid;
gap: 8px;
}

.field-wrapper {
background-color: #09090b;
border: 1px solid #27272a;
border-radius: 8px;
padding: 18px;

display: flex;
align-items: center;
gap: 10px;
}

.field-wrapper:focus-within {
outline: solid 2px yellowgreen;
}

button {
border: none;
margin-top: 20px;
border-radius: 8px;
padding: 12px 20px;
background-color: #aff445;

font-size: 16px;
font-weight: 500;
letter-spacing: -0.02em;

color: #132f00;
cursor: pointer;
}

.card-bg {
background: #18181B;

box-shadow:
0px 8px 8px rgba(0, 0, 0, 0.1),
0px 4px 4px rgba(0, 0, 0, 0.1),
0px 2px 2px rgba(0, 0, 0, 0.1),
0px 0px 0px 1px rgba(0, 0, 0, 0.1),
inset 0px 0px 0px 1px rgba(255, 255, 255, 0.03), inset 0px 1px 0px rgba(255, 255, 255, 0.03);

border-radius: 12px;
}

main {
margin-top: 32px;
}

h1 {
margin-bottom: 24px;
text-align: center;
font-weight: 600;
font-size: 24px;
}

section {
display: grid;
gap: 10px;
}

section input[type="checkbox"] {
position: absolute;
inset: 0;
}

section .card-bg {
position: relative;
padding: 10px 16px;

display: flex;
align-items: center;
justify-content: space-between;
}

section .card-bg:has(:checked) .active, section .card-bg .inactive {
display: block;
}

section .card-bg:has(:checked) .inactive, section .card-bg .active {
display: none;
}

time {
font-size: 14px;
color: #A1A1AB;
text-align: right;
}

time.full {
display: none;
}

section .card-bg > div {
display: flex;
align-items: center;
gap: 12px;
}

@media (width > 1024px) {
#app {
display: flex;
max-width: 960px;
gap: 32px;
}

main {
margin-top: 0;
flex: 1;
}

h1 {
text-align: left;
}

time.full {
display: block;
}

time.short {
display: none;
}
}

section .card-bg {
animation: appear 1.5s;
}

@keyframes appear {
from {
opacity: 0;
}
}

0 comments on commit 74e7f28

Please sign in to comment.