Category: Web Development
-
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 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…