Airport Designator

I am looking to make a web app to find city’s name when I enter the airport code.
I am new to javascript programming and looking for help.
Here is the link to my code on

Search for city codes here.

SEARCH

The approach you want to follow is this:

  1. When the Search button is clicked, read the value from your input field.
  2. Match the value from your input field with some sort of an object. An array is an OK one to get started with, but a HashTable would be easier. You would have a mapping between an airport code to city.
  3. After getting the city name, all you have to do is display it. Will you display it directly on the page? Will you display the result in a dialog?

What you are trying to do requires some level of understanding how JavaScript works with the HTML on your page (aka the DOM), so let us know which step you are having difficulty with. There are some resources we can throw at you that will help you learn the basic concept behind each step.

Cheers,
Kirupa :slight_smile:

Dear Kirupa, I thank you for your reply.
All I need to do is when I enter a city’s airport code, I need to get that city’s name.
for example:

var YVR = “vancouver”;
var LAS = “Las Vegas”;
var LAX = “Los Angeles”;
etc…

I only can learn it when I see an example of one or two of them.
could you please send an example of one or two of these codes.

Thanks again.

I would like to display the city’s name onthe same page as an paragraph below the input field.

Here is a simple console output for displaying the city when an airport code is provided:

var airportCodes = new Object();
airportCodes["YVR"] = "Vancouver";
airportCodes["LAS"] = "Las Vegas";
airportCodes["LAX"] = "Los Angeles";

console.log(airportCodes["LAX"]);

You need a data structure that allows you to map between an airport code and the city. A Hashtable (basically just an Object in the JS world) is my preferred data structure for this: https://www.kirupa.com/html5/hashtables_vs_arrays.htm

For actually displaying this data, read through the content here: https://www.kirupa.com/javascript_dom/index.htm It will help you understand how JS works with the DOM and how you can read values from elements, display values, etc. That will help you with the rest of what you are trying to do.

:slight_smile:

Dear Kirupa, that’s what I did last night, I read the hashtable and it helped me.
Mytrouble is the search button and input field.
I will send you the codpen sample I did latnight after I studied the Hashtable link from your website.
I also will read the link you sent me related to DOM.
Thanks for all your help.

For the search button and input field, taking a few steps back, what you are trying to do is use JavaScript to access a value stored on an HTML element. That is where the DOM APIs come in really handy. All you really need is a way to identify the HTML element, and then you need a way to read some property on the element that represents the text to display. All of this needs to happen when a button gets clicked.

The code here covers all of that, though for a different example: PHP field validation Let me know if that helps :slight_smile:

Cheers,
Kirupa