♻️ refactor: Refatora código

udanielnogueira · Sep 23, 2024 · b946c1d · b946c1d
1 parent 8429544
commit b946c1d
Show file tree

Hide file tree

Showing 7 changed files with 96 additions and 99 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 <div align="center">
-
-  <h1>👨🏻‍🚀 <br> nlw-journey-fullstack</h1>
+  <img src="./assets/img/nlw-journey.png">
+  <h1>NLW Journey</h1>
   <p>Um Planejador de Atividades para Viagens desenvolvido em HTML, CSS e JavaScript na NLW Journey da Rocketseat.</p>
   <img src="https://img.shields.io/github/languages/count/udanielnogueira/nlw-journey-fullstack">
   <img src="https://img.shields.io/github/languages/top/udanielnogueira/nlw-journey-fullstack">
@@ -28,11 +28,11 @@ O Plann.er é uma aplicação responsiva que permite adicionar e concluir ativid
 
 Desktop
 
-![Desktop Preview](desktop-screenshot.png "Desktop Preview")
+![Desktop Preview](./assets/img/desktop-screenshot.png "Desktop Preview")
 
 Mobile
 
-<img src="mobile-screenshot.png">
+<img src="./assets/img/mobile-screenshot.png">
 
 <h2 id="built-with">Tecnologias</h2>
 
@@ -58,20 +58,24 @@ Acesse o Plann.er no link abaixo
 <h2 id="highlights">Destaques</h2>
 
 Uso da biblioteca Day.js para a formatação e exibição de datas.
+
 ```html
 <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>
+<script>
+  dayjs.locale("pt-br");
+</script>
 ```
 
 <br>
 
 Animação fade-in ao adicionar uma nova atividade.
+
 ```css
 section .card-bg {
   animation: appear 1.5s;
 }
-  
+
 @keyframes appear {
   from {
     opacity: 0;
@@ -82,39 +86,37 @@ section .card-bg {
 <br>
 
 Efeito de sombra mais elaborado.
+
 ```css
 .card-bg {
   border-radius: 12px;
-  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);
+  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);
 }
 ```
 
 <br>
 
 Atualizando lista de atividades.
+
 ```js
 const atualizarListaDeAtividades = () => {
-  const section = document.querySelector('section')
-  section.innerHTML = ''
+  const section = document.querySelector("section");
+  section.innerHTML = "";
 
-  if(atividades.length == 0) {
-    section.innerHTML = `<p>Nenhuma atividade cadastrada</p>`
-    return
+  if (atividades.length == 0) {
+    section.innerHTML = `<p>Nenhuma atividade cadastrada</p>`;
+    return;
   }
 
-  for(let atividade of atividades) {
-    section.innerHTML = section.innerHTML + criarItemDeAtividade(atividade)
+  for (let atividade of atividades) {
+    section.innerHTML = section.innerHTML + criarItemDeAtividade(atividade);
   }
-}
-atualizarListaDeAtividades()
+};
+atualizarListaDeAtividades();
 ```
 
 <h2 id="contact">Meu contato</h2>

diff --git a/style.css → assets/css/style.css b/style.css → assets/css/style.css
diff --git a/desktop-screenshot.png → assets/img/desktop-screenshot.png b/desktop-screenshot.png → assets/img/desktop-screenshot.png
diff --git a/mobile-screenshot.png → assets/img/mobile-screenshot.png b/mobile-screenshot.png → assets/img/mobile-screenshot.png
diff --git a/assets/img/nlw-journey.png b/assets/img/nlw-journey.png
diff --git a/script.js → assets/script/script.js b/script.js → assets/script/script.js
diff --git a/index.html b/index.html
@@ -1,91 +1,86 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>NLW Journey</title>
+  <meta charset="UTF-8">
+  <title>NLW Journey</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <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">
+  <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>
+  <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>
+  <script src="./assets/script/script.js" defer></script>
+  <link rel="stylesheet" href="./assets/css/style.css">
 </head>
 
 <body>
-    <div id="app">
-        <form onsubmit="salvarAtividade(event)">
+  <div id="app">
+    <form onsubmit="salvarAtividade(event)">
 
-            <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>
-                <input type="text" placeholder="Inserir destino da viagem" required class="input-destino">
-            </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>
+        <input type="text" placeholder="Inserir destino da viagem" required class="input-destino">
+      </div>
 
-            <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="Inserir atividade" name="atividade" required>
-                </div>
+      <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="Inserir atividade" name="atividade" required>
+        </div>
 
-                <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>
-                    <input type="date" name="dia" required></input>
-                </div>
+        <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>
+          <input type="date" name="dia" required></input>
+        </div>
 
-                <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" required>10:30</option>
-                    </select>
-                </div>
-            </div>
+        <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" required>10:30</option>
+          </select>
+        </div>
+      </div>
 
-            <button>Salvar atividade</button>
-        </form>
+      <button>Salvar atividade</button>
+    </form>
 
-        <main>
-            <h1> Atividades </h1>
-            <section></section>
-        </main>
-    </div>
+    <main>
+      <h1> Atividades </h1>
+      <section></section>
+    </main>
+  </div>
 </body>
-</html>
+</html>