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! -
On this page of the site you can watch the video online Coding Tutorial: Time Zone Conversion App w/ HTML, CSS, and JavaScript with a duration of hours minute second in good quality, which was uploaded by the user Jake S 19 March 2022, share the link with friends and acquaintances, this video has already been watched 914 times on youtube and it was liked by 20 viewers. Enjoy your viewing!
