Code Monkey home page Code Monkey logo

hs-intro-web-design-airline-ticket-maker's Introduction

Airline Ticket Maker

It's time to take a flight! The airlines need all sorts of information from you in order to print out your ticket. Airlines use the same template for each ticket, and just plug in different data from each user.

How can you automate this task? There are the few ways we can do this...

replace

The replace method is a handy JavaScript tool that allows you to replace a word or letter for another word or letter within a string. That means every time the word or letter appears in the string, it will be substituted out. Let's take a look at how that works.

We have a fact about Harry Potter assigned to a variable wrong_fact:

var wrong_fact = "Harry Potter is a member of House Slytherin!";

But wait, Harry is in Gryffindor, not Slytherin! Let's swap out the word "Slytherin" for "Gryffindor" using the gsub method. gsub takes two parameters. The first one is the word you want to replace, and the second one is the word you want to replace it with:

var right_fact = wrong_fact.replace("Slytherin", "Gryffindor");

The return value (aka what this action produces after it's called) will be "Harry Potter is a member of House Gryffindor!" Then, if we type right_fact into our console, we'll see the fact correctly printed.

Chaining replaces

What if you have a sentence that you want to substitute more than one word in? We can do that by calling replace more than once on the same line, through a process called method chaining in which you call one method right after another. Take a look:

var wrong_fact = "Hermione has 4 siblings.";
var true_fact = wrong_fact.replace("Hermione", "Ron").replace("4", "6");

Challenge 1 (using replace):

You will be coding your solution in js/ticket.js.

Copy the variable definition below, which is the airline ticket template that all airlines use, and paste it into js/ticket.js

var ticket_template = "Joe Shmoe flying on Fancy Airlines Flight Number 000 arriving at Fancy Destination at 2400 hours. The flight will depart from gate 100.

Obviously there is some generic information in this ticket. Your job is to replace the passenger name, airline name, flight number, destination, flight arrival time, and gate number using the replace function with the following information:

name: Bessie Baker
airline: Delta
flight number: 939
destination: Atlanta
flight arrival time: 8pm
gate number: B10

Challenge 2:

Now your mom needs to book a flight. Copy the ticket template into js/ticket.js and store it in the variable mom_flight.

var ticket_template = "Joe Shmoe flying on Fancy Airlines Flight Number 000 arriving at Fancy Destination at 2400 hours. The flight will depart from gate 100.

Next, assign the following content from the original ticket to variables:

Now that we have the original information, it's time to change the value of these variables to reflect your mom's information. Your mom plans to fly to San Francisco on United Airlines on December 15. Her flight will arrive at 10:15am. The flight will take off from Gate A62. Create variables(name, airline, flight_number, flight_destination, flight_arrival_time, gate).

Using the variables you created and your expertise with the replace function, switch out the template for your mother's information.

S-T-R-E-T-C-H Challenges!

If you've made this far, here are some additional challenges for you to complete:

  1. What if the airlines decide to print the passenger names in all caps?
  2. What if they want to add the flight departure time to the ticket?

View Airline Ticket Maker on Learn.co and start learning to code for free.

hs-intro-web-design-airline-ticket-maker's People

Contributors

victhevenot avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.