Javascript Coding Exercises for Beginners

ATM Withdrawal Application

Question #1

Write a javascript for an ATM withdrawal application. The ATM machine will only accept a transaction if the withdrawal amount X is a multiple of 20, and account has enough balance to perform withdrawal transaction (including bank charges). For each successful withdrawal the bank charges 0.50$. The account will have an initial balance of 500$.

A) You have to declare an input type and a button in your HTML form with input type having a placeholder

B) Javascript has 2 functions validateAmount.js and withdrwawAmount.js

a. validateAmount: Make sure the amount entered is numeric, alert a message “Please enter numeric value” otherwise.

b. withdrawAmount: Process transaction and alert one of the following three messages depending on the withdrawal amount

i. Not multiple of 20: “Incorrect withdrawal amount”
ii. “Insufficient funds”
iii. “Successful transaction! \n Current Balance is: ” + balance

Question #2

Write a script that should produce some statistical information on user entered input data. The javascript code should be in an external file called “statistics.js”, an HTML file named “numStats.html” should be created which will contain only a div element with id “statsOut”. Javascript should ask user to enter numerical data until he/she enters -1. You should check for non-numeric and empty values and should ignore that data. Final statistic should be displayed in the div tag of the HTML file.

A) You have to use the external CSS file called "stats.CSS" to set border, font, margin, etc. for the div tag. A sample of the style is depicted below.

B) The JavaScript file (statistics.js) should keep prompting the user for input until he/she enters -1. Non-numerical values and empty input should be handled gracefully and should be ignored. The script should produce data as shown in sample output. It should print all the numbers entered as well as number of odd and even numbers entered by the user.

Question #3

Write a JavaScript to plot histogram of user entered letters for a sentence entered by the user. Histogram is a graph that will depict frequency of occurrence of user specified letters in a user specified string. You have to make use of “plotly” library and a sample is provided to you.

A) Create an HTML form as depicted below with two labels, two input boxes, a button and a div element. User will enter a string and a word as inputs, and you should plot the histogram in the div element on button click.

B) Create a CSS file to put your favorite styles for all the elements in the form. It should have a minimum of style shown above. You can choose colors of your likings.

C) JavaScript could be within the same html file or as an external file. The choice is again up to you.

Question #4

Write a Javascript function StringStats(sentence) in that takes in a user specified sentence and prints the words along with number of vowels present in the word. For a word without a vowel you should print “contains 0 vowels”. The sentence to be used is “The word rhythms doesn’t contain any vowels”. Hint: Use the match method with /i for case insensitivity.