Home About Contact

Projects

Create Messenger Pop Up ChatBox Type Writer ChatGpt Basic Copy Text Using Tolltip Digital Clock CountDown Timer Create StopWatch FB login from Tab Button Accordion Auto Image Gallery DropDown Menu Modal Box Modal Image Box Scroll Indicator To Do List Autocomplete Remember Search History Toggle Switch Calender Layout Dynamic Calender Alarm Set Password Validation Password Generator Age Calculator Multi Step Form Weather API

📝Typewriter Like ChatGpt✍️

Note: If you are a beginner, this is something you need to know. Scroll the below section or Click here
  • HTML DOM
  • string charAt() mehtod in JS
  • setTimeOut method in JS
  • setInteval method in JS
  • requestAnimationFrame() method in JS

Click the below button and write a content like ChaTGpt

HTML


<h3>Click the below button and write a content like ChaTGpt</h3>

<button onclick="typewriter()">Click Me</button>

<p id="demo" style="background-color: white;"></p>

JavaScript


var i = 0;
let text = "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repudiandae libero itaque, amet reprehenderit officiis magnam vel accusantium maiores praesentium, saepe dolore accusamus eveniet. Asperiores, doloribus in corporis error voluptas consequuntur?";


let demo = document.getElementById("demo");
function typewriter() {
    demo.innerHTML = "";
    i = 0;
    clearTimeout(written);
    console.log(demo);
    written();

}


function written() {
    //console.log(i);
    var clear= setTimeout(written, 50);
    if (i < text.length) {
        demo.innerHTML += text.charAt(i);
        i++;
    }
    else{
        clearTimeout(clear);
    }

    
}

You Can Use Alternative JavaScript requestAnimationFrame() Method.



    var i=0;
    let text=" Lorem ipsum dolor sit amet consectetur adipisicing elit";
    let para=document.querySelector("#demo");

    function typewriter(){

        if(i< text.length){
            para.innerHTML+=text.charAt(i);
            i++;
        }
        requestAnimationFrame(typewriter);
    }

HTML DOM

  • querySelector: retuns the first element within the document that matches the specified CSS selctor. Example: const sampleElement = document.querySelector('.sample').If there are mutltiple element with the class name 'sample' `querySelector` will return the first matching elements.
  • You can also use getElementById, getElementByClassName, querySelectorAll etc

String charAt()

  • The charAt(): method in JavaScript returns the character at a specified index in a string. The index starts from 0. Example: const str = "Hello, World!";
    const char = str.charAt(7)

setTimeOut method()

  • setTimeOut(function-name, millsec): that will execute the provided function after certain millisecond.
    clearTimeout(timeoutId) used to cancel time out if needded.

requestAnimationFrame()

  • requestAnimationFrame(): works by calling the provided callback function before the next repaint, allowing smooth animations.
    Example requestAnimationFrame(function_name);