Online Home of Yash Kapoor

Monday, March 23, 2026

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-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.

}

cheet codes in c# - cheatcode in c#

https://zerotomastery.io/cheatsheets/csharp-cheat-sheet/

var anon = new { Name = "John", Age = 25 };

var person = Tuple.Create("John", 25); // Creates a tuple with two items.

Tuesday, March 17, 2026

Text blur effect in css

backdrop-filter: blur(0px);

-webkit-backdrop-filter: blur(0px);

or simple use, if above is not working

.element-to-blur {

filter: blur(0.2px); /* The radius value controls the intensity of the blur */

}

Note:- There are lot of property in filer property example contrast, brightnexx, saturate, hue etc.

Thursday, March 12, 2026

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/

Online Home of Yash Kapoor

Slider

Carousel Example

LinkList