Typewriter effect with JavaScript

I am just new to JavaScript I do not understand how can I create such Typewriter effect, I am having problem in changing the color of some of its words. I have made something like this Sugar, Spice, everythingNice

Answer

Well mate the website you wanted to build (i guess) is made up of three.js for that rotating cube and for the typing effect you can use a simple easy and yet powerful js library – Typed.js

Include this in your html file:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.12/typed.min.js"></script>


<h3>Hey i am a<span class="typing"></span></h3>

Configure some basic options such as what are the different words to type,speed and the container you want to insert it onto:

   var typed = new Typed(".typing",{ //specify the element
    strings: ["Freelancer","Developer","Designer"], //multiple texts
     typeSpeed: 100,
     bacSpeed: 60,
     loop: true
   })

That’s it! see it live below:

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Typed js basic usage</title>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.12/typed.min.js"></script>
        <style>
           *{
              font-family: sans-serif;
              margin: 0;
              padding: 0;
              box-sizing: border-box;
            }
            .typing{
               color: red;
            }
        </style>
      </head>
      <body>
         <h3>Hey i am a <span class="typing"></span></h3>
         
        <script>
          var typed = new Typed(".typing",{
        strings: ["Freelancer","Developer","Designer"],
        typeSpeed: 100,
        bacSpeed: 60,
        loop: true
       })
      </script>       

      </body>
    </html>

External links(for reference) Typed.js docs