This is the final project for my Udacity course “Grow with Google Challenge Scholarship: Front-End Web Dev”.
Enjoy your creation!
See the Pen Pixel Art Maker by Ziqi Zhou (@IannaZhou) on CodePen.
Ziqi Zhou
Never marry your ideas, flirt with them.
Tag: javascript
Use a nested for loop to take the numbers array below and replace all of the values that are divisible by 2 (even numbers) with the string “even” and all other numbers with the string “odd”.
var numbers = [
[243, 12, 23, 12, 45, 45, 78, 66, 223, 3],
[34, 2, 1, 553, 23, 4, 66, 23, 4, 55],
[67, 56, 45, 553, 44, 55, 5, 428, 452, 3],
[12, 31, 55, 445, 79, 44, 674, 224, 4, 21],
[4, 2, 3, 52, 13, 51, 44, 1, 67, 5],
[5, 65, 4, 5, 5, 6, 5, 43, 23, 4424],
[74, 532, 6, 7, 35, 17, 89, 43, 43, 66],
[53, 6, 89, 10, 23, 52, 111, 44, 109, 80],
[67, 6, 53, 537, 2, 168, 16, 2, 1, 8],
[76, 7, 9, 6, 3, 73, 77, 100, 56, 100]
];See the Pen Nested Numbers by Ziqi Zhou (@IannaZhou) on CodePen.
To create a triangle below, we can use function and loops in JavaScript.
*
* *
* * *
* * * *
* * * * *
* * * * * *
* * * * * * *
* * * * * * * *
* * * * * * * * *
* * * * * * * * * *
See the Pen Build a Triangle by Ziqi Zhou (@IannaZhou) on CodePen.
Theater seats often display a row and seat number to help theatergoers find their seats. If there are 26 rows (0 to 25) and 100 seats (0 to 99) in each row, we can use a nested loop in JavaScript to print out all of the seat combinations in a theater.
0-0
0-1
0-2
...
25-97
25-98
25-99
See the Pen Printing Out All Seat Number in a Theater by Ziqi Zhou (@IannaZhou) on CodePen.
By using loops, we can program our own version of FizzBuzz (in this case )called “JuliaJames”.
See the Pen The “JuliaJames” Game (“Fizzbuzz”) by Ziqi Zhou (@IannaZhou) on CodePen.
We can also write a loop that prints out the following song, starting at 99, and ending at 1 bottle.
See the Pen 99 Bottles of Juice Song by Ziqi Zhou (@IannaZhou) on CodePen.
Use the switch statement to replace “else if” statement where each condition is based on the same value.
- no high school diploma earned an average of $25,636/year,
- a high school diploma earned an average of $35,256/year,
- an Associate’s degree earned an average of $41,496/year,
- a Bachelor’s degree earned an average of $59,124/year,
- a Master’s degree earned an average of $69,732/year,
- a Professional degree earned an average of $89,960/year,
- and a Doctoral degree earned an average of $84,396/year.
See the Pen Average Salary and Years Spent in School by Ziqi Zhou (@IannaZhou) on CodePen.
See the Pen Check Balance by Ziqi Zhou (@IannaZhou) on CodePen.
Imagine you are doing online shopping. You may not want to see the price of an item in a different currency, you may also want to know when you can receive your items. For any organization that wants to go global, being aware of the different formats of currency and time is crucial to building the localizability of its own product. In our final project for the website localization class, we chose to learn how to format currency and time by using JavaScript. In this team of two, I was responsible for formatting the currency through JavaScript. With this blog post, I’d like to share some easy methods to format the currency by using the built-in function of JavaScript.
What to Consider When Doing Currency Localization
Before we get our hands dirty, think for a while what should be considered when we are localizing a currency. Here, I’ll list three basic elements we need to consider.
Symbols
Symbols like $, ￥, £, €, are the first things people look at when they are identifying a currency. Although many countries share the same currency symbol, the position of the symbol may vary. For example, in France, Euro sign is placed at the end of the currency, but in the Unites States, dollar sign is usually placed on the left of a number.
- $123
- 123€
Use of decimal points and commas
The following two numbers actually have the same value, but the use of decimal points and commas are different.
- 1,234.56 .123
- 1,234,560,123
Currency conversion
Although the conversion issue is not covered by my final project, it is necessary to keep in mind that automatically converting one currency into another is dispensable when building a localized website. To perform currency conversion in JavaScript, you’ll need a reliable source of real-time exchange rates.
Built-in Internationalization (i18n) Functions in JavaScript to do Currency Localization
There are many ways to localize a currency by using different coding methods. JavaScript has some basic functions to localize a certain number into desired format, which is also one of the easiest way to do the localization.
The Intl object is the namespace for the ECMAScript Internationalization API, which provides language sensitive string comparison, number formatting, and date and time formatting.[1] By applying the i18n function (Intl.NumberFormat), we can easily turn a number to the desired format. Here, I’ll describe the needed steps.
The syntax:
new Intl.NumberFormat([locales[, options]])
Intl.NumberFormat.call(this[, locales[, options]])
Three steps to turn a number into a desired currency format:
1.In basic use without specifying any locale, a formatted string in the default locale and with default options is returned.
var number = 1234;
new Intl.NumberFormat().format(number)
// → ‘1,234’ if in US English locale
2.Now, let’s add a locale, for example de-DE.
var number = 123456.789
new Intl.NumberFormat(‘de-DE’).format(number)
// → 123.456,789
3.Now, let’s tell JavaScript we want to format the number as a currency. We can do that by specifying the options.
var number = 123456.789
new Intl.NumberFormat(‘de-DE’, { style: ‘currency’, currency: ‘EUR’ }).format(number)
// → 123.456,79 €
The toLocaleString() Method in JavaScript
Similar with the i18n function in JavaScript, the toLocaleString() method can also give the same result. However, the toLocaleString is not really language or locale responsive, it is actually using the host environment’s current locale. If we want our website responsive to the language or locale we choose from a selector, we should abandon this method.
Creating a Demo
The biggest challenge I’ve encountered when doing this project was creating a demo from scratch. Without any computer science background, using limited knowledge about html, css and JavaScript to create a demo was never easy. To better visualize the i18n function in JavaScript, I decided to put the following elements in my demo.
- An input box for numbers.
- A dropdown selector of currency type.
- The formatted result according to selected currency.
What went wrong?
- The i18n built-in function in JavaScript is not accurate enough in reflecting the right format of the Chinese currency CNY.
Do Chinese people use comma to separate thousands? If the number is shorter than 4 digits, comma will not be used. However, if the number is longer than 4 digits, commas will be used. This differentiation could not be performed by JavaScript’s i18n function, as it’s using comma to separate thousands all the time.
- The format of Euro varies in different countries.
Although Euro is the unified currency for many countries in the EU, the way of writing down the currency varies across EU countries. For example, Germany puts the currency symbol at the end of each number, and uses comma as decimal separator and period for thousands. In France, however, people don’t use period for thousands.
Obviously, when we cannot decide the original country of a user, it is important to keep in mind that there might be different countries sharing the same currency. That’s why when we are setting locales, we use both language code and the country code.
- The conversion and calculation between different currencies were not included.
The i18n function in JavaScript cannot convert a currency to another. To show the exact amount of money in another currency. We need to add calculation formula to our JavaScript.
(You can access the code from my GitHub)
[1] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl
About my program
© 2025 Ziqi Zhou
Theme by Anders Noren — Up ↑
Recent Comments