Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
In this tutorial, we will learn what are Intersection types in TypeScript. With the help of TypeScript, we may mix various types to produce more comprehensive and effective use cases. You can learn how to build union and intersection types more effectively in TypeScript by knowing the design concept behind them. In TypeScript, a notion known as "Intersection Types" effectively enables us to combine different types. We can combine different type definitions and utilize existing ones by using intersection types. Although intersection and union types in Typescript are similar, they are used in very different ways. A type that combines ... Read More
In this tutorial, we will learn to implement class constants in TypeScript. Any application has shared values that need to be used by classes and modules. These numbers could be configuration parameters, environment settings, error codes, or status indications. Using constants to hold those values rather than hard-coding magic strings is recommended. Constant use makes a program manageable by preventing the repetition of values in different places. Object-oriented JavaScript is TypeScript. Classes, interfaces, and other object-oriented programming are supported by TypeScript. In terms of OOP, a class is a template for building objects. The object's data is contained within a ... Read More
In this tutorial, we will learn to push the elements at the start of the array in TypeScript. There are different ways to push single or multiple elements at the start of the array in TypeScript. Here, we will learn three different methods to push array elements at the array's starting index. Using the Array.unshift() Method The Array.unshift() method of TypeScript allows us to add the element into the array at the beginning. Also, we can add multiple elements at the start of the array using the Array.unshift() method. Syntax Users can follow the syntax below to use the array.unshift() ... Read More
In this tutorial, we will learn to override the multiple if-else conditions using the switch case statement in TypeScript. The single if-else statement is used to execute the condition statement. If the condition becomes true, the statement of if block executes otherwise control fallbacks to the else block and executes its statement. In some cases, developers must execute the code blocks on different conditions. For that, they require to write multiple if-else statements of ladder of if-else statements. Here, we will convert that ladder of if-else statements to switch case statements. Converting If-else conditions to Switch Statement in TypeScript Here, ... Read More
A modal is a dialog box/popup window that is displayed on top of the current page. To create responsive modal images, we use JavaScript to trigger the modal and display the current image inside the when it is clicked on. Also, we are using alt for the image caption text inside the model. Responsive modal images are images that are enlarged to fit into the window based on their size, device resolution, orientation and page layout. These images are usually enlarged with a mouse click. They can also be downloaded on a click from the web browsers. In this example, ... Read More
In this article, we are going to create a responsive slideshow gallery with the help of JavaScript and CSS. A responsive slideshow will display a series of images with a text on them and two arrow buttons using which you can browse through the images. A responsive slideshow gallery or, a responsive image slider gallery is same as the responsive image slide show. It is a series of images whch you can browse through. But instead of arrow marks this provides image thumbnails, showing the preview of the images in the slide show in a small view at the bottom ... Read More
In this article, we are going to create a responsive slideshow with the help of JavaScript and CSS. A responsive slideshow or we can say a responsive image slider, or a responsive images slider with text is a visually attractive and interactive design element that take part your viewers on the website it will have from one or more images with a text overlay on it. That is, it will display a series of images with a text on them. This also provide two arrow buttons suing which you can browse through the images (in both diresctions). This is used ... Read More
A collapsible panel is a basic container coach view that creates a section area that can contain other controls. This section can be lengthy or collapsed to show hide data. To create a collapsible sidebar menu, we need HTML, CSS, and javascript. A collapsible sidebar will collapse along with the main page. In simple words, it means the menu bar is displayed on the page with its respective width; and main content of the page takes a minimum margin to display on the page. Following are the steps to be followed to create a collapsible sidebar menu. In this example, ... Read More
In this article, we will learn how to create a curtain navigation menu using HTML, CSS and JavaScript. The curtain navigation menu will overlay on the entire screen by pushing back the current page. These menus display the sub−links of a link to make the navigation more specific. To create curtain navigation, we have to do the same as we had done earlier. In curtain navigation, we have two buttons one is an open button (menu) and the other one is a close button (cross). When you click on the open button the navigation will be visible on the screen ... Read More
In this article, we are going to discuss how to create a top navigation menu for smartphones / tablets using CSS and JavaScript. A navigation bar is usually the first pit−stop for the users visiting the website who seek guidance to walk through the website. It contains the list of elements present in your website; including the links to navigate through the website. To create a top navigation menu for smartphones and tablet it is easy, first we have to create a navigation menu page add media query inside the CSS. If width of the devices is less than 600px ... Read More