-
Dark Mode Toggle button using HTML, CSS and JavaScript
Here’s a simple way to create a toggle button to switch between light mode and dark mode using HTML, CSS and JavaScript function. In the above CSS code block, we’ve created the default light mode background for the body. We’ve also created another dark-mode class which will be activated dynamically using the JavaScript function. In…
-
A box-shadow template to use anywhere inside your CSS project
Here’s a box-shadow template which you can use in any of your CSS projects : So, the order is just this : Here’s another more complex one with double box shadows which stacks layer on layer to make it look deeper : Try and edit these to experiment anywhere you want on your project.
-
JavaScript Promises using Resolve and Reject
JavaScript has a special class called Promise. In order to create a promise, you’ll have to create an instance of the promise class. The promise constructor needs only a single argument which is a function (though you can add two arguments as well). The promise needs to be created with the function. The function is…
-
Web Page Alignment Basics using HTML & CSS
We’ll look at horizontal and vertical alignment basics using various HTML and CSS properties. Ways to horizontally align items using CSS Using text-align property This is used to horizontally align text within a block-level element, such as a <div> or <p> tag. Using the margin property This property is used to horizontally adjust the block-level…
-
How to install Bulma CSS Framework into your Web Dev Project?
First create an project folder and add the index.html file in it with the boilerplate code. Next write this line of code inside the terminal to initialize the project with package.json : Next, to install Bulma Framework inside your project type this inside the terminal : The above terminal command imports all the Bulma files…
-
How to create reusable Header and Footer using JavaScript?
There are a few different ways to create reusable header or footer in a website using JavaScript so that you don’t have to repeat the code. Let’s explore : Method 1 (using template tag) I’m using an HTML template tag to hold content first. Content inside this tag is hidden by default. You have to…
-
How to Implement Bootstrap via NPM for your Web Development Project?
This command creates a package.json file which contains some details about the project folder you’ve created. This is the first step in initialization of the process. This command installs all the bootstrap files and folders inside your project directory. Here’s the full code setup inside index.html to make you understand everything clearly : That’s how…
-
Asynchronous JavaScript, AJAX, APIs and JSON : An Intro
In order to understand what Asynchronous JavaScript is, we need to first know what synchronous JavaScript means. Every JS function or code runs in a certain rule of sequence. For example, in order to execute a multi-line code, a first set of instructions is executed just to go to the next step and the next,…
-
How to remove red wavy underline from text using HTML?
You might have seen wavy red underline under an editable text field or an input field when you misspell any word. By default, the red underline displays under your text every time you mistype anything. You need to use the HTML spellcheck attribute and set it to false in order to remove the underline. Here’s…
-
Whether a number is odd or even – JavaScript
Question How to find out whether a number is odd or even using JavaScript code? Solution 1 Solution 2 Note: Here I’ve used the Bitwise AND rule. Refer JavaScript Bitwise AND documentation to know why this works. In the above code, n & 1 returns odd and everything else returns even numbers as per the…
