This Diwali, light up your business with innovation! Wishing you a festival full of success, growth, and digital opportunities. From all of us at Website Development and Services, Happy Diwali!
Tuesday, October 21, 2025
Saturday, August 23, 2025
Custom method using prototype in JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>Custom Prototype Method</title>
</head>
<body>
<h2>Prototype Sum Method</h2>
<button onclick="calculate()">Click to Calculate</button>
<script>
// ✅ Add custom method using prototype
Number.prototype.add = function(num) {
return this + num;
};
function calculate() {
let result = (10).add(20); // using custom method
alert("The sum is: " + result);
}
</script>
</body>
</html>
Monday, August 18, 2025
Convert an image into a cartoon style using JavaScript
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cartoonify Image</title>
<style>
body { font-family: sans-serif; background: #111; color: white; text-align: center; }
canvas { max-width: 90vw; margin-top: 20px; border: 4px solid white; border-radius: 12px; }
input { margin-top: 20px; }
</style>
</head>
<body>
<h2>Upload Image → Cartoon Effect</h2>
<input type="file" id="upload" accept="image/*">
<canvas id="canvas"></canvas>
<script>
const upload = document.getElementById("upload");
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
upload.addEventListener("change", (e) => {
const file = e.target.files[0];
if (!file) return;
const img = new Image();
img.onload = () => {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
// get image data
let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
let data = imageData.data;
// cartoon effect: reduce colors (posterization)
for (let i = 0; i < data.length; i += 4) {
data[i] = Math.floor(data[i] / 64) * 64; // R
data[i+1] = Math.floor(data[i+1] / 64) * 64; // G
data[i+2] = Math.floor(data[i+2] / 64) * 64; // B
}
// simple edge detection (Sobel filter)
let gray = [];
for (let i = 0; i < data.length; i += 4) {
let avg = (data[i] + data[i+1] + data[i+2]) / 3;
gray.push(avg);
}
let edges = new Uint8ClampedArray(data.length);
for (let y = 1; y < canvas.height - 1; y++) {
for (let x = 1; x < canvas.width - 1; x++) {
let i = y * canvas.width + x;
let gx = -gray[i - canvas.width - 1] - 2*gray[i - 1] - gray[i + canvas.width - 1]
+ gray[i - canvas.width + 1] + 2*gray[i + 1] + gray[i + canvas.width + 1];
let gy = -gray[i - canvas.width - 1] - 2*gray[i - canvas.width] - gray[i - canvas.width + 1]
+ gray[i + canvas.width - 1] + 2*gray[i + canvas.width] + gray[i + canvas.width + 1];
let g = Math.sqrt(gx*gx + gy*gy);
if (g > 80) {
edges[i*4] = edges[i*4+1] = edges[i*4+2] = 0; // black edge
edges[i*4+3] = 255;
} else {
edges[i*4] = data[i*4];
edges[i*4+1] = data[i*4+1];
edges[i*4+2] = data[i*4+2];
edges[i*4+3] = 255;
}
}
}
ctx.putImageData(new ImageData(edges, canvas.width, canvas.height), 0, 0);
};
img.src = URL.createObjectURL(file);
});
</script>
</body>
</html>
Friday, August 15, 2025
Bouncing Button with Direction Change
Full Code:
Demo :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bouncing Button with Direction Change</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f0f0f0;
}
button {
padding: 14px 28px;
font-size: 18px;
background: #007bff;
color: white;
border: none;
border-radius: 10px;
cursor: pointer;
position: relative;
}
/* Bounce animation */
@keyframes bounceRight {
0% { transform: translateX(0) scale(1); }
30% { transform: translateX(50px) scale(1.2); }
50% { transform: translateX(30px) scale(0.9); }
70% { transform: translateX(40px) scale(1.1); }
100% { transform: translateX(0) scale(1); }
}
@keyframes bounceLeft {
0% { transform: translateX(0) scale(1); }
30% { transform: translateX(-50px) scale(1.2); }
50% { transform: translateX(-30px) scale(0.9); }
70% { transform: translateX(-40px) scale(1.1); }
100% { transform: translateX(0) scale(1); }
}
.bounceRight {
animation: bounceRight 0.6s;
}
.bounceLeft {
animation: bounceLeft 0.6s;
}
</style>
</head>
<body>
<button id="bounceBtn">Click Me</button>
<script>
const btn = document.getElementById("bounceBtn");
let direction = true; // true = right, false = left
btn.addEventListener("click", () => {
if (direction) {
btn.classList.add("bounceRight");
} else {
btn.classList.add("bounceLeft");
}
// toggle direction for next click
direction = !direction;
// remove class after animation so it can retrigger
btn.addEventListener("animationend", () => {
btn.classList.remove("bounceRight", "bounceLeft");
}, { once: true });
});
</script>
</body>
</html>
CSS Triangles
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>CSS Triangles – Quick Examples</title>
<style>
:root { --size: 60px; --color: #4f46e5; --bg: #0b1020; --fg: #e5e7eb; }
html,body{height:100%}
body{margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; background: var(--bg); color: var(--fg);}
.wrap{max-width:980px; margin:24px auto; padding:24px}
h1{margin:0 0 6px; font-size:clamp(20px,3vw,32px)}
p{margin:0 0 18px; color:#a6adbb}
.grid{display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:18px}
.card{background:#0f162d; border:1px solid #1f2942; border-radius:18px; padding:18px; box-shadow:0 6px 24px rgba(0,0,0,.25)}
.title{font-weight:600; font-size:14px; letter-spacing:.3px; margin-bottom:10px; color:#c7d2fe}
.box{display:flex; align-items:center; justify-content:center; height:140px}
code{display:block; white-space:pre-wrap; background:#0b1226; border:1px solid #1c2546; padding:10px; border-radius:12px; color:#d1d7ff; font-size:12px}
/* 1) Border trick triangles (no extra markup size) */
.tri-up{ width:0; height:0; border-left: calc(var(--size) * .6) solid transparent; border-right: calc(var(--size) * .6) solid transparent; border-bottom: var(--size) solid var(--color); }
.tri-down{ width:0; height:0; border-left: calc(var(--size) * .6) solid transparent; border-right: calc(var(--size) * .6) solid transparent; border-top: var(--size) solid var(--color); }
.tri-left{ width:0; height:0; border-top: calc(var(--size) * .6) solid transparent; border-bottom: calc(var(--size) * .6) solid transparent; border-right: var(--size) solid var(--color); }
.tri-right{ width:0; height:0; border-top: calc(var(--size) * .6) solid transparent; border-bottom: calc(var(--size) * .6) solid transparent; border-left: var(--size) solid var(--color); }
/* 2) Equilateral triangle using clip-path (true triangle box) */
.tri-eq{ width: calc(var(--size) * 2); height: calc(var(--size) * 1.732); background: #ef4444; clip-path: polygon(50% 0, 0 100%, 100% 100%); }
/* 3) Triangle with outline (border + pseudo-element) */
.tri-outline{ position:relative; width:0; height:0; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 70px solid #10b981; }
.tri-outline::before{ content:""; position:absolute; left:-44px; top:5px; border-left: 44px solid transparent; border-right: 44px solid transparent; border-bottom: 78px solid #0b1020; }
/* 4) Tooltip style caret using :after */
.tooltip{ position:relative; background:#111827; padding:10px 12px; border-radius:10px; border:1px solid #1f2937; display:inline-block; }
.tooltip::after{ content:""; position:absolute; left:18px; bottom:-10px; width:0; height:0; border-left:10px solid transparent; border-right:10px solid transparent; border-top:10px solid #111827; filter:drop-shadow(0 -1px 0 #1f2937); }
.tooltip-wrap{ display:flex; align-items:center; justify-content:center; height:140px }
/* Helper */
.row{display:flex; gap:10px; align-items:center; justify-content:center}
.knob{display:flex; gap:10px; align-items:center; margin:14px 0 0}
input[type="color"], input[type="range"]{accent-color:#6366f1}
</style>
</head>
<body>
<div class="wrap">
<h1>CSS Triangles</h1>
<p>Common ways to draw triangles in pure CSS: the classic <b>border trick</b>, <b>clip-path</b> for true equilateral shapes, and a tooltip caret with <b>pseudo-elements</b>.</p>
<div class="knob">
<label>Color <input id="col" type="color" value="#4f46e5" /></label>
<label>Size <input id="sz" type="range" min="24" max="110" value="60" /></label>
</div>
<div class="grid" style="margin-top:16px">
<div class="card">
<div class="title">Up (border trick)</div>
<div class="box"><div class="tri-up"></div></div>
<code>.tri-up{width:0;height:0;border-left:36px solid transparent;border-right:36px solid transparent;border-bottom:60px solid #4f46e5}</code>
</div>
<div class="card">
<div class="title">Right (border trick)</div>
<div class="box"><div class="tri-right"></div></div>
<code>.tri-right{width:0;height:0;border-top:36px solid transparent;border-bottom:36px solid transparent;border-left:60px solid #4f46e5}</code>
</div>
<div class="card">
<div class="title">Down (border trick)</div>
<div class="box"><div class="tri-down"></div></div>
<code>.tri-down{width:0;height:0;border-left:36px solid transparent;border-right:36px solid transparent;border-top:60px solid #4f46e5}</code>
</div>
<div class="card">
<div class="title">Left (border trick)</div>
<div class="box"><div class="tri-left"></div></div>
<code>.tri-left{width:0;height:0;border-top:36px solid transparent;border-bottom:36px solid transparent;border-right:60px solid #4f46e5}</code>
</div>
<div class="card">
<div class="title">Equilateral (clip-path)</div>
<div class="box"><div class="tri-eq"></div></div>
<code>.tri-eq{width:120px;height:207.8px;background:#ef4444;clip-path:polygon(50% 0, 0 100%, 100% 100%)}</code>
</div>
<div class="card">
<div class="title">Tooltip caret (pseudo-element)</div>
<div class="tooltip-wrap"><span class="tooltip">Hello! I have a tail</span></div>
<code>.tooltip::after{border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #111827}</code>
</div>
</div>
</div>
<script>
// small controls to tweak color/size live
const col = document.getElementById('col');
const sz = document.getElementById('sz');
const root = document.documentElement.style;
col.addEventListener('input', e => root.setProperty('--color', e.target.value));
sz.addEventListener('input', e => root.setProperty('--size', e.target.value + 'px'));
</script>
</body>
</html>
Preview
Thursday, August 14, 2025
Happy independence day to all
Happy independence day to all.
Website Development Services Puranpur
Youtube - phpecho
Wednesday, August 13, 2025
Coming new video with source code (Billing Software using GST Report)
Final Year Project + Full Source Code
Monday, August 4, 2025
Custom Popup using HTML + CSS + Javascript
Video Link - Go to video
Full Code -
<style>
.popup-overlay{
display: none;
position:fixed;
top:0;
left: 0;
width: 100%;
height: 100%;
background-color: gainsboro;
z-index: 999;
justify-content: center;
align-items: center;
}
.popup-box{
background: white;
padding: 20px 30px;
border-radius: 20px;
box-shadow: 2px 2px 2px 2px gray;
max-width: 300px;
}
</style>
<button onclick="showpopup()">Show Popup</button>
<!--Popup structure-->
<div class="popup-overlay" id="popup">
<div class="popup-box">
<h2>Welcome</h2>
<p>This is custom popup by phpecho</p>
<button onclick="popclose()">Close</button>
</div>
</div>
<script>
function showpopup(){
document.getElementById("popup").style.display = 'flex';
}
function popclose(){
document.getElementById("popup").style.display = 'none';
}
</script>
Subscribe to:
Comments (Atom)
Promises in JavaScript
Create Promise let myPromise = new Promise(function(resolve, reject) { Condition let success = true; If Condition if (success) { resolv...
-
Video Link - Go to video Full code - <?php if ( $_SERVER [ 'REQUEST_METHOD' ]== "POST" ) { $email = $_POS... -
Video Link - Go to video Full Code - <style> .popup-overlay { display : none ; position : fixed ; top ...
