Posts

Showing posts with the label HTML

How TO - Toggle Hide and Show an Element | CodeLSC

How TO - Toggle Hide and Show an Element | CodeLSC

How to Bind Remote Data to Dropdownlist using JavaScript | CodeLSC

Image
How to Bind Remote Data to Dropdownlist using JavaScript | CodeLSC   Implementing a Dropdownlist with Remote Data using jQuery AJAX Dropdownlists are a common UI element used in web applications to allow users to select options from a list. In some cases, we may need to populate a dropdownlist with data retrieved from a remote data source. This tutorial will show you how to implement a dropdownlist with remote data using JavaScript and jQuery AJAX. Requirements: jQuery library (version 3.6.0 or above) A remote data source in JSON format (for this tutorial, we will be using the JSONPlaceholder API)   HTML: The HTML code for our dropdownlist is very simple. We have a select element with an id of "postsDropdown" and one default option with the value "null". <select id="postsDropdown"> <option class="e-popup" value="null">Sele

Show/Hide Password Toggle with JavaScript | With Source Code | CodeLSC

Image
Learn how to create a show/hide password toggle using JavaScript and Font Awesome icons Introduction: Have you ever needed to create a password input field that allows the user to toggle the visibility of their password? With JavaScript and Font Awesome icons, it's easy to create a show/hide password toggle that makes your password input fields more user-friendly. In this tutorial, we'll walk through the steps of creating a show/hide password toggle that you can use in your own web projects. Preview: Step 1: HTML Markup First, let's create the HTML markup for the password input field and the eye icon that will serve as our toggle button. Here's the code for the form:      < center >        <form   style = "width: 350px; margin: auto" >          <h2> CodeLSC </h2>          <div   class = "input-icons" >            <i   class = "fa fa-user icon" >   </i>            &l

Creating a QR Code Generator using JavaScript

Image
Scan Qr code:  Creating a QR Code Generator using JavaScript App Preview : Creating a QR Code Generator using JavaScript Text to encode: Generate QR Code In today's digital age, QR codes have become an essential part of our daily lives. They are used to store information, such as website URLs, contact information, and even product details. These codes can be scanned using a smartphone or a QR code reader, making it easy to access the information stored within them. Creating a QR code is a simple process, and with the help of a few lines of code, you can generate one in no time. In this blog post, we will show you how to create a QR code generator using JavaScript. The first step is to include the QR code library, which can be done by adding the following line of code in the head of your HTML file: <script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script&

Countdown Timer with JavaScript

Image
Countdown Timer with JavaScript Countdown timers are a useful tool for displaying a countdown to a specific event or deadline. They can be used for things like countdown clocks for events, or to create a sense of urgency for promotions. In this tutorial, we'll show you how to create a countdown timer using JavaScript. To get started, we'll need to create a form with a single input field where the user can enter the countdown time in seconds, and a submit button to start the countdown. We'll also need to add a DOM element to our HTML where the countdown will be displayed. HTML <form id="form"> <label for="countdown">Enter countdown time (in seconds):</label><br> <input type="number" id="countdown"><br> <input type="submit" value="Start countdown"> </form> <div id="countdown-display"></div> Next, we'