Found 8895 Articles for Front End Technology

How do you create a drop-down menu in HTML?

Ayush Singh
Updated on 18-Aug-2023 14:22:18

490 Views

A website created with HTML, CSS, and JS offers significant customization and flexibility, because of its coding-based structure. Design and functionality are entirely at the developers' hands, which makes it perfect for challenging or distinctive projects. However, WordPress streamlines the procedure with pre-made plugins and templates, making it appropriate for quick installs and non-technical users. However, for highly customised requirements, it could be restrictive. The decision ultimately comes down to the exact requirements, the developers' level of experience, and the degree of control desired over the look and feel of the website. Methods Used Using the and ... Read More

Create Horizontal Scroll Snap Using HTML and CSS

Jaisshree
Updated on 18-Aug-2023 17:21:41

596 Views

To create a horizontal scroll snap, we will make use of the scroll−snap−type to produce the snap effect. The properties scroll−snap−type and scroll−snap−align specify the sort of snap behavior we want to employ and the alignment of the snap points, respectively. The scroll−snap−type property's value of "x mandatory" indicates that we want to snap horizontally, and the scroll−snap−align property's value of "start" indicates that we want the snap marks to line up with the beginning of each section. This can be implemented using JavaScript libraries such as ScrollSnap that provide more advanced features and customization for the same. Another option ... Read More

Create an "Add to cart" button in Bootstrap

Jaisshree
Updated on 18-Aug-2023 17:43:38

835 Views

Bootstrap is a popular front−end framework that makes it easier to design and develop responsive and mobile−first websites. It provides several components and plugins that can be used to create an add−to−cart button and implement this functionality on a website. It contains pre−built styles and functionality that can save time and effort . Algorithm Load the necessary libraries and files using Content Delivery Network (CDN). Define the HTML structure of the page, including the product image, name, description, price, and "Add to Cart" button. Define the modal window structure that will appear when the "Add to Cart" button is ... Read More

How do I write CSS within HTML?

Ayush Singh
Updated on 18-Aug-2023 14:17:38

81 Views

Hypertext Markup Language (HTML) is a widely used markup language to create websites. Markup Languages are known for building frameworks or skeleton for a webpage. This framework cannot work entirely on its own and should be designed using CSS (Cascading Style sheets). CSS works on the webpages to make it visually appealing and to customize the website to individual’s needs. The goal of this article is to understand various methods of writing CSS within HTML. Though CSS code and HTML code can be written separately, and linked to each other (External CSS), we’ll talk about the other methods for the ... Read More

Creating 2 Column Layouts while Keeping Column Background Colors full Size

Jaisshree
Updated on 18-Aug-2023 17:10:42

155 Views

In the two-column layout, the content is organized into two columns of equal width. However, it can be a challenge to ensure that the background color of each column fills the full height of the content, especially when the content in each column is of different lengths. CSS grid is another option for creating responsive layouts with multiple columns Older layout methods, such as float and table-based layouts, can also be used but are not recommended due to their limitations and lack of flexibility Algorithm Define a wrapper class with display property set to flex. This will create a ... Read More

How to Count Array Items in Angular JS?

Jaisshree
Updated on 18-Aug-2023 17:08:39

3K+ Views

A well−liked JavaScript framework for creating dynamic web apps is AngularJS. It offers a variety of helpful array−related tools, such as ways to measure the number of items in an array. In this article, we'll look into using AngularJS to count the number of items in an array. Method 1: Using the length property Using the built−in length property is the quickest and most popular method to count the number of items in an array in AngularJS. The length property gives the array's total amount of items. Algorithm Start Define an array 'myArray' and assign it to a ... Read More

How to Count all Child Elements of a Particular Element using JavaScript?

Jaisshree
Updated on 18-Aug-2023 17:06:51

1K+ Views

Child Node A node that is immediately nested inside another node in a document tree or DOM (Document Object Model) tree is referred to as a child node in JavaScript. Child nodes are in specific HTML elements, text nodes, and comment nodes that are nestled inside of other HTML elements when working with HTML documents. Method 1: Using the childNodes Property Utilizing the childNodes property is one method of counting child components. The NodeList of all child nodes, including text nodes and remarks, is returned by this property. We can loop through the NodeList and examine each node's nodeType property ... Read More

TypeScript for Java/C# Programmers

Mohit Panchasara
Updated on 21-Aug-2023 15:04:43

157 Views

In this tutorial, we will discuss TypeScript, a great option for programmers who have experience with static typing languages like C# and Java. We can benefit from TypeScript's type system, which offers improved code completion, earlier error detection, and clearer communication between different parts of our program. It's essential to remember that TypeScript is based on JavaScript, which has some fundamental differences from traditional OOP languages. By understanding these differences, we can avoid common mistakes that programmers transitioning from C#/Java to TypeScript might make. Syntax Users can use the following syntax to create variables using TypeScript − let variableName: type ... Read More

Typescript - filter all matching objects in the object and its exactly the same children

Mohit Panchasara
Updated on 21-Aug-2023 15:03:33

1K+ Views

One common task in software development is filtering objects based on specific criteria. In this tutorial, we will explore how to filter all matching objects in an object and its exactly the same children using Typescript. This technique can be particularly useful when working with complex data structures or when extracting specific information from nested objects. We will utilize TypeScript's powerful features, such as type annotations and object manipulation, to achieve this. Recursive Function with Type Guards for Filtering Matching Objects and Their Children We can use a recursive approach to filter all matching objects in an object and it ... Read More

Structural typing in Typescript

Mohit Panchasara
Updated on 21-Aug-2023 15:00:36

371 Views

TypeScript, a superset of JavaScript, introduces static typing to JavaScript, allowing developers to catch potential errors and enhance code quality. One of the key features that set TypeScript apart is its support for structural typing. While other statically typed languages often rely on nominal typing, TypeScript embraces the concept of structural typing, which provides a more flexible and intuitive approach to type checking. In this tutorial, we will explore the concept of structural typing in TypeScript and its benefits and provide relevant examples to illustrate its usage. Understanding Structural Typing Structural typing is a type system that focuses on the ... Read More

Advertisements