Build Location Finder Web App Using Zipcode in Javascript to Get State,City,Latitude & Longitude Information in Browser Full Project For Beginners

 

 

 

index.html

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css" />
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <title>Location Finder | Find your location</title>
    <style>
        body{
            height: 100vh;
            background-position: center;
            background-size: cover;
        
        }
        .icon-remove, .icon-check{
            display: none;
        }
    </style>
</head>
<body>
   <div class="hero hero-body is-transparent container">
       <h1 class="title">India Location Info</h1>
       <h2 class="subtitle">Enter a zipcode to get the location Info</h2>
       <form id="zipform">
           <div class="field">
              <div class="control has-icons-left has-icons-right">
                <input class="input zip is-large" type="text" placeholder="Enter zipcode">
                <span class="icon is-small is-left">
                <i class="fas fa-map-pin"></i>
                </span>
                <span class="icon is-small is-right icon-check">
                <i class="fas fa-check"></i>
                </span>
                <span class="icon is-small is-right icon-remove">
                <i class="fas fa-remove"></i>
                </span>
          </div>
         </div>
      </form>
   </div>
<br>
    <div class="container">
        <div id="output"></div>
    </div>
    
    <script>
        // Listen for submit event
        document.querySelector("#zipform").addEventListener('submit', getLocationInfo);
        
        //Listen for delete 
       document.querySelector("body").addEventListener('click', deleteLocation);
        
        function getLocationInfo(e){
            // Get zip value from input
            const zip = document.querySelector('.zip').value;
            // Make request to API
                                               
            fetch(`http://api.zippopotam.us/IN/${zip}`)
            .then(response => {
                if(response.status != 200){
                    showIcon('remove');
                 document.querySelector('#output').innerHTML=`<article class= "message is-danger">
                 <div class= "message-body">Invalid Zipcode, please try again with valid Zipcode</div></article>`;
                 throw Error(response.statusText);
                }else{
                    showIcon('check')
                    return response.json();
                }
            })
            .then(data => {
                //Show location info
                let output = '';
                data.places.forEach(place => {
                    output+= `
                    <article class= "message is-primary">
                    <div class="message-header">
                    <p>Location Info</p>
                    <button class="delete"></button>
                    </div>
                    <div class="message-body">
                    <ul>
                        <li><strong>City: </strong>${place['place name']}</li>
                        <li><strong>State: </strong>${place['state']}</li>
                        <li><strong>Longitude: </strong>${place['longitude']}</li>
                        <li><strong>Latitude: </strong>${place['latitude']}</li>
                    </ul>
                    
                    </div>
                    </article>
                    `;
                });
                //insert into output div
                document.querySelector('#output').innerHTML = output;
            })
            .catch(err => console.log(err));
            
            e.preventDefault();
        }
        function showIcon(icon){
            //Clear icons
            document.querySelector('.icon-remove').style.display='none';
            document.querySelector('.icon-check').style.display='none';
            // Show correct icons
            document.querySelector(`.icon-${icon}`).style.display = 'inline-flex';
        }
        //delete location box
        function deleteLocation(e){
            if(e.target.className == 'delete'){
              document.querySelector('.message').remove();
                document.querySelector('.zip').value = '';
                document.querySelector('.icon-check').remove();
            }
        }
    </script>
</body>
</html>

Leave a Reply