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>


- No comments:
Labels:
Location: Puranpur, Uttar Pradesh 262122, India

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>

- No comments:
Labels:

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>
- No comments:
Labels:
Location: Puranpur, Uttar Pradesh 262122, India

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




- No comments:
Labels:

Thursday, August 14, 2025

Happy independence day to all


 

Happy independence day to all.

Website Development Services Puranpur

Youtube - phpecho

- No comments:
Labels:

Wednesday, August 13, 2025

Coming new video with source code (Billing Software using GST Report)

 


Final Year Project + Full Source Code

- No comments:
Labels:

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>

- No comments:
Labels:
Subscribe to: Posts (Atom)

Custom method using prototype in JavaScript.

<!DOCTYPE html> <html> <head>   <title>Custom Prototype Method</title> </head> <body>   <h2>...

  • Password Remember using php
      Video Link -  Go to video Full code -  <?php   if ( $_SERVER [ 'REQUEST_METHOD' ]== "POST" )  {       $email = $_POS...
  • API using Php | How to design API using php (Mysql Addon)
    index.php <?php $url = "your url" ; $web = curl_init (); curl_setopt ( $web ,CURLOPT_URL, $url ); curl_setopt ( $web ,CURLOPT...
  • Coming Soon.
                                                                            Go to our Channel -  Youtube