css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="container">
  <h1 class="applicationName">Terminal Region Airspace Control Kit</h1>

  <div class="menuBar">
    <button class="resetTabGenerator" accesskey="r">Reset Tab Info</button>
    <button class="clearTabsTable" accesskey="t">Clear Tabs Table</button>
    <button class="resetAll" accesskey="e">Reset All</button>
    <button class="helpButton" accesskey="h">Help</button>
  </div>

  <div class="errors">
  </div>

  <div class="flightInfoGenerator">
    <fieldset>
      <legend>Generate Flight Information Tab</legend>
      <div class="inputDivs">
        <button class="chooseVACode" accesskey="v">Choose a VA</button>
        <div class="vaCodes">
          <a href="javascript:void(0)">NCA</a>
          <a href="javascript:void(0)">BFT</a>
          <a href="javascript:void(0)">GBL</a>
          <a href="javascript:void(0)">RGL</a>
          <a href="javascript:void(0)">STR</a>
          <a href="javascript:void(0)">STE</a>
          <a href="javascript:void(0)">THI</a>
          <a href="javascript:void(0)">ABJ</a>
          <a href="javascript:void(0)">ABL</a>
          <a href="javascript:void(0)">PGN</a>
        </div>
      </div>
      <span>or</span>
      <div class="userInput">
        <label>Enter VA Code: </label><input type="text" name="vaCode" size="3" class="vaCodeInput" accesskey="c">
      </div>
      <div class="userInput">
        <label>Flt No.: </label><input type="text" name="flightNumber" size="4" class="fltNoInput" accesskey="n">
      </div>
      <div class="userInput">
        <label>Aircraft Type: </label><input type="text" name="aircraftType" size="4" class="aircraftTypeInput" accesskey="t">
      </div>
      <div class="inputDivs">
        <button class="chooseFlightStatus" accesskey="s">Status</button>
        <div class="depOrArr">
          <a href="javascript:void(0)">Dep</a>
          <a href="javascript:void(0)">Arr</a>
        </div>
      </div>
      <div class="inputDivs">
        <button class="generateFlightTabButton" accesskey="g">Go!</button>
      </div>
    </fieldset>
  </div> <!-- End of .flightInfoGenerator div -->

  <div class="flightStatusTable">
    <h3>Departures</h3>
    <h3>Arrivals</h3>
    <div class="departuresList">
      <ul id="departures" class="dragAndDropList">

      </ul>
    </div>
    <div class="arrivalsList">
      <ul id="arrivals" class="dragAndDropList">

      </ul>
    </div>
  </div> <!-- End of .flightStatusTable fdiv -->

  <div class="help">
			<div class="slides">
				<div class="helpSlides slideZero">
					Help | General Instructions and Information
					<p>NOTE: This program will run fine on desktops and laptops, as well as Android devices.
						The preferred browser is Firefox. You may run this program on an Android phone, however it is recommended you use
						the phone's landscape orientation for easier usage. | Pressing the ESC key (if using a keyboard) will close all open
            drop-down menus as well as the "Help" section	slides. | When the program <b>first loads</b> in your browser, <b>focus is set to the</b>
						<span class="tabInfoControlsHelp">Choose a VA</span> button. This is done so that you can start generating flight tabs immediately.
						See the slide marked "Help | Accesskeys and Using a Keyboard" for more information.
					</p>
          <p>
            List of <a href="https://en.wikipedia.org/wiki/List_of_airline_codes_(A)" target="_blank">IATA and ICAO airline codes</a> |
            List of <a href="https://en.wikipedia.org/wiki/List_of_ICAO_aircraft_type_designators" target="_blank">
              IATA and ICAO aircraft type codes
            </a>
          </p>
				</div>
				<div class="helpSlides slideOne">
					Help | Menu Bar Buttons
					<p><span class="warningButtonsHelp">Reset Tab Info</span>> Clears any entered information in the "Generate Flight Information Tab" section</p>
					<p><span class="warningButtonsHelp">Clear Tabs Table</span>> Clears all tabs currently present in the flight tabs table</p>
					<p><span class="warningButtonsHelp">Reset All</span>> Clears/re-sets everything, including any present flight tabs. Also closes any
						open drop-down menu, or the Help section if it is open.
					</p>
				</div>
				<div class="helpSlides slideTwo">
					Help | Flight Information Tab Generator
					<p><span class="tabInfoControlsHelp">Choose a VA</span> > Click to choose a three-letter VA Code OR enter a two/three-letter code of
						your choosing; see next control | 
						<span class="tabInfoControlsHelp">Enter VA Code</span> > Enter a VA or real-life airline code in two-letter (IATA) or three-letter
						(ICAO) format in the white text box provided | 
						<span class="tabInfoControlsHelp">Flt. No.</span> > Enter a flight number in the white text box provided | 
						<span class="tabInfoControlsHelp">Enter Aircraft Type</span>> Enter the type of aircraft. This is open ended e.g. 741, B735,
							A320; however, the text area is limited to a maximum of five characters (something like B747-400 will give an error) |
						<span class="tabInfoControlsHelp">Status</span> > Select whether the flight (for which you are generating a tab) 
						is an arrival or departure | NOTE: The "Choose a VA" and "Status" buttons are <b>toggle</b> buttons. Clicking them repeatedly will
						open and close their respective drop-downs. | NOTE: You can either "Choose a VA" (from the drop-down) OR fill in a VA/real airline
						code. E.g. if you have already filled out the "Enter VA Code" input, and then proceed to "Choose a VA" from the drop-down, the
						program will automatically re-set the "Enter VA Code" input. The converse is also true. | NOTE: All input fields are set to UPPER
            CASE (you do not have to worry about capitalizing VA/airline codes).
					</p>
				</div>
				<div class="helpSlides slideThree">
					Help | Flight Information Tabs Table
					<p>
						The flight information tabs table is divided into two columns - departures and arrivals. Depending on the status you select
						from the <span class="tabInfoControlsHelp">Status</span> drop-down menu in the flight information tab generator (see previous
						section), the generated tab will either be put in the departures or arrivals column.
					</p>
					<p>
						The order of the tabs in their respective columns can be re-arranged. Arranging the tabs is done
						according to priority, i.e. tabs at the top are flights about to land or depart, tabs following those are the next in line and
						so on. Tabs can also be dragged to either column, where their color will change (from green to blue and vice-versa).<br>
						When a flight tab is no longer needed, just click/tap the "Del (X)" button on that tab.	You can also change any flight tabs to
						"emergency status" by clicking the "E" button on that tab (see next section).
					</p>
				</div>
				<div class="helpSlides slideFour">
					Help | Flight Information Tabs Table - Handling Emergencies
					<p>
						When a pilot declares an emergency, you can easily change the flight tab for that particular flight to "emergency status". Just
						click/tap the "E" button on that tab, and the colour of that tab will change to red, but the colour of the "E" and "Del (X)"
						buttons will retain the original flight status colour (departure or arrival) for added visual aid.
					</p>
					<p>
						Additionally, emergency tabs can also be cross-listed. So you can drag and drop a flight tab that has emergency status into either
						list, and not only will it retain emergency status but will automatically get docked to the first position in the list. You can of
						course, adjust its position in that list once you transfer it.
					</p>
				</div>
				<div class="helpSlides slideFive">
					Help | Accesskeys and Using a Keyboard
					<p>
						Note: If you use the accesskeys specified below, you will need to know if there are different accesskey modifiers that have to be
						clicked/tapped in combination with the accesskey itself. You can find a list of common browsers and how to use the accesskeys for
						this program on
						<a href="https://en.wikipedia.org/wiki/Access_key#Access_in_different_browsers" target="_blank">this page</a>.
					</p>
					<p>
						MENU BAR: Reset All - "a" | Clear Tabs Table - "t" | Reset All - "e" | Help - "h"<br>
						FLIGHT TAB GENERATOR: VA Codes Button - "v" | Enter VA Code - "c" | Flt. No. - "n" | Aircraft Type - "t" | Status Button - "s" |
						Go! - "g" <br><br>
						NOTE: When you load the program for the first time OR when the page is refreshed, the focus will be set/re-set to the "Choose a VA"
						button. You can tab to the next control/button to the right using the Tab key, or tab backwards using Shift + Tab. When the focus is
						on the "Choose a VA" or "Status" buttons, pressing the Enter key will display their respective drop-down lists. Once you tab over to
						the "Go!" button AND a flight tab has been successfully generated, focus will automatically be re-set to the "Choose a VA" button,
						so you can proceed with the next tab's information. This allows for quick flight tab generating.
					</p>
				</div>
			</div> <!-- End of .slides div -->
			<div class="slideButtons">
				<a href="#" id="prevSlides">Previous</a><a href="#" id="nextSlides">Next</a>
			</div>
		</div> <!-- End of help section div -->
</div> <!-- End of .container div -->
            
          
!
            
              /* Author: Turbofan */
/* Last Updated: March 26, 2018 */

/********** Page-wide styles **********/

/* Color palette for application */
:root {
    --blackboard: #222831;
    --slate: #393e46;
    --blue: #0092ca;
    --hoverBlue: #07F;
    --cream: #eeeeee;
    --departureGreen: #070;
    --arrivalBlue: #005AC8;
    --warning: #900;
    --emergencyRed: rgb(187, 0, 0);
    --error: #f00;
}

body {
    background-color: var(--blackboard);
    margin: 0px;
}

.container {
    text-align: center;
    margin: 0px;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    font-size: 1em;
}

/********** Title Area Styles **********/

.applicationName {
    color: var(--cream);
    font-size: 2em;
    font-family: 'Open Sans', sans-serif;
    font-style: italic;
    letter-spacing: 0.05em;
    margin-bottom: 1em;
}

/********** Menu Bar Styles **********/

.menuBar button {
    float: left;
    padding: 0.7em;
    color: var(--cream);
    border-radius: 0.8em;
    letter-spacing: 0.08em;
    margin-bottom: 1.2em;
    margin-right: 1em;
}

.menuBar .helpButton {
    background-color: var(--blue);
}

.menuBar .resetTabGenerator, .menuBar .resetAll, .menuBar .clearTabsTable {
    background-color: var(--warning);
}

.errors {
    font-family: "Open Sans", sans-serif;
    float: right;
    padding: 0.7em;
    color: var(--error);
    font-size: 0.7em;
    height: 3em;
    width: 15em;
    overflow: auto;
}

.errors p {
    margin-top: 0em;
}

/********** Flight Info Tab Generator Styles **********/

.flightInfoGenerator {
    background-color: var(--slate);
    border-radius: 0.8em;
    clear: both;
    padding: 0.5em 0.5em 0.8em 0.5em;
}

.flightInfoGenerator .chooseVACode {
    width: 8.5em;
}

.flightInfoGenerator .chooseFlightStatus {
    width: 5em;
}

.flightInfoGenerator .chooseVACode, .flightInfoGenerator .chooseFlightStatus {
    background-color: var(--blackboard);
    color: var(--cream);
    border-radius: 0.8em;
    letter-spacing: 0.08em;
    padding: 0.9em;
    line-height: 1.3em;
}

span {
    margin-right: 0.8em;
}

.flightInfoGenerator .userInput {
    background-color: var(--blackboard);
    color: var(--cream);
    display: inline-block;
    border: 2px solid var(--cream);
    border-radius: 0.6em;
    padding: 0.6em;
    margin-right: 0.8em;
}

.flightInfoGenerator .userInput input {
    border: none;
    margin-left: 0.5em;
    background-color: var(--cream);
    color: var(--blackboard);
    border-radius: 0.1em;
}

fieldset {
    font-family: "Open Sans", sans-serif;
    text-align: center;
    color: var(--cream);
    padding-top: 0.8em;
    padding-bottom: 1.2em;
}

.inputDivs {
    display: inline-block;
    position: relative;
    margin-left: 0.4em;
    margin-right: 0.4em;
}

.vaCodes, .depOrArr {
    display: none;
    position: absolute;
    background-color: var(--blue);
    z-index: 50;
    border-radius: 0.8em;
}

.vaCodes {
    width: 7em;
}

.vaCodes a, .depOrArr a {
    color: var(--cream);
    padding: 0.5em;
    text-decoration: none;
    display: block;
    text-align: center;
}

.vaCodes a:hover {
    background-color: var(--hoverBlue);
}

.vaCodes a:first-child:hover {
    border-top-left-radius: 0.8em;
    border-top-right-radius: 0.8em;
}

.vaCodes a:last-child:hover {
    border-bottom-left-radius: 0.8em;
    border-bottom-right-radius: 0.8em;
}

.vaCodeInput, .vaCodeInput, .fltNoInput, .aircraftTypeInput {
    text-transform: uppercase;
}

.depOrArr {
    width: 4.4em;
}

.depOrArr a:first-child:hover {
    background-color: var(--departureGreen);
    border-top-left-radius: 0.8em;
    border-top-right-radius: 0.8em;
}

.depOrArr a:last-child:hover {
    background-color: var(--arrivalBlue);
    border-bottom-left-radius: 0.8em;
    border-bottom-right-radius: 0.8em;
}

.generateFlightTabButton {
    background-color: var(--departureGreen);
    color: var(--cream);
    border-radius: 0.8em;
    letter-spacing: 0.08em;
    padding: 0.9em;
    line-height: 1.3em;
}

/********** Flight Status Table Styles **********/

.flightStatusTable {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 2em;
    background-color: var(--slate);
    color: var(--cream);
    font-family: "Open Sans", sans-serif;
    letter-spacing: 0.1em;
    border-radius: 0.8em;
}

.flightStatusTable ul {
    list-style-type: none;
    padding: 0.4em 0.4em 0.4em 0em;
    margin: 0.5em;
}

.departuresList li, .arrivalsList li {
    border: 1px solid var(--cream);
    border-radius: 0.8em;
    padding: 0.5em;
    margin: 1em;
}

.departuresList li {
    background-color: var(--departureGreen);
}

.arrivalsList li {
    background-color: var(--arrivalBlue);
}

.departuresList .emergencyButton, .departuresList .deleteTabButton {
    background-color: var(--departureGreen);
}

.arrivalsList .emergencyButton, .arrivalsList .deleteTabButton {
    background-color: var(--arrivalBlue);
}

.departuresList .emergencyButton, .arrivalsList .emergencyButton {
    color: var(--cream);
    font-weight: 200;
    border: solid 1px var(--cream);
    border-radius: 0.4em;
}

.departuresList .deleteTabButton, .arrivalsList .deleteTabButton {
    color: var(--cream);
    border: none;
}

/********** Help Section Styles **********/

.help {
    display: none;
    background-color: var(--slate);
    border: 1px solid var(--blue);
    margin-top: 2em;
    margin-bottom: 2em;
    font-family: "Open Sans", "sans-serif";
    font-size: 1em;
    color: var(--cream);
    padding-top: 0.8em;
    padding-bottom: 0.8em;
}

.helpSlides {
    background-color: var(--slate);
    width: 100%;
    height: 15em;
    overflow: auto;
}

.slides {
    height: 15em;
}

.slideZero, .slideTwo {
    line-height: 2.5em;
}

.slideZero p, .slideTwo p, .slideThree p, .slideFour p {
    margin-top: 0px;
    margin-bottom: 0px;
}

.slideThree, .slideFour {
    line-height: 1.8em;
}

.slideZero a, .slideFive a {
    color: var(--blue);
    text-decoration: none;
}

.slideFive p {
    margin-top: 0px;
    margin-bottom: 0px;
}

.help p {
    text-align: left;
    padding: 0.9em;
    /* width: 100%; */
}

.warningButtonsHelp {
    background-color: var(--warning);
}

.tabInfoControlsHelp {
    background-color: var(--blackboard);
}

.warningButtonsHelp, .tabInfoControlsHelp {
    padding: 0.5em;
    border-radius: 0.8em;
    margin-left: 0.3em;
    margin-right: 0.3em;
}

.slideButtons a {
    padding: 0.5em;
    text-decoration: none;
    color: var(--blue);
    vertical-align: middle;
}



/*****************************************************************************************/
/************************************* MEDIA QUERIES *************************************/
/*****************************************************************************************/

@media only screen and (max-width: 1500px) {
    
    /********** Page-wide styles **********/
    .container {
        width: 85%;
        font-size: 0.8em;
    }

    .menuBar button {
        font-size: 1em;
    }

    .flightInfoGenerator .chooseVACode {
        letter-spacing: 0.1em;
        font-size: 1em;
        width: 12em;
    }

    .flightInfoGenerator .chooseFlightStatus, .flightInfoGenerator .generateFlightTabButton {
        font-size: 1em;
        letter-spacing: 0px;
    }

    .flightInfoGenerator .userInput {
        padding: 0.75em;
    }

    .flightInfoGenerator .userInput input {
        font-size: 1em;
    }

    .vaCodes {
        width: 12em;
    }

    .depOrArr {
        width: 5em;
    }

    #departures li, #arrivals li {
        font-size: 1.2em;
    }

/*     .help {
        font-size: 1.0em;
    } */

    .help p {
        line-height: 2.0em;
    }

    .slideTwo p {
        line-height: 3em;
    }

    .slides {
        height: 25em;
    }
} /* End of max-with: 1300px media query */

@media only screen and (max-width: 800px) {
    .inputDivs, .userInput {
        margin-top: 0.3em;
        margin-bottom: 0.3em;
    }
}
            
          
!
            
              /* Author: Turbofan */
/* Last Updated: May 6, 2018 */

$(function(){

    /* Variables */
    let resetTabGenButton = $(".resetTabGenerator");
    let vaCodeButton = $(".chooseVACode");
    let statusButton = $(".chooseFlightStatus");
    let vaCodeInput = $(".vaCodeInput");
    let fltNoInput = $(".fltNoInput");
    let aircraftTypeInput = $(".aircraftTypeInput");
    let goButton = $(".generateFlightTabButton");
    let clearTabsTable = $(".clearTabsTable");
    let resetAll = $(".resetAll");
    let helpButton = $(".helpButton");
    let userInputValid = "";
    let vaCodeValid = "";
    let flightNumberValid = "";
    let aircraftTypeValid = "";
    let statusValid = "";
    let slides = $(".slides");
    let helpInvisible = true;

    /* Constants */
    const depsGreen = "rgb(0, 119, 0)";
    const arrsBlue = "rgb(0, 90, 200)";
    const emergencyColor = "rgb(187, 0, 0)";
    const KEYCODE_ESC = 27; // Key code for the ESC key

    /* Re-set input fields on window refresh */
    window.onload = function(){
        if($(vaCodeInput).val() != undefined){
            $(vaCodeInput).val("");
        }

        if($(fltNoInput).val() != undefined){
            $(fltNoInput).val("");
        }

        if($(aircraftTypeInput).val() != undefined){
            $(aircraftTypeInput).val("");
        }
    }


    /*****************************************************************************************/
    /******************* SORTABLE FUNCTION THAT HANDLES TAB DRAG-AND-DROP ********************/
    /*****************************************************************************************/

    /* Allows the flight tabs in the flight tabs table to be switched between departures
    * arrivals, as well as be moved up/down within the same list */
    $("#departures, #arrivals").sortable({
        connectWith: ".dragAndDropList",
        receive: function(event, ui){
            if(ui.item.hasClass("deps")){
                ui.item.removeClass("deps").addClass("arrs");

                if(ui.item.css("background-color") == emergencyColor){
                    $(".arrivalsList ul").prepend(ui.item);
                    return;
                }

                ui.item.css("background-color", arrsBlue);
            }
            else{
                ui.item.removeClass("arrs").addClass("deps");

                if(ui.item.css("background-color") == emergencyColor){
                    $(".departuresList ul").prepend(ui.item);
                    return;
                }

                ui.item.css("background-color", depsGreen);
            }
        }
    }).disableSelection();


    /*****************************************************************************************/
    /********************** CLICK HANDLERS FOR BUTTONS AND TEXT INPUTS ***********************/
    /*****************************************************************************************/

    /* Click handlers for menu buttons */
    $(resetTabGenButton).on("click", resetFlightTabGenerator);

    $(clearTabsTable).on("click", clearTable);

    $(resetAll).on("click", function(){
        resetFlightTabGenerator();
        clearTable();
        checkHelpOpen();
        resetErrors();
    });

    $(helpButton).on("click", toggleHelp);

    /* Click handlers for flight tab generator */
    $(vaCodeButton).on("click", function(){
        $(".vaCodes").slideToggle(500, "swing");
    });

    $(statusButton).on("click", function(){
        $(".depOrArr").slideToggle(500, "swing");
    });

    $(goButton).on("click", function(){
        validateUserInputs();
    });

    $(vaCodeInput).change(function(){
        $(".vaCodes").slideUp(500, "swing");
        $(vaCodeButton).html("Choose a VA");
    });



    /*****************************************************************************************/
    /********* EVENT LISTENERS FOR PAGE LOADING/RE-LOADING AND DOCUMENT-BASED CLICKS *********/
    /*****************************************************************************************/
    
    // Puts the focus on the VA Code drop-down list button when the page 
    $(document).on("load", focusOnVACodeButton());

    // Removes a flight tab from the tabs table
    $(document).on("click", ".deleteTabButton", function(){
        $(this).parent().remove();
    });

    // Closes an open drop-down list if it's open (for the VA Codes and Status drop-down lists)
    $(document).keyup(function(e){
        if(e.keyCode == KEYCODE_ESC) {
            $(".vaCodes").slideUp(500, "swing");
            $(".depOrArr").slideUp(500, "swing");
            $(".help").slideUp(500, "swing");
        }
    });

    // Allows the user to toggle a tab between normal and emergency
    $(document).on("click", ".emergencyButton", function(){
        let statusClass = $(this).parent().attr("class");
        let originalColor = $(this).parent().css("background-color");

        switch(statusClass){
            case "deps":
                if(originalColor != depsGreen){
                    $(this).parent().css("background-color", depsGreen);
                }
                else{
                    $(this).parent().css("background-color", emergencyColor);
                }
                break;
            case "arrs":
                if(originalColor != arrsBlue){
                    $(this).parent().css("background-color", arrsBlue);
                }
                else{
                    $(this).parent().css("background-color", emergencyColor);
                }
        } // End of switch(statusClass)

    });
    

    /*****************************************************************************************/
    /********************** EVENT LISTENERS FOR DROP-DOWN LIST BUTTONS ***********************/
    /*****************************************************************************************/

    /* When the user makes a choice from either the VA Codes drop-down list or the status drop-down list,
     * this code makes the list slide back up */
    $(".vaCodes a").each(function(){
        $(this).on("click", function(){
            let choice = $(this).text();
            $(".vaCodes").slideUp();
            $(vaCodeButton).html(choice);

            if($(vaCodeInput).val() != undefined){
                $(vaCodeInput).val("");
            }
        });
    });

    $(".depOrArr a").each(function(){
        $(this).on("click", function(){
            let status = $(this).text();
            $(".depOrArr").slideUp();
            $(statusButton).html(status);
        });
    });


    /*****************************************************************************************/
    /************************************** FUNCTIONS ****************************************/
    /*****************************************************************************************/

    /* Checks for blanks and special characters in input fields, as well as ensuring that the user
    /* chooses an option from the drop-down lists */
    function validateUserInputs() {
        let vaCodeButtonChoice = $(vaCodeButton).html();
        let vaCodeString = $(vaCodeInput).val();
        let flightNumberString = $(fltNoInput).val();
        let aircraftTypeString = $(aircraftTypeInput).val();
        let statusString = $(statusButton).html();
        let vaCodePattern = new RegExp("^[A-Za-z0-9]{2,3}$");
        let flightNumberPattern = new RegExp("^[0-9A-Z]+$");
        let vaCodeValid = true;
        let flightNumberValid = true;
        let aircraftTypeValid = true;
        let statusValid = true;

        userInputValid = true;

        if(vaCodeButtonChoice == "Choose a VA") {
            if(!vaCodePattern.test(vaCodeString) || vaCodeString == "") {
                userInputValid = false;
                vaCodeValid = false;
            }
        }

        if(!flightNumberPattern.test(flightNumberString) || flightNumberString == "") {
            // alert("flight number invalid");
            userInputValid = false;
            flightNumberValid = false;
        }

        if(aircraftTypeString == "" || aircraftTypeString.length > 5) {
            // alert("aircraft type not filled");
            userInputValid = false;
            aircraftTypeValid = false;
        }

        if(statusString == "Status") {
            // alert("status not chosen");
            userInputValid = false;
            statusValid = false;
        }

        /* If all user inputs are valid, then proceed with tab generation; otherwise show the errors and exit */
        if(!userInputValid) {
            showErrors(vaCodeValid, flightNumberValid, aircraftTypeValid, statusValid);
            return false;
        }
        else {
            flightNumberString = flightNumberString.toUpperCase();
            aircraftTypeString = aircraftTypeString.toUpperCase();
            if(vaCodeButtonChoice == "Choose a VA"){
                vaCodeString = vaCodeString.toUpperCase();
                generateFlightTabs(vaCodeString, flightNumberString, aircraftTypeString);
            }
            else{
                generateFlightTabs(vaCodeButtonChoice, flightNumberString, aircraftTypeString);
            }
            resetErrors();
            resetFlightTabGenerator();
            focusOnVACodeButton();
        }
    }

    /* Generates a flight tab based on the user inputs and puts it in the appropriate column */
    function generateFlightTabs(vaCode, flightNumber, aircraftType) {
        if($(statusButton).html() == "Dep"){
            $(".departuresList ul").append("<li class='deps'>" + vaCode + " | " + flightNumber + " | " +
                aircraftType + " | <button class='emergencyButton'>E</button> | <button class='deleteTabButton'>Del(X)</button></li>");
        }
        else{
            $(".arrivalsList ul").append("<li class='arrs'>" + vaCode + " | " + flightNumber + " | " +
                aircraftType + " | <button class='emergencyButton'>E</button> | <button class='deleteTabButton'>Del(X)</button></li>");
        }
    }

    /* Re-sets all buttons and fields back to default state */
    function resetFlightTabGenerator() {
        $(vaCodeButton).html("Choose a VA");
        $(vaCodeInput).val("");
        $(fltNoInput).val("");
        $(aircraftTypeInput).val("");
        $(statusButton).html("Status");
    }

    function clearTable(){
        $(".flightStatusTable ul").empty();
    }

    function checkHelpOpen() {
        if(!helpInvisible){
            $(".help").slideUp();
        }

        helpInvisible = !helpInvisible;
    }

    /* Shows all errors and what needs to be corrected */
    function showErrors(isVaCodeValid, isFlightNumberValid, isAircraftValid, isStatusValid) {
        // first clear the error div's contents
        resetErrors();

        if(!isVaCodeValid) {
            $(".errors").append("<p>Invalid VA Code</p>");
        }

        if(!isFlightNumberValid) {
            $(".errors").append("<p>Invalid flight number</p>");
        }

        if(!isAircraftValid) {
            $(".errors").append("<p>Invalid aircraft type</p>");
        }

        if(!isStatusValid) {
            $(".errors").append("<p>Invalid flight status</p>");
        }
    }

    function focusOnVACodeButton() {
        $(".chooseVACode").focus();
    }

    function resetErrors() {
        $("div .errors").empty();
    }

    function toggleHelp() {
        if(helpInvisible){
            $(".help").slideDown();
        }
        else {
            $(".help").slideUp();
        }

        helpInvisible = !helpInvisible;
    }

    /*****************************************************************************************/
    /******************************** CYCLE PLUGIN FUNCTIONS *********************************/
    /*****************************************************************************************/

    slides.cycle({
		fx: 'scrollHorz',
		timeout: 0,
		speed: 500,
		prev: '#prevSlides',
		next: '#nextSlides'
	});

});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console