Shadow button the code full!: now...🕒

This full code, I colored it later if not make small blogs about it's subsectios where I explain stuff. I dont much care about colorings. 

And https://praybook2.blogspot.com/2021/08/css-box-shadow-button-shadow-has-no.html this is the shadow button I mean.

<script id="primitives">

  

  

  var Test_timer;//=setInterval(myTimer, 1000);

 var shadowtest__StyleContainer=[] ;

  var shadowtest__numberRunner=-1;

  var shadowtest__thechosen=0;

  var shadowtest__freshfromContainer=false;

  var shadowtest__moveleft=10;

  var shadowtest__moveleft_speed=0;

  var shadowtest__movedown=10;

  var shadowtest__spray=10;

  var shadowtest__size=10;

  var shadowtest__color_R=120;

  var shadowtest__color_G=20;

  var shadowtest__color_B=50;

  var shadowtest__color_O=1;

  

   var shadowtest__color="rgba"+"("+shadowtest__color_R+","+ shadowtest__color_G+","+ shadowtest__color_B+","+ shadowtest__color_O+")" ;

  // var box_shadow=" 0 4px 87px 190px rgba(0, 0, 0, 0.2)"; 0px   0px  0px  0px  rgba(0,0,0,1)

   var box_shadow="box-shadow: "+shadowtest__moveleft+"px   "+shadowtest__movedown+"px  "+shadowtest__spray+"px  "+ shadowtest__size+"px  "+ shadowtest__color+";";

  var  altering=true;

</script>

<script>

  //////////////////////////////////////////////////////////////////////////////

</script>

<script id="opjects">

     var ading={red:1,green:1,blue:1,opacity:-0.01};

   var ColorsAndOpacity={

    red:215,green:215,blue:215,opacity:1,

first:true

    };

  var  RgbaColor={string:"rgba"+"("+ColorsAndOpacity.red+","+ ColorsAndOpacity.green +","+ ColorsAndOpacity.blue+","+ ColorsAndOpacity.opacity+")"};

  var  CollectionOfValues={

     left:20,down:20,spray:20,size:20

    }

 // CollectionOfValues.spray=1

  var speeds={ left:5,down:5,spray:5,size:5};

    var fullStyle={

    PutThisInCSS:" "+CollectionOfValues.left+"px   "+CollectionOfValues.down+"px  "+CollectionOfValues.spray+"px  "+ CollectionOfValues.size+"px  "+ RgbaColor.string+"",

string:"rgba"+"("+ColorsAndOpacity.red+","+ ColorsAndOpacity.green +","+ ColorsAndOpacity.blue+","+ ColorsAndOpacity.opacity+")",

    left:CollectionOfValues.left,down:CollectionOfValues.down,spray:CollectionOfValues.spray,size:CollectionOfValues.size,

     red:ColorsAndOpacity.red,green:ColorsAndOpacity.green,blue:ColorsAndOpacity.blue,opacity:ColorsAndOpacity.opacity

      ,first:true

    };

</script>

<script>

  //////////////////////////////////////////////////////////////////////////////

</script>

<script id="functions">

  

  function usefromcontainer(){

    //console.log(fullStyle.PutThisInCSS);

  fullStyle.PutThisInCSS=shadowtest__StyleContainer[shadowtest__thechosen].PutThisInCSS;// pitää     päivitää niitä väli vaiheita

    ColorsAndOpacity.red=shadowtest__StyleContainer[shadowtest__thechosen].red;

    ColorsAndOpacity.blue=shadowtest__StyleContainer[shadowtest__thechosen].blue;

    ColorsAndOpacity.green=shadowtest__StyleContainer[shadowtest__thechosen].green;

    ColorsAndOpacity.opacity=shadowtest__StyleContainer[shadowtest__thechosen].opacity;

     ColorsAndOpacity.first=shadowtest__StyleContainer[shadowtest__thechosen].first;

    

    

    CollectionOfValues.left=shadowtest__StyleContainer[shadowtest__thechosen].left;

    CollectionOfValues.down=shadowtest__StyleContainer[shadowtest__thechosen].down;

  CollectionOfValues.spray=shadowtest__StyleContainer[shadowtest__thechosen].spray;

    CollectionOfValues.size=shadowtest__StyleContainer[shadowtest__thechosen].size;

   RgbaColor.string=shadowtest__StyleContainer[shadowtest__thechosen].string;

  fullStyle= JSON.parse(JSON.stringify(shadowtest__StyleContainer[shadowtest__thechosen]));

    //fullStyle.PutThisInCSS=

    

   

 

  

  }

  

      function Changespeeddirect(){

    speeds["left"]=speeds["left"]*(-1);

    

    }

    function AlterStrings(){

      if(altering){

      changestring2("-","shadowtest__moveleft__direction_span");

      altering=false;

      }else{

      changestring2("+","shadowtest__moveleft__direction_span");

      altering=true;

      }

    }

      function moveClection(Ob,K){

    updatingStylePosition(Ob,K);

    hierspeeds(K);

    writeStyle();

    }

      function updatingStylePosition(object,key){

    //console.log( );

      object[key]=object[key]+speeds[key];

    //console.log(object[key]);

   // console.log(speeds[key]);

    }

    function hierspeeds( key){

   //  speeds[key]++;// tässä virhe

    speeds[key]=speeds[key]+speeds[key];

    }

    function writeStyle(){

 

      if(shadowtest__freshfromContainer){

      usefromcontainer();

        shadowtest__freshfromContainer=false;

      }

      

      UpdateStyleColor();

      UpdatefullStyle(); 

       const clonefullStyle= JSON.parse(JSON.stringify(fullStyle));

      

       shadowtest__StyleContainer[shadowtest__thechosen]=  clonefullStyle; 

      var stringi="";

      var stringi2="";

      

      

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

      //    for(i; i > 0; i--){  

           

       if(i==0){

       //stringi=stringi+shadowtest__StyleContainer[i];

         

         if(shadowtest__thechosen==i){

         stringi="👉"+shadowtest__StyleContainer[i].PutThisInCSS+"👈"+ stringi;

         }else{

         

         stringi= shadowtest__StyleContainer[i].PutThisInCSS+ stringi;

         }

          stringi2=shadowtest__StyleContainer[i].PutThisInCSS+ stringi2;

        // stringi=shadowtest__StyleContainer[i].PutThisInCSS+ stringi;

         

   //SingAndDanceAddelements(" .shadowtest__shower{ box-shadow:"+ stringi+";}");

         

   //SingAndDanceAddelements3(" .shadowtest__shower{ box-shadow:"+ stringi+";}","shadowtest__ShowThestyle_span",0,"span");

       }else{

       //stringi=stringi+","+shadowtest__StyleContainer[i];

         if(shadowtest__thechosen==i){

          stringi= "👉"+shadowtest__StyleContainer[i].PutThisInCSS+"👈"+ ","+stringi;

         }else{

         

          stringi= shadowtest__StyleContainer[i].PutThisInCSS+ ","+stringi;

         

         }

         stringi2= shadowtest__StyleContainer[i].PutThisInCSS+ ","+stringi2;

       

        // }

        // console.log(shadowtest__StyleContainer[i].PutThisInCSS+ "  "+222222222222222+" " +i);

   

       //  SingAndDanceAddelements(" .shadowtest__shower{ box-shadow:"+ stringi+";}");

      

      //   SingAndDanceAddelements3(" .shadowtest__shower{ box-shadow:"+ stringi+";}","shadowtest__ShowThestyle_span",0,"span");   

         

       }

    }

      

      SingAndDanceAddelements(" .shadowtest__shower{ box-shadow:"+ stringi2+";}");

         

   SingAndDanceAddelements3(" .shadowtest__shower{ box-shadow:"+ stringi+";}","shadowtest__ShowThestyle_span",0,"span"); 

    }

      function ColorthingysR(classnames,buttoncolor){

    var class_name = document.getElementsByClassName(classnames)[0];

    var ColorButton=document.getElementsByClassName(buttoncolor)[0];

    shadowtest__color_R++;

      //milloinkohan kierähtää ympäri

    if( shadowtest__color_R==216){

      shadowtest__color_R=0;

      }

      shadowtest__color="rgba"+"("+shadowtest__color_R+","+ shadowtest__color_G+","+ shadowtest__color_B+","+ shadowtest__color_O+")" ;

        ColorButton.style.backgroundColor = shadowtest__color;

     // console.log(shadowtest__color);

    }

     function Colorthingys(classnames,buttonToColorClassName){

    var class_name = document.getElementsByClassName(classnames)[0];

    var ColorButton=document.getElementsByClassName(buttonToColorClassName)[0];

    shadowtest__color_R++;

       

    if( shadowtest__color_R==216){

      shadowtest__color_R=0;

      }

      shadowtest__color="rgba"+"("+shadowtest__color_R+","+ shadowtest__color_G+","+ shadowtest__color_B+","+ shadowtest__color_O+")" ;

        ColorButton.style.backgroundColor = shadowtest__color;

     // console.log(shadowtest__color);

    }

     function SingAndDanceAddelements(StringTheStyle){

     var styleT = document.createElement("style");

  styleT.setAttribute("id","TheStyle");

  styleT.appendChild(document.createTextNode(StringTheStyle));

     var Laying_styleT=document.getElementById("TheStyle");

  var parentstyle = Laying_styleT.parentNode;

  // Laying_styleT=document.getElementById("style_tulevat");

  //parentstyle = Laying_styleT.parentNode;

  parentstyle.replaceChild(styleT,Laying_styleT);

   }

 // SingAndDanceAddelements3(,"shadowtest__ShowThestyle_span",0,"span");

 function SingAndDanceAddelements3(StringTheStyle,className,classorder,element){

     var styleT = document.createElement(element);//siis teen style id kopion 2 kopioita ja sitten pyöritän niitä

  styleT.setAttribute("class",className);

  styleT.appendChild(document.createTextNode(StringTheStyle));

//console.log(className);

 // var Laying_styleT= getElementsByClassName(className)[classorder];

 // var Laying_styleT= getElementsByClassName(className) ;

   var Laying_styleT= document.getElementsByClassName(className)[classorder] ;

  // var Laying_styleT=document.getElementById("TheStyle");

  var parentstyle = Laying_styleT.parentNode;

  // Laying_styleT=document.getElementById("style_tulevat");

  //parentstyle = Laying_styleT.parentNode;

  parentstyle.replaceChild(styleT,Laying_styleT);

   }

      function ButtonEventmaker(object){

     // object.EventFunctionPairarray;

     // object.ButtonClass

    var length= object.events.length;

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

   

      ButtonControl( object.class,object.events[i],  object.events[i+1]);

      }

    }

    function TakeColor(ClassName){

  //  console.log("!");

    var ColorButton=  document.getElementsByClassName(ClassName)[0];

  //   console.log(ColorButton);

     // ColorButton.style.backgroundColor

      // ColorButton.style.backgroundColor = shadowtest__color;

      ColorButton.style.backgroundColor = RgbaColor.string;

     // console.log("hiu e");

     // RgbaColor.string

     // uudelleen piirto

      writeStyle();

    }

 

 

  function SingAndDanceAddelements2(StringTheinner, element,atributelist,classname,classnumber){

     var styleT = document.createElement(element);

       var length= atributelist.length;

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

      //object.EventFunctionPairarray[i];

      //object.EventFunctionPairarray[i+1];

      //  console.log(object.events[i]);

     //   console.log(object.events[i+1]);

     //   console.log(object.class )

    //  ButtonControl( object.class,object.events[i],  object.events[i+1]);

     styleT.setAttribute(atributelist[i],atributelist[i+1]);

      }

     styleT.appendChild(document.createTextNode(StringTheinner));

    // getElementsByClassName

     //var Laying_styleT=document.getElementById("TheStyle");

     var Laying_styleT=document.getElementsByClassName(classname)[classnumber];

  var parentstyle = Laying_styleT.parentNode;

  // Laying_styleT=document.getElementById("style_tulevat");

  //parentstyle = Laying_styleT.parentNode;

  parentstyle.replaceChild(styleT,Laying_styleT);

   }

     function MakeNewBoxShadow(){

     if(shadowtest__numberRunner==-1){

     //tringStyle=stringStyle+fullStyle.PutThisInCSS;

       

         SingAndDanceAddelements(" .shadowtest__shower{ box-shadow:"+ fullStyle.PutThisInCSS+";}");

       //tähän kirjoitan yhden sellaisen

        SingAndDanceAddelements3(" .shadowtest__shower{ box-shadow:"+ fullStyle.PutThisInCSS+";}","shadowtest__ShowThestyle_span",0,"span");

       

       document.getElementById("hideandrise").style.display = "block";

       document.getElementById("hideandrise").style.animation = "visible 4s 1";

       document.getElementById("hideandrise").style.opacity = "1.0";

       //plauu

       

       //.style.animation = "mynewmove 4s 2"

     }else{

//console.log(shadowtest__StyleContainer[shadowtest__numberRunner].left );

      // console.log(shadowtest__numberRunner);

    // console.log( shadowtest__StyleContainer[shadowtest__numberRunner]);

       //0px   0px  0px  0px  rgba(0,0,0,1) box-shadow:

      // SingAndDanceAddelements(" .shadowtest__shower{"+box_shadow+"}");

      //console.log(shadowtest__numberRunner);

    var stringStyle2="";

    var stringStyle="";

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

       if(i==0){ 

       //stringStyle=stringStyle+shadowtest__StyleContainer[i];

          stringStyle=shadowtest__StyleContainer[i].PutThisInCSS+stringStyle;

        // if(shadowtest__thechosen==i){

        //  stringStyle2="👉"+shadowtest__StyleContainer[i].PutThisInCSS+"👈"+stringStyle2;

        // }else{

         stringStyle2=shadowtest__StyleContainer[i].PutThisInCSS+stringStyle2;

        // }

       }else{

       //stringStyle=stringStyle+","+shadowtest__StyleContainer[i];

          stringStyle=shadowtest__StyleContainer[i].PutThisInCSS+","+stringStyle;

         // if(shadowtest__thechosen==i){

         //  stringStyle2="👉"+shadowtest__StyleContainer[i].PutThisInCSS+","+"👈"+stringStyle2;

         // }else{

         stringStyle2=shadowtest__StyleContainer[i].PutThisInCSS+","+stringStyle2;

         // }

       //  console.log(shadowtest__StyleContainer[i].PutThisInCSS+ "  "+222222222222222);

        /* 

   SingAndDanceAddelements(" .shadowtest__shower{ box-shadow:"+ stringStyle+";}");

     SingAndDanceAddelements3(" .shadowtest__shower{ box-shadow:"+ stringStyle+";}","shadowtest__ShowThestyle_span",0,"span");

       */

       }

      

     } 

      // fullStyle.first=true;

        stringStyle=fullStyle.PutThisInCSS+","+stringStyle;  

        stringStyle2="👉"+fullStyle.PutThisInCSS+"👈"+","+stringStyle2;

       

        SingAndDanceAddelements(" .shadowtest__shower{ box-shadow:"+ stringStyle+";}");

     SingAndDanceAddelements3(" .shadowtest__shower{ box-shadow:"+ stringStyle2+";}","shadowtest__ShowThestyle_span",0,"span");

//writeStyle();"👉""👈"

      }

    // console.log(" .shadowtest__shower{"+box_shadow+"}");

  //   SingAndDanceAddelements(" .shadowtest__shower{ box-shadow: 10px   20px  20px  10px  rgba(145,93,93,1);}");

     shadowtest__numberRunner++;

      // console.log(fullStyle.first +" first first first")

       fullStyle.first=true;

      shadowtest__StyleContainer.push(JSON.parse(JSON.stringify(fullStyle))); 

      fullStyle.first=false;

//shadowtest__thechosen=shadowtest__numberRunner;

       shadowtest__thechosen=shadowtest__numberRunner;

   }

      function AddShadowstoAStyle(){

    

      // box_shadow miten tään styleksi

    }

  //  ButtonLoopOver([]);

  function ButtonLoopOver(array){

    const LENGTH=array.length;

   // console.log("liii i hiuss "+LENGTH);

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

    //console.log(i);

       ButtonEventmaker(array[i]);

    }

  }

  function ButtonControl(Classofthebutton, event, appening){

    try{

  var class_name = document.getElementsByClassName(Classofthebutton)[0];

    class_name.addEventListener(event, appening);

    }catch(error){}

  }

  function movethe(){

  }

      function UpdateStyleColor(){

  /*  shadowtest__color="rgba"+"("+ColorsAndOpacity.red+","+ ColorsAndOpacity.green+","+ ColorsAndOpacity.blue+","+ ColorsAndOpacity.opacity+")" ; */

     

       // ColorsAndOpacity.red

        

      RgbaColor.string="rgba"+"("+ColorsAndOpacity.red+","+ ColorsAndOpacity.green+","+ ColorsAndOpacity.blue+","+ ColorsAndOpacity.opacity+")" ;

      //console.log(RgbaColor.string);

    }

      function UpdateStyleColor2(color){

  /*  shadowtest__color="rgba"+"("+ColorsAndOpacity.red+","+ ColorsAndOpacity.green+","+ ColorsAndOpacity.blue+","+ ColorsAndOpacity.opacity+")" ; */

      

       // ColorsAndOpacity.red

        //first

        

        //  rgb(205, 35, 37)  red

                    // rgb(34, 211, 37) green

                    //rgb(23, 23, 183)  blue

                        

        

        if(ColorsAndOpacity.first){

       

          ColorsAndOpacity.first=false;

          if(color=="red"){

            ColorsAndOpacity.red=205;

            ColorsAndOpacity.green=35;

            ColorsAndOpacity.blue=37;

            }

          if(color=="green"){

             ColorsAndOpacity.red=35;

            ColorsAndOpacity.green=211;

            ColorsAndOpacity.blue=37;

          }

          if(color=="blue"){

          ColorsAndOpacity.red=23;

            ColorsAndOpacity.green=23;

            ColorsAndOpacity.blue=183;

          

          }

          if(color=="opacity"){

          ColorsAndOpacity.first=true;

          

          

          }

        

        }

        

      RgbaColor.string="rgba"+"("+ColorsAndOpacity.red+","+ ColorsAndOpacity.green+","+ ColorsAndOpacity.blue+","+ ColorsAndOpacity.opacity+")" ;

      //console.log(RgbaColor.string);

    }

    function notoimiikst(x,key){

    x[key]++

      //console.log(x[key]);

    }

   function UpdatefullStyle(){

   fullStyle.PutThisInCSS=" "+CollectionOfValues.left+"px   "+CollectionOfValues.down+"px  "+CollectionOfValues.spray+"px  "+ CollectionOfValues.size+"px  "+ RgbaColor.string+"";

 fullStyle.string="rgba"+"("+ColorsAndOpacity.red+","+ ColorsAndOpacity.green +","+ ColorsAndOpacity.blue+","+ ColorsAndOpacity.opacity+")";

   

    fullStyle.left=CollectionOfValues.left;

     

     fullStyle.down=CollectionOfValues.down;

     fullStyle.spray=CollectionOfValues.spray; 

     fullStyle.size=CollectionOfValues.size;

     

     fullStyle.red=ColorsAndOpacity.red;

     fullStyle.green=ColorsAndOpacity.green;

     fullStyle.blue=ColorsAndOpacity.blue;

     fullStyle.opacity=ColorsAndOpacity.opacity;

     

     fullStyle.first=ColorsAndOpacity.first;

     

   }

      function changestring(newstring,element,classname){

    SingAndDanceAddelements2(newstring,element,["class",classname],classname,0);

    }

     function changestring2(newstring,classname){

    SingAndDanceAddelements2(newstring,"span",["class",classname],classname,0);

    }

  function ColorChanguniver(buttoncolor,ref,key){

   // var class_name = document.getElementsByClassName(classnames)[0];

    var ColorButton=document.getElementsByClassName(buttoncolor)[0];

    ref[key]=ref[key]+ading[key];

      

    if( ref[key]==216){

        ading[key]=-1;

      }

        if( ref[key]==-1){

        ref[key]=0;

        ading[key]=1;

        }

      

    /*  shadowtest__color="rgba"+"("+ColorsAndOpacity.redNum+","+ ColorsAndOpacity.greenNum+","+ ColorsAndOpacity.blueNum+","+ ColorsAndOpacity.opacity+")" ;*/

       // UpdateStyleColor();

    UpdateStyleColor2(key);

       // UpdatefullStyle();

     // rbg.string=rbg.string;

        //ColorButton.style.backgroundColor =  rbg.string;

        ColorButton.style.backgroundColor =   RgbaColor.string;

     // console.log( RgbaColor.string);

    }

    function opasity(buttoncolor,ref,key){

      var ColorButton=document.getElementsByClassName(buttoncolor)[0];

      ref[key]=ref[key]+ading[key];

      if( ref[key]>=1){

      ref[key]=1;

        ading[key]=-0.01;

      }

        if( ref[key]<=0){

        ref[key]=0;

        ading[key]=0.01;

        }

      //shadowtest__color="rgba"+"("+ColorsAndOpacity.red+","+ ColorsAndOpacity.green+","+ ColorsAndOpacity.blue+","+ ColorsAndOpacity.opacity+")" ;

       //ColorButton.style.backgroundColor =   shadowtest__color;

      //console.log(  shadowtest__color);

      writeStyle();

    }

    function ShadowMoveLeft(){

   shadowtest__moveleft=shadowtest__moveleft+ shadowtest__moveleft_speed;

   //shadowtest__moveleft_speed++;

     ///if(){} no stops

   //  console.log("move "+ shadowtest__moveleft);

   }

  function ShadowSpeed(){

   //shadowtest__moveleft++;

   shadowtest__moveleft_speed++;

     ///if(){} no stops

   //  console.log("speed "+shadowtest__moveleft_speed);

   }

  function test(){

   ShadowSpeed();

  }

  function test2(){

  // ShadowMoveLeft();

  Test_timer=setInterval(myTimer, 1000);

  }

  function myTimer(){

  ShadowMoveLeft();

  }

   function test3(){

   clearInterval(Test_timer);

   }

</script>

<script>

  //////////////////////////////////////////////////////////////////////////////

</script>

<script id="construct">

    class moveC{

      

      #alterinhere;

        #timerholder;

      #speedOrder;

    constructor(object,key,drawfunctio){

          

         // this.exlude=ecludeThese;// string aray

              

          

          this.speeds=[5,10,20,30,40,60,70,80,90,100];

          this.negaspeeds=[-1,-10,-20,-30,-40,-60,-70,-80,-90,-100];    

              

          this.Out=true;

            this.thekey=key;

            this.#speedOrder=-1;

            this.noexluded=true;

            this.#timerholder;

            this.#alterinhere=true;

            this.draw=drawfunctio;

            this.negaspeedson=false;

// this.Outfrominer=true;

    //      this.status=[this.Out,this.noexluded,this.Outfrominer]; 

        

          //this.Waitout=await

            /* this.classTest={

          hui:"ki",tui:2,Poo:"em"

          }; */

          }

      

      

           AlterStrings(tHis,toThis,className){

      if( this.#alterinhere){

      changestring2(toThis,className);

       this.#alterinhere=false;

      }else{

      changestring2(tHis,className);

       this.#alterinhere=true;

      }

    }

      

      console(){

      console.log("proto rype");

      }

      #realstop(){

         

          //pysäyttää vain jos [true, false]

          if(this.Out){// according that this can stop and then begin the timer

//try{

             clearInterval(this.#timerholder);

          //  ()=>{clearInterval(this.#timerholder);};

            //}catch(e){}

         //  console.log(this.Out+ "  hh ui ");

          }

// console.log(this.Out+ "  hiii hiii ");

          }

      changeplustominus(){

        

        if(this.#speedOrder==-1){this.#speedOrder=0;}

      if( this.negaspeedson){

        

        

      speeds[this.thekey]=this.speeds[this.#speedOrder];  

      this.negaspeedson=false;

      }else{

      

      speeds[this.thekey]=this.negaspeeds[this.#speedOrder];  

      this.negaspeedson=true;

      }

        //käänetääs -+

        

      

      }

      

      speedup(){

        this.#speedOrder++;

        

        if(!this.negaspeedson){

      speeds[this.thekey]=this.speeds[this.#speedOrder];

        }else{

      speeds[this.thekey]=this.negaspeeds[this.#speedOrder];   

        }

        

        

        if(this.#speedOrder==9){

        this.#speedOrder=-1;

         // console.log(speeds[this.thekey]);

        }

      

      }

      

      #timer(r){

      clearInterval(this.#timerholder);

     this.#timerholder= setInterval(()=>{  this.#realstop();this.draw();this.fixer();}, r);

      }

  

      enter(){

this.#timer(1000);

           this.Out=false;

           //this.status[0]=this.Out;

           // console.log(this.Out + " enter");

          //  console.log(this.status);

          }

      fixer(){

      

      

      }

      leave(){

 if(this.noexluded){

         this.Out=true;

 }else{

 this.Out=false;

 this.noexluded=true;

   clearInterval(this.#timerholder);

 }

        //    this.noexluded=true;

        //    this.status[1]=this.noexluded;

         //  this.status[0]=this.Out;

         //   this.status[1]=this.noexluded;

       // console.log(this.Out + " leave"  );

          }

      //This time I can't use endless new because I it is internal flag no external 

      exlude(){

            //new Promise(()=>{});

           // console.log("witch");

          this.Out=false;

           // this.status[1]=this.noexluded;

    //console.log(this.Out+ " ");

          }

      exludeEnded(){

          

         // this.Outfrominer=false;

       //   this.noexluded=true;

         // Outfrominer

         //  this.Out=false;

          this.noexluded=false;

       //    this.status[0]=this.Out;

         //  this.status[1]=this.noexluded;

         //  this.status[2]=this.Outfrominer;

          // console.log(this.Out+" exlEnded");

          }

      #check(){

      new Promise(()=>{

     // console.log(this.noOut);

       return this.noOut;

      });

      }

      //speeds=[10,20,]

    }

    //console.log(moveC);

        class OnMouseOver3{

    constructor( functionContinuing,interval) {

  // this.SaveClass=Nameclass; //I may not need a event in here. 

   this.Savefunction=functionContinuing;

   this.Saveinterval=interval;

   this.SaveTimer=  setInterval(this.Savefunction, this.Saveinterval);

    }

       //set setInterval(this.Savefunction, this.Saveinterval);

    // this.Leave=stop();

      stop (){

    // console.log("end end eeeeeeee");

     clearInterval(this.SaveTimer);

     }

    }

   class OnMouseOverChangeColor{

    constructor(Nameclass,interval,classname,classnameTarget,Colornum,referenssi) {

   this.SaveClass=Nameclass; //En taida tarvita täällä eventtii

   //this.Savefunction=functionContinuing;

   this.Saveinterval=interval;

   this.class_name=classname;

   this.ClassNameTarget=classnameTarget;

   this.colornum=Colornum;

   //this.SaveTimer=  setInterval(this.Savefunction, this.Saveinterval);

      //  #ovettestinner(){

         // this.#testinner(2);

        //  }

    }

         Test(){setInterval( this.#testinner, 1000);}

         // Test(){setInterval( function(){this.#testinner} , 1000);}

     Exit(){

     //console.log("end end eeeeeeee");

     clearInterval(this.SaveTimer);

     }

          /*

          #ovettestinner(){

          this.#testinner(2);

          }

          */

          #testinner(){

          //console.log("tiu tiu "+Nameclass);

          }

   //var re=22;

         #ColorC(classnames,buttonToColorClassName, noy){

   // console.log(noy);

   // function (classnames,buttonToColorClassName){

    var class_name = document.getElementsByClassName(classnames)[0];

    var ColorButton=document.getElementsByClassName(buttonToColorClassName)[0];

    //shadowtest__color_R++;//  

         this.colornum++

       

    // if( shadowtest__color_R==216){

      if( this.colornum==216){

      //shadowtest__color_R=0;

       this.colornum=0;

      }

        shadowtest__color="rgba"+"("+this.colornum+","+ shadowtest__color_G+","+ shadowtest__color_B+","+ shadowtest__color_O+")" ;

        ColorButton.style.backgroundColor = shadowtest__color;

     // console.log(shadowtest__color);

    // console.log(      RgbaColor);

          // return this.colornum;

            

    }

     

        }

</script>

<script>

  //////////////////////////////////////////////////////////////////////////////

</script>

<style id="TheStyle"></style>

<style id="TheStyle_Static_Old">

  @keyframes visible {

    0% {opacity: 0.0;}

    100% {opacity: 1.0;}

  }

</style>

<script>

 

  /*

    */

  

  

  

  var Holder_OnmouseOver_R;

  var Holder_OnmouseOver_G;

  var Holder_OnmouseOver_B;

  var Holder_OnmouseOver_O;

speeds.down=5;

  

  var moveDown= new moveC(speeds,"down",()=>{console.log("ehm"); CollectionOfValues.down=CollectionOfValues.down+speeds.down; writeStyle();});

  var sizeChange=new moveC(speeds,"size",()=>{CollectionOfValues.size=CollectionOfValues.size+speeds.size; writeStyle();});

  var leftMove=new moveC(speeds,"left",()=>{CollectionOfValues.left=CollectionOfValues.left+speeds.left; writeStyle();});

  //var left

   

  moveC.prototype.console=function (){

 // console.log("triiii riii rteiiii");

  }

  moveC.prototype.fixer = function () {

 // this.console();

      if(CollectionOfValues.spray<0){

      CollectionOfValues.spray=1;

        this.changeplustominus();

        this.AlterStrings("+","-","shadowtest__spray__direction_span");

        this.console();

      }

    if(CollectionOfValues.spray<0){

     CollectionOfValues.spray=200;

    }

      

}

 

  /*

  moveC.prototype.#timer=function(r){

      clearInterval(this.#timerholder);

     this.#timerholder= setInterval(()=>{  this.#realstop();this.draw();}, r);

      }

  

   //mouse overiksi

  */

 // console()

  //this.AlterStrings("+","-","shadowtest__spray__direction_span");

  var sprayer=new moveC(speeds,"spray",()=>{CollectionOfValues.spray=CollectionOfValues.spray+speeds.spray; writeStyle();});

  

  //moveDown.timer(1000);//

   // console.log(moveC);

    //console.log(moveDown);

    //console.log(moveDown.classTest.hui);

   const BUTTON_DATA =[{

  class:"t",

  events:["click", function(){shadowtest__moveleft_speed++;console.log("speed "+shadowtest__moveleft_speed);},"mouseenter",test2,"mouseout",test3]

  },

  {

  class:"tx",

  events:["click", function(){shadowtest__moveleft_speed++;console.log("speed "+shadowtest__moveleft_speed);},"mouseenter",test2,"mouseout",test3]

  } ,

  {

  class:"shadowtest__shower",

  events:["click",  MakeNewBoxShadow]

  },

   {

     class:"shadowtest__colorchoose",

     events:["click",()=>{TakeColor("shadowtest__colorchoose"); }]

  },{

  class:"shadowtest__colorchoose__R",

  //events:["click",()=>ColorthingysR("shadowtest__colorchoose__R","shadowtest__colorchoose")]

  events:["mouseenter",()=>{Holder_OnmouseOver_R= new OnMouseOver3(function li(){  ColorChanguniver( "shadowtest__colorchoose",ColorsAndOpacity,"red");   },36)} ,"mouseout",()=>{Holder_OnmouseOver_R.stop();}]

  },{

  class:"shadowtest__colorchoose__G",

  //events:["click",()=>ColorthingysR("shadowtest__colorchoose__R","shadowtest__colorchoose")]

  events:["mouseenter",()=>{Holder_OnmouseOver_G= new OnMouseOver3(function li(){  ColorChanguniver( "shadowtest__colorchoose",ColorsAndOpacity,"green");   },36)} ,"mouseout",()=>{Holder_OnmouseOver_G.stop();}]

  },{

  class:"shadowtest__colorchoose__B",

  //events:["click",()=>ColorthingysR("shadowtest__colorchoose__R","shadowtest__colorchoose")]

  events:["mouseenter",()=>{Holder_OnmouseOver_B= new OnMouseOver3(function li(){  ColorChanguniver( "shadowtest__colorchoose",ColorsAndOpacity,"blue");   },36)} ,"mouseout",()=>{Holder_OnmouseOver_B.stop(); }]

  },{

  class:"shadowtest__colorchoose__O",

  //events:["click",()=>ColorthingysR("shadowtest__colorchoose__R","shadowtest__colorchoose")]

  events:["mouseenter",()=>{Holder_OnmouseOver_O= new OnMouseOver3(function li(){  opasity( "shadowtest__colorchoose",ColorsAndOpacity,"opacity");   },66)} ,"mouseout",()=>{Holder_OnmouseOver_O.stop(); }]

  },{

  class:"shadowtest__spray_span",

  events:["click",()=>{ console.log( document.getElementsByClassName("shadowtest__spray_span")[0].style.backgroundColor="inherit" ); UpdatefullStyle();  }]

  },

                       

                       //

                  /*       {

   class:"shadowtest__moveleft",

   events:["click",()=>{leftMove.speedup();},"mouseenter",()=>{leftMove.enter();},"mouseout",()=>{ leftMove.leave();}]

   //siis teen liikeelle saman tyylisen contruction kuin väreille mutta styyli muuttuu

   },{

   class:"shadowtest__moveleft_span",

   events:["mouseenter",()=>{leftMove.exlude();},"mouseout",()=>{leftMove.exludeEnded();}]

   },

                       

                 */ 

               {

   class:"shadowtest__moveleft",

   events:["click",()=>{leftMove.speedup();},"mouseover",()=>{leftMove.enter();},"mouseout",()=>{ leftMove.leave();}]

   //siis teen liikeelle saman tyylisen contruction kuin väreille mutta styyli muuttuu

   },

                       {

   class:"shadowtest__moveleft__direction",

   events:["click",()=>{leftMove.changeplustominus(); leftMove.AlterStrings("+","-","shadowtest__moveleft__direction_span");}]

   },

                       

                       ///

  {

   class:"shadowtest__movedown",

   events:["click",()=>{moveDown.speedup();},"mouseenter",()=>{moveDown.enter();},"mouseout",()=>{ moveDown.leave();}]

   //siis teen liikeelle saman tyylisen contruction kuin väreille mutta styyli muuttuu

   },{

   class:"shadowtest__movedown_span",

   events:["mouseenter",()=>{moveDown.exlude();},"mouseout",()=>{moveDown.exludeEnded();}]

   },{

   class:"shadowtest__movedown__direction",

   events:["click",()=>{moveDown.changeplustominus(); moveDown.AlterStrings("+","-","shadowtest__movedown__direction_span");}]

   },{

   class:"shadowtest__size",

   events:["click",()=>{ sizeChange.speedup();},"mouseenter",()=>{sizeChange.enter();},"mouseout",()=>{ sizeChange.leave();}]

   

   

   },{

   class:"shadowtest__size_span",

   events:["mouseenter",()=>{sizeChange.exlude();},"mouseout",()=>{sizeChange.exludeEnded();}]

   },{

   class:"shadowtest__size__direction",

   events:["click",()=>{sizeChange.changeplustominus(); sizeChange.AlterStrings("+","-","shadowtest__size__direction_span");}]

   }

                       ///

     ,{

   class:"shadowtest__spray",

   events:["click",()=>{ sprayer.speedup(); },"mouseenter",()=>{sprayer.enter();},"mouseout",()=>{ sprayer.leave();}]

   

   

   },{

   class:"shadowtest__spray_span",

   events:["mouseenter",()=>{sprayer.exlude();sprayer.fixer();},"mouseout",()=>{sprayer.exludeEnded();}]

   },{

   class:"shadowtest__spray__direction",

   events:["click",()=>{sprayer.changeplustominus(); sprayer.AlterStrings("+","-","shadowtest__spray__direction_span");}]

   

     

   

   },{

   class:"shadowtest__ChooseShadow",

   events:["click",()=>{ shadowtest__thechosen++; shadowtest__freshfromContainer=true; if(shadowtest__numberRunner<shadowtest__thechosen){

   shadowtest__thechosen=0;

    //console.log("d");

     //shadowtest__freshfromContainer=false;

   }

                        

                        

                        

                       // console.log(shadowtest__freshfromContainer);

                       // console.log(shadowtest__numberRunner);

                       // console.log(shadowtest__thechosen);

                        writeStyle();

                    var ColorButton=  document.getElementsByClassName("shadowtest__colorchoose")[0];

     ColorButton.style.backgroundColor = shadowtest__StyleContainer[shadowtest__thechosen].string;

                    //  rgb(205, 35, 37)  punainen

                    // rgb(34, 211, 37) green

                    //rgb(23, 23, 183) blue sit if mitä painaa ensin

                        

                        

                        

                        

                       }]

   

   }

//jos kerkeää ennen timerin lumista palata tekee toisen timerin

//changeplustominus()

  ];

</script>

<h1 style="background-color: white; box-sizing: border-box; color: #1b1b1b; font-family: zillaslab, palatino, &quot;Palatino Linotype&quot;, serif; font-size: 3.052rem; letter-spacing: 0.035rem; line-height: 1.2; margin: 0px; word-break: break-word;">Recently I noticed something interesting in the box-shadow CSS property. Here press the "Make a new shadow"-button to test it out.</h1>

<div class="shadowtest__ShowThestyle" style="background-color: cyan;"><span class="shadowtest__ShowThestyle_span"></span></div>

<!--<button

  class="t"

  ;

  id="test1"

  n_onmouseover="test2()"

  n_onclick="test()"

  n_onmouseenter="test2()"

  n_monmouseout="test3()"

>

  test

</button>-->

<!--<button class="tx" ; id="test12">test2</button>-->

<button class="shadowtest__shower">

  <span class="shadowtest__shower_span">Make a new shadow</span></button><br /><br />

<div id="hideandrise" style="display: none; opacity: 0;">

  <button class="shadowtest__moveleft">

    <span class="shadowtest__moveleft_span">left</span></button><button class="shadowtest__moveleft__direction">

    <span class="shadowtest__moveleft__direction_span">+</span>

  </button>

  <button class="shadowtest__movedown">

    <span class="shadowtest__movedown_span">down</span></button><button class="shadowtest__movedown__direction">

    <span class="shadowtest__movedown__direction_span">+</span>

  </button>

  <button class="shadowtest__spray">

    <span class="shadowtest__spray_span">spray up</span>

  </button>

<button class="shadowtest__spray__direction">

    <span class="shadowtest__spray__direction_span">+</span>

  </button>

  

  

  <button class="shadowtest__size">

    <span class="shadowtest__size_span">size</span></button><button class="shadowtest__size__direction">

    <span class="shadowtest__size__direction_span">+</span>

  </button>

  <button class="shadowtest__colorchoose">

    choose color

    <span class="shadowtest__colorchoose__R" style="background-color: red;">R</span><span class="shadowtest__colorchoose__G" style="background-color: green;">G</span><span class="shadowtest__colorchoose__B" style="background-color: blue;">B</span><span class="shadowtest__colorchoose__O">O</span>

  </button>

  <button class="shadowtest__ChooseShadow">

    <span class="shadowtest__ChooseShadow_span">Choose shadow</span>

  </button>

</div>

<script>

  // TakeColor("shadowtest__colorchoose");

   ButtonLoopOver(BUTTON_DATA);

</script>

"CSS box-shadow"- button... the shadow has no limits.

Recently I noticed something interesting in the box-shadow CSS property. Here press the "Make a new shadow"-button to test it out.

Brick inside another brick

Quick look:

Every page has it media queries:

Home:

Mobile 360x640:

1600 over and under:

Events:

Table is not actually table, but a flexbox:

Keep eye on "Alk-Lop","Otsikko" and "Ote"

Events-page in mobile size:

Thump-"

👍

" not turn to "🤩" when click that just animation. It was coincidence.

 

Event has two mobile sizes:

Smallest size:

Size 373x667:

Buttons:

"AJAX 10"-Button brings 10 more event in ajax style from memory, in every click until there is no more events.

Tulevat tapahtumat:Shows all event or only those that are not yet end. Works also for AJAX 10 events all them, trust me. And it is the real AJAX action.

Extra:

Error-404 send back to home:

 

SpecialHomeLink__Arrow: Check this out:

See how pulsating "«"-link make the wise

  

Cool face style

 

Try this style for size:

 

<style>
  .ehm:after{
  	content: "😎";
  	display: inline-block;
  	transform: rotate(0deg);
  	font-size: 1900%;
  	opacity: 1;
  	animation-name: ballroll;
  	animation-duration: 6s;
  	animation-delay: -2s;
  	animation-iteration-count: infinite;
  
  }
    @keyframes ballroll{
      0%{ content: "🤩"; transform: rotate(0deg);}
      25%{transform: rotate(3deg);}       
      60%{content: "😎";}
      75%{transform: rotate(-3deg);}
      100% {content: "👍";}
      }
}
</style>
<div>
Try this style for size:

</div>
<p class="ehm" 	></p>

All silly :D

 

I make so that super artific-IQ run, so that, when event stop before it start. Publish button goes retreat ;P   Silly as sick! 

Filling full infinite hotel --ABABABBAAAA

A->10

B->11

Take a nearest random person, she Ababbbb

Step 1

Former tenant take room one, everybody step one room further.

step 2

Then go back Baabaa..-bus and take another quest: Bab=111011 and repeat Step1 and Step2

No paradox here, no bigger infinite.

Javascript how turn Ymd date to an another format

 Say date as Ymd: 20010112 full int, how turn it to a form 12.1.2001, no loops.

               %- Modulo our friend here

var day= 20010112%100; // es 12

var month=((20010112-day)/100)%100; // month 1

var year= (((20010112-day)/100) -month)/100; //year 2001

//now

console.log(day+"."+month+"."+year); //behold 12.1.2001

No! loop that sure.

How to get AJAX ”get” to work on wp(WordPress) in vanilla js(javascript ) when there is namespace, when press button –jQuery (NO jQuery)

 Huh! This take a lot a time, to figure out so many moving parts.

1. No "data" needed at all, but "action"

First I try figure out what jQuery does, but that was lot of scramble I got nothing. Finally then I figure to look inside admin-ajax.php itself if there is hint's how it works. And there I found what I been looking for.

 

So right url is on form:

...wp-admin/admin-ajax.php?action=testfirst

Where "testfirst" is that what $_GET add in $action from the url.

2.This kind of button and two div's for the AJAX on somewhere in WP Templates

 <div id="demo"></div>
 <div id="demo2"></div>
 <button id="spesial_button" onclick="P_lifg()">I am spesial</button>
 

"P_lifg()" is function that has the ajax get.

3.Next js script file

I name it OWnajaxjs.js




You know like in https://www.w3schools.com/js/js_ajax_intro.asp But few changes.

And that admin-ajax.php page it's "empty" that must fill by specials actions on functions.php

But here now it OWnajaxjs.js file:

var urlToajax=jsajaxe_S.ajaxurl;


 function P_lifg(){ 
 
	 var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.responseText;
    document.getElementById("demo2").innerHTML = urlToajax+ "?action=testfirst";
    }
  };
	
	
	xmlhttp.open("GET", urlToajax+ "?action=testfirst", true); 	
	xmlhttp.send(0);
	
 }


//file end

That jsajaxe_S.ajaxurl is the actual location of admin-ajax.php this js file get it from php in wp_localize_script at the functions.php.

"demo" div will get AJAX dump and "demo2" get url to location where dump is so one can go there to check it out.

4.functions.php 1. Register, Localize and Enqueue script that is OWnajaxjs.js

So add this in functions.php

5.functions.php 2. wp_ajax_ wp_ajax_nopriv_

add_action( 'wp_ajax_testfirst', __NAMESPACE__ .'\\FunctionTF' );

add_action( 'wp_ajax_nopriv_testfirst', __NAMESPACE__ .'\\FunctionTF');

 Next the pic that explains it all:

6.functions.php 3.action function here FunctionTF
 

  function FunctionTF(){

  exit( "Hola hola" );

		
	} 

Yes see, it "hola hola" is inside exit(), this take long time to figure out, there was conflicting information in web where to lay code here, but then I figure to again return to a admin-ajax.php file, and from there I get notice, that there are certain inbuild core ajax actions so I figure to go and check how one of them handle AJAXhandle I choose wp_ajax_rest_nonce() function and behold on 

https://developer.wordpress.org/reference/functions/wp_ajax_rest_nonce/

7. If you get everything right