Posts

Random jokes generator using API (Free)

Image
           Today let's see how to create a random joke generator which will basically fetch the data from a free API. My main target is to show how to use API and put the data in HTML using javaScript.      Today we will use JokeApi website -  https://sv443.net/jokeapi/v2/  . You can read the documentation from here. We will send an fetch request to -  https://v2.jokeapi.dev/joke/Any?blacklistFlags=racist,sexist&type=single&idRange=0-319  . You can get this type of URL from JokeApi and any free API. You can replicate the same process for other APIs as well.      When we send request to this URL of the API, it will send back a response which is transformed into JSON format in JavaScript. Let's have a look on the sample JSON data -  { "error": false, "category": "Pun", "type": "single", "joke": "I bought some shoes from a drug dealer. I don't know what he laced them with, but I was trippi

Different ways to Android Development - The Complete Guide

Image
What is Android ?        Android is a mobile operating system based on the modified version of linux operating system. In latest of 2021 the number of active android users in the world is about 131.2 million. Android is mainly for touchscreen mobile devices. These days, people are more engaged on their mobiles. They depend a lot on the android apps in their day to day life. Literally, android is nowadays a daily need of people. What is Android Development ?     Android development is the process to develop application for android OS. These are the apps which we find in the Google Play Store. As their is a strong user-base for android, their is a very much possibility for you to get success as an Android Developer. Their are several ways by which you can develop android apps, more specifically their are several Programming Languages and Frameworks to develop android apps. I will introduce them one by one -  1. Java :      Until now from the emergence of Android OS, Java is the mostly us

5 Best PHP IDE (FREE) For PHP Web Development

Image
  What is a PHP ide or PHP code editor:     PHP is a very popular backend web development programming language of all time. PHP is a very nice web application development language. A code editor is a software which helps us to write, understand and debug code faster. In the same manner, a PHP ide(integrated development environment) or PHP text editor helps us to do various stuffs with PHP code faster, which in return improves our productiveness in developing PHP web application. Every PHP editor automatically highlight syntax  of our PHP code and auto complete our code which gives us tremendous speed in development process. With that being said let's see the 5 best free PHP ide for your smooth workflow. 1. Eclipse :     Eclipse is a free PHP code editor, which you can use so easily in your day to day PHP development. It supports various color themes for you to write your code in your comfortable way. You can check their documentation and download the IDE from there official website

How to create a floating WhatsApp call to action button for website (No Plugin) ?

Image
            Today in this post I will share with you how to create a floating WhatsApp call to action button for your website. This call to action button will help your website visitors to send you a message through WhatsApp instantly from any page of your site. This button will float at any position of your website viewport as you wish, maybe in the bottom left or bottom right etc. Benefits of WhatsApp CTA button If your website has a WhatsApp CTA button, website visitors will be able to contact you easily whenever they want and it also gives your website a nice look.  Coding for WhatsApp CTA button Let's begin the coding part. In this case to get the WhatsApp icon we will use the font awesome. So at the very beginning let's paste the font awesome CDN link in the head section of your webpage. The CDN link is given below. <link crossorigin="anonymous" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="

Random Gradient Generator With CSS and Javascript

Image
      Let's see how to generate random gradient background using JavaScript. This is very simple. We will use Math.random() of JavaScript to generate any random value we want to generate. We will have some functions in JavaScript :  1) randomElement() : To generate a random value between 0 to f or the hexadecimal digits. 2) randomColor() : To generate a random Hex color. 3) randomAngle() : To generate a random angle between 0 to 360. 4) applyBg() : To apply the background gradient to a particular element. Now , Let's see the live preview of our project. Change Background Let's understand in short how is it generating random gradient everytime. We have an inbuilt function in JavaScript called Math.rand() which generates random fraction value between 0 to 1. So if I multiply that with any number N and floor or round off the value, it will output any random value between 0 to N in integer format. This concept we have used here.  To generate the

CSS not updating in PHP page

Image
      If you are working with PHP you may have faced a problem that whenever the CSS is being updated the new styles are not shown in the PHP page. This happens due to some caching problems. In this situation you have to hard reload the CSS each time page is refreshed. Normally, you have already included the CSS like this:  <link rel="stylesheet" href="style.css" />     But to hard reload the CSS and make the styles work every time you update the CSS file, you have to include the PHP code after CSS file name with ?v=  <?php echo date('his'); ?> . So the final structure will be like:  <link rel="stylesheet" href="style.css?v=<?php echo date('his'); ?>" /> Hope, you understand the solution. If you have any opinion, doubt or suggestion make a comment below. Also mention your country name in the comments, I am curious!! Ok, have a good day , Byee..

GET URL Parameters Using JavaScript - Web Development

Image
            What are URL parameters ? Let's say one URL of a site is like -   https://www.example.com/users?name=John&id=23 In this URL we can see that some parameters are passed as arguments at the end like (name=John and id=23) . This means that this particular URL is trying to do something with John of id 23. Now, let's say you are the host of this site. How can you GET these parameter values which are being opened by a user. To make it simple, suppose your website provides data for some names with ids. The data which you will show in your website depends on this parameters provided on the URL. Today, we will learn how to fetch them using JavaScript .      Let's fix a goal that whatever parameters of name and id value are in the URL we are to print them on the webpage. In this case, we will print John and 23 on the webpage. So, let's begin.          In JavaScript, window.location returns the URL of the location bar. We will create an URLSearchParams() object

Fast (and Free) CDN using GitHub and JsDelivr

Image
  CDN stands for Content Delivery Network for websites. In an easy manner, CDN is a place from where your website files (css, js, images) are loaded, as a result the load on your hosting server decreases and the CDN services are spread around the whole world to serve the files faster. Also your website may have image files which you also can upload to the CDN and serve to your website directly. Your website hosting will only have the HTML files or any dynamic contents. In that case your website speed will noticeably increase. So, now let's learn how can we make our own CDN completely free of cost.  STEP 1: Sign In to GitHub:      GitHub is an open source platform for developers for storing, managing, sharing and updating their codes or programs. So, you have to sign in to GitHub. If you don't have an account in Github, make sure to create one Follow Here . STEP 2: Create a New Repository :      Now, log in to your Git dashboard and create a new repository under your account. a

The Best Web Development Roadmap - Guide To Start Out

Image
           Web development is one of the all time trending topic to techies. The learning curve of web development has never down-sloped. Today, I will tell you the complete roadmap to be a web developer and pursue your career. I will give you a sequential overview to learn topics one after another. After learning them you will be called "A WEB DEVELOPER". Web development is always a trending career option -- Here Why    We can divide the web development into two subparts- A. Frontend development and B. Backend development. The tasks which a developer has to do are --  Make a basic markup of a page using HTML Design the webpage using CSS or any library like - Bootstrap, Tailwind, Bulma Make the website interactive with JavaScript  These steps come under frontend part. So, to handle frontend learn -- HTML, CSS, JavaScript, any  CSS library. Learn these topics one after another. Completing these you will be able to design a website and can make beautiful templates for websites.

Toggle Sidebar Code Using JavaScript in Web Development

Image
     In any modern responsive website you have surely seen an toggle sidebar which will open and close with an animation whenever the hamburger icon or menu icon is clicked. It looks nice with nice transition and is necessary to make your website responsive for mobiles.      Today, I will let you make your own toggle sidebar which you can implement in any website and give your website a modern enhancement. We will have to do three things,  1. Making the HTML of the menu button and sidebar 2. Adding CSS to the elements 3. Using JavaScript, enabling the toggle functionality. HTML:      One thing to be noted that the HTML code of the Menu and Sidebar can be given anywhere inside the body tag because we will finally give these elements fixed positions. Better put it just after the body.  <div id="mobile-navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Courses