GEO location with HTML5 and jQuery

This tutorial shows you how to display the geographic location or Geo location of a user or device on a Google map, using your browser’s HTML5 Geolocation feature along with the Google Maps JavaScript API.

What is Geolocation?

Geolocation refers to the identification of the geographic location of a user or computing device via a variety of data collection mechanisms. Typically, most geolocation services use network routing addresses or internal GPS devices to determine this location. Geolocation is a device-specific API. This means that browsers or devices must support geolocation in order to use it through web applications. You may find about Geolocation here Google Geolocation Continue reading “GEO location with HTML5 and jQuery”

Create React JS Application on Windows

In this tutorial I am going to show you how we can create React JS application in Windows environment.

Before reading this tutorial please make sure you have installed the node.js in your system. Please have a look at this here for node.js installation

Prerequisites

I’ll assume you do have some familiarity with HTML and JavaScript, but you should be able to follow along even if you haven’t used them before.

Please follow the below steps one by one in order to create React application.

Continue reading “Create React JS Application on Windows”

How to Install Node.js and NPM on Windows

I am going to show you how to install node.js (zip) on Windows OS. Node.js is a JavaScript runtime built on Chrome’s V8 JavaScript engine and it uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js package ecosystem, npm, is the largest ecosystem of the open source libraries.

Here we will see how to install zip version of node.js, not Windows installer (msi).

Please find below installation instructions step by step.

Continue reading “How to Install Node.js and NPM on Windows”

ReactJS REST API DELETE Example

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. The full documentation is available at https://reactjs.org/. In this tutorial I will show you how to delete the existing resource (REST API DELETE) using React JS framework. The article, ReactJS REST API DELETE Example, will use ready made available REST API https://jsonplaceholder.typicode.com/posts for testing purpose. You can also create and deploy your own service using PHP, Codeigniter or Spring, Jersey etc. and call using React JS framework. Here you will see only DELETE example (other HTTP verbs GET, POST, PUT, HEAD, OPTIONS etc.).

You may also like to read ReactJS REST API GET Example ReactJS REST API POST Example ReactJS REST API PUT Example

Continue reading “ReactJS REST API DELETE Example”

ReactJS REST API PUT Example

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. The full documentation is available at https://reactjs.org/. In this tutorial I will show you how to update the existing resource (REST API PUT) using React JS framework. The article, ReactJS REST API PUT Example, will use ready made available REST API https://jsonplaceholder.typicode.com/posts for testing purpoase. You can also create and deploy your own service using PHP, Codeigniter or Spring, Jersey etc. and call using React JS framework. Here you will see only PUT example (other HTTP verbs GET, POST, DELETE, HEAD, OPTIONS etc.).

You may also like to read ReactJS REST API GET Example ReactJS REST API POST Example ReactJS REST API DELETE Example

Continue reading “ReactJS REST API PUT Example”

ReactJS REST API POST Example

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. The full documentation is available at https://reactjs.org/. In this tutorial I will show you how to create new resource (REST API POST) using React JS framework. The article, ReactJS REST API GET Example, will use sample ready made available REST API https://jsonplaceholder.typicode.com/posts for testing purpoase. You can also create and deploy your own service using PHP, Codeigniter or Spring, Jersey etc. and call using React JS framework. Here you will see only POST example (other HTTP verbs are GET, PUT, DELETE, HEAD, OPTIONS etc.).

You may also like to read ReactJS REST API GET Example ReactJS REST API PUT Example ReactJS REST API DELETE Example

Continue reading “ReactJS REST API POST Example”

ReactJS REST API GET Example

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. The full documentation is available at https://reactjs.org/. In this tutorial I will show you how to fetch data from REST service using React JS framework. The article, ReactJS REST API GET Example, will use sample ready made available REST API https://jsonplaceholder.typicode.com/posts for testing https://jsonplaceholder.typicode.com/posts. You can also create and deploy your own service using PHP, Codeigniter or Spring, Jersey etc. and call using React JS framework. Here you will see only GET example (other HTTP verbs POST, PUT, DELETE, HEAD, OPTIONS etc.).
You may also like to read https://www.roytuts.com/tic-tac-toe-game-using-react-js/  ReactJS REST API POST Example ReactJS REST API PUT Example ReactJS REST API DELETE Example

Continue reading “ReactJS REST API GET Example”

Precached images using JavaScript

Images often take several extra time to download from a Web server. If images change in response to user actions then we may want the same fast response that users are accustomed to. It may be an irritating while users are waiting for image(s) to be downloaded for a page. JavaScript comes to the rescue by enabling scripts to load images into the browser’s memory cache without displaying the image, a technique called precaching images. In this technique images load into browser’s image cache when the page initially loads. A precached image differs in some respects from the document object that we create using <img/> tag. Objects created in memory are not seen on the page at all but their presence in the document code forces the browser to load images when the page gets loaded. The Image object constructor function is used to create the memory type of image object as follows: Continue reading “Precached images using JavaScript”

Convert lowercase to uppercase in JavaScript

This tutorial will show you how to convert from lowercase to uppercase using JavaScript onkeyup event. There is an input box where you will type and onkeyup JavaScript event will call a custom function which will convert the lowercase letter to uppercase letter. onkeyup means as you type the function will be called and the letter will be converted instantly to uppercase. Continue reading “Convert lowercase to uppercase in JavaScript”

Auto populate input field using JavaScript

This tutorial example shows how to populate input fields in form automatically when a page is loaded or when a checkbox is checked. The below example has three fields and one of then gets populated when the page is loaded and another one of them is populated when checkbox is checked.

Sometimes we need to populate the input fields depending upon another field then it may be useful. So below example will give you an idea so that you can also populate your form fields according to your requirements.

Continue reading “Auto populate input field using JavaScript”