Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FRANCIELI3000 #354

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

FRANCIELI3000 #354

wants to merge 1 commit into from

Conversation

FRANCIELI3000
Copy link

index.html

   <title>Hello, World</title>
</head>
<body style="height:100vh;display:flex;align-items:
center;justify-content: center;" class="bg-dark
text-light">
 <div style="width:60%">
    <label for="cep_input" class="form-label">cep</label>
    <div class="mb-3 d-flex">
        <input type= "text" class="form-control
        mr-3" style="margin-right:10px"
        id="cep_input" placeholder="Digite seu cep">
        <button class="btn btn-outline-light"
        id="search_btn">Pesquisar</button>
        </div>
    <div style="height:50px">
        <p id="address">aqui aparecerá o endereço</p>
     </div>
   </div>

   <script src="https://cdn.jsdelivr.net/npm/
   [email protected]/dist/js/bootstrap.bundle.min.js"
   integrity="sha384-mrcw6ZMFY1zcLA8N1
   +NTUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXhn/tWtIaxVXM"
   crossorigin="anonymous"></script>

   <script src="index.js"></script>
   </body>
</html>

server.js
let cep_input = document.querySelector('#cep_input')
let search_btn = document.querySelector('#search_btn')
let address= document.querySelector('#address')

search_btn.addEventListener('click', () => {
let cep = cep_input.value

//requisição
fetch('https://viacep.com.br/ws/${cep}/json/')
.then(response => response.json())
.then(data => {
let text_address = ${data.logradouro}, $
{data.bairro} - ${data.localidade}/${data.uf}
address.innerHTML = text_address
})
})

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="utf-8">
        <meta nome="viewport content="width=device-width,
        initial-scale="1">
        <link href="https://cdn.jsdelivr.net/npm/
        [email protected]/dist/css/bootstrap.min.css"
        rel="stylesheet" integrity="sha384-EVSTQN3/
        azprG1Anm3QDgpjLIm9Nao0Yz1ztcQTwFspd3yD65VOhhpuuCOm
        LASjc" crossorigin="anonymous">

           
       <title>Hello, World</title>
    </head>
    <body style="height:100vh;display:flex;align-items:
    center;justify-content: center;" class="bg-dark
    text-light">
     <div style="width:60%">
        <label for="cep_input" class="form-label">cep</label>
        <div class="mb-3 d-flex">
            <input type= "text" class="form-control
            mr-3" style="margin-right:10px"
            id="cep_input" placeholder="Digite seu cep">
            <button class="btn btn-outline-light"
            id="search_btn">Pesquisar</button>
            </div>
        <div style="height:50px">
            <p id="address">aqui aparecerá o endereço</p>
         </div>
       </div>

       <script src="https://cdn.jsdelivr.net/npm/
       [email protected]/dist/js/bootstrap.bundle.min.js"
       integrity="sha384-mrcw6ZMFY1zcLA8N1
       +NTUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXhn/tWtIaxVXM"
       crossorigin="anonymous"></script>

       <script src="index.js"></script>
       </body>
    </html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant