Displaying Different Texts Sequentially from an Array with javascript

 const outputElement = document.getElementById('output');

const textArray = ['First text message.', 'Second text message.', 'Third text message.'];

let currentIndex = 0;

function displayNextText() {

    if (currentIndex < textArray.length) {

        // Replace the entire content with the current text

        outputElement.innerHTML = textArray[currentIndex];

        currentIndex++;

        // Schedule the next text to be displayed after a delay (e.g., 2 seconds)

        setTimeout(displayNextText, 2000); // 2000 milliseconds = 2 seconds

    }

}

// Start the display sequence

displayNextText();

===============================

Text Sequentially with CSS

<div class="text-container">

  <div class="text-item">First Text</div>

  <div class="text-item">Second Text</div>

  <div class="text-item">Third Text</div>

</div>

.text-container {

  display: grid;

  grid-template-areas: "content";

}

.text-item {

  grid-area: content;

  opacity: 0;

  animation: slideIn 6s infinite;

}

/* Stagger animation with delays */

.text-item:nth-child(1) { animation-delay: 0s; }

.text-item:nth-child(2) { animation-delay: 2s; }

.text-item:nth-child(3) { animation-delay: 4s; }

@keyframes slideIn {

  0% { opacity: 0; }

  10% { opacity: 1; }

  30% { opacity: 1; }

  40% { opacity: 0; }

  100% { opacity: 0; }

}

Infinite for loop in javascript

 for (let i = 0; i < 10; i--) {

  // 'i' starts at 0 and keeps decreasing (0, -1, -2, ...), 

  // so the condition 'i < 10' is always true.

}

======================

for (;;) {

  // Code to be executed indefinitely

}

==================

for (let i = 0; true; i++) {

  // This condition is always true

}

====================

for (let i = 0; i !== 10; i += 2) {

  // 'i' takes values 0, 2, 4, 6, 8, 10, 12...

  // The condition 'i !== 10' is true for all these values,

  // including 10 because the exact value of 10 is skipped.

  // Better to use '<=' or '>=' for numeric range conditions.

}

Typing effect with CSS - Typing with CSS - Typing with Javascript

     <style>

        .typing-effect {

    overflow: hidden; /* Hide the full text initially */

    border-right: .15em solid orange; /* Blinking cursor effect */

    white-space: nowrap; /* Prevent text from wrapping */

    margin: 0 auto; /* Center the text */

    letter-spacing: .15em; /* Spacing between characters */

    width: 0; /* Start with a width of 0 */

    animation: 

        typing 30.5s steps(150, end) forwards, /* Typing animation */

        blink-caret 0.5s step-end infinite; /* Blinking cursor animation */

}

/* Keyframes for the typing animation */

@keyframes typing {

    from { width: 50 }

    to { width: 100% }

}

/* Keyframes for the blinking cursor */

@keyframes blink-caret {

    from, to { border-color: transparent }

    10% { border-color: orange; }

}

    </style>

<html>

  <p class="typing-effect">Hello, world! This is a CSS typing effect.</p>

</html>

=======================

Typing with javascript

const element = document.getElementById('sequence');

const fullText = 'IT Solutions Professional Work Ethic';

let index = 0;

function typeText() {

    if (index < fullText.length) {

        // Use the addition assignment operator (+=) to append the next character

        element.innerHTML += fullText[index]; //

        index++;

        // Schedule the next character to be added after a delay (e.g., 100ms)

        setTimeout(typeText, 100);

    }

}

// Start the sequence

typeText();

Note: for demo you can check CSS framework https://picocss.com/

Node.js File structure

 >Node Modules

> Index.js

>Model.JS

Package.JSON

Package-lack.JSON

How to create an image with random number and random alphabets with Javascripts

HTML

 <body>

    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">

        Your browser does not support the HTML5 canvas tag.

    </canvas>

    <script src="script.js"></script>

</body>

JAVASCRIPT

function generateRandomLetters(length) {

  let result = '';

  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';

  for (let i = 0; i < length; i++) {

    result += characters.charAt(Math.floor(Math.random() * characters.length));

  }

  return result;

}

// Example usage to get a 6-letter string:

const randomLetters = generateRandomLetters(6);

// Get the canvas element and its 2D context

const canvas = document.getElementById("myCanvas");

const ctx = canvas.getContext("2d");

// Draw a rectangle

ctx.fillStyle = "#FF0000";

ctx.fillRect(0, 0, 150, 75);

// Draw some text

ctx.font = "30px Arial";

ctx.fillStyle = "#000000";

ctx.fillText(randomLetters, 10, 50);

// Optional: Convert canvas content to an image data URL

const imageDataUrl = canvas.toDataURL("image/png");

console.log(imageDataUrl); // You can use this URL as the src for a new <img> element

document.write(randomLetters);

OR

// Get the canvas element and its 2D context

const canvas = document.getElementById("myCanvas");

const ctx = canvas.getContext("2d");

// Draw a rectangle

ctx.fillStyle = "#FF0000";

ctx.fillRect(0, 0, 150, 75);

// Draw some text

ctx.font = "30px Arial";

ctx.fillStyle = "#000000";

ctx.fillText(Math.random(), 10, 50);

// Optional: Convert canvas content to an image data URL

const imageDataUrl = canvas.toDataURL("image/png");

console.log(imageDataUrl); // You can use this URL as the src for a new <img> element

document.write(Math.random());

ref:- https://codesandbox.io/p/sandbox/random-word-generator-ijlgj?file=%2Fsrc%2Findex.js%3A7%2C44-7%2C50

Fireworks in JS - Crackers Javascript

 https://fireworks.js.org/

https://www.npmjs.com/package/fireworks-js

> https://github.com/crashmax-dev/fireworks-js

https://stackblitz.com/edit/js-ubfdjg?file=style.css,package.json,index.js

https://codepen.io/mr__khushal/pen/yLobQEP

https://stackblitz.com/edit/js-ubfdjg?file=style.css,package.json,index.js

https://www.myprograming.com/how-to-add-crackers-animation-effect-to-my-html-page/

Confirm button in Javascript

  if (confirm("Press a button!")) {

    txt = "You pressed OK!";

  } else {

    txt = "You pressed Cancel!";

  }

How to install node js and How to add subtitle in videos with node js

 1) Download Node JS in nodejs.org 

2) Go to downloads

3) Download msi file

4) At last after finish installation, Click on close while install Additional Tools for Node.js

ref:- https://nodesource.com/blog/installing-nodejs-tutorial-windows

After installing, you can generate subtitles for videos in node js by below link

ref:- https://creatomate.com/blog/how-to-automatically-add-subtitles-to-videos-with-nodejs#1-set-up-your-node-js-project

sample video link, below

ref:-https://storage.googleapis.com/aai-web-samples/aai-overview.mp4

https://cdn.creatomate.com/demo/the-daily-stoic-podcast.mp4

How to Play two videos with videos.js - caption with google chrome - close caption or subtitles

 <html>

<head>

  <link href="https://vjs.zencdn.net/8.23.4/video-js.css" rel="stylesheet" />

  <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->

   <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js">

       function init() {

        var url = "https://dash.akamaized.net/akamai/test/caption_test/ElephantsDream/elephants_dream_480p_heaac5_1_https.mpd",

            video = video = document.querySelector('video'),

            player;

        player = dashjs.MediaPlayer({}).create();

        player.initialize(video, url, true);

    }

</script>

</head>

<body>

<video

    id="my-player"

    class="video-js"

    controls

    preload="auto"

    poster="//vjs.zencdn.net/v/oceans.png"

    data-setup='{}'>

  <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>

  <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>

  <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source>

  <p class="vjs-no-js">

    To view this video please enable JavaScript, and consider upgrading to a

    web browser that

    <a href="https://videojs.com/html5-video-support/" target="_blank">

      supports HTML5 video

    </a>

  </p>

</video>

  

   <video

      id="my-video"

      class="video-js vjs-default-skin"

      controls

      preload="auto"

      width="560"

      height="300"

      data-setup='{}'>

   

      <source

         src="https://vjs.zencdn.net/v/oceans.mp4"

         type="video/mp4"

         size="1080"

      >

      <track

         kind="subtitles"

         src="https://gist.githubusercontent.com/samdutton/ca37f3adaf4e23679957b8083e061177/raw/e19399fbccbc069a2af4266e5120ae6bad62699a/sample.vtt"

         srclang="en"

         label="English"       

      >

   </video>

  </body>

  <html>

  

  

  ref:- https://docs.cloud.google.com/transcoder/docs/how-to/captions-and-subtitles

sample video   ;- https://docs.cloud.google.com/static/transcoder/images/ChromeCast.mp4

sample vtt file:- https://docs.cloud.google.com/transcoder/images/captions.srt

or use Live caption:- https://support.google.com/chrome/answer/10538231?hl=en#zippy=%2Cwindows-or-mac

How to open new window with width and height - using window.open

  <a href="#" onclick="MyWindow=window.open('https://www.aspsnippets.com/Articles/660/Display-image-from-database-in-Image-control-without-using-Generic-Handler-in-ASPNet/','MyWindow','width=600,height=300'); ">click to open new window</a>

Calling a function in javascript anchor tag

 <a class="link-offset-2 link-offset-3-hover link-underline link-underline-opacity-0 link-underline-opacity-75-hover" style="cursor: pointer" onclick="showCaseProfile(\'' + value.FileNumber + '\');">' + value.FileNumber + '</a>

function showCaseProfile(CaseNo) {

    var params = { strCNR_No: CaseNo };

    $.ajax({

        type: "POST",

        contentType: "application/json; charset=utf-8",

        url: '../DashboardReports/DashboardReports.aspx/CNREncryption',

        data: JSON.stringify(params),

        dataType: "json",

        success: function (data) {

            window.open('../DashboardReports/CaseProfile.aspx?CaseNo=' + data.d, '_blank');

        },

        error: function (result) {

            alert("Server Connection Error");

        }

    });

}

Jquery ajax - ASP.NET when exception occur in asp.net

 success: function(data) {

  if (typeof data == "string")

    data = JSON.parse(data);

  if (data.success) {

    // Code if success.

  } else {

    // Code if error.

  }

},

and when method not found, than it will gone to error or any function not called by ajax call.

 $.ajax({
    type: "POST",
    data: formData,
    url: "/Forms/GetJobData",
    dataType: 'json',
    contentType: false,
    processData: false,               
    success: function (response) {
        if (response.success) {
            alert(response.responseText);
        } else {
            // DoSomethingElse()
            alert(response.responseText);
        }                          
    },
    error: function (response) { // // Added this event to capture the failed requests.

        alert("error!");  // 
    }

});

ref:- https://stackoverflow.com/questions/37187699/ajax-error-is-returned-as-success