Adicionar input do destino da viagem e Melhorar input de data

udanielnogueira · Jul 15, 2024 · 290f787 · 290f787
1 parent 74e7f28
commit 290f787
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 32 deletions.
diff --git a/index.html b/index.html
@@ -34,7 +34,7 @@
                         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
+                <input type="text" placeholder="Inserir destino da viagem" required class="input-destino">
             </div>
 
             <div class="fields">
@@ -51,7 +51,7 @@
                             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>
+                    <input type="text" placeholder="Inserir atividade" name="atividade" required>
                 </div>
 
                 <div class="field-wrapper">
@@ -62,9 +62,7 @@
                             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>
+                    <input type="date" name="dia" required></input>
                 </div>
 
                 <div class="field-wrapper">
@@ -76,7 +74,7 @@
                             stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" />
                     </svg>
                     <select name="hora">
-                        <option value="10:30">10:30</option>
+                        <option value="10:30" required>10:30</option>
                     </select>
                 </div>
             </div>

diff --git a/script.js b/script.js
@@ -15,8 +15,8 @@ const formatador = (data) => {
 
 // Object
 const atividade = {
-    nome: "Almoço",
-    data: new Date("2024-07-23 10:00"),
+    nome: "Almoço em restaurante",
+    data: new Date("2024-07-20 13:00"),
     finalizada: false
 }
 
@@ -27,13 +27,13 @@ const atividade = {
 let atividades = [
     atividade, 
     {
-        nome: "Academia",
-        data: new Date("2024-07-24 12:00"),
+        nome: "Visitar um local histórico",
+        data: new Date("2024-07-21 09:00"),
         finalizada: false
     },
     {
-        nome: "Jogar League of Legends",
-        data: new Date("2024-07-29 13:00"),
+        nome: "Conhecer shoppings locais",
+        data: new Date("2024-07-22 13:00"),
         finalizada: false
     }
 ]
@@ -66,7 +66,7 @@ const criarItemDeAtividade = (atividade) => {
                 <span>${atividade.nome}</span>
             </div>
 
-            <time class="short">${formatar.dia.semana.curto}.${formatar.dia.numerico} <br> ${formatar.hora}h</time>
+            <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>`
 }
@@ -115,25 +115,6 @@ const salvarAtividade = (event) => {
     atualizarListaDeAtividades()
 }
 
-const criarDiasSelecao = () => {
-    const dias = [
-        "2024-02-28",
-        "2024-03-01",
-        "2024-03-02"
-    ]
-
-    let diasSelecao = ''
-
-    for(let dia of dias) {
-        const formatar = formatador(dia)
-        const diaFormatado = `${formatar.dia.numerico} de ${formatar.mes}`
-        diasSelecao += `<option value="${dia}">${diaFormatado}</option>`
-    }
-
-    document.querySelector('select[name="dia"]').innerHTML = diasSelecao
-}
-criarDiasSelecao()
-
 const criarHorasSelecao = () => {
     let horasDisponiveis = ''
 

diff --git a/style.css b/style.css
@@ -140,6 +140,10 @@ section .card-bg > div {
     gap: 12px;
 }
 
+.input-destino {
+    font-size: 16px;
+}
+
 @media (width > 1024px) {
     #app {
         display: flex;