DEV Community: Gitanshu Choudhary

The “Book Cricket” Game Built via Modern JavaScript & HTML

Gitanshu Choudhary — Mon, 20 Jan 2020 18:17:41 +0000

Hi, I am back again with another Tech Story on “DEV” based on Modern JavaScript & a little bit of HTML.

We will be building a Game called “Book Cricket”, which I used to play in my School Days. For those who are not aware of this Game, I will give you all a brief overview of it.

“Book Cricket” is played among 2 players & as the second half of the name ‘Cricket’ suggests that the Player with more runs wins the Game.

How We used To Play in ‘School Days’ ?

We used to select a ‘Book’ ( Thicker the Better !) & ‘Total Number of Wickets’ for each player.
Each Player on his/her Turn used to open the Book to a ‘Random Page Number’.
Then we used to note the last digit of that ‘Randomly Selected Page Number’. For example, If I opened the book randomly on to Page Number ‘102’ so my Runs for that particular turn would be calculated as ‘2 Runs’.
After noting down the Runs scored, Book is ‘Closed’ and is ‘Opened’ again to a ‘Random Page Number’ & follows the Steps ‘2 & 3’.
In Case the Player gets a ‘Page Number’, with its Last Digit as ‘0’ ( for example 120 or 40 ), then the Player lose 1 Wicket.
In every turn Runs are ‘Added’ onto the Runs scored by the Player in his/her ‘Previous’ turns. This Continues till the Player losses all his/her ‘Wickets’ or ‘Runs’ scored by that Player surpasses the Runs scored by other Player.
‘Sole Purpose’ is to ‘Win’ the Game by scoring ‘More Runs’ than your Opponent before loosing all your ‘Wickets’.

I know, to some it might sound familiar & to some a bit confusing. But we should look at the ‘Big Picture’ that is the Logical Code to build this Game.

So let’s begin with the Coding Part Now !!

We will decode our Game in 2 Parts :

First Part for HTML ,

We will build the ‘User Interface’ of our Game using basic HTML components such as :

‘H2’ & ‘Label’ tags for headings
2 ‘Input’ fields for entering Information regarding ‘Book Size’ & ‘Total Wickets’.
3 ‘Button’ tags for ‘Player 1’, ‘Player 2’ & ‘New Match’ with Event Handlers.

index.html

Output : index.html

Second Part for JavaScript,

We will be coding “mainJS.js” in sub-parts according to their functionalities individually :

In the First sub-part, we will be initializing our ‘Global Variables’.

Global Variables Initialization

In the Second sub-part, playerWin() function is defined which would compare the final scores of both the players to Decide the Winner.

playerWin() function

In the Third sub-part, we will define an ‘Event Listener’ for Button linked to ‘Player 1’. This ‘Event Listener’ will fire two functions. First function is ‘calPlayerScore()’ which will calculate the Runs scored by Player for every Turn, using ‘Math Functions’ of JavaScript. Second function is ‘playerTurn1()’ which will keep Track of the Runs scored and Wickets left for ‘Player 1’.

Event Listener for ‘Player 1’ button

In the Fourth sub-part, we will define an ‘Event Listener’ for Button linked to ‘Player 2’. This ‘Event Listener’ will fire two functions. First function is ‘calPlayerScore()’ which will calculate the Runs scored by Player for every Turn, using ‘Math Functions’ of JavaScript. Second function is ‘playerTurn2()’ which will keep Track of the Runs scored and Wickets left for ‘Player 2’.

Event Listener for ‘Player 2’ button

In the Fifth sub-part, we will define an ‘Event Listener’ for ‘New Match’ Button. This ‘Event Listener’ will Clear The Console and will enable the ‘Player 1’ & ‘Player 2’ buttons for the New Match. It will also reset the Global Variables to their Default Values.

Event Listener for ‘New Match’ button

Finally, its time to see the Code in Action below :

Player 1 Score

Player 2 Score

New Match

Attaching below the code via public GitHub gist link.

If you liked my efforts, do encourage this post via Feedbacks & Comments.
I appreciate the support.
Thank You !

.ltag__user__id__311785 .follow-action-button { background-color: #000000 !important; color: #ffffff !important; border-color: #000000 !important; }

Gitanshu ChoudharyFollow

Mulesoft API Development

Simple & Sober "Wallet Tracker" in Modern JavaScript

Gitanshu Choudhary — Sun, 12 Jan 2020 15:53:51 +0000

Hi, my name is Gitanshu Choudhary and being a JavaScript enthusiast I am penning down my second Tech Story on "DEV".

In this story, we will be creating a Modern JavaScript application called "Wallet Tracker" with its interface implemented on Cmder.

Info-Pinch : Cmder pronounced "Commander" is a pre-configured software package that provides you with an awesome terminal emulator, and best shell you'll ever have on Windows.

Our Application will be based on Simple yet Key JavaScript elements such as :

Functions / Methods
Arrays
Objects
Built-In Array Functions
Loops

"Wallet Tracker" will consist of Three Major methods for implementing its functionality :

First method will be used to add the flow of Income in the user's Wallet.
Second method will be used to add the flow of Expense out of the user's Wallet.
Third method will be used to calculate the Balance left in the user's Wallet, And display the Lists of all Income & Expense transactions along with their Descriptions/Sources.

"One Man Army",

In our application the whole logical code is stored in One Single Object called "myWallet".
From initializing the Basic Key-Value Pairs to creating Logical Methods, everything is embedded in a single object.

3 Key-Value Pairs,

We will be creating 3 Key-Value pairs to initialize our application.

First key is named as "name" which will contain the name of the Wallet holder.
Second Key is "incomes" which act as an Array to store Objects with properties as "amount" & "source".
Third Key is "expenses" which act as an Array to store Objects with properties as "amount" & "source".

3 Key-Value Pairs

3 Dynamic Methods,

We will be creating 3 Methods which will Dynamically process the 3 Key-Value pairs which we defined above.

First Method,

We will be creating is called addIncome(amount, source), where "amount" will store the cash in-flow while the "source" stores the description regarding this deposit.

addIncome() method

Second Method,

We will be creating is called addExpense(amount, source), where "amount" will store the cash out-flow while the "source" stores the description regarding this withdrawal.

addExpense() method

Third Method,

We will be creating is called walletReceipt(), it takes no arguments. In this method we will be calculating following things :

Total Expenses : Using a forEach() loop, we will be calculating the total Expenses spent by the user & will also be printing a list of all the Withdrawals along with their descriptions.
Total Incomes : Using a forEach() loop, we will be calculating the total Incomes earned by the user & will also be printing a list of all the Deposits along with their descriptions.
Balance : Using the Return Value of above loops, we will be calculating the Balance value left in the Wallet. We will be printing a Final Statement showcasing the "name" of the user with the final values of his/her Expense, Income and Balance.

walletReceipt() method

Finally,

We will be calling these methods to showcase the functionality of our application by Calling Statements.

Calling Statements

Output of our application will be shown as :

Output

At the end, we have successfully created our "Wallet Tracker" application using simple yet major Elements of Pure Modern Javascript.

Attaching below the code via public GitHub gist link.

If you liked my efforts, do encourage this post via Feedbacks & Comments.
I appreciate the support.
Thank You !

.ltag__user__id__311785 .follow-action-button { background-color: #000000 !important; color: #ffffff !important; border-color: #000000 !important; }

Gitanshu ChoudharyFollow

Mulesoft API Development

CRUD Operations in Modern JavaScript

Gitanshu Choudhary — Sat, 11 Jan 2020 19:31:54 +0000

Hi, My name is Gitanshu Choudhary, an enthusiastic JavaScript learner.
Firstly, I want to thank all the readers for giving their time to go through my 'First DEV Story'. And a big shout-out to DEV for providing such a great innovative platform.
I am a newbie to this big world of JavaScript, And my first real progress is performing CRUD operations in JavaScript.

'CRUD'...

Crud operations are like the first steps for every programmer who yearns at learning a programming language.
To be a hardcore developer, we have to strengthen up our foundations & 'CRUD' are at the core of every programming language.
We will be coding a 'Note Taking Application' in pure Modern JavaScript to showcase the working of CRUD operations.
Now let us define 'CRUD' operations with respect to our "Note Taking Application". This application stores a note with a "Title"as a String datatype and "Status" as a Boolean datatype. Each note will be stored as an object and and all the notes in the application will be stored together as an Array of Objects.
Firstly, we will create an Array of Objects called "notesList" which will contain notes in the form of objects.

notesList Array of Objects

C for Create...

Here, we will be creating a function called "addNote(title, status)" which will add a new note to the application. Arguments of this function require a Title and a Status for the new note. Title will contain the string name, And status will contain either a true or false value, where true depicts that the status of note is complete and false depicts its incomplete status.
In addNote() function, we will be using push() method to add new Note Object in the Array of Objects called "notesList".

addNote() function

Output : addNote() function

R for Read...

Here, we will be creating a function called displayNotes() which on being called will display a ordered list of notes with their status. This function will take no arguments.
In displayNotes() function, we will use forEach() to loop through the array and display it to the user.

displayNotes() function

Output : displayNotes() function

U for Update...

Here, we will be creating 2 functions called updateNote(oldtitile, newtitle) & updateNoteStatus(title, newStatus).
updateNote(oldtitile, newtitle) will update the title name of an existing note. This function will use findIndex() method to search for the existing note and will return its index number. Then using the return value, we will update the Title of the note.

updateNote() function

Output : updateNote() function

updateNoteStatus(title, newStatus) will update the completion Status of the Note. This function will also use findIndex() method to search for the existing note and will return its index number. Then using the return value, we will update the Status of the note.

updateNoteStatus() function

Output : updateNoteStatus() function

D for Delete...

Here, we will be creating a function called deleteNote(title) which will delete the note on the basis of the title passed as the argument in the function.
This function will also use findIndex() method to search for the existing note and will return its index number. Then using the return value, we will implement the splice() method to remove the note.

deleteNote() function

Output : deleteNote() function

Finally, we have coded and implemented CRUD operations using Pure Modern JavaScript.
Attaching below the code via public GitHub gist link.

If you liked my efforts, do encourage this post with comments and feedback.
Thank You !

.ltag__user__id__ .follow-action-button { background-color: #19063A !important; color: #dce9f3 !important; border-color: #19063A !important; }

DEV Community: Gitanshu Choudhary

The “Book Cricket” Game Built via Modern JavaScript & HTML

First Part for HTML ,

Second Part for JavaScript,

Finally, its time to see the Code in Action below :

Attaching below the code via public GitHub gist link.

Gitanshu ChoudharyFollow

Simple & Sober "Wallet Tracker" in Modern JavaScript

"One Man Army",

3 Key-Value Pairs,

3 Dynamic Methods,

First Method,

Second Method,

Third Method,

Finally,

Attaching below the code via public GitHub gist link.

Gitanshu ChoudharyFollow

CRUD Operations in Modern JavaScript

'CRUD'...

C for Create...

R for Read...

U for Update...

D for Delete...

[Deleted User]