Posts

Range Slider Uisng Javascript and CSS for changing the selected part Color

Image
Hello all, You all would have seen many blogs and videos creating range slider using JQuery. But most of us encountered this situation in production code to create it using Plain JavaScript only. So here is the solution guys. In this tutorial we will go on to create a input range slider using plain JavaScript. Which can thus be added to any framework of JavaScript. Also in this tutorial we will do the CSS part of it also to make the selected part different in color then the background one. Stay calm we will do it. Objective : To create a range slider which have its selected part highlighted with different color. Lets get started. Understanding Input type="range" Input type="range" is represented using a slider rather than a textbox as in number type. Note : If your browser doesn't support the type range then it will fall back and show normal text input. Create a folder and add your index.html , style.css and script.js files. Now in your inde...

[Sass] Installing and Using Sass on Windows for Beginners

Image
Hello all, If you are a Beginner in Sass then this tutorial is for you. And do share it if you found it useful at the end. This blog follows Simple steps to create an application which uses sass. Installing Sass on Windows First we need to install Ruby using the  Link . Look for the (x64) version. What is Ruby? Ruby is the technology Sass is built on. So you need to install ruby first so Sass can run on top of it.  Important note :  While installing Ruby make sure that you have 'Add ruby executable in your path' option checked. Steps To Use Sass Now lets start with the Sass part in the most easiest way because many other tutorials complicate things too much. Follow the steps below: 1. Create a demo folder in any of your drive. 2. Inside that folder create two sub folders /css and /scss. 3. Now create a .scss file in you /scss folder and name it demo-style.scss. Yes, this is your Sass file. But its empty now. 4. Now open this /demo folder in you com...

Subject in Angular 2

Image
Hello all, Here I am with my second piece of writing on JavaScript solutions to common problems. In this article we will look at Subject in Angular and its comparison with EventEmitter . First lets know what Subject is? Subject is an Observable. But an Observable only allows you to subscribe to an event whereas subject allows you to both publish and subscribe to an event. So Subject allows your service to be used as both a publisher and subscriber. Question: Now a Question always arise that why should we use Subject instead of EventEmitter provided by Angular itself whereas Subject is part rxjs package which is a third party provider. In my opinion EventEmitter is expected to emit events between components or directives. As per  EventEmitter Documentation  which says: use by directives and components to emit custom events .  Eventhough you can use it as you want, but I think you will be misusing it. So using  ...

Google maps places autocomplete using Angular 2

Image
Hello all, Entering location manually could be the most annoying part any user can experience while using your application. Maps Places autocomplete feature could be added to any particular application written in any specific language. Here we will do it using angular 2. Angular or Angular 2/4  the latest buzz in the Javascript world is considered the best amongst many Javascript frameworks. Before we proceed we need an angular project which we will create using angular cli. Angular CLI You all can refer to this  Angular CLI . npm install  @angular/cli -g ng new my-app cd my-app ng serve note: MAC users should use npm install with administrative permissions (use sudo before command). Now we need a package for using google maps components to achieve what we started on. Angular Google Maps(AGM) Angular Google Maps(AGM) contains serveral components to use google maps and its several components into your applications. We use it by installing packages to ou...