Create a program in HTML and event driven JavaScript where the user can plug in

ID: 3832253 • Letter: C

Question

Create a program in HTML and event driven JavaScript where the user can plug in where he's flying from to where he's arriving to and he can select from the array you made in JavaScript and let him have the option to select his dates but can't go past a year from today. and please for javascript do it normal javascript not angular or anthing else.

CS 341: WEB SOFTWARE TOOLS Due: week 5 Assignment 2 Use JavaScript to create an air ticket reservation system. The screen has to include fields such as: "from:", "to:", "leaf", "return "number of tickets" and others. You can design the page as you like, but you have to use CSS3 box model, drop down menu, gradients, image and text animation, media queries, functions, user interactions via event handling img elements with the picture of the destination, Use HTML5, CSS3 and JavaScript to check for: There are data in all fields .The number of tickets is between 1 and 6 The dates are correct and the incoming dates not more than a year from "today" Create and fill with data inside your program an array with 10 rows with the following columns: from, to, price. If the fly is a "not stop" fly try to find if such fly is possible using the array Generate and print a new page with the type of errors or with the total prize. The price is the sum of the prices on the different legs. The program have to work on PC and phone -The program have to have continue button The program have to have audio and video elements describing the destination

Explanation / Answer

Use

With ES6 modules via the import statement:

import customSelect from 'custom-select';

In CommonJs environments with the require function:

var customSelect = require("custom-select").default;

Note: the require().default is necessary due to the babelify export system. In HTML with the script tag:

How it works

Start with a simple HTML <select>:

<option value>Select...</option>

</select>

customSelect('select');

You can nest the select in their label or you can use the for attribute on the label. Nested will work fine but it's formally wrong due to label element specification.

Here's the HTML result:

<span>Select...</span>

</span>

<option value>Select...</option>

</select>

<div class="custom-select-option is-selected has-focus" data-value="">Select...</div>

</div>

Also state classes will be added and removed while plugin working.

You can use default css included in plugin release or style it by yourself. You can also use advanced techniques for using native select on Mobile/touch devices. Check the examples for inspirations.

Plugin init

Array customSelect(elements[, pluginOptions]);

The elements parameter could be:

A DOMString selectors:

customSelect('.myForm .mySelect');

A instance of HTMLElement, tag SELECT:

customSelect(document.getElementById('mySelect'));

A list (NodeList, HTMLCollection, Array, etc) of instances of HTMLElement, tag SELECT:

customSelect(document.querySelector('.mySelect'));

//or

customSelect(document.getElementsByClassName('mySelect'));

The pluginOptions parameter is an object that overwrites some default plugin configurations.

The default config is:

{

containerClass: 'custom-select-container',

openerClass: 'custom-select-opener',

panelClass: 'custom-select-panel',

optionClass: 'custom-select-option',

optgroupClass: 'custom-select-optgroup',

isSelectedClass: 'is-selected',

hasFocusClass: 'has-focus',

isDisabledClass: 'is-disabled',

isOpenClass: 'is-open'

}

The return is an Array of customSelect instances, that contains all the public exposed methods and properties.

Style Classes

All css classes can be configured using pluginOptions, except container secondary class customSelect which is only for internal use and should not be removed or used for styling purpose.

Structure Classes

Self explained structure classes, and relative may-have status classes:

containerClass: 'custom-select-container' may have isDisabledClass, isOpenClass

openerClass: 'custom-select-opener'

panelClass: 'custom-select-panel'

optionClass: 'custom-select-option' may have isSelectedClass, hasFocusClass

optgroupClass: 'custom-select-optgroup'

State Classes

isSelectedClass: 'is-selected' - when the custom option is selected (as native selected attribute).

hasFocusClass: 'has-focus' - when the custom option has current focus (mouseover, arrow navigation and keyboard autocomplete changes the focus).

isDisabledClass: 'is-disabled' - when the select is disabled.

isOpenClass: 'is-open' - when the panel is open.

How to get Plugin instance

Init return

const cstSel = customSelect('select')[0]; // return is an array of instances!

console.log(cstSel.open); // true|false

The DOM select

customSelect('select');

const cstSel = document.querySelector('select').customSelect

console.log(cstSel.open); // true|false

The DOM select container

customSelect('select');

const cstSel = document.querySelector('.customSelect').customSelect

console.log(cstSel.open); // true|false

Methods & Properties

pluginOptions property [readonly]

Get the plugin options.

cstSel.pluginOptions;

open property

Get/set property.

cstSel.open = true; // open the custom select

console.log(cstSel.open); // true

cstSel.open = false; // close the custom select

console.log(cstSel.open); // false

disabled property

Get/set property.

cstSel.disabled = true; // disable the custom select

console.log(cstSel.disabled); // true

cstSel.disabled = false; // enable the custom select

console.log(cstSel.disabled); // false

value property

Get/set property.
Change both the native select and the custom select. Use it just like nativeSelect.value

cstSel.value = 'foo'; // the first option with that value will be selected. If there is no option with that value the first one'll be selected.

console.log(cstSel.value); // return foo if there was an option with 'foo' value

append(elements[, target]) method

Append an option or an optgroup to the select.

const option = document.createElement('option');

option.text = 'Foo';

option.value = 'bar';

cstSel.append(option);

The elements parameter could be:

An instance of HTMLElement, tag OPTION:

const toBeAppend = document.createElement('option');

An instance of HTMLElement, tag OPTGROUP:

const toBeAppend = document.createElement('optgroup');

A list (NodeList, HTMLCollection, Array, etc) of instance of HTMLElement, tag OPTION/OPTGROUP:

const toBeAppend = cstSel.empty();

The target parameter must be the select (default) or an optgroup that is already inside the select.

insertBefore(elements, target) method

insert an option or an optgroup before the specified target.

const option = document.createElement('option');

option.text = 'Foo';

option.value = 'foo';

const target = cstSel.select.options[2];

cstSel.insertBefore(option, target);

The elements parameter could be:

An instance of HTMLElement, tag OPTION:

const toBeAppend = document.createElement('option');

An instance of HTMLElement, tag OPTGROUP:

const toBeAppend = document.createElement('optgroup');

A list (NodeList, HTMLCollection, Array, etc) of instance of HTMLElement, tag OPTION/OPTGROUP:

const toBeAppend = cstSel.empty();

The target parameter must be an option or an optgroup that is already inside the select.

remove(node) method

remove an option or an optgroup

cstSel.remove(cstSel.select.options[1]);

empty() method

empty the select

cstSel.empty();

destroy() method

destroy the plugin, removing custom markup, classes, and listeners.

cstSel.destroy();

Navigate

Create a program in C++, which rolls two die and keeps track of the frequency of

Create a program in JAVA to prompt the user for an employee number, hours worked

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

Create a program in HTML and event driven JavaScript where the user can plug in

Question

Explanation / Answer

Related Questions

Navigate