Posts

Showing posts from March, 2024

Dice Game code in html

 <!DOCTYPE html> <html> <head> <title>Roll Dice</title> <style> #dice { cursor: pointer; transition: transform 0.2s; } #dice.roll { transform: rotate(360deg); } </style> </head> <body> <h1>Roll Dice</h1> <img id="dice" src="https://img.freepik.com/premium-photo/white-plastic-dice-white-realistic-game-cube_88211-5834.jpg" alt="Dice" width="200" height="200"> <p id="result"></p> <script> document.getElementById("dice").addEventListener("click", function() { this.classList.add("roll"); setTimeout(function() { var result = Math.floor(Math.random() * 6) + 1; document.getElementById("result").innerHTML = "You rolled a " + result; document.getElementById("dice").classList.remove("roll"); }, 200); }); <...

Sweet Alert Message in HTML

<!DOCTYPE html> <html> <head>     <title>SweetAlert Example</title>     <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script> </head> <body>     <button onclick="showSweetAlert()">Click me</button>     <script>         function showSweetAlert() {             swal({                 title: "Are you sure?",                 text: "Do you want to continue?",                 icon: "warning",                 buttons: ["Cancel", "OK"],             }).then((value) => {                 if (value) {                     swal("Great!", "You ...

Show Toaster message Simple example in HTML

 <!DOCTYPE html> <html>   <head>     <title>Toastr Example</title>     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.css" />     <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.js"></script>   </head>   <body>     <button id="showToastButton">Show Toast</button>      <button id="showSuccessButton">Show Success</button>     <script>       $(document).ready(function() {         $("#showToastButton").click(function() {           toastr.error("This is an error toast message.");         });           $("#showSuccessButton").click(function() { ...

One tab to Second tab Dropdown same select

  To synchronize the selection of the PlantID dropdown between two tabs, you can use JavaScript to detect changes in the first dropdown and reflect them in the second dropdown. <div id="HeaderSection"> <div class="tabbable btn-responsive"> <ul class="nav nav-tabs" id="assetTabs"> <li role="presentation" class="active"><a href="#ItemHeader" targettab="ItemHeader" id="tabItemHeader" data-toggle="tab">@Resources.GoodsReceipt</a></li> <li role="presentation"><a href="#PurchaseOrderSearch" targettab="PurchaseOrderSearch" sourcediv="PurchaseOrderSearch" id="tabPurchaseOrderSearch" data-toggle="tab">@Resources.PurchaseOrder</a></li> <li role="presentation"><a href="#GoodsReceiptItemlist" target...