Coding Tutorial: Time Zone Conversion App w/ HTML, CSS, and JavaScript
In this tutorial, we build a time zone converter app using HTML, CSS, and JavaScript. We convert from a time, date, and timeZone input to ISO time and finally to a luxon.DateTime object which we can call setZone() on. This tutorial is for beginners in HTML, CSS, and JavaScript.
0:00 - Intro
0:48 - Calculation for New Time Zone
6:30 - User Interface
36:13 - Styling
Scripts to include in HTML file (moment.js, luxon.js, and Bootstrap):
https://docs.google.com/document/d/1D...
Options for General Area Selectors:
areasArr[0] = new Option("America", "America");
areasArr[1] = new Option("Africa", "Africa");
areasArr[2] = new Option("Antarctica", "Antarctica");
areasArr[3] = new Option("Arctic", "Arctic");
areasArr[4] = new Option("Asia", "Asia");
areasArr[5] = new Option("Atlantic", "Atlantic");
areasArr[6] = new Option("Australia", "Australia");
areasArr[7] = new Option("Europe", "Europe");
areasArr[8] = new Option("Indian", "Indian");
areasArr[9] = new Option("Pacific", "Pacific");
Options for Specific City Selectors:
arr[0] = new Option("America/Chicago", "America/Chicago");
arr[1] = new Option("America/Denver", "America/Denver");
arr[2] = new Option("America/Los_Angeles", "America/Los_Angeles");
arr[3] = new Option("America/New_York", "America/New_York");
arr[4] = new Option("Asia/Tokyo", "Asia/Tokyo");
Video Overview:
1. The calculation of the new time in new time zone
a. Convert time, date, and timeZone input to ISO-formatted string.
b. Convert ISO-formatted string to luxon.DateTime
c. Call setZone on luxon.DateTime object
d. Convert back to ISO or human-readable format and print
2. The user interface elements – for taking in user input for time, date, and time zones
a. Create select elements (dropdowns)
b. Create input elements for time and date
c. Create button for Convert Time
d. Populate the specific time zone select elements with options via JavaScript by implementing addOptions() and addDstOptions()
e. Filter the specific time zone select elements based on the selection chosen in the general area select elements by calling a reset function onchange for those select elements
f. Implement function resetStartTzDropdown() and resetDestTzDropdown()
3. Implement convertTime(), the function that is called whenever user clicks button.
4. Add output element for displaying the final result.
5. Styling:
a. Bootstrap – 3 column layout
b. Make each column a card – which also has card-title and card-body
c. Add titles to cards
d. Change style of button
e. Change background color/style
f. Change positioning of container
g. Change positioning of button
h. Add br in between input elements for spacing
i. Add Google font for card titles
Done! -
In questa pagina del sito puoi guardare il video online Coding Tutorial: Time Zone Conversion App w/ HTML, CSS, and JavaScript della durata di ore minuti seconda in buona qualità , che l'utente ha caricato Jake S 19 marzo 2022, condividi il link con amici e conoscenti, su youtube questo video è già stato visto 914 volte e gli è piaciuto 20 spettatori. Buona visione!
