Projeto Completo

MarcosDantasdeSantana · Apr 6, 2024 · 656cb75 · 656cb75
commit 656cb75
Show file tree

Hide file tree

Showing 3 changed files with 350 additions and 0 deletions.
diff --git a/index.css b/index.css
@@ -0,0 +1,128 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+:root {
+  --border: 
+}
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  background-color: #00292E;
+  color: white;
+
+  font: 16px/140% "Roboto", sans-serif;
+}
+
+hr {
+  color: #ffffff34;
+  margin: 20px 0px;
+}
+
+header {
+  padding: 10px;
+
+  img {
+    padding: 4px;
+    background-color: #F48F56;
+    border-radius: 10px
+  }
+}
+
+form fieldset {
+  border: transparent;
+
+  > div {
+    display: flex;
+    gap: 10px;
+  }
+
+  .wrapper {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    padding: 0px 10px;
+
+    border: 1px solid #ffffff34;
+    border-radius: 10px;
+
+    font: 400 14px/150% 'Roboto', sans-serif;
+
+    img {
+      margin-left: 5px;
+      width: 20px;
+      height: 20px;
+      color: #9FF9CC
+    }
+  }
+
+  input {
+    all: unset;
+
+
+    color: white;
+    background-color: #00292E;
+  }
+
+  button {
+    all: unset;
+
+    width: fit-content;
+    height: 40px;
+    padding: 7px 10px;
+    background-color: #F48F56;
+    color: #00292E;
+
+    border-color: transparent;
+    border-radius: 10px;
+
+    text-transform: uppercase;
+    text-align: center;
+    font-weight: bold;
+  }
+}
+
+table {
+  border: 1px solid #c4c4cc1a;
+  border-radius: 30px;
+  border-collapse: collapse;
+
+  tbody td {
+    border-top: 1px solid #c4c4cc1a;
+  }
+
+  th, td {
+    padding: 10px;
+    text-align: start;
+  }
+
+  small {
+    color: #c4c4cc;
+  }
+  td:nth-child(2n), td:nth-child(3n){
+    color: #c4c4cc;
+  }
+
+  button {
+    all: unset;
+
+    color: #9FF9CC;
+  }
+  button:hover {
+    cursor: pointer;
+    text-decoration: underline;
+  }
+}
+
+.title {
+  font: 700 16px/140% 'Roboto', sans-serif;
+  padding-bottom: 16px;
+  color: #E1E1E6;
+}
+.container {
+  max-width: 700px;
+  margin: 0px auto;
+  padding: 20px 32px;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+
+  <head>
+    <script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/relativeTime.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/dayjs@1/locale/pt-br.js"></script>
+    <script>
+      dayjs.locale('pt-br')
+    </script>
+    <script>
+      dayjs.extend(window.dayjs_plugin_relativeTime)
+    </script>
+    <script type="text/javascript" src="./index.js" defer=""></script>
+    <link rel="stylesheet" href="./index.css">
+  </head>
+
+  <body>
+    <div class="container">
+      <header>
+        <img width="32" height="32" src="https://img.icons8.com/tiny-glyph/16/code.png" alt="code">
+      </header>
+
+      <hr>
+
+      <form onsubmit="addParticipant(event)">
+        <fieldset>
+          <legend class="title">Inscrição</legend>
+
+          <div>
+            <div class="wrapper">
+              <img width="60" height="60" src="https://img.icons8.com/ios-glyphs/60/person-male.png" alt="person-male">
+              <input type="text" name="name" placeholder="Nome Completo" required="">
+            </div>
+            <div class="wrapper">
+              <img width="60" height="60" src="https://img.icons8.com/ios-glyphs/60/email.png" alt="email">
+              <input type="email" name="email" placeholder="[email protected]" required="">
+            </div>
+            <button type="submit">
+              Realizar Inscrição
+            </button>
+          </div>
+        </fieldset>
+      </form>
+
+      <hr>
+      <section>
+        <h1 class="title">Participantes</h1>
+
+        <div>
+          <table width="100%">
+            <thead>
+              <tr>
+                <th>Participante</th>
+                <th>Data de Inscrição</th>
+                <th>Data do Check-in</th>
+              </tr>
+            </thead>
+            <tbody>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </div>
+  </body>
+
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,155 @@
+let participants = [
+  {
+    nome: "Marcos",
+    email: "[email protected]",
+    dataInscricao: new Date(2024, 01, 01, 21, 34),
+    dataCheckIn: new Date(2024, 02, 01, 21, 34)
+  },
+  {
+    nome: "Hiury",
+    email: "[email protected]",
+    dataInscricao: new Date(2024, 01, 28, 16, 00),
+    dataCheckIn: new Date(2024, 03, 29, 21, 34)
+  },
+  {
+    nome: "Felipe",
+    email: "[email protected]",
+    dataInscricao: new Date(2024, 03, 30, 10, 15),
+    dataCheckIn: new Date(2024, 02, 30, 10, 15)
+  },
+  {
+    nome: "João",
+    email: "[email protected]",
+    dataInscricao: new Date(2024, 01, 29, 14, 20),
+    dataCheckIn: new Date(2024, 02, 30, 16, 45)
+  },
+  {
+    nome: "Maria",
+    email: "[email protected]",
+    dataInscricao: new Date(2024, 03, 28, 18, 30),
+    dataCheckIn: new Date(2024, 01, 29, 20, 00)
+  },
+  {
+    nome: "Pedro",
+    email: "[email protected]",
+    dataInscricao: new Date(2024, 01, 29, 22, 05),
+    dataCheckIn: new Date(2024, 02, 30, 12, 10)
+  },
+  {
+    nome: "Sofia",
+    email: "[email protected]",
+    dataInscricao: new Date(2024, 04, 30, 08, 45),
+    dataCheckIn: new Date(2024, 01, 30, 08, 45)
+  },
+  {
+    nome: "Lucas",
+    email: "[email protected]",
+    dataInscricao: new Date(2024, 02, 31, 09, 20),
+    dataCheckIn: new Date(2024, 03, 31, 09, 20)
+  },
+  {
+    nome: "Carla",
+    email: "[email protected]",
+    dataInscricao: new Date(2024, 01, 29, 17, 55),
+    dataCheckIn: new Date(2024, 05, 30, 19, 30)
+  },
+  {
+    nome: "Rafael",
+    email: "[email protected]",
+    dataInscricao: new Date(2024, 02, 30, 14, 10),
+    dataCheckIn: new Date(2024, 01, 31, 18, 55)
+  },
+  {
+    nome: "Mariana",
+    email: "[email protected]",
+    dataInscricao: new Date(2024, 02, 31, 11, 40),
+    dataCheckIn: new Date(2024, 05, 31, 11, 40)
+  }
+];
+
+const createParticipant = (participant) => {
+  const dataInscricao = dayjs(Date.now()).to(participant.dataInscricao);
+  let dataCheckIn = dayjs(Date.now()).to(participant.dataCheckIn);
+
+  if (participant.dataCheckIn==null) {
+    dataCheckIn = `
+    <button 
+      data-email="${participant.email}"
+      onclick="doCheckIn(event)"
+      class="check-in"
+    >
+      Confirmar Check-In
+    </button>
+    `
+  }
+
+
+  return `
+  <tr>
+    <td>
+      <strong>${participant.nome}</strong>
+      <br>
+      <small>${participant.email}</small>
+    </td>
+    <td>${dataInscricao}</td>
+    <td>${dataCheckIn}</td>
+  </tr>
+  `
+}
+
+const updateParticipants = (participants) => {
+  let out = ""
+
+  for(let person of participants) {
+    out += createParticipant(person)
+  }
+
+  document.querySelector("tbody").
+    innerHTML = out
+}
+updateParticipants(participants)
+
+const addParticipant = (event) => {
+  event.preventDefault()
+
+  const formData = new FormData(event.target)
+  const participant = {
+    nome: formData.get("name"),
+    email: formData.get("email"),
+    dataInscricao: new Date(),
+    dataCheckIn: null
+  }
+
+  // Existencia de participante
+  const participantExist = participants.find(
+    (p) => p.email == formData.get("email")
+  )
+
+  if (participantExist) {
+    alert("Email já Existe!")
+    return
+  }
+
+  participants = [participant, ...participants]
+  updateParticipants(participants)
+
+  // Limpeza
+  event.target.querySelector('[name="name"]').value = ""
+  event.target.querySelector('[name="email"]').value = ""
+}
+
+const doCheckIn = (event) => {
+  if (!confirm("Tem certeza que quer fazer o check-in?")){
+    return
+  }
+  const participant = participants.find((p) => { 
+    return p.email == event.target.dataset.email
+  })
+
+  participant.dataCheckIn = new Date()
+
+  updateParticipants(participants)
+}
+
+
+updateParticipants(participants)