JavaScript Examples – CodeInDotNet https://www.codeindotnet.com C# Dot Net Programming tutorial & code examples Tue, 02 Apr 2024 06:44:11 +0000 en hourly 1 https://wordpress.org/?v=6.8.3 https://www.codeindotnet.com/wp-content/uploads/2021/04/SiteIcon.png JavaScript Examples – CodeInDotNet https://www.codeindotnet.com 32 32 How to apply search filter for a list using Javascript https://www.codeindotnet.com/search-filter-div-list-items-javascript/ https://www.codeindotnet.com/search-filter-div-list-items-javascript/#respond Mon, 11 Dec 2023 14:56:37 +0000 https://www.codeindotnet.com/?p=6565
search filter list items javascript




Implement Filter/Search Functionality in Javascript


When dealing with lists of items on a webpage, implementing a search filter can greatly enhance the user experience. In this tutorial, we’ll explore how to create a simple search filter using HTML, CSS, and JavaScript.


Step 1: Set Up Your HTML Structure


The syntax provided below creates the basic HTML structure for a webpage. In this example, we’ll use an input field for the search query and an unordered list to display our items:

<html>
<head>
	<style>
		input[type="text"]{
			background-color: #FFFFFF;
			border-style: solid;
			border-width: 1px;
			border-color: #cccccc;
			box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
			color: rgba(0, 0, 0, 0.75);
			height: 2.3125rem;
			margin: 0 0 1rem 0;
			padding: 0.5rem;
		}
		
		input[type="text"]:focus{
			background: #fafafa;
			border-color: #999999;
			outline: none;
		}
		
		#myList{
			line-height: 1.6; 
			font-size: 18px; 
			overflow-y: scroll; 
			height: 500px; 
			border: 2px lightgray solid; 
			padding-left:15px;
		}
		
		#myInput{
			width: 80%; display:inline; border-radius: 10px;
		}
	</style>
</head>

<body>
<div>
	<h2><strong>Filter Search List Using javascript</strong></h2>
	<br>
	<div>
		<!-- Search TextBox -->
		<div>			
			<span style="font-weight:bold; font-size: 18px; color: #555555; ">Search filter: </span>
			<input type="text" id="myInput" placeholder=" type &amp; filter..."/>
		</div>
		<br>
		
		<!-- Loading List of Items in each Div section -->
		<div id="myList">
			<!-- Item 1 -->
			<div class="filter-list-item" style=""><a href="" target="_blank">One</a></div>
			<!-- Item 2 -->
			<div class="filter-list-item" style=""><a href="" target="_blank">Two</a></div>
			<!-- Item 3 -->
			<div class="filter-list-item" style=""><a href="" target="_blank">Three</a></div>
			<!-- Item 4 -->
			<div class="filter-list-item" style=""><a href="" target="_blank">Four</a></div>
			<!-- Item 5 -->
			<div class="filter-list-item" style=""><a href="" target="_blank">Five</a></div>
			<!-- Item 6 -->
			<div class="filter-list-item" style=""><a href="" target="_blank">Six</a></div>
		</div>
	</div>
</div>

<!-- Keep JS with in body section -->
<script type="text/javascript">

</script>
													
</body>
</html>



Step 2: Add JavaScript for the Search Filter


There are two kinds of search filters. One matches exactly what you type in the search input, while the other shows multiple filter results based on each matching word in the input field. Below is the JavaScript code for both scenarios.


a) Search Filter List Items by Exact Match – Javascript Code


Use this JS code when you want to filter items that match exactly with the text entered in the input textbox. 

<script type="text/javascript">
	document.getElementById("myInput").addEventListener("keyup",
		function searchFilter() {
			// Declare variables
			var input, filter, div, divs, a, i;
			input = document.getElementById('myInput');
			filter = input.value.toUpperCase();
			div = document.getElementById('myList');
			divs = div.getElementsByClassName('filter-list-item');

			// Loop through all list items, and hide those who don't match the search query
			for (i = 0; i < divs.length; i++) {
				a = divs[i].getElementsByTagName('a')[0];
				if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
					divs[i].style.display = '';
				} else {
					divs[i].style.display = 'none';
				}
			}

	});
</script>
In this code:
  1. adds an event listener to the HTML element with the ID “myInput”, specifically listening for the “keyup” event (when a key is released) and this will trigger “searchFilter” function
  2. Retrieves the input element with the ID “myInput” and stores its value in the variable filter after converting it to uppercase.
  3. Retrieves a collection of elements with the class “filter-list-item” within “myList” the container.
  4. Iterates through each element with the class “filter-list-item.”
  5. Retrieves the anchor element (<a>) within the current item.
  6. Compares the uppercase content of the anchor element with the uppercase filter text. If a match is found, the item is displayed; otherwise, it is hidden.
    To hide unmatched items use – divs[i].style.display = ‘none’;
    To show matched item use – divs[i].style.display = ”;


b) Filter Search List Items by Multi-Word Match – Javascript Code


Use this JS code when you want to retrieve multiple search results that match all the words (split by space) entered in the input textbox.

<script type="text/javascript">
	document.getElementById("myInput").addEventListener("keyup",
		function searchFilter() {
			// Declare variables
			var input, filter, div, divs, a, i;
			
			// remove double spaces in between text, trim outer space and convert to uppercase
			input = document.getElementById('myInput').value.replace(/\s{2,}/g, ' ').trim().toUpperCase();
			
			// split filter search text by space and add it in array.
			arrFilters = input.split(' ');   
			
			div = document.getElementById('myList');
			divs = div.getElementsByClassName('filter-list-item');
			
			// if no input then show all items.
			if (input.length == 0) {
				for (i = 0; i < divs.length; i++) {
					divs[i].style.display = '';						
				}
			}
			else {
				// Loop through all list items
				for (i = 0; i < divs.length; i++) {
					a = divs[i].getElementsByTagName('a')[0];
					// hide items by default
					divs[i].style.display = 'none';
					for (j = 0; j < arrFilters.length; j++) {
						// if list item matches with any filter array item then display it.
						if ((arrFilters[j].length > 0) && (a.innerHTML.toUpperCase().indexOf(arrFilters[j]) > -1)) {
							divs[i].style.display = '';
							break;
						} 						
					}
					
				}
			}

	});
</script>

This code works similarly as explained above but with a slight difference. Instead of searching the entire text at once, it looks at each individual word. It then finds and displays items that match, resulting in multiple search filter results.

Remove toUpperCase() if you want to perform a case-sensitive search.




Step 3: Test Your Search Filter



Test 1 – Exact match search filter


Search and Filter Exact Text

Search filter:


Test 2 – Multiple search filter match by each word


Search and Filter all Matching Words

Search filter:


Download Source Code & Try Yourself:
Filter Search by Exact Match – Download
Filter Search by Multiple Words – Download


]]> https://www.codeindotnet.com/search-filter-div-list-items-javascript/feed/ 0 Validating MAC Addresses Using Regular Expressions – Javascript https://www.codeindotnet.com/mac-address-validation-regex-in-javascript/ https://www.codeindotnet.com/mac-address-validation-regex-in-javascript/#respond Thu, 30 Nov 2023 18:23:29 +0000 https://www.codeindotnet.com/?p=6456

Validating a MAC address using JavaScript can be a useful task, especially in scenarios where you need to ensure that users input the correct format for MAC addresses. MAC (Media Access Control) addresses are unique identifiers assigned to network interfaces, and they follow a specific format. Here’s a guide on how to validate MAC addresses using JavaScript with a complete HTML example.




About MAC Address


MAC addresses typically follow the format XX:XX:XX:XX:XX:XX or XXXX.XXXX.XXXX, where each X represents a hexadecimal digit (0-9, A-F). A valid MAC address must meet the following criteria:

  1. Length: A MAC address is 48 bits (6 bytes) long. It is usually represented as 12 hexadecimal characters, grouped in pairs separated by colons or hyphens (e.g., EA:7D:13:21:A5:44).
  2. Formatting: It can be represented in two common formats:
    • Six pairs of hexadecimal digits separated by hyphens or colons (e.g., 7a:84:ac:92:d9:15).
    • Three groups of four hexadecimal digits separated by dots (e.g., 01A2.3BCD.4E5F).

These conditions ensure a standardized way to represent MAC addresses, making them easily readable and consistent across different devices and systems.



Regex Code Snippet to Validate Mac Address


1) The regex code given below will validate 6 pairs of hexadecimal digits separated by hyphens or colons:
var pattern = /^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$/


2) This regex pattern will validate both, ‘6 pairs of 2 hexadecimal digits’ and as well as ‘3 groups of 4 hexadecimal digits’, separated by hyphens or colons:
var pattern = /^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})|([0-9a-fA-F]{4}.[0-9a-fA-F]{4}.[0-9a-fA-F]{4})$/


code snippet:
function isValidMacAddress(macAddress) {
    // Regular expression for validating MAC addresses
    const macRegex = /^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})|([0-9a-fA-F]{4}.[0-9a-fA-F]{4}.[0-9a-fA-F]{4})$/;

    return macRegex.test(macAddress);
}

In this function:

  • ^: Asserts the start of the string.
  • ([0-9A-Fa-f]{2}[:-]){5}: This part matches the first five groups of two hexadecimal digits separated by either a colon : or a hyphen –.
    • ([0-9A-Fa-f]{2}[:-]): This part captures a group of two hexadecimal digits followed by either a colon or a hyphen.
    • {5}: Specifies that the preceding group should occur exactly 5 times.
  • ([0-9A-Fa-f]{2}): Matches the last group of two hexadecimal digits.
  • |: Acts as an OR operator, allowing the regex to match either the MAC address format or the custom format.
  • ([0-9a-fA-F]{4}\.[0-9a-fA-F]{4}\.[0-9a-fA-F]{4}): This part matches a custom format where three groups of four hexadecimal digits are separated by dots ..
    • ([0-9a-fA-F]{4}\.[0-9a-fA-F]{4}\.[0-9a-fA-F]{4}): This part captures three groups of four hexadecimal digits separated by dots.
  • $: Asserts the end of the string.

The function returns true if the MAC address is valid and false otherwise.



Validating MAC Addresses Using JavaScript – Example


Let’s create a simple HTML example that utilizes the JavaScript function for MAC address validation. Here is the full HTML code;

.html file:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MAC Address Validation</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 20px;
        }

        #macInput {
            padding: 8px;
            font-size: 16px;
        }

        #result {
            margin-top: 10px;
            color: green;
            font-weight:bold;
        }

        #error {
            margin-top: 10px;
            color: red;
        }
    </style>
</head>
<body>

    <h2>MAC Address Validation</h2>

    <label for="macInput">Enter MAC Address:</label>
    <input type="text" id="macInput" placeholder="e.g., 00:1A:2B:3C:4D:5E">

    <button onclick="validateMAC()">Validate</button>

    <div id="result"></div>
    <div id="error"></div>

    <script>
        function validateMAC() {
            var macInput = document.getElementById("macInput").value;
            var macRegex = /^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})|([0-9a-fA-F]{4}.[0-9a-fA-F]{4}.[0-9a-fA-F]{4})$/;

            if (macRegex.test(macInput)) {
                document.getElementById("result").innerText = "Valid MAC Address!";
                document.getElementById("error").innerText = "";
            } else {
                document.getElementById("result").innerText = "";
                document.getElementById("error").innerText = "Invalid MAC Address. Please enter a valid MAC address.";
            }
        }
    </script>

</body>
</html>

In this example:

  • We have an input field for the user to enter a MAC address.
  • There’s a “Validate” button that triggers the validateMac() function when clicked.
  • The result of the validation is displayed below the button.

Feel free to copy and paste this HTML code into an HTML file and open it in your web browser to see the MAC address validation in action.

Enter different MAC addresses to observe how the validation result changes.

example – input & output:

Test Case 1:
7a-84-ac-92-d9-15// Valid

Test Case 2:
09:df:b7:b5:42:44// Valid

Test Case 3:
01A2.3BCD.4E5F// Valid


Test Case 4:
GHIJ.KLMN.OPQR// Invalid

Test Case 5:
98-76-54-AH–32-21// Invalid



Screenshots


Here are the test results of valid & invalid MAC addresses.

1) valid mac address with colon separated:
mac address validation colon separated javascript


2) valid mac address with hypen separated:
mac address validation hypen separated javascript


3) valid mac address with dot separated(3 pairs of four hexadecimal digits):
mac address validation dots separated javascript


4) invalid mac address with hypen separated:
invalid mac address validation hypen separated javascript


4) invalid mac address with dot separated & four hexadecimal digits:
invalid mac address validation dots separated javascript

]]> https://www.codeindotnet.com/mac-address-validation-regex-in-javascript/feed/ 0 Share to WhatsApp link button from Website using Javascript: 3 Ways https://www.codeindotnet.com/whatsapp-share-button-api-link-javascript/ https://www.codeindotnet.com/whatsapp-share-button-api-link-javascript/#respond Fri, 17 Nov 2023 16:32:33 +0000 https://www.codeindotnet.com/?p=5797

Given WhatsApp’s status as the leading messaging application, many websites find it essential to include a WhatsApp sharing feature. Adding a WhatsApp share button to your website can indeed enhance the user experience and promote content sharing. To implement a social media sharing feature on your website, you can use the WhatsApp API or Web URL. In this article, we’ll show you the steps to add a WhatsApp share text link to your website using JavaScript.



The web developer needs to meet this requirement by integrating the WhatsApp sharing option into their website to enhance user efficiency. This allows users to effortlessly share information directly from the website using the dedicated sharing option, eliminating the need for manual copying and pasting. Usually, 3 ways to do it and they are;


Different WaysLinksMobile
App		Desktop
App		Browser
(New Tab)
Method 1api.whatsapp.com/send✅✅❌
Method 2whatsapp://send✅✅❌
Method 3web.whatsapp.com/send❌❌✅

Regardless of the method chosen, the user needs to be either logged into the WhatsApp application or linked to a device to share text links with individuals listed in their contacts because WhatsApp facilitates private sharing, ensuring that content is shared among a select group of individuals rather than with the public at large.
Let’s explore all the methods one by one;



Using the WhatsApp API approach is recommended for sharing text messages and links from the user’s WhatsApp application on either Mobile or Desktop.

example: https://api.whatsapp.com/send?text=YourTextHere

To create a WhatsApp share button or link that works on both mobile and Desktop, you can use the below code that will work on both platforms.

javascript code snippet
window.open(`https://api.whatsapp.com/send?text=${encodeURIComponent(shareMessage)}`, '_blank');


html code to send whatsapp message

<!DOCTYPE html>
<html>
<head>
    <title>WhatsApp Share Button</title>
</head>
<body>
	<br>
	<h1>Method 1 - Sharing WhatsApp text using API</h1>
	<br>
	<button id="whatsapp-btn1">Share on WhatsApp</button>

    <script>
        // Function to open WhatsApp with pre-filled message
        function shareOnWhatsApp1() { 
            // Replace 'YourShareMessage' and 'YourShareURL or Text' with your own message and URL
            const shareMessage = 'Check out this awesome website: https://www.codeindotnet.com/';
			
			// Invoke WhatsApp Application
            window.open(`https://api.whatsapp.com/send?text=${encodeURIComponent(shareMessage)}`, '_blank');					
        }

        // Attach the shareOnWhatsApp function to the button click event
        document.getElementById('whatsapp-btn1').addEventListener('click', shareOnWhatsApp1);
    </script>
</body>
</html>

In the above example, a button is used to launch the WhatsApp application, but alternatively, you can use a hyperlink(anchor <a> tag) or an Image link as well to share content.

example – using <a>a tag
<a href="https://api.whatsapp.com/send?text=YourTextHere" target="_blank">Share to Whatsapp</a>



Method 2: Using URL – Alternative to WhatsApp API


This method functions similarly to the previous one – the only difference is instead of the API, a WhatsApp URL can be utilized.

example: whatsapp://send?text=YourTextLinkHere


javascript code snippet
window.location.href = `whatsapp://send?text=${encodeURIComponent(shareMessage)}`;


whatsapp share javascript code

<!DOCTYPE html>
<html>
<head>
    <title>WhatsApp Share Button</title>
</head>
<body>
	<br>
	<h1>Method 2 - Sharing WhatsApp text using URL</h1>
	<br>
	<button id="whatsapp-btn2">Share on WhatsApp</button>

    <script>
        function shareOnWhatsApp2() {
            const shareMessage = 'Check out this awesome website: https://www.codeindotnet.com/';
			
            window.location.href = `whatsapp://send?text=${encodeURIComponent(shareMessage)}`;					
        }

        document.getElementById('whatsapp-btn2').addEventListener('click', shareOnWhatsApp2);
    </script>
</body>
</html>



Screenshots:

When you run the provided code, it will display a button to share defined text or links to WhatsApp.

sharing link message on whatsapp example

Click on the “Share to WhatsApp” button.

On a desktop device, a popup box will appear asking for permission to open the WhatsApp application.
Click on ‘Open WhatsApp‘ and this action will redirect to the user’s WhatsApp application, as shown in the screenshot.

open whatsapp from javascript

Note: On a mobile device, WhatsApp will open directly without a pop-up.

Once the app is opened, it allows users to share messages or text links with existing WhatsApp contacts (same as forwarding messages to multiple contacts).

share message text link to whatsapp contacts

share text link to whatsapp from mobile device





In this approach, the WhatsApp Web link will open exclusively in the browser, prompting you to link the device in order to share messages with the user’s contact list.

example: https://web.whatsapp.com/send?text=YourTextMessageHere


javascript code snippet
window.open(`https://web.whatsapp.com/send?text=${encodeURIComponent(shareMessage)}`, '_blank');


share link text from whatsapp javascript code

<!DOCTYPE html>
<html>
<head>
    <title>WhatsApp Share Button</title>
</head>
<body>
    <br>
	<h1>Method 3 - Using 'web.whatsapp.com' URL</h1>
	<br>
	<button id="whatsapp-btn3">Share on WhatsApp</button>

    <script>
        function shareOnWhatsApp3() {
            const shareMessage = 'Check out this awesome website: https://www.codeindotnet.com/';
			
            window.open(`https://web.whatsapp.com/send?text=${encodeURIComponent(shareMessage)}`, '_blank');					
        }

        document.getElementById('whatsapp-btn3').addEventListener('click', shareOnWhatsApp3);
    </script>
</body>
</html>

Whether on mobile or desktop, the web.whatsapp.com link will only open in the browser tab, as shown below.

Desktop Screenshot
whatsapp web link send text link

Mobile Screenshot
whatsapp web share link on browser tab



‘if’ condition – optional code


If you want to add specific code based on the device, use an if condition to execute your logic.

if condition – example
function shareOnWhatsApp() {
	// Replace 'YourShareMessage' and 'YourShareURL' with your own message and URL
	const shareMessage = 'Check out this awesome website: https://www.codeindotnet.com/';
	
	if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
		// Mobile device, open WhatsApp with pre-filled message
		const whatsappLink = `whatsapp://send?text=${encodeURIComponent(shareMessage)}`;
		window.location.href = whatsappLink;
	} 
	else {
		// Desktop device, provide a WhatsApp Web link
		const whatsappWebLink = `https://web.whatsapp.com/send?text=${encodeURIComponent(shareMessage)}`;
		window.open(whatsappWebLink, '_blank');
	}
}

In this example, if you’re on a mobile device, the code ‘whatsapp://send‘ will run, and if it is a desktop device, the code ‘web.whatsapp.com/send‘ will be executed.




]]> https://www.codeindotnet.com/whatsapp-share-button-api-link-javascript/feed/ 0 How to show Page Loading div icon until the page has finished loading? https://www.codeindotnet.com/show-page-loading-div-spinner-icon-until-the-page-has-finished-loading/ https://www.codeindotnet.com/show-page-loading-div-spinner-icon-until-the-page-has-finished-loading/#respond Sat, 23 Sep 2023 06:51:21 +0000 https://www.codeindotnet.com/?p=5430

Show spinner image while the page is loading – javascript

In the fast-paced world of web development, user experience is paramount. It’s crucial to keep your visitors engaged and informed, especially when your website takes a little extra time to load. One way to enhance the user experience is by displaying a loading or spinner div icon until the page has fully loaded. In this article, we’ll explore how to achieve this effect using pure vanilla JavaScript and the document.readyState property. Whenever the value of this property undergoes a change, it triggers a readystatechange event on the document object.


Implementing the Page Loading Div with document.readyState


Let’s go through the steps to create a loading div that appears until the page has finished loading using pure JavaScript and the document.readyState property:

Why Use document.readyState?

The document.readyState property is a valuable tool in JavaScript that allows us to monitor the loading status of a web page. It has different values at various stages of the page-loading process, making it perfect for showing a loading div icon until the page is ready for interaction. This approach is efficient because it doesn’t rely on additional libraries or external dependencies.


HTML Structure:

Begin by setting up the basic HTML structure of your page. Place a div element for the loading icon or message directly after the opening <body> tag in your HTML file:

<html lang="en">
<head>
    <!-- Your head content here -->
</head>

<body>

	<div id="maindivblock">
	<div id="loader" class="center"></div>

	<!-- Your page content here -->

	</div>

	<script src="your-script.js"></script>

</body>
</html>


CSS Styling:

Style the loading div to match your website’s design. You can center it on the screen, set a background color, and apply CSS animations to make it visually appealing. Here’s a basic example:

<style>
	#loader {
		border: 12px solid #f3f3f3;
		border-radius: 50%;
		border-top: 12px solid #444444;
		width: 70px;
		height: 70px;
		animation: spin 1s linear infinite;
	}

	.center {
		position: absolute;
		top: 0;
		bottom: 0; // comment this line if not required.
		left: 0;
		right: 0;
		margin: auto;
	}

	@keyframes spin {
		100% {
			transform: rotate(360deg);
		}
	}
</style>


JavaScript Logic:

Now, let’s add the JavaScript logic to show the loading div until the page has finished loading. Create a JavaScript file (e.g., your-script.js) and add the following code:

Use the onreadystatechange event to show the loading indicator while loading the page

your-script.js

document.onreadystatechange = function () {
	if (document.readyState !== "complete") {
		//document.querySelector("body").style.visibility = "hidden";
		document.getElementById("maindivblock").style.display = "none";
		document.querySelector("#loader").style.visibility = "visible";
	} else {
		document.querySelector("#loader").style.display = "none";
		document.getElementById("maindivblock").style.display = "block";
		//document.querySelector("body").style.visibility = "visible";
	}
};

Note:
In this example, loader is implemented within <div> tag but if you want to apply loader/spinner for the whole <body> (page) section then uncomment querySelector(“body”) line and comment maindivblock line.

In this JavaScript code, we first listen for the “DOMContentLoaded” event, which triggers when the DOM content is fully loaded. At this point, we display the loading div.

Next, we use the document.onreadystatechange event to continuously check the value of document.readyState. When document.readyState becomes “complete“, it means the entire page has finished loading, and we hide the loading div.


Screenshot:

show page loading div spinner icon until the page has finished loading data

Conclusion

Displaying a page-loading div icon or message until the page has fully loaded is an excellent way to enhance the user experience on your website. By using pure JavaScript and the document.readyState property, you can ensure that users receive visual feedback and remain engaged while your page loads. Customize the loading div’s style to match your site’s design, creating a positive first impression for your visitors.


]]> https://www.codeindotnet.com/show-page-loading-div-spinner-icon-until-the-page-has-finished-loading/feed/ 0 Validate Password with Regex Pattern in JS https://www.codeindotnet.com/validate-password-with-regex-pattern-in-javascript/ Mon, 04 Sep 2023 17:30:26 +0000 https://www.codeindotnet.com/?p=4843

You can use JavaScript to validate a password with the given regex pattern

Regex Password Patterns:



// Minimum eight characters, at least one letter and one number:

"^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$"


// Minimum eight characters, at least one letter, one number and one special character:

"^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$"


// Minimum eight characters, at least one uppercase letter, one lowercase letter and one number:

"^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$"


// Minimum eight characters, at least one uppercase letter, one lowercase letter, one number and one special character:

"^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$"


// Minimum eight and maximum 10 characters, at least one uppercase letter, one lowercase letter, one number and one special character:

"^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,10}$"


Validate Password with Regex – Javascript Code Example


Full HTML code example that includes a simple form for validating a password using JavaScript:

code snippet/ example:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Password Validation</title>
    <script>
        function validatePassword() {
            const passwordInput = document.getElementById("password");
            const password = passwordInput.value;

            // Define the regex pattern for the password
            const passwordPattern = /^(?=.*[A-Za-z])(?=.*\d).{8,}$/;

            // Test if the password matches the pattern
            if (passwordPattern.test(password)) {
                alert("Password is valid!");
            } else {
                alert("Password is invalid. It should be at least eight characters long and contain at least one letter and one number.");
            }
        }
    </script>
</head>
<body>
    <h1>Password Validation</h1>
    <form>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required>
        <br>
        <button type="button" onclick="validatePassword()">Validate Password</button>
    </form>
</body>
</html>

]]> How to check if an element is hidden in jQuery? https://www.codeindotnet.com/how-to-check-if-an-element-is-hidden-in-jquery/ https://www.codeindotnet.com/how-to-check-if-an-element-is-hidden-in-jquery/#comments Sun, 30 Jul 2023 14:58:27 +0000 https://www.codeindotnet.com/?p=4230

In jQuery, you can use the :hidden selector to check if an element is hidden. This selector selects all elements that are hidden, either by using the CSS display property with a value of “none”, or by setting the type attribute of an input element to “hidden”.


Check if an element is visible or not in JQuery

To check if an element is hidden using jQuery, you can use the is() method in combination with the :hidden selector. Here’s an example:

Code snippet:

if ($('#myElement').is(':hidden')) {
  // Element is hidden
  console.log('Element is hidden.');
} else {
  // Element is visible
  console.log('Element is visible.');
}

In the above example, #myElement is the selector for the element you want to check. If the element is hidden, the condition $(‘#myElement’).is(‘:hidden’) will evaluate to true, and the code inside the if block will be executed. If the element is visible, the code inside the else block will be executed.

You can replace #myElement with the appropriate selector for your element. It could be an ID, a class, or any other valid CSS selector that targets the element you want to check.


]]> https://www.codeindotnet.com/how-to-check-if-an-element-is-hidden-in-jquery/feed/ 1 Javascript: find out if Element is hidden or visible https://www.codeindotnet.com/find-if-element-is-hidden-visible-javascript/ https://www.codeindotnet.com/find-if-element-is-hidden-visible-javascript/#respond Sun, 30 Jul 2023 14:56:24 +0000 https://www.codeindotnet.com/?p=4209

How to Determine Element Visibility in JavaScript

In web development, there are times when you need to determine if an element is hidden or visible. Whether it’s for enhancing user experience or implementing certain functionalities, having the ability to check the visibility status of an element is crucial. Let’s explore how to accomplish this task in pure JavaScript.


Checking Element Visibility in JavaScript

In JavaScript, without relying on external libraries like jQuery, you can examine the CSS properties of an element to determine its visibility. Here’s a simple approach to achieve this:

Code snippet:

var element = document.getElementById('myElement');

if (element.offsetParent === null || element.style.display === 'none') {
  // Element is hidden
  console.log('Element is hidden.');
} else {
  // Element is visible
  console.log('Element is visible.');
}

In the above code snippet, we first retrieve the element using its ID with getElementById(‘myElement’). Then, we evaluate two conditions.
The first condition, element.offsetParent === null, checks if the element has an offset parent. If it doesn’t, it implies that the element is hidden.
The second condition, element.style.display === ‘none’, verifies if the element’s display property is explicitly set to ‘none’, indicating that it is hidden. By combining these conditions, we can accurately determine the visibility status of the element.

Practical Usage and Customization: The ability to check element visibility opens up a range of possibilities for web developers. You can utilize this technique to implement conditional behaviors, dynamically adjust layouts, or enhance accessibility.


Full HTML code with Javascript – sample.

<!DOCTYPE html>
<html>
<head>
  <title>Check Element Visibility</title>
</head>
<body>

  <h1 id="myHeading">Hello, World!</h1>

  <button onclick="checkVisibility()">Check Visibility</button>

  <script>
    function checkVisibility() {
      var element = document.getElementById('myHeading');

      if (element.offsetParent === null || element.style.display === 'none') {
        // Element is hidden
        console.log('Element is hidden.');
      } else {
        // Element is visible
        console.log('Element is visible.');
      }
    }
  </script>

</body>
</html>

Additionally, you can modify the code snippet to suit your specific needs. For instance, instead of using getElementById, you can also use other methods like querySelector or getElementsByClassName to select the target element. This flexibility allows you to adapt the code according to your project requirements and desired element selection criteria.



]]> https://www.codeindotnet.com/find-if-element-is-hidden-visible-javascript/feed/ 0 6 ways to redirect to another page in JavaScript https://www.codeindotnet.com/6-ways-to-redirect-to-another-page-javascript/ https://www.codeindotnet.com/6-ways-to-redirect-to-another-page-javascript/#comments Sat, 01 Jul 2023 06:40:13 +0000 https://www.codeindotnet.com/?p=4098

There are several ways to redirect to another page in JavaScript, these methods will change the current page’s URL and redirect the user to the specified URL. You can provide an absolute URL (starting with “http://” or “https://”) or a relative URL (relative to the current page’s location). Here are six common methods explained below along with examples:


1. Redirect using the window.location.href property

window.location.href is used to get or set the complete URL of the current page.
It is commonly used to redirect the browser to a new page by setting it to a new URL.

// Redirect to a specific URL
window.location.href = "https://www.codeindotnet.com";

// Redirect to a relative URL
window.location.href = "/page2.html";


2. Redirect using the window.location.replace() method

window.location.replace() is used to replace the current page in the browser’s history with a new page.
It is typically used for redirects when you don’t want the user to navigate back to the original page using the browser’s back button.

// Redirect to a specific URL
window.location.replace("https://www.codeindotnet.com");

// Redirect to a relative URL
window.location.replace("/page2.html");


3. Redirect using the window.location.assign() method

window.location.assign() is used to load a new URL.
It is similar to window.location.href in that it can be used for redirection. However, unlike replace(), it adds the new URL to the browser’s history, allowing the user to navigate back to the original page using the back button.

// Redirect to a specific URL
window.location.assign("https://www.codeindotnet.com");

// Redirect to a relative URL
window.location.assign("/page2.html");


4. Redirect using the window.location object

window.location is an object that provides information and methods related to the current URL of the page.
It contains properties such as href, host, pathname, and methods such as reload() and replace().

// Redirect to a specific URL
window.location = "https://www.codeindotnet.com";

// Redirect to a relative URL
window.location = "/page2.html";


5. Redirect using the document.location.href property

document.location.href is an alternative way to access the URL of the current page.
It is essentially the same as window.location.href.

// Redirect to a specific URL
document.location.href = "https://www.codeindotnet.com";

// Redirect to a relative URL
document.location.href = "/page2.html";


6. Redirect using the location.replace() method

location.replace() is a shorthand method for window.location.replace().
It is used to replace the current page in the browser’s history with a new page, similar to replace().

// Redirect to a specific URL
location.replace("https://www.codeindotnet.com");

// Redirect to a relative URL
location.replace("/page2.html");


When to use?

In terms of the best scenario for each:
  • Use window.location.href or document.location.href when you want to redirect the user to a new page and you want the new URL to be added to the browser’s history.
  • Use window.location.replace() or location.replace() when you want to redirect the user to a new page and you don’t want the original page to be stored in the browser’s history.
  • Use window.location.assign() when you want to redirect the user to a new page and you want the new URL to be added to the browser’s history, allowing the user to navigate back to the original page.
  • Use the window.location object when you need to access or modify properties of the current URL, such as getting the current hostname or pathname.

The choice of which method to use depends on the specific requirements of your application and how you want the redirection to behave.



]]> https://www.codeindotnet.com/6-ways-to-redirect-to-another-page-javascript/feed/ 1 Show JavaScript Popup in a webpage using Div Elements & CSS https://www.codeindotnet.com/show-javascript-popup-in-page-using-html-div-element-css/ https://www.codeindotnet.com/show-javascript-popup-in-page-using-html-div-element-css/#respond Mon, 05 Jun 2023 08:44:52 +0000 https://www.codeindotnet.com/?p=3909

Popups are a common way to display additional information or request user input in a web application. Placing the popup in the center of the web page ensures that it is easily visible and accessible to the user. In this article, we will explore how to show a popup in the center of the page using HTML Div tags, CSS (styles) & JavaScript, along with a code sample to help you implement this functionality in your own projects.



Demo -Show popup in the center of the web page


Sample video – Show Popup


Test Yourself – Manually


Click on the “Show popup” button to display child window.

Main Page


Click on the Show popup button to show popup window.

Main page contents…..




HTML, CSS & Javascript Code – Show popup

Simply copy & paste the below HTML code into a text file and save it as a “.html” file. Open it in a browser to test the HTML code.

<html>
<head>
<script>
window.addEventListener('load',function(){
	// Get the popup and overlay elements
	var popup = document.getElementById("MyPopup");
	var overlay = document.getElementById('ppOverlay');

	// Get the close button element
	var close = document.getElementById('btnpopclose');

	// add javascript onclick event and function to display the popup
	document.getElementById("showpopup").addEventListener("click",
	function showpopup() { 
		popup.style.display = 'block';
		overlay.style.display = 'block';

		// Add event listeners to close the popup
		document.addEventListener('keydown', closePopupOnEscape);
		overlay.addEventListener('click', closePopup);
		close.addEventListener('click', closePopup);
	});

	// Function to close the popup
	function closePopup() {
		popup.style.display = 'none';
		overlay.style.display = 'none';

		// Remove event listeners during closing the popup
		document.removeEventListener('keydown', closePopupOnEscape);
		overlay.removeEventListener('click', closePopup);
		close.removeEventListener('click', closePopup);
	}

	// Function to close the popup when the escape key is pressed
	function closePopupOnEscape(event) {
		if (event.keyCode === 27) {
			closePopup();
		}
	}
	
});
</script>
<style>
.popup {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 50%;
	background-color: #fff;
	border: 0.0625rem solid #d3d3d3;
	box-shadow: 0 0 0.625rem #e5e2e2;
	border-radius: 0.625rem;
	z-index: 999;
	display: none;
	height:400px;
}

@media screen and (max-width: 700px) {
    .popup {
        width: 90%;
    }
}

.popup-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #fff0;
	z-index: 998;
	display: none;
}
.popup-header {
	background-color: #f3f3f3;
	padding: 0.625rem;			
}
.popup-close {
	font-size: 1.25rem;
	font-weight: bold;
	padding: 0.3125rem 0.625rem;
	border-radius: 0.3125rem;
	background-color: #f00;
	color: #fff;
	border: none;
	float: right;
	margin: -0.3125rem;
}

#showpopup {
	background: #db0000;
	border: 0;
	padding: 0.625rem 1.5625rem 0.3125rem;
	border-radius: 0.9375rem 0.9375rem;
	font-size: 1rem;
	font-weight: bold;
	outline: none;
	cursor: pointer;
	vertical-align: top;
    float: right;
    color:#fff;
}
#showpopup:hover {
	box-shadow: 0 0 5px gray;
}

</style>
</head>

<body>
// popup button on the main page.
<button id="showpopup">Show Popup</button>

// popup child window section. This will be displayed when "Show popup" button is clicked.
<div id="ppOverlay" class="popup-overlay"></div>

<div id="MyPopup" class="popup">
	<div class="popup-header">
		<span style="font-weight:bold; padding-right:5px; padding-left:15px;">This is my popup heading: </span>
		
		<button id="btnpopclose" class="popup-close">×</button>
	</div>
	<div style="padding:15px;">
		<h2>Popup Heading</h2>
		<br>
		<div>
			This is a sample text...<br> second line
		</div>
	</div>
</div>
</body>

</html>
]]> https://www.codeindotnet.com/show-javascript-popup-in-page-using-html-div-element-css/feed/ 0 Easy way to find Public IP Address: Javascript Code https://www.codeindotnet.com/find-public-ip-address-via-javascript/ https://www.codeindotnet.com/find-public-ip-address-via-javascript/#respond Thu, 01 Jun 2023 16:07:10 +0000 https://www.codeindotnet.com/?p=2343

What is my Internet IP Address?

Live example


Finding your IP address…

see the HTML & JS implementation, below


IP Address: HTML and Javascript Code

Finding your public IP address is not a straightforward approach. If you just need the user or visitor’s public IP address after the page load to log or perform any operation then by utilizing a simple JavaScript code snippet you can retrieve the public IP address without relying on paid services.


Use Free API – Unlimited request

You can use the free API provided by ‘ipify.org’ which is absolutely free.
  • without any limit, (even millions of requests per minute)
  • Opensource (GitHub repository)
  • works with both IPv4 and IPv6 addresses

for more details, visit https://www.ipify.org/


Calling ipify API

Open browser and try any API on the address bar
1) https://api.ipify.org/
output: 27.4.142.189

(or)

2)https://api.ipify.org/?format=json
output: {"ip":"27.4.142.189"}

(or)

3) https://api.ipify.org/?format=json&callback=getIP
output: {"ip":"27.4.142.189"}


How to Implement – HTML & JS Script – Samples

Simply use this HTML and javascript to get the public IP address.
See the live example above (used the same JS code)

Sample code 1:

<html>
<br>
<center>
<div>
<h2>What is my Internet IP Address?</h2>
</div>
<br>
<div id="ipaddress">Finding your IP address...</div>
</center>
</html>
<script>
	window.addEventListener('load', async function(){
		try{
			const response = await fetch("https://api.ipify.org/?format=json");
			var data = await response.json();
			document.getElementById("ipaddress").innerHTML = "<span style='font-size:26px; font-weight:bold'>" + data.ip + "</span><br>Your IP address";
		}
		catch(err){
			document.getElementById("ipaddress").innerText = "Timeout, Please refresh and try again.";
		}
	});
</script>


Sample code 2:

<html>
<br>
<center>
<div>
<h2>What is my Internet IP Address?</h2>
</div>
<br>
<div id="ipaddress">Finding your IP address...</div>
</center>
</html>
<script>
  function getIP(json) {
    document.getElementById("ipaddress").innerHTML = "<span style='font-size:26px; font-weight:bold'>" + json.ip + "</span><br>Your IP address";
  }
</script>
<script src="https://api.ipify.org?format=jsonp&amp;callback=getIP"></script>


Note:
Please use try catch & await.
In rare situation, you might get timeout error because of response delay from API. In such case, use await keyword with try catch block.
See “Sample code 1 implementation, above
]]> https://www.codeindotnet.com/find-public-ip-address-via-javascript/feed/ 0