Ajay Badgujar

Create Custom Data Grid Web Component using HTML5 and JavaScript ES6

In this series of tutorials, you will learn how to create a web-based component using HTML5, JavaScript using ECMAScript 6 (ES6) standards. The series of tutorial shows you how to build a custom data grid web component in Vanilla JavaScript.

  Table of Content:

#1 | Getting Started

#2 | Working with Interface

#3 | Loading data from API

#4 | Show Number of Rows per Page

#5 | Implementing Search…

Build Paint App Using HTML5, Canvas API, JavaScript, ES6

This series of tutorials, you will learn how to build complete paint application using HTML5, CSS, JavaScript with ES6 standards. The most exciting part is the FloodFill algorithm. The flood fill algorithm is used here to create a paint bucket tool.

  Table of content;

#1 | Getting Started #2 | Building Interface #3 | Adding event listeners #4 | Draw the shapes #5 | Pencil and Brush Tool #6 | Paint…

Double and Multi Handle Range Slider | HTML, CSS and JavaScript

Learn how to create single, double and multi handle range slider using HTML, CSS, and JavaScript.

This slider allows you to add many handles as you want without hard code. Just pass the number of handles you need it the program generates the handles dynamically.

Watch the video on youtube to learn how to create a multi handle range slider in javascript.

Finding KeyCode Values in JavaScript

While developing applications in JavaScript, sometimes we need to use keyboard-related input events. And the most important thing is on what key pressed or up what should happen. For this we have to identify from which key input is coming? The answer is simple… by identifying KeyCode from the captured key event.

Below is the…

Create frog jump game using HTML5, JavaScript and CreateJS – Part 8

Frog Lives

In this part, we will learn how to manage and control frog lives. You may already know, In the Super Mario game there are only three lives we got while playing the game. That means we can only try the game three times in the single play. Similarly, there are many popular games like Flappy bird, Pac Man where we got limited lives to play a single game. And once we end up with our all…

Create frog jump game using HTML5 CreateJS – Part 7

Imagine if there is no scoreboard in a game, and you keep playing without viewing any progress or how your performance is in the game? Yes, it will be a little bit boring playing a game without a scoreboard. Another side a scoreboard is the most important thing in a game to engage the player to play the game continuously. So let’s start with defining a score variable.

var score = [];

We have…

Create frog jump game using HTML5 CreateJS – Part 6

Adding controls and interactivity into game

In the previous part, we added movement to water, leaves, and frog by implementing game loop logic. In this part, we will add some keyboard interactions on the frog to jump on one leaf to another leaf.

Keyboard Inputs

Let’s take a look at keyboard constants, which we already have defined in the previous part.

const ARROW_KEY_LEFT = 37; const…

Create frog jump game using HTML5 CreateJS – Part 5

Building a game loop

In the previous two parts, we added all game elements like river water, leaves, foliages, grass, insects and frog. As well as set up their positions. Now its time to move the elements. As we discussed the storyboard in the first part, the lotus leaves will float on river water, and the river stream will flow towards the down direction on the canvas. Of course, the floating…

Clamping value using Math library JavaScript

You may be never heard about clamping value in JavaScript. Yes correct its because there is nothing built in available in JavaScript to clamp the values.

Here I have shared few options how we can define clamp function with Math library.

Option 1: Readable

Math.clamp = function(value, min, max){ if(value max){ return max; }else{ return value; } } console.log(Math.clamp(7, 5, 10)); // result…

Keep users in loop

In my past days when I was a developer or in other words I can say when I started my career as a Multimedia Programmer in that time I always noticed one thing very common in every project. The thing is getting all requirements from client and going for the coding and testing under secret environment. Initially I was not aware that why project management group wanted to work on every project…

Creating a Toggle Button using HTML5 CSS3 and JavaScript

Let’s look how to create Toggle Button. We will cover prettying up using CSS and CSS3.

Before we get started, we need to create a HTML page. So lets create a HTML page.

Setting up HTML page

In my case I always use Visual Studio Code editor to create my any web applications. So create a new index.htmlfile in your new project folder. Just type ‘html’ word and you will get a list of html templates.…

Creating Custom Combobox or Select box using HTML CSS and JavaScript

Combobox or as you know Select box in HTML5 is most common form element used in many websites. But sometime due to limitation of HTML select box we cant style it as per our requirement or we have to use some kind of css or javascript trick to get the result. But still we can say it is right way. So what is correct way? Yes… we have to create custom element instead use HTML select box. But how to…

Creating Simple Range Slider Component Using JavaScript

Writing components is little bit difficult task while developing a web based application, specially when you are a beginner or you don’t know how to write it and implement it.

So lets see how we can create a simple Range Slider component using HTML/CSS/JavaScript.

Before writing JavaScript for component, first we will need a HTML Page. Also we will need a style.css to style the page and script.js…

04 Adding more game elements

In the previous chapter we added background on stage. There are still few elements yet to add. Floating leafs on river water, a frog on a leaf and an insect on each leaf. So let get start adding elements.

03 Creating game background

In previous part, we have setup all the files to start the game coding. In this part you will learn how to create game background. Start with river and grass with foliage both side of the river.

02 Setting up game files

Now we have all the points of development stages. So let’s start with setting up game files. To setup game files, first of all we will create a game directory with the game name. After creating a create all the game files inside this directory.