Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Articles by Yaswanth Varma
Page 25 of 31
JavaScript Insert space after every two letters in string?
In this article we are going to learn about how to insert space after every two letters in string. Before we jump into the article let's have a quick view on the strings in JavaScript. A sequence of one or more characters—which could be numbers, or symbols—is referred to as a string. Strings are immutable primitive data types in JavaScript, which means they cannot be changed. Let's dive into the article to learn more about inserting a space after every two letters in strings. For this, we'll explore multiple approaches using replace() with regular expressions and other methods. ...
Read MoreClear element.classList in JavaScript?
The task we are going to perform in this article is clear element classList in JavaScript. The classList property provides methods to add, remove, toggle, and check CSS classes on HTML elements. All element objects (i.e., objects that represent elements) in a Document derive from the most general base class called Element. It contains functions and characteristics that apply to all types of elements. What is classList in JavaScript JavaScript classList is a DOM property that enables manipulation of an element's CSS classes. The read-only classList property returns a DOMTokenList containing the CSS class names of an ...
Read MoreHow to test if a parameter is provided to a function in JavaScript?
Testing if a parameter is provided to a function in JavaScript is an important part of writing effective code. It allows you to ensure that the arguments passed into your functions are valid and properly formatted for use within the function. In this article, we will discuss different methods for testing whether or not a parameter has been provided to a function in JavaScript. Let us understand the term "Parameter". A parameter is a named entity in a function definition that specifies an argument which the function can accept. It acts as a variable within the function and its ...
Read MoreHow to add a Login Form to an Image using HTML and CSS?
A login form on an image creates an attractive, modern website design commonly used by restaurants, event organizers, and businesses. This approach overlays a functional login form on a background image, making the website more visually appealing than standard forms. Syntax .container { background-image: url('image-path'); background-size: cover; position: relative; } form { position: absolute; /* positioning and styling properties */ } Approach To create a login form on an image, follow these steps ...
Read MoreCreating a Navigation Bar with three Different Alignments using CSS
In HTML, a navigation bar is a group of buttons and images arranged either in a row or a column and used as a control site for linking particular webpages. It is regarded as one of the fundamental tools used in web design. Without affecting the content of the pages, the HTML navigation bar separates structure from content and adds creativity to the layout of the website. Using HTML, we create a navigation bar, and CSS gives it a beautiful appearance. Additional functionality may be added using JavaScript. In HTML, a navigation bar can be implemented in a variety ...
Read MoreCreate a Circular Progress Bar using HTML and CSS
A progress bar displays the status of a procedure within an application. A progress bar shows how much of the process has already been completed and how much is still left to do. The various components of the progress bar will be designed using HTML, and the progress bar itself may be modified using CSS properties. Progress bars are frequently used on websites to highlight particular data in a more appealing way for users. One advantage of employing a circle progress bar over a standard (horizontal) progress bar is that you can accommodate more progress bars in one row, ...
Read MoreCreate a Search Bar using HTML and CSS
To create a search bar using HTML and CSS, we can use simple form elements and basic CSS properties. A search box is one of the most commonly used components in a website which makes navigation easier for users. Syntax /* Basic search bar structure */ .search-container { display: flex; align-items: center; } input[type="text"] { padding: value; border: value; border-radius: value; } button { padding: value; background-color: ...
Read MoreCreate a Sticky Social Media Bar using HTML and CSS
A sticky social media bar is a fixed navigation element that remains visible while users scroll through your website. It provides easy access to your social media profiles and helps increase engagement and followers. Using CSS, we can create an animated sticky bar that slides out on hover without affecting your website's performance. Syntax .social-container { position: fixed; right: -width; transition: all 0.25s ease-in-out; } .social-item:hover { margin-left: -slide-distance; } Example: Right-Side Sticky Social Bar The following ...
Read MoreDesign a calendar using HTML and CSS
To design a calendar using HTML and CSS, we will be using HTML tables. We use calendar in our daily life to check the dates, schedule any event and many more. In this article, we will understand how we can design a calendar using HTML and CSS only. We will be using HTML table to create the structure and use CSS properties to design the UI of calendar. Steps to Design a Calendar Using HTML and CSS We will be following below mentioned steps to design a calendar using HTML and CSS − ...
Read MoreDesign a Rotating card effect using HTML and CSS
The rotating card effect creates an engaging visual experience where cards spin when you hover over them, revealing additional content on the back side. This effect is achieved using CSS 3D transforms and transitions. Syntax .card-container { perspective: value; } .card { transform-style: preserve-3d; transition: transform duration; } .card:hover { transform: rotateY(180deg); } .card-side { backface-visibility: hidden; } Key CSS Properties PropertyDescription perspectiveDefines the distance from the viewer to the ...
Read More