/* This code was created using what I've learned whilst using SoloLearn. I picked JavaScript to celebrate Gold as I've earnt most XP from this. I researched a few things via Google and found tips on W3 schools and stack overflow. A special thanks to David Carroll for his awesome explanation to help me understand 'setInveral' */ window.onload = function() { var nDiv = "cDown"; var cDiv = "cover"; var tN = "tNum"; var numberOfDivs = 10; var divHeight = 50; var divTop; var countDown = numberOfDivs; var myName = "name"; // using a for loop to create my various

tags for(var nd =1;nd <= numberOfDivs;nd++) { divTop = nd * divHeight; // used to determine 'top' position of each div // Create the yellow layer underneath. Each layer has a textnode with the countdown window[nDiv + nd] = document.createElement("div"); window[tN + nd] = document.createTextNode(countDown); window[nDiv + nd].style.backgroundColor = "#FFCC00"; window[nDiv + nd].style.font = "30px arial"; window[nDiv + nd].style.height = "50px"; window[nDiv + nd].style.width = "320px"; window[nDiv + nd].style.textAlign ="center"; window[nDiv + nd].style.position="absolute"; window[nDiv + nd].style.top=(divTop)+"px"; // append the textnode to my div window[nDiv + nd].appendChild(window[tN+nd]); // append the div to the body document.body.appendChild(window[nDiv + nd]); countDown--; // decrement counter for my countdown on the textnode. // Similar to above, I now add the "cover" over the top. The cover with later be moved to show the countdown. window[cDiv + nd] = document.createElement("div"); window[cDiv + nd].style.backgroundColor = "#000000"; window[cDiv + nd].style.position="absolute"; window[cDiv + nd].style.top=(divTop)+"px"; window[cDiv + nd].style.height = "50px"; window[cDiv + nd].style.width = "320px"; document.body.appendChild (window[cDiv + nd]); } // end of for loop // set off an interval to move the "cover" div. Moves each one ever 0.5 seconds var counter = 1; var myInterval = setInterval(move, 500); // function called by the setInterval above function move() { // This is where I got stuck with the setInterval. This if statement terminates the setInterval of the 11th run through but the 11th run through still completes what the previous 10 did. I thought it was immediately stopping at 10. // I nested code within the if statement so it would only execute after the countdown. if (counter > 10){ clearInterval(myInterval); // create another textnode myName = document.createTextNode("Duncan reached..."); // utilise existing div to display the textnode window["cover3"].style.color = "#FFCC00"; window["cover3"].style.font = "25px arial"; window["cover3"].appendChild(myName); addGold(); // call function to add the GOLD } // for the first setInterval I only move the 1st div if(counter == 1) { window[cDiv + counter].style.top=((counter+1)*divHeight)+"px"; } // for the next 9 I move the previous div back and the current one out the way else if(counter <= 10) { window[cDiv + ( counter-1)].style.top=((counter-1)*divHeight)+"px"; window[cDiv + counter].style.top=((counter-1)*divHeight)+"px"; } else{ // for the last one I just move the 10th div back window[cDiv + (counter-1)].style.top=((counter-1)*divHeight)+"px"; } counter ++; } //end of move function // set up variables for adding gold var gDiv = "gold"; var gd = 1; var gCounter = 1; var gI; var gTop = 275; var gTopBase = 275; var gLeft; function addGold() // function just controls the setInterval used to add GOLD { gI = setInterval(addG,75); } function addG() { if (gCounter > 70){ clearInterval(gI); // terminate the intervals // lets get spinning; call my startSpin function. startSpin(); } // if else if statements used to set the postion of each div which will be added further down // Letter G if(gCounter==1){ gTop = gTopBase + 15 gLeft = 60; }else if(gCounter ==2){ gTop = gTop - 15; gLeft = gLeft - 5; }else if(gCounter <= 4){ gLeft = gLeft - 15; }else if(gCounter <=6){ gTop = gTop + 15; gLeft = gLeft - 5; }else if(gCounter <=10){ gTop = gTop + 15; }else if(gCounter <=12){ gTop = gTop + 15; gLeft = gLeft + 5; }else if(gCounter <=14){ gLeft = gLeft + 15; }else if(gCounter <=16){ gTop = gTop - 15; gLeft = gLeft + 5; }else if(gCounter ==17){ gTop = gTop - 15; }else if(gCounter ==18){ gTop = gTop - 15; gLeft = gLeft - 5; }else if(gCounter ==19){ gLeft = gLeft - 15; // letter O }else if(gCounter ==20){ gTop = gTopBase; gLeft = 135; }else if(gCounter <=22){ gLeft = gLeft -15; }else if(gCounter <=24){ gTop = gTop + 15; gLeft = gLeft - 5; }else if(gCounter <=28){ gTop = gTop + 15; }else if(gCounter <=30){ gTop = gTop + 15; gLeft = gLeft + 5; }else if (gCounter <=32){ gLeft = gLeft + 15; }else if (gCounter <=34){ gTop = gTop - 15; gLeft = gLeft + 5; }else if (gCounter <=38){ gTop = gTop - 15; }else if (gCounter == 39){ gTop = gTop - 15; gLeft = gLeft - 5; // letter L }else if (gCounter == 40){ gTop = gTopBase; gLeft = 175; }else if(gCounter <=48){ gTop = gTop + 15; }else if(gCounter <=51){ gLeft = gLeft + 15; // letter D }else if (gCounter == 52){ gTop = gTopBase; gLeft = 250; }else if (gCounter <=60){ gTop = gTop + 15; }else if(gCounter == 61){ gTop = gTopBase; gLeft = 265; }else if(gCounter ==62){ gLeft = gLeft + 15; }else if(gCounter <=65){ gTop = gTop +15; gLeft = gLeft + 5; }else if(gCounter <=67){ gTop = gTop + 15; }else if (gCounter <=70){ gTop = gTop +15; gLeft = gLeft - 5; }else if (gCounter == 71){ gLeft = gLeft - 15; } // Add each div that makes up GOLD window[gDiv + gd] = document.createElement("div"); window[gDiv + gd].style.backgroundColor = "#FFCC00"; window[gDiv + gd].style.height = "10px"; window[gDiv + gd].style.width = "10px"; window[gDiv + gd].style.position="absolute"; window[gDiv + gd].style.top=gTop+"px"; window[gDiv + gd].style.left=(gLeft)+"px"; // add the div to the body of the page document.body.appendChild(window[gDiv + gd]); gCounter ++; gd = gCounter; } // end of gold function // just for fun I added some rotation var sI; var sI2; var sI3; var sCount; var r = 1; var xx = 0; function startSpin() { // this interval controls when to start spinning each div sI = setInterval(masterSpin,200); } var theEnd; function masterSpin() { if(xx >71){ clearInterval(sI); // create another textnode theEnd = document.createTextNode("The End :)"); // utilise existing div to display the textnode window["cover10"].style.color = "#FFCC00"; window["cover10"].style.font = "25px arial"; window["cover10"].appendChild(theEnd); } r=1; xx++; // this interval does the actual spinning. sI2 = setInterval(singleSpin,1); } function singleSpin() { if(r>=365){ clearInterval(sI2); } if(xx<72){ // this if was used to effectively stop rotatation. When I cleared the interval on the 71st iteratation the last div just kept spinning. window[gDiv + xx].style.webkitTransform = 'rotate('+r+'deg)'; window[gDiv + xx].style.mozTransform = 'rotate('+r+'deg)'; window[gDiv + xx].style.msTransform = 'rotate('+r+'deg)'; window[gDiv + xx].style.oTransform = 'rotate('+r+'deg)'; window[gDiv + xx].style.transform = 'rotate('+r+'deg)'; r = r+5; } } }

Gold Level Celebration