feat - add script of the auto complete cep

Alamito · Alamito · commit a0284dfd9a9b · 2022-11-01T16:48:03.000-03:00
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+package-lock.json
+package.json
diff --git a/index.html b/index.html
@@ -8,23 +8,25 @@
     <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=Roboto&display=swap" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
     <title>Auto Complete CEP</title>
 </head>
 <body>
     <section id = "menu">
         <div class="grid-container">
             <label class ="title-CEP">CEP</label>
-            <input class="CEP" type = "text" onkeypress="return onlynumber();" inputmode="numeric" value="" placeholder="Ex: 96789-434">
+            <input class="CEP" type = "text" maxlength = "9" onkeypress="return onlynumber();" value="" placeholder="Ex: 96789-434">
             <label class ="title-State">ESTADO</label>
             <input class="state" type = "text" inputmode="numeric" value="" disabled="">
             <label class ="title-City">CIDADE</label>
             <input class="city" type = "text" inputmode="numeric" value="" disabled="">
             <label class ="title-District">BAIRRO</label>
             <input class="district" type = "text" inputmode="numeric" value="" disabled="">
-            <label class ="title-Adress">ENDEREÇO</label>
-            <input class="adress" type = "text" inputmode="numeric" value="" disabled="">
+            <label class ="title-Address">ENDEREÇO</label>
+            <input class="address" type = "text" inputmode="numeric" value="" disabled="">
         </div>
     </section>
 </body>
 <script src="script.js"></script>
+<script src="script-text.js"></script>
 </html>
diff --git a/script-text.js b/script-text.js
@@ -0,0 +1,10 @@
+function onlynumber(evt) {
+   var theEvent = evt || window.event;
+   var key = theEvent.keyCode || theEvent.which;
+   key = String.fromCharCode(key);
+   var regex = /^[0-9.-]+$/;
+   if(!regex.test(key)) {
+      theEvent.returnValue = false;
+      if(theEvent.preventDefault) theEvent.preventDefault();
+   }
+}
diff --git a/script.js b/script.js
@@ -1,10 +1,33 @@
-function onlynumber(evt) {
-   var theEvent = evt || window.event;
-   var key = theEvent.keyCode || theEvent.which;
-   key = String.fromCharCode(key);
-   var regex = /^[0-9.]+$/;
-   if(!regex.test(key)) {
-      theEvent.returnValue = false;
-      if(theEvent.preventDefault) theEvent.preventDefault();
-   }
-}
+let flagCep = false;
+
+const CEP = document.querySelector('.CEP');
+const state = document.querySelector('.state');
+const city = document.querySelector('.city');
+const district = document.querySelector('.district');
+const address = document.querySelector('.address');
+
+function getCEP() {
+    setInterval(() => {
+        const cep = CEP.value + "";
+        if (cep.length === 5) {
+            CEP.value = CEP.value + "-";
+        } else if (cep.length === 9) {
+            getAndPrintData(cep);
+        } 
+    }, 10)
+}
+
+function getAndPrintData(cep) {
+    const url = `https://cdn.apicep.com/file/apicep/${cep}.json`
+    axios.get(url)
+        .then(response => {
+            const data = response.data;
+            state.value = data.state;
+            city.value = data.city;
+            district.value = data.district;
+            address.value = data.address;
+        })
+        .catch(error => console.error(error))
+} 
+
+getCEP();
diff --git a/style.css b/style.css
@@ -91,7 +91,7 @@ input:disabled {
     text-shadow:#000 1px -1px, #000 -1px 1px, #000 1px 1px, #000 -1px -1px;
 }
 
-.title-Adress {
+.title-Address {
     margin: auto;
     grid-column: 1 / span 2;
     grid-row: 7;
@@ -106,7 +106,7 @@ input:disabled {
     grid-row: 6;
 }
 
-.adress {
+.address {
     grid-column: 1 / span 2;
     grid-row: 8;
 }

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+node_modules`
	`2`	`+package-lock.json`
	`3`	`+package.json`
Original file line number	Diff line number	Diff line change
`@@ -91,7 +91,7 @@ input:disabled {`
`91`	`91`	`text-shadow:#000 1px -1px, #000 -1px 1px, #000 1px 1px, #000 -1px -1px;`
`92`	`92`	`}`
`93`	`93`
`94`		`-.title-Adress {`
	`94`	`+.title-Address {`
`95`	`95`	`margin: auto;`
`96`	`96`	`grid-column: 1 / span 2;`
`97`	`97`	`grid-row: 7;`
`@@ -106,7 +106,7 @@ input:disabled {`
`106`	`106`	`grid-row: 6;`
`107`	`107`	`}`
`108`	`108`
`109`		`-.adress {`
	`109`	`+.address {`
`110`	`110`	`grid-column: 1 / span 2;`
`111`	`111`	`grid-row: 8;`
`112`	`112`	`}`