Find The Extraordinary Box!


Author: Vincent Berger
Created: Nov 5, 2018






This contest code was to create 100 boxes which 1 of them has a higher amout then the others. 99 of the 100 boxes has a amount between 10 and 20. 1 of the 99 boxes has a higher amount then the others, therefore the script needs to check which box is the extraordanry!
This was a very fun process since I visualized the way of finding the 1 box that stood out of the other boxes.
Visit the original code and experience the fun of the automated process to find the 1 box that differs from the rest, In work with Anime.js & JQuery!

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Find the extrodinairy box</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/animejs@2.2.0/anime.min.js"></script>
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
    </head>
    <body>
        <p id="preload">
            Loading... <br /><br />
            Need to initialize the external
            files... <br /><br />
            Excuse me! <br />
            
        </p>
        <p id="mute" onclick="mute()"><li class='material-icons'>pause</li></p>
        <p id="box">
            
        </p>
        <button onclick="btnScramble()" class="btn" id="btnScramble">Scramble the Boxes</button>
        <button onclick="btnFind()" class="btn" id="btnFind">Find the extrodanairy box!</button>
        <p id="count">
            Scramble finishes in: <span id="cnt"></span> seconds! <br />Thank you for trying to find the extrodanairy box! Otherwise it will take me months!
        </p>
        <pre id="found">
Congratulations!
The extrodanairy box is found!
Thank you very much, This reduces my time
to go for a expedition for finding
THE EXTRORDINAIRY BOX!

Animations: 
Anime.js - Anime (/ˈæn.ə.meɪ/) is a lightweight 
JavaScript animation library. 
It works with any CSS Properties, 
individual CSS transforms, 
SVG or any DOM attributes, 
and JavaScript Objects.

Music: 
Donkey Kong Theme Song

Music composed by: Grant Kirkhope

Hosting: 
SoloLearn & Dropbox 
Without SoloLearn I did not could create this. 
Dropbox thanks for the external hosting.

Code:
Vincent Berger
    </pre>
    
    </body>
</html>
				

CSS:

body {
    background-color:black;
    position:fixed;
}
div#blackBox {
    width:30px; height:30px; float:left;
    position:flex; margin:2px;
    background-color:#99f;
    opacity:0; color:white;
    font-weight:900; text-align:center;
    overflow:hidden; vertical-align:middle;
}
div#blackBox:nth-child(3n-2){
    background-color:#9ef;
    color:black;
}

button.btn {
    border:0px; margin-left:20px;
    margin-top:20px; opacity:0.95;
    border-radius:7px; height:30px;
    background-color:#f69; outline:none;
    color:white; font-weight:900;
    font-size:12px;
}
button#btnFind {
    opacity:0;
}
button#btnScramble {
    opacity:0;
}
p#count{
    color:white; text-align:center;
    font-weight:900; font-size:15px;
    opacity:0; font-size:12px;
}
span#cnt {
    font-size:17px; color:#9f1;
    opacity:0;
}
pre#found {
    margin:0px; position:flex;
    color:white; text-align:center;
    font-weight:900; font-size:12px;
    opacity:0;
}
p#mute {
    width:30px; height:30px;
    border-radius:4px;
    background-color:white;
    opacity:0.7; position:absolute;
    top:-15px; left:3px;
}
.material-icons {
    color:red;
}
p#preload {
    width:340px; height:340px;
    background-color:#f19; color:white;
    position:absolute;
    opacity:0.5; text-align:center;
    font-weight:900; font-size:40px;
    border-radius:10%;
}
				

Javascript:

$(document).ready(()=>{
    /*anime({
        targets:"#preload",
        borderRadius:"40px",
        duration:10000
    });*/
    //_ Prop preload animation
    $("#preload").animate({opacity:"0"}).prop('disabled',true);
})

//_ Draw the 100 div boxes in the main div.
window.onload=(boxes,drawBox)=>{
    $("#btnScramble").animate({opacity:"0.80"},1000);
    boxes=document.getElementById("box");
    drawBox="<div id='blackBox'>???</div>";
    for(let i=1; i<=100; i++){
        boxes.innerHTML+=(drawBox);
    }
}

//_ Initialize the audio element for audio.
var audio = document.createElement('audio');
audio.setAttribute('src', "https://www.dropbox.com/s/dr472sba78dzm5z/Donkey%20Kong%20Theme%20song.mp3?dl=1"); 
audio.load();

//_ Scramble the boxes in a nice animation.
function btnScramble(setI,count){
    console.log("Drawed "+$("#blackBox, div").length+" boxes.\nStarting the Scramble!");
    
    //_ Initialize thr audio to play.
    audio.play();
    
    //_ Countdown for the scramble.
    console.log("Scramble countdown initialized and start the countdown.");
    count=10;
    for(let i=0; i<11; i++){
        setTimeout(()=>{
            $("#cnt").html(count--);
            if(i==10){
                $("#cnt").html("READY!");
                console.log("Scramble countdown finished!");
            }
        },1000*i);
    }
    
    //_ Animate the scramble.
    setI = setTimeout(()=>{
    anime({
        targets:"#blackBox",
        opacity:"0.40",
        delay:(elem,i)=>i*50/10*1+"5",
        duration:(elem,i)=>i*10/2+"5",
        rotate:720,
        translateX: [
            {value:-30,duration:500},
            {value:-60,duration:500},
            {value:-90,duration:500},
            {value:0,duration:500}
        ],
        translateY: [
            {value:10,duration:500},
            {value:20,duration:500},
            {value:10,duration:500},
            {value:0,duration:500}
        ]
    });
    },300);
    
    //_ Opacity play.
    setTimeout(()=>{
    $("#btnFind").animate({opacity:"0.95"},2000);
    },10000);
    
    $("#btnScramble").animate({opacity:"0"},1000).prop('disabled',true);
    $("#cnt,#count").animate({opacity:"0.8"},1000);
}


//_ Generate random number value for RANDOM BOX.
function random(random,max,min){
    random=[Math.floor(Math.random()*(20-10+1)+10)];
    return random;
}


//_ Find the extrodanairy box!
function btnFind(boxes,arrNormal,arrOrdinary,setI,cnt,rand,fin,setIn){
    console.log("\nSetting numbers to the boxes for the extrodanairy box calculation!");
    //_Random generation to set the extrodanairy BOX!
    rand=[Math.floor(Math.random()*99)];
    //_ Opacity play.
    $("#btnFind,#cnt,#count").animate({opacity:"0"},1000).prop("disabled",true);
   
   //_ Get all divs and give them a random number and push the extrodanairy box.
   arrOrdinary=[];
    boxes=document.getElementsByTagName("div");
    cnt=0;
    for(let i=0; i<boxes.length; i++){
        setI=setTimeout(()=>{
            boxes[i].innerHTML=random();
            boxes[i].style.opacity="0.8";
            console.log("Setting number to normal box => "+i);
            if(i==rand){
                console.log("setting number to EXTRORDINAIRY BOX and overriding the normal box number!! => "+i);
                boxes[i].innerHTML=777;
                arrOrdinary.push(cnt);
            }
            cnt++
        },100*i);
    }
    
    //_ Get the value of all the divs and push to an array for comparison.
    arrNormal=[];
    setTimeout(()=>{
        for(let i=0; i<boxes.length; i++){
           arrNormal.push(boxes[i].innerHTML);
        }
        console.log("\nInitializing reading the numbers...\n\nReaded all numbers!\nNumbers pushed to arr and sorted: \n["+arrNormal.sort()+"]");
    
    
    //_ FIND THE ORDINARY BOX!
    fin=arrNormal.sort().reverse();
    console.log("\nEXTRORDINAIRY NUMBER FOUND VIA SORT AND REVERSAL OF ARRAY => "+fin[0]+"\n\nEXTRORDINAIRY BOX FOUND VIA COUNTER => "+arrOrdinary);
    
    let count=0;
    for(let i=0; i<boxes.length; i++){
        $(boxes[i]).animate({opacity:"0"},5000).prop('disabled',true);
        if(i==arrOrdinary){
            anime({
                targets:boxes[arrOrdinary],
                delay:5000,
                rotate:360,opacity:"0.8",
                duration:5000,
                height:"180px",
                width:"180px",
                borderRadius:"7px",
                backgroundColor:"#9ef",
                color:"#fff"
                /*translateX: [
                    {value:-15,duration:1000},
                    {value:+30,duration:1000},
                    {value:-45,duration:1000},
                    {value:0,duration:1000}
                ],
                translateY: [
                    {value:50,duration:1000},
                    {value:100,duration:1000},
                    {value:50,duration:1000},
                    {value:0,duration:1000}
                ]*/
            });
            $(boxes[arrOrdinary]).animate({lineHeight:"150px"},1000).stop().html("EXTRORDINAIRY BOX FOUND!");
            anime({
                targets:"#found",
                opacity:"0.90",
                duration:25000,
                delay:50,
                translateY:[
                    {value:-2500,duration:50000}
                ],
                easing:"easeInOutSine"
            });
        }
    }
    
    },10500);
}


//_ MUSIC PAUSE & PLAY FUNCTION
let toggle=0;
function mute(doc){
    doc=document.getElementById("mute");
    if(toggle==0){
        toggle=true;
        console.log("Paused!");
        audio.pause();
        doc.innerHTML=("<li class='material-icons'>play_arrow</li>");
    }else{
        toggle=false;
        console.log("Played!");
        audio.play();
        doc.innerHTML=("<li class='material-icons'>pause</li>");
    }
}
				

Place a comment related to this article

!

When u want to use a code block in your comment, you need to work with the <pre> and <code> tags.
You can specify the program language you want to use in the comment to assign the code tag class attribute with your program language name.
<pre>
  <code class="javascript">
   //_ Use lowercase phrase within the code tags class attribute:
   //_ C++ refered as cpp
   //_ C# refered as cs
   //_ Objective-C and C both refered as c
   //_ VB.net refered as vbnet
   //_ And so on...
  </code>
</pre>
Available program languages:
  • Access log
  • Apache
  • AutoIt
  • Arduino
  • Bash
  • C
  • C#
  • C++
  • CSS
  • CoffeeScript
  • HTML or XML
  • JSON
  • Java
  • JavaScript
  • Nginx
  • Objective-C
  • PHP
  • Perl
  • Python
  • Ruby
  • SQL
  • Swift
  • PowerShell
  • VB.net
We do not allow any direct type of links in the comment section.
Please format a link with with the following query:
domain dot com/?q=query
Thank you for understanding.


3248fsdf1283 Captcha


Back to Top