4
\$\begingroup\$

This code creates an intro video using the Youtube API, screen text written by JavaScript with a typewriter kind of effect. How can I rewrite this as succinct object-oriented code? Also, I'm not sure if the way I've handled the setInterval and setTimeout functions is optimal. It works but I know it's far from perfect.

  var showText;
  var loopText;

function typeWords(){

  var type=document.getElementById('typer');
  var pitch=[
       'I am a web developer...based in Manhattan, NY',
       'my passion is cutting edge web development',
       'I approach each project with the goal of crafting something unique',
       'my goal? distinguish your brand, complement your buisiness strategy',
       'LETS TALK'
    ];

   var text;
   var pitchCount=0;
   var str='';

   function runtext(){
      //update where we are in pitch array
      console.log(pitchCount);

      str=pitch[pitchCount];
      console.log(str);
      text=str.split("");

      count=0;
      type.innerHTML+='<br>';

      //console.debug(text);           

       var showText=setInterval( function(){
          //console.debug(text);
          if (count<text.length) {   
          type.innerHTML+="<span id='letterspan'>"+text[count]+"</span>";
          }
           count++;}, 50);

  }//*end runtext()

    loopText=setInterval(function(){ 
       if(pitchCount<pitch.length)
         {        
          runtext(); 
          pitchCount++;  
        } 
   },3750 );


  clearInterval(showText);
  //clearInterval(loopText);  

} ;//End typewords

var  imgHandler={

   screenWidth: window.innerWidth,
   screenHeight: window.innerHeight,

   showDims: function(){

            console.log(this.screenWidth);

           //document.getElementById(ele);
           return this.screenWidth;
   }


} 

 var  setImage={

    path:[ 'images/1200/grandArmy.JPG','images/1380/grandArmy.JPG','images/1680/grandArmy.JPG','images/2400/grandArmy.JPG'],

    setPath:function(){

        if (imgHandler.Width<1200) {

          return this.path[0];
        } else if (1200<imgHandler.Width<1380){
          return this.path[1];
        } else if (1380<imgHandler.Width<1680) {
          return this.path[2];
        } else if (1680<imgHandler.Width<2400) {
          return this.path[3];
        };

    }

}

//** DEFINE YOUTUBE VIDE0 OBJECT

      var tag=document.createElement('script');
      tag.src="https://www.youtube.com/iframe_api";
      var firstScriptTag= document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

//DEFINE YOUTUBE VIDEO PARAMETERS

  function onYouTubeIframeAPIReady()
{
       var player;
       player= new YT.Player('player', {

       height:'349',
       width :'560',
       videoId:'1apAf7MPvxg',

       events:{
        'onReady': onPlayerReady,
        'onStateChange':onPlayerStateChange

       },

       playerVars:{
         'autoplay':1,
         'controls':0,
         'showinfo':0,
         'autohide':1,
         'start':12,
         'end':32,
         'rel':0

       }


     }
    ); 
 }    
 //End .create player object 

function onPlayerReady(event)
{
   console.log('onplayerready fired');
  // event.target.playVideo();
  /*Here you can create a javascript file to create and remove a cover div to hide the loading part of the player*/

}

//declare variables for moveWin

  var done=false;
  var nextSection=document.getElementById('home');
  var nextSectionRect=nextSection.getBoundingClientRect();
  var yVal=nextSectionRect.top;
  var winPosition=-3;


function moveWin(yValue,winPos){



       setTimeout(
                   function()
                    {
                      console.log(winPos);
                      winPos=winPos+10;  
                      window.scroll(0,winPos);
                      if (yValue > winPos){ moveWin(yValue,winPos) }; 

                    }, 10);
 }

 function onPlayerStateChange(event)
  {

     if (event.data==YT.PlayerState.ENDED) 
      {
         //when the player stops scroll window so
         //top of next div is at the top of the window. 
          done=true;
          moveWin(yVal,winPosition);
      };
}
\$\endgroup\$
2
\$\begingroup\$
  1. First off, style. There are some major style issues with your code that I'd like to address. Naming is less of an issue here, but more of a general issue with the way you've spaced your code and such.

    1. First off, you need space between operators. You need to have one space before an operator, and after it. For example, and equals comparison would look like this: 1 == 2, or a variable declaration: var x = 0;
    2. Secondly, you have a lot of extra, unneeded blank lines. These can be removed, as it makes code look inconsistent, and not so great.
    3. You're mixing to curly brace styles, choose one, or the other. Don't mix the two styles, as, again, it will look inconsistent.
    4. Finally, on style, you have a lot of extra spaces. Remove these.
  2. Remove commented out lines of code. If you aren't using them, there's no need to have them. They should be removed.

  3. Finally, add some more comments to this. Specifically for functions, and above hard-to-read blocks of code. Your code will be much easier to read after this.
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.