Creating validation javascript in the form

index.html

@@ -7,6 +7,7 @@
     <link rel="stylesheet/less" type="text/css" href="styles/base.less"/>
   
     <script src="scripts/less.min.js" type="text/javascript"></script>
+    <script src="scripts/index.js" defer></script>
     
   </head>
 
@@ -19,7 +20,7 @@
     <main>
 
     <h2 class="titulo">Requisitos de hardware</h2>  
-    <table cellspacing="5" cellpadding="10" border="0">
+    <table cellspacing="5" cellpadding="10">
       <thead>
         <tr>
           <th>Ano</th>
@@ -45,12 +46,12 @@
     </table>
 
     <!-- action="salvar.html" -->
-    <form class="form" >
+    <form class="form" method="get">
       <h2 class="form__titulo">Registre seu interesse</h2>
 
       <div class="form__infor">
         <label class="form__infor__label">Nome:</label>
-        <input type="text" name="nome" class="form__infor__input"/>
+        <input id="name" type="text" name="nome" class="form__infor__input"/>
       </div>
       <div class="form__infor">
         <label class="form__infor__label"  for="campo_sobrenome">
@@ -83,6 +84,6 @@
       <span>Todos os direitos reservados</span>
     </footer>
 
-    <script src="scripts/index.js"></script>
+    
   </body>
 </html>

scripts/index.js

@@ -1,6 +1,44 @@
-let seleciona = document.getElementById("btn_enviar");
-console.log(seleciona);
+const nome = document.querySelector("#nome");
+const sobrenome = document.querySelector("#campo_sobrenome");
+const email = document.querySelector("#campo_email");
+const checknews = document.querySelector("#check").checked;
+const btnEnviar = document.querySelector("#btn_enviar");
 
+let interesse = [];
 
 
+function enviaDados() {
+  if (nome.value == "") {
+    alert('nome não preenchido')
+    nome.focus()
+    return
+  }
 
+  if (sobrenome.value == "") {
+    alert('sobrenome não preenchido')
+    sobrenome.focus()
+    return
+  }
+  if (email.value == "") {
+    alert('email não preenchido')
+    email.focus()
+    return
+  }
+  
+
+    interesse.push(nome.value)
+    interesse.push(sobrenome.value)
+    interesse.push(email.value)
+    alert(interesse)
+  
+  
+
+  /*if(checknews.value != ''){
+        alert('email não preenchido')
+        email.focus()
+        return
+    }*/
+
+}
+
+btnEnviar.addEventListener("click", enviaDados)

styles/base.less

@@ -1,9 +1,10 @@
 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
+@import "./config.less";
 
 html {
     body {
         margin: 0;
-        background:#e6e6e6; 
+        background:@bgColorBody; 
       
     }
 
@@ -16,7 +17,7 @@ html {
 
 body {
     header {
-        background-color: #EAD945;
+        background-color: @bgColorHeader;
         position: fixed;
         padding: 24px 40px;
         top: 0;
@@ -47,7 +48,7 @@ body {
         table {
             margin: auto;
             width: 100%;
-            background: #edce73;
+            background: @bgColorTable;
             border-radius: 12px;
             padding-top: 20px;
             padding-bottom: 20px;
@@ -57,7 +58,7 @@ body {
         //classe do form  
         .form {
             margin-top:50px;
-            border: 1px solid #007bff5e;
+            border: @defaultBorderForm;
 
                 &__infor {
                     margin-top: 10px;
@@ -67,7 +68,7 @@ body {
                     //label do checkbox
                     label:last-child {
                         font-weight:600;
-                        color:red;
+                        color:@colorLabelCheck;
                     }
                     //input do checkbox
                     
@@ -84,14 +85,14 @@ body {
                     &__input {
                         width: 289px;
                         height: 30px;
-                        background: whitesmoke;
+                        background: @bgColorInput;
                         border:none;
                         margin-top: 3px;
                     }
                 }
 
                 button {
-                    background: white;
+                    background: @bgColorButton;
                     font-size: 19px;
                     letter-spacing: 2.2px;
                     margin-top: 45px;
@@ -106,17 +107,17 @@ body {
         margin-top: 20%;
         padding:10% 10%;
         text-align: center;   
-        background:chocolate;
+        background:@bgColorFooter;
       
         p, span {
-            color:#ffd045;
+            color:@colorFooterP;
             font-size: 10px;
 
         }
 
         span {
             font-weight: bold;
-            color:#ffde7c;
+            color:@colorFooterSp;
         }
     }
 }

styles/config.less

@@ -0,0 +1,18 @@
+//colors
+@bgColorBody: #e6e6e6;
+@bgColorHeader:#EAD945;
+@bgColorFooter: chocolate;
+@bgColorTable:#edce73;
+
+@colorLabelCheck:red;
+@bgColorInput:whitesmoke;
+@bgColorButton:white;
+
+//text-fonts
+@colorFooterP:#ffd045;
+@colorFooterSp:#ffde7c;
+
+//styles-border
+@widthBorder: 1px;
+@colorBorder:#007bff5e;
+@defaultBorderForm: @widthBorder solid @colorBorder;