feat: criado o botao de adicionar projetos

bugelseif · Oct 31, 2022 · 6e677a0 · 6e677a0
1 parent 46cb68a
commit 6e677a0
Show file tree

Hide file tree

Showing 3 changed files with 214 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -20,9 +20,12 @@
     />
 
     <title>Lista de projetos</title>
+
+    <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous"> -->
   </head>
 
   <body>
+
     <div class="shape__wrapper">
       <div class="shape__divider--top">
         <svg
@@ -39,6 +42,12 @@
       </div>
     </div>
     <a href="https://github.com/bugelseif/projetos-iniciantes" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#a07cda; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
+
+
+    <button id="Add-Project" class="button">
+      <span>Adicionar</span>
+      <i class="fa-solid fa-plus"></i>
+    </button>
     <div class="container">
       <header class="titulo">
 
@@ -53,9 +62,7 @@ <h1 class="header__titulo">
 
       </main>
     </div>
-        </section>
 
-    </main>
     <div class="shape__wrapper">
       <div class="shape__divider--bottom">
         <svg
@@ -88,6 +95,31 @@ <h1 class="header__titulo">
       </div>
     </footer>
 
+    <dialog class="modal" tabindex="-1">
+      <section class="modal-content">
+        <header class="modal-header">
+          <h5 class="modal-title">Adicionar projeto</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
+            <i class="fa-sharp fa-solid fa-xmark"></i>
+          </button>
+        </header>
+        <form method="dialog" class="modal-body">
+          <label for="title">titulo</label>
+          <input id="title" type="text" placeholder="Projeto X">
+          <label for="description">descrição</label>
+          <textarea id="description" type="text"></textarea>
+          <label for="link">URL do projeto</label>
+          <input id="link" type="text" placeholder="http://projeto.com">
+        </form>
+      </section>
+      <menu>
+        <button id="cancel" class="btn btn-secondary" type="reset">Cancel</button>
+        <button type="submit" class="btn btn-primary" id="confirm-add">Confirm</button>
+      </menu>
+
+    </dialog>
+
+
     <script src="script.js"></script>
   </body>
 

diff --git a/script.js b/script.js
@@ -93,9 +93,14 @@ const projects = [
     },
 ];
 
-// variavel da seção que leva todos os projetos
+showProjects()
+
+function showProjects(){
+    // variavel da seção que leva todos os projetos
 const section_ProjectsCards = document.querySelector('.projects__cards');
 
+section_ProjectsCards.childNodes.length = 0
+
 // aqui percoremos o todo o array e para cada objeto la de dentro cuamos uma seção card e colocamos todos os dados nela
 // apos criar e configurar os dados, colocamos a seção card dentro da seção de projetos
 projects.map((project) => {
@@ -121,4 +126,50 @@ projects.map((project) => {
 
     section_ProjectsCards.appendChild(section_Card)
 
-})
+})
+}
+
+const Add_Project = document.getElementById('Add-Project');
+const Dialog = document.querySelector('.modal');
+const Button_Cancel = document.getElementById('cancel');
+const Button_Close = document.querySelector('.btn-close');
+const Button_Submit = document.getElementById('confirm-add');
+
+Add_Project.addEventListener('click', () => {
+    ToggleDialog(Dialog);
+})
+
+Button_Close.addEventListener('click', () => {
+    ToggleDialog(Dialog);
+})
+
+Button_Cancel.addEventListener('click', () => {
+    ToggleDialog(Dialog);
+})
+
+Button_Submit.addEventListener('click', () => {
+    const Input_Title = document.getElementById('title');
+    const Input_Description = document.getElementById('description');
+    const Input_URL = document.getElementById('link');
+
+    const data = {
+        titulo: Input_Title.value,
+        descricao: Input_Description.value,
+        url: Input_URL.value,
+    }
+
+    projects.push(data);
+
+    showProjects()
+    ToggleDialog(Dialog);
+
+}) 
+
+
+function ToggleDialog(element) {
+    if(element.open){
+        element.close();
+    } else {
+        element.showModal();
+    }
+}
diff --git a/style.css b/style.css
@@ -75,13 +75,57 @@ main {
   fill: #f4effc;
 }
 
+.button {
+  position: fixed;
+  bottom: 50px;
+  right: 30px;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background-color: #8b76e9;
+  color: #fff;
+  font-size: 16px;
+  border: none;
+  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
+  z-index: 100;
+  cursor: pointer;
+
+  transition: 0.2s;
+
+  overflow: hidden;
+}
+
+.button span {
+  display: none;
+  opacity: 0;
+  transition: 2s;
+}
+
+.button:hover{
+  width: 150px;
+  border-radius: 20px;
+  padding: 5px;
+
+  display: flex; 
+  gap: 12px;
+  align-items: center;
+  justify-content: center;
+
+}
+
+.button:hover span {
+  display: inline;
+  opacity: 1;
+}
+
 /* ====== Container ====== */
 .container {
   width: 100%;
   max-width: 90%;
   margin: 0 auto;
 }
 
+
 /* ====== Header ====== */
 .titulo {
   position: relative;
@@ -102,6 +146,7 @@ main {
   font-size: clamp(1.5rem, 1.2692rem + 0.641vw, 2rem);
 }
 
+
 /* ====== Projetos Cards ====== */
 .projects__cards {
   width: 100%;
@@ -242,6 +287,88 @@ footer {
   fill: #f4effc;
 }
 
+.modal {
+  position: fixed;
+  top: 25%;
+  left: 20%;
+  width: 600px;
+  background-color: #fff;
+  border: none;
+  border-radius: 8px;
+  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
+}
+
+.modal-header {
+  width: 100%;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 18px;
+}
+
+.modal-header .modal-title {
+  font-size: 18px;
+  font-weight: bold;
+
+}
+
+.btn-close {
+  background-color: transparent;
+  border: none;
+  width: 20px;
+  height: 20px;
+  font-size: 16px;
+  cursor: pointer;
+  transition: 0.5s;
+}
+
+.btn-close:hover {
+  transform: scale(1.2);
+}
+
+.modal-body {
+  padding: 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  font-size: 16px;
+}
+
+.modal-body input, .modal-body textarea {
+  width: 100%;
+  padding: 16px 12px;
+  border: none;
+  outline: none;
+  background-color: #ece4f9;
+  border-radius: 4px;
+  margin-bottom: 5px;
+}
+
+menu {
+  padding: 18px;
+  display: felx;
+  gap: 1rem;
+}
+
+.btn {
+  padding: 10px 18px;
+  border: none;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: 0.6s;
+}
+
+.btn:hover {
+  filter: brightness(0.9);
+}
+
+
+.btn.btn-primary {
+  background: blue;
+  color: #fff;
+}
+
 @media (max-width: 600px) {
   .card {
     margin: 0.625rem;