We can add this target=”_blank” in the <a> tag to open link in new tab Example code <!DOCTYPE html> <head> </head> <body> <!– Opens in the same tab –> <a href=”https://en.wikipedia.org/wiki/Main_Page”>Visit Wikipedia (same tab)</a> <br> <!– Opens in a new tab –> <a href=”https://en.wikipedia.org/wiki/Main_Page” target=”_blank”>Visit Wikipedia (new tab)</a> </body> </html> Copy Code
Web Development
Change button text with jQuery
Its essential to change t he button text in some applications . For example Like button. If the current is “Like”, after click on the button it the button text will be “Liked” jquery makes process efficient. <!DOCTYPE html> <html> <head> <script src=”https://code.jquery.com/jquery-3.7.1.min.js”></script> </head> <body> <button class=”like-button”>Like</button> <script> $(document).ready(function(){ $(‘.like-button’).click(function(){ var buttonText = $(this).text(); if […]
How to get current time from browser in JavaScript
Current Time From Browser The current time is: We can get the current time with built- in JavaScript object Date To get the time we have to create the Date object first simply like this As we created the date object we can console.log to get the result We get the result like this. we […]
Optimize Website Performance: Pause Media Playback on Inactive Tabs
How pause media playback on inactive tabs can be very very useful? By using visibilitychange event, its possible stop playback when user move to another browser tab or inactive. So we can save bandwidth and which can be used for active users to give them the best quality uninterrupted media playback. Because in streaming platform […]
How to prevent text selection in html
Its necessary to prevent text selection when the text is ui feature, to make the webpage more professional. We can prevent the text from selecting by using this in css You cannot select this text You can select this text example code
How to create tooltip in html
Is essential to add tooltip to make web page more professional and understandable The simplest way can we add tooltip is use html inline element <span> We will add the tool in div and tooltip text(tool description) in the span Toll description will be always hide ( display none in css) until the user hover […]
Create your first chat application with Flask and Socketio
We will use socketio for real-time messaging First install our dependency for this application pip install flask pip install flask-socketio Copy Code How it will work. Every user will get an unique key. If the the other user submit the other users key that will send the message. its like sending message to unique username […]
Ajax example with flask
One of the best ajax applied in real world is username checker. In this example we will check if there is existing username This is code /project we will Our first step: Check if username exists or not Imagine we have this existing username when the user enter a username we will check it from […]
Build browser based Qr code generator with html css and javascript
The main features we will apply User will able to paste link or text and generate the qr code The dependency We will use qurcodejs a javascript library for this QR Code Generator QR Code Generator Generate QR Code The complete code. Try and customize by yourself. <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta […]
Create a Simple Image Gallery for Your Website (HTML, CSS & JavaScript)
Image Gallery The essential structure of the gallery The complete code. Just place your image link in the img tag to show the image <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Image Gallery</title> <style> .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; } .image-wrapper { position: relative; overflow: hidden; } .zoomable […]
How to Make Analog Clock with HTML, CSS, and JavaScript
Simple Clock 12 3 6 9 The structure and the essentials So we just add this logic in the clock that’s it. We get the time from browser const now = new Date(); const hours = now.getHours(); const minutes = now.getMinutes(); const seconds = now.getSeconds(); Copy Code Then access the clock hand from JavaScript const […]
How to get the mouse position in html
Knowing mouse position is essential if we want to apply some wonderful effect in our web application We can get the mouse position from mousemove event. In the example code we are using mousemove event. This will helps us go get the mouse coordinate in real-time In the code you will get the mouse position […]
How to store user data on web browser local storage
What? Why? How? Create Read Update Delete Example <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Local Storage CRUD Example</title> </head> <body> <h1>Local Storage CRUD Example</h1> <input type=”text” id=”dataInput” placeholder=”Enter data”> <button onclick=”createOrUpdate()”>Create/Update</button> <button onclick=”read()”>Read</button> <button onclick=”deleteItem()”>Delete</button> <button onclick=”clearAll()”>Clear All</button> <script> function createOrUpdate() { //set the key based on your requirements var […]
Flask testing environment ssl solution with “adhoc”
Why? When I started developing video calling application at one point I faced this situation. In single pc(on localhost 127.0.0.1) everything works very well but when I need to test another pc on the same network for example(wifi) . Before on public production environment I wanted to test my own private network which was established […]
CSS Variables: The Key to More Flexible Styling
Why? When application become larger, repeated coding become challenging. Also when we need to change some color or size which is same all over the code, in conventional way we need to edit all the place of that value.. CSS variable comes with a solution for this. Instead of changing value all the place one […]
Maximize web Performance: Overcome JavaScript Threading Limitations with Web Workers
Why? Web Workers: A solution for overcoming JavaScript’s single-threaded limitations. Running JavaScript tasks in background threads, separate from the main browser thread which is responsible for rendering the UI and handling user interactions. So Its possible to run heavy task in multiple process and at the same time keep the ui responsive. How? The structure […]
How to implement json web token (jwt) in flask
What is json web token? JSON Web Token (JWT) is like a digital ID card for websites and apps. It’s often issued after a successful login and securely tells a website about the user and their accessibility Secure Cookies also do the same thing. but there is some core differences Feature JSON Web Token (JWT) […]
Create Your First HTML Button: Simple Tutorial with Example
First We Will create the most simple button with html without any functionality. That means it will just show the button and do nothing.. <!DOCTYPE html> <html> <head> </head> <body> <button>Button</button> </body> </html> Copy From the code. This code is missing the functionality. That means we did not said the code when the user click […]
How to show HTML code inside HTML without Rendering
We can show html inside html by using using the html entity ‘<‘ as ‘<’ and the ‘>’ as ‘>’ Normally we use like this in html . <h1> This is H1 tag </h1> But it the result renders html and shows like this This is h1 tag So will We will use this To […]
How To Include Full Screen Mode In The Web Application
Full screen mode is useful for video games, editing, and other purpose. So most of these types of applications use Fullscreen API so the user can switch between full screen mode and the standard default mode.Also we can program specifically to instruct the browser to switch to full screen.To apply full screen mode we will […]
How to Use GPS And Show The User Location In The Map In The Web Browser
For Location we will use geolocation api Its super simple In this code we used navigator.geolocation.getCurrentPosition to know the users location Save and run the html code It will show the latitude and longitude. Which indicates the exact location in the world map. <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> </head> […]