VueJS Zip Code Finder

Developer
Sasha
Size
3,554 Kb
Views
44,528
  1. VueJS Zip Code Finder Previews
  2. VueJS Zip Code Finder HTML Codes
  3. VueJS Zip Code Finder CSS Codes
  4. VueJS Zip Code Finder JS Codes

How do I make an vuejs zip code finder?

More practice on VueJs, hoping to learn more and more about Vue! The API that I'm using only shows US zip codes, unfortunately.. What is a vuejs zip code finder? How do you make a vuejs zip code finder? This script and codes were developed by Sasha on 05 September 2022, Monday.

VueJS Zip Code Finder Previews
IQ Test

VueJS Zip Code Finder - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>VueJS Zip Code Finder</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="app" class="container"> <h2>Zipcode Finder</h2> <div class="form"> <input type="text" v-model="zip" maxlength="5" placeholder="ex: 94301" /> </div> <div class="error">{{error}}</div> <div class="display">{{city}}</div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

VueJS Zip Code Finder - Script Codes CSS Codes

@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,500,600");
body { position: relative; background: #f1f1f1; font-family: 'Raleway', sans-serif; overflow: hidden;
}
.container { display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100vh;
}
.container > * { margin: 5px;
}
h2 { color: #DF7A80;
}
#next { position: absolute; top: 20px; left: 30px; text-transform: uppercase; font-weight: 600; font-size: 13px;
}
.form { display: flex; justify-content: center; align-items: center;
}
.form > * { margin: 10px;
}
.display { color: #DF7A80; font-size: 30px; letter-spacing: 1px;
}
input { width: 200px; height: 30px; border: none; outline: none; color: #DF7A80; font-size: 14px; padding-left: 10px; box-shadow: 0 3px 0 rgba(71, 84, 99, 0.3);
}
button { width: 100px; height: 32px; background: #FFF; border: none; outline: none; font-family: 'Raleway', sans-serif; font-size: 15px; text-transform: uppercase; font-weight: 500; color: #475463;
}
.error { font-size: 12px; letter-spacing: 1px;
}
.no { animation: 0.5s shake infinite ease;
}
.creature { width: 100px; height: 100px; background: #DF7A80; border-radius: 100% 100% 100% 0; transform: rotate(-45deg);
}
.creature:before, .creature:after { position: absolute; content: '';
}
.creature:before { top: 30px; left: 40px; width: 30px; height: 30px; background: white; border-radius: 100%;
}
@keyframes shake { 0% { transform: translateX(0); } 50% { transform: translateX(2px); } 0% { transform: translateX(0); }
}

VueJS Zip Code Finder - Script Codes JS Codes

let app = new Vue({ el: "#app", data: { city: " ", zip: "94301", error: "" }, methods: { getCity: function() { let self = this; $.getJSON("https://ZiptasticAPI.com/" + this.zip, function(result) { if (result.error) { self.error = "zip code not found"; self.city = ""; $(".error").addClass("no"); } else { self.city = result.city + "," + result.state; $(".display").addClass("animated fadeInDown"); } console.log(result); }); } }, watch: { zip: function() { if (this.zip.length === 5) { this.getCity(); this.error = ""; $(".error").removeClass("no"); } if (this.zip.length < 5) { this.city = ""; this.error = "hey, that's not a zipcode"; $(".error").addClass("no"); $(".display").removeClass("animated fadeInDown"); } } }, mounted: function(){ this.getCity(); }
})
VueJS Zip Code Finder - Script Codes
VueJS Zip Code Finder - Script Codes
Home Page Home
Developer Sasha
Username sashatran
Uploaded September 05, 2022
Rating 4
Size 3,554 Kb
Views 44,528
Do you need developer help for VueJS Zip Code Finder?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Sasha (sashatran) Script Codes
Name
Google Inspired Floating Action Button
Flexgrow illustration
Svg Stars Experiment
Random Color Generator
Layout Design
Creative Juice Co.
VueJS Todo List
Input UI Animation
Moving head with Parallax.js
Subscribe Button
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!