<button 
  data-product-id="101" 
  data-price="500"
  onclick="addToCart(this)">
  কার্টে যুক্ত করুন 🛒
</button>
 
<script>
  function addToCart(btn) {
    const id = btn.dataset.productId;   // "101"
    const price = btn.dataset.price;   // "500"
    console.log(`Product ${id}, Price: ${price}`);
  }
</script>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid black;">
</canvas>
 
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  
  // একটি নীল আয়তক্ষেত্র আঁকা
  ctx.fillStyle = '#4A90D9';
  ctx.fillRect(20, 20, 150, 80);
  
  // টেক্সট লেখা
  ctx.fillStyle = 'white';
  ctx.font = '20px Arial';
  ctx.fillText('Hello Canvas!', 40, 65);
</script>

<button onclick="getLocation()">📍 আমার লোকেশন দেখান</button>
<p id="location-result"></p>
 
<script>
  function getLocation() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition((position) => {
        const lat = position.coords.latitude;
        const lon = position.coords.longitude;
        document.getElementById('location-result').textContent = 
          `Latitude: ${lat}, Longitude: ${lon}`;
      });
    }
  }
</script>

<div id="drag-item" draggable="true" 
     ondragstart="drag(event)"
     style="background:#4A90D9; color:white; padding:10px; width:100px; cursor:grab;">
  🟦 ধরুন ও টানুন
</div>
 
<div id="drop-zone" 
     ondrop="drop(event)" ondragover="allowDrop(event)"
     style="background:#eee; padding:40px; margin-top:20px; border: 2px dashed #999;">
  এখানে ছাড়ুন
</div>
 
<script>
  function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); }
  function allowDrop(ev) { ev.preventDefault(); }
  function drop(ev) {
    ev.preventDefault();
    const id = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(id));
  }
</script>