Introdução aos conceitos de Less e Logica de Programação com JavaScript

animals/css/styles.less

@@ -0,0 +1,195 @@
+@import url("./variables.css");
+
+*{padding: 0; margin: 0; box-sizing: border-box; font-family: 'Roboto', sans-serif;}
+
+body, html{
+    width: 100%;
+    height: 100%;
+}
+
+a{
+    text-decoration: none;
+}
+
+header{
+    min-height: 5vh;
+    width: 100%;
+    background-color: var(--primary-color);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.5em 1.5em;
+    border-bottom: 2px solid #000;
+}
+
+
+
+
+/*
+header > .header__logo > a > img {
+    width: 50px;
+}
+
+
+header > .header__menu > ul{
+    display: flex;
+    gap: 1em;
+}
+
+header > .header__menu > ul > li{
+    list-style: none;
+}
+
+header > .header__menu > ul > li > a{
+    list-style: none;
+    color: #FFF;
+    font-weight: bold;
+}
+*/
+
+
+header {
+  
+  > .header__logo > a > img { width: 50px; }
+
+  > .header__menu > ul{
+      
+      display: flex;
+      gap: 1em;
+      > li { 
+        list-style:none;
+        a {
+          color: #FFF;
+          font-weight: bold;
+        } 
+      } 
+
+    }
+
+  }
+
+
+
+  main{
+    min-height: 87vh;
+    background-color: #CCC;
+  }
+
+  .main_content{
+    width: 805px;
+    padding: 1em;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .container{
+    width: 100%;
+    min-height: 87vh;
+    display: flex;
+    padding: 2em;
+    align-items: center;
+    flex-direction: column;
+  }
+
+  footer{
+    min-height: 7vh;
+    background-color: var(--primary-color);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-top: 2px solid #000;
+  }
+
+  .main__table {
+    border-collapse: collapse;
+    width: 100%;
+    max-width: 800px;
+    margin: 0 auto;
+    font-family: Arial, sans-serif;
+    font-size: 14px;
+    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+    font-weight: bold;
+    font-size: 1em;
+  }
+
+  .main__table > thead {
+    background-color: #CCC;
+    border: 2px solid #000;
+    text-align: left;
+    padding: 1em;
+  }
+
+  .main__table > thead > tr th {
+    padding: 1em;
+    border: 2px solid #000;
+  }
+
+  .main__table > th, td {
+    padding: 10px;
+    text-align: left;
+    border: 2px solid #000;
+  }
+
+  .main__options{
+    width: 100%;
+    display: flex;
+    justify-content: flex-start;
+  }
+
+  .btn{
+    background-color: none;
+    color: var(--primary-color);
+    border: 2px solid var(--primary-color);
+    margin-bottom: 0.5em;
+    width: fit-content;
+    text-align: center;
+    padding: 0.3em 0.4em;
+    font-weight: bold;
+    border-radius: 5px;
+    font-size: 1em;
+    cursor: pointer;
+  }
+
+  .btn:hover{
+    color: #FFF;
+    background-color: var(--primary-color);
+    transition: 0.3s;
+  }
+
+  .form-control{
+    width: 550px;
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
+    padding: 1em;
+    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+    border-radius: 5px;
+  }
+
+  .form-control > .form-control__input-group{
+    display: flex;
+    flex-direction: column;
+    gap: 0.3em;
+  }
+
+  .form-control > .form-control__input-group > input{
+    padding: 0.4em 0.4em;
+    font-size: 1em;
+    border: none;
+    border-radius: 5px;
+  }
+
+  .form-control > .form-control__input-group > label{
+    font-weight: bold;
+  }
+
+  .main__iframe{
+    width: 550px;
+    border: 2px solid #000;
+  }
+
+  .title > h1 > a{
+    color: var(--primary-color);
+    text-decoration: underline;
+  }

animals/index.html

@@ -11,7 +11,8 @@
     <link
         href="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"
         rel="stylesheet">
-    <link rel="stylesheet" href="./css/global.css">
+    <link rel="stylesheet/less" href="./css/styles.less">
+    <script src="./scripts/less.min.js" type="text/javascript"></script>
 
     <title>Document</title>
 </head>
@@ -50,4 +51,4 @@
 
 </body>
 
-</html>
+</html>

animals/pages/animals.html

@@ -43,6 +43,7 @@
 
         <div class="main__options">
           <a href="./new-animal.html" class="btn">NEW</a>
+          <button type="button" id ="btnSum" class="btn" > Somario  </button>
         </div>
 
         <table class="main__table">
@@ -52,7 +53,7 @@
               <th scope="col">Quantidade</th>
             </tr>
           </thead>
-          <tbody>
+          <tbody id="tbl"  >
             <tr>
               <td>Onça-pintada</td>
               <td>100</td>
@@ -89,6 +90,36 @@
     <span>Animals 2023 &copf;</span>
   </footer>
 
+
+    <script>
+
+
+      document.querySelector('#btnSum').addEventListener('click',e=>{
+
+                const tbody = document.getElementById('tbl');
+
+        const values = tbody.querySelectorAll('td');
+
+        let soma = 0;
+
+        for(let i = 0; i < values.length ; i++){
+
+          if(i%2!=0){
+             // console.log(values[i].textContent);
+              
+              soma += Number(values[i].textContent);
+          }
+
+        }
+          console.log(soma);
+        alert( `Somatorio: ${soma}`);
+
+      });
+        
+       
+    </script>
+
+
 </body>
 
-</html>
+</html>

animals/pages/new-animal.html

@@ -45,12 +45,12 @@
                 <form action="./processing.html" target="res-iframe" class="form-control">
                     <div class="form-control__input-group">
                         <label for="name">Nome:</label>
-                        <input type="text">
+                        <input type="text" id="inputName"  >
                     </div>
 
                     <div class="form-control__input-group">
                         <label for="quantity">Quantidade:</label>
-                        <input type="number">
+                        <input type="number" id="inputQuant" >
                     </div>
 
                     <div class="form-control__input-group">
@@ -61,7 +61,7 @@
                         <label for="estate">Estado:</label>
                         <input type="text">
                     </div>
-                    <input type="submit" value="Cadastrar" class="btn">
+                    <input type="submit" value="Cadastrar" class="btn" id='btnSub'  >
                 </form>
 
             </div>
@@ -75,6 +75,43 @@
         <span>Animals 2023 &copf;</span>
     </footer>
 
+
+    <script>
+
+      const inputName = document.querySelector('#inputName');
+
+      const inputQuant = document.querySelector('#inputQuant');
+
+     const  btnSub = document.querySelector('#btnSub');
+
+
+      btnSub.addEventListener("click", e=>{
+
+       let  value1 = inputName.value;
+       let value2 = inputQuant.value;
+
+
+        alert( `
+            Soma: ${ Number( value1) + Number( value2)} 
+            
+            Multiplicação: ${ Number( value1) * Number( value2)}
+
+            Divisão: ${ Number( value1) / Number( value2)}
+
+            Subtração: ${ Number( value1) - Number( value2)}
+
+          ` );
+
+      });
+
+
+
+        
+
+
+    </script>
+
+
 </body>
 
-</html>
+</html>