Author: mashiurrahman99
-
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…
-
Solve Math Problems Instantly: Python’s eval() for Speedy String-Based Calculations
For example we have math expression in string like “4+2+34+346-234”We can directly calculate from this text with eval() Directly calculate from string our_expression= “4+2+34+346-234” answer=eval(our_expression) print(answer) # 152 Copy Code More things we can do calculate from variables x = 7 y = 5 expression = “x * y” result = eval(expression) print(“Result:”, result) #…
-
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…