Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>	
</title>
</head>
<body>
<!--<h1>Simon Game Web App</h1>-->

   <div class="container">
        <div class="row-first">
            <button id="start" type="button">start</button>

            <!--<button id ="off-on-switch">-->
            <input class='tgl tgl-box' id='cb1' type='checkbox'>
            <label class='tgl-btn' data-tg-off='OFF' data-tg-on='ON' for='cb1'></label>
            <!--</button>-->

            <div class="strict-and-light">
                <button id="strict" type="button">strict</button>
                <div class="light">
                </div>
            </div>
        </div>

        <div class="row-two">
    <!----> <div class="count-display">
              <div id="number">8888888888888888</div>
            </div>
        </div>

        <div class="row-three">
            <div class="social-media-share">
                <ul class="buttons"> 
                 
          <li class="Linkedinbutton">
          <i class= "fa fa-linkedin-square fa-fw"></i>LINKEDIN</a>
          </li>
          <li class="Tweetbutton">
          <i class= "fa fa-twitter fa-fw"></i>TWITTER</a>
          </li>
          <li class="Facebookbutton">
          <i class= "fa fa-facebook-official fa-fw"></i>FACEBOOK</a>
          </li>
          <li class="Emailbutton"> 
          <i class= "fa fa-envelope-square fa-fw"></i>EMAIL</a>
          </li>
        </ul>
            </div>
        </div>

        <div class="row-four">
            <div class="simon-pads">
            <audio id="audio1">
            <source src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" type="audio/mpeg">
            </audio>
            <audio id="audio2">
            <source src="https://s3.amazonaws.com/freecodecamp/simonSound2.mp3" type="audio/mpeg">
            </audio>
            <audio id="audio3">
            <source src="https://s3.amazonaws.com/freecodecamp/simonSound3.mp3" type="audio/mpeg">
            </audio>
            <audio id="audio4">
            <source src="https://s3.amazonaws.com/freecodecamp/simonSound4.mp3" type="audio/mpeg">
            </audio>
              
            <div class="pad hit-zero-green" id="0">
            </div>
            <div class="pad hit-one-red" id="1">
            </div>
            <div class="pad hit-two-yellow" id="2">
            </div>
            <div class="pad hit-three-blue" id="3">
            </div>

            <div class="Simon-border">
                    <div class="interior-circle">
                    </div>
                </div>
            </div>
        </div>
    </div>



</body>
</html>
              
            
!

CSS

              
                .container {
    padding-top: 5px;
    width: 450px;
    height: 600px;
    background-color: black;
    text-align: center;
    margin: auto;
  overflow: hidden;
    border-radius: 50px;
  box-shadow:inset 5px 0 10px -5px #ffffff, 
  inset -5px 0 10px -5px #ffffff, 
  inset 0px -5px 35px -7px #ffffff, 
  0 0 1px 1px , 
  0 10px 20px 0 #494547;
    /*box-shadow: 1px 0px 20px 4px #000;*/
}

.row-first {
    margin-top: 7px;
    margin-left: 15px;
    margin-right: 15px;
    width: auto;
    height: 50px;
    /*border: 1.5px solid red;*/
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    grid-gap: 2px;
}

.row-two {
    display: grid;
    grid-template-columns: 1fr;
}

.row-three {
    text-align: center;
    margin-left: 15px;
    margin-right: 15px;
    width: auto;
    height: 50px;
    /*border: 1.5px solid red;*/
    display: grid;
    grid-template-columns: 1fr;
}

ul.buttons li {
    display: inline-block;
  /*box-shadow: 1px 0px 6px 4px #dd5d5d;*/
}


ul.buttons {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: relative;
    text-align: center;
    width: 100%;
}

.Linkedinbutton,
.Facebookbutton,
.Tweetbutton,
.Emailbutton
 {
  background-color: #0099ff;
  border: 1px solid white;
  border-radius: 10px;
  color: white;
  text-decoration: none;
  text-shadow: 2px 2px black;
  font-size: 12px;
  margin: 5px;
  padding: 5px;
  box-shadow: 6px 6px 4px black;
  /*box-shadow: 1px 0px 6px 4px #dd5d5d;*/
  line-height: .25em
}

.Linkedinbutton,
.Facebookbutton,
.Tweetbutton,
.Emailbutton
{
  cursor: pointer;
}

.Linkedinbutton-X,
.Facebookbutton-X,
.Tweetbutton-X,
.Emailbutton-X
{
  
}

.Linkedinbutton-X,
.Facebookbutton-X,
.Tweetbutton-X,
.Emailbutton-X
 {
 box-shadow: 1px 0px 6px 4px #dd5d5d;
 }


.social-media-share{
text-align: center;
margin: auto;
}


.row-four {
    text-align: center;
    margin-left: 15px;
    margin-right: 15px;
    width: auto;
    height: 350px;
    /*border: 5px solid red;*/
    display: grid;
    grid-template-columns: 1fr;
}

.count-display {
    box-shadow: inset 0px 5px 20px 0px #000;
    text-align: center;
    margin-left: 15px;
    margin-right: 15px;
    border-radius: 15px;
    background-color: #430710;
    border: 1px solid #615d5d;
    width: auto;
    height: 100px;
  color: #680b19;
  line-height: 100px;
  font-family: digital-7;
  font-size: 55px;
  overflow: hidden;
}



#number {
    font-size: 55px;
    line-height: 100px;
    text-align: center;
    margin: auto;
    font-family: digital-7, sans-serif;
}


.simon-pads {
    position: relative;
    margin: auto;
    width: 365px;
    height: 365px;
    /*border: 5px solid gray;*/
    border-radius: 365px;
}

.pad {
    margin: auto;
    position: relative;
    float: left;
    width: 176px;
    height: 176px;
    border: 3px solid black;
    box-shadow: inset 2px -2px 20px 0px #000;
}

/* I renamed it so that you can understand from reading the code
I also changed the hit-* id's to classes so that it can be toggled and i gave them same border radius
*/

.hit-zero-green {
    border-top-left-radius: 176px;
    background-color: green;
}

.hit-zero-green:active {
     border-top-left-radius: 176px;
    background-color: #0cff00;
}



.hit-zero-green.lightup{
  border-top-left-radius: 176px;
    background-color: #0cff00; 
}



.hit-one-red {
    border-top-right-radius: 176px;
    background-color: #c40000 /*#dd0000*/;
}


.hit-one-red.lightup{
    background-color: #fc0202;
}



.hit-two-yellow {
    border-bottom-left-radius: 176px;
    background-color: #797905;
}

.hit-two-yellow.lightup{
    background-color: #fbfb0b;
}

.hit-three-blue {
    border-bottom-right-radius: 176px;
    background-color: #0f3689;
}

.hit-three-blue.lightup{
    background-color: #1a96ee;
}


.Simon-border {
    position: absolute;
    width: 210px;
    height: 210px;
    border-radius: 210px;
    background-color: black;
    top: 78px;
    left: 77px;
}

.interior-circle {
    position: absolute;
    text-align: center;
    background: url('https://s15.postimg.cc/44l9n7ocb/Simon_Knob_2.png') no-repeat;
      /*("https://s13.postimg.cc/svhyvtxmf/Simon_Knob.png") no-repeat;*/
    background-size: auto 100%;
    margin: auto;
    width: 200px;
    height: 200px;
    top: 5px;
    left: 6px;
}

p {
    position: absolute;
    text-align: center;
    color: white;
    top: 40px;
    left: 35px;
    font-size: 1.5em;
}

.social {
    width: auto;
    height: 60px;
}

#start,
#off-on-switch {
    height: 45px;
}

#start {
    border-top-left-radius: 50px;
    border-bottom-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    box-shadow: inset 0px 0px 12px 0px #000;
    outline: none;
    margin-top: 1px;
    margin-top: 1px;
    cursor: pointer;
}
#strict:active {
      /*this code is optional: 1px 3px 2px #444,*/
      box-shadow: 1px 3px 2px #444;
}

/*............... on/off button--------*/

.on{
  color: red;
  font-size: 55px;
  font-family: digital-7;
  line-height: 1.85em;
  text-align: center;
}


.tgl-box {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    box-shadow: inset 0px 0px 12px 0px #000;
    outline: none;
}


.tgl {
    display: none;
}

.tgl::selection,
.tgl:after::selection,

.tgl+.tgl-btn::selection {
    background: none;
}

.tgl::selection,
.tgl:after::selection,
.tgl:before::selection,
.tgl *::selection,
.tgl *:after::selection,
.tgl *:before::selection,
.tgl+.tgl-btn::selection {
    background: none;
}

.tgl+.tgl-btn {
    outline: 0;
    display: block;
    height: 45px;
    position: relative;
    cursor: pointer;
    user-select: none;
    user-select: none;
    user-select: none;
    user-select: none;
}

.tgl+.tgl-btn:after,
.tgl+.tgl-btn:before {
    position: relative;
    display: block;
    content: "";
    width: 50%;
    height: 100%;
}

.tgl+.tgl-btn:after {
    left: 0;
}

.tgl+.tgl-btn:before {
    display: none;
}

.tgl:checked+.tgl-btn:after {
    left: 50%;
}

.tgl-box+.tgl-btn {
    overflow: hidden;
    backface-visibility: hidden;
    backface-visibility: hidden;
    transition: all .2s ease;
    transition: all .2s ease;
    font-family: sans-serif;
    background: #dbd9d9;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    /*box-shadow: inset 0px 0px 12px 0px #000;*/
    outline: none;
    height: 45px;
}

.tgl-box+.tgl-btn:after,
.tgl-box+.tgl-btn:before {
    display: inline-block;
    transition: all .2s ease;
    transition: all .2s ease;
    width: 100%;
    text-align: center;
    position: absolute;
    line-height: 3em;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

.tgl-box+.tgl-btn:after {
    left: 100%;
    content: attr(data-tg-on);
    box-shadow: inset 0px 0px 12px 0px #000;
}

.tgl-box+.tgl-btn:before {
    left: 0;
    content: attr(data-tg-off);
    color: black;
    border: 1px solid #dbd9d9;
    border-radius: 5px;
    box-shadow: inset 0px 0px 12px 0px #000;
}

.tgl-box+.tgl-btn:active {
    background: #888;
}

.tgl-box+.tgl-btn:active:before {
    left: -10%;
}

.tgl-box:checked+.tgl-btn {
    background: #86d993;
}

.tgl-box:checked+.tgl-btn:before {
    left: -100%;
}

.tgl-box:checked+.tgl-btn:after {
    left: 0;
}

.tgl-box:checked+.tgl-btn:active:after {
    left: 10%;
}

/*..............end...........................*/

.strict-and-light {
    /*text-align: center;*/
    /*margin: auto;*/
    height: 45px;
    background-color: white;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 5px;
}

#strict {
    float: left;
    width: 110px;
    height: 40px;
    background-color: #faff00;
    border: 2px solid black;
    outline: none;
    box-shadow: 1px 3px 2px #444, inset 0px 0px 12px 0px #000; 
  /*1px 3px 2px #444*/
    margin-left: 5px;
    margin-top: 3px;
    border-radius: 5px;
    cursor: pointer;
            
}


.light {
    width: 80px;
    height: 35px;
    background-color: #dc3f3f;
    border: 2px solid black;
    margin-right: 6px;
    margin-top: 3px;
    float: right;
    border-top-left-radius: 5px;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

.light-glow{
  background-color: red;
  box-shadow: -1px 0px 15px 7px red;
}

a {
    text-decoration: none;
    color: white;
}
              
            
!

JS

              
                
 //under construction......stay tuned
/*
function play(sound){
  if(!on){
     return;
     }
   var audio = document.getElementById("audio");
    audio.setAttribute('src', sound);
  //setAttribute() method adds specified attribute to element, and gives it specified value. If specified attribute already exists, only value is set/changed
   audio.play();  
}
*/

$(document).ready(function(){ 

var simonGamePlays = []; //replayed button-strokes by Simon game
var simonGameUserPlays = []; // input by Simon user
const LEVELS_TO_REACH = 20;
var id, color, level = 0;
var i;
var on;
var off;
var strict;
 
/*....................start button functions.......................*/  
  
function turnGameOn(){ 
  $('#strict').click(toggleStrict);
 document.querySelector(".hit-zero-green").addEventListener("click", illuminateCurrentButton);
  document.querySelector(".hit-one-red").addEventListener("click", illuminateCurrentButton);
  document.querySelector(".hit-two-yellow").addEventListener("click", illuminateCurrentButton);
  document.querySelector(".hit-three-blue").addEventListener("click", illuminateCurrentButton);
  // as soon as start button is pressed a Simon game begins playing automatically by selecting random button
  beginSequence();
 $('.count-display').removeClass("on");
 $('.count-display').addClass("on").html("this is level 01");
  strict = false;
  level = 0;
  level++; //level auto-increments upon each level reached
  simonGamePlays = []; // simon Game array stores Simon input to be compared against user
  simonGameUserPlays = []; //simon game user array stores user input tob compared against Simons input
  //simonGamePlayerSequence(); function for Simon Game Player array

  const buttons = document.getElementsByClassName('pad'); 
  //retrieve the elements of a particular item which are the pads 
  
  //tie this if function into start button to enable random button to be selected by Simon game and audio played
  if(buttons.length > 0) { //as long as greater than 0, can be two buttons, etc
    function getRandomIndex(){
      var random = Math.floor(Math.random() * 4);
      buttons.item(random).click(); //randomIndex is parameter of item
      simonGamePlays.push(random);
      
      if(random ==1){
       lightup = 'hit-zero-green';
       $('.hit-zero-green').addClass(lightup);
       $('#audio1')[0].play();
       simonGamePlays.push(1);
        
        setTimeout(function () {
          $('.hit-zero-green').removeClass(lightup);
        }, off);
        
       }else if (random == 2) {
          lightup = 'hit-zero-red';
          $('.hit-zero-red').addClass(lightup);
          $('#audio2')[0].play();
          simonGamePlays.push(2);

          setTimeout(function () {
          $('.hit-zero-red').removeClass(lightup);
           }, off);

       }else if (random == 3) {
         lightup = 'hit-zero-blue';
         $('.hit-zero-blue').addClass(lightup);
         $('#audio3')[0].play();
         simonGamePlays.push(3);

         setTimeout(function () {
         $('.hit-zero-blue').removeClass(lightup);
         }, off);
        }else if (random == 4) {
          lightup = 'hit-zero-yellow';
          $('.hit-zero-yellow').addClass(lightup);
          $('#audio4')[0].play();
          simonGamePlays.push(4);
          
          setTimeout(function () {
            $('#sound-four').removeClass(lightup);
          }, off);
         }
       
  }
    //outside function
    getRandomIndex(); // function call
}
} //end of turn game on function
  
  function turnGameOff(){ 
   document.querySelector(".hit-zero-green").removeEventListener("click", illuminateCurrentButton);
  document.querySelector(".hit-one-red").removeEventListener("click", illuminateCurrentButton);
  document.querySelector(".hit-two-yellow").removeEventListener("click", illuminateCurrentButton);
  document.querySelector(".hit-three-blue").removeEventListener("click", illuminateCurrentButton);
    $(".pad").removeClass("lightup"); 
  }; 
  
  
  
/*........on/of toggle switch functions..................*/
  
  $('#start').click(() => {
    if(on){turnGameOn()
          };
  });  //disable game
  
   

    $(".tgl-btn").click(function() {
      if (!on){
            
        $('.count-display').addClass("on").html("Ready? Lets go!");
       on = true;
      }                 
      else {
        on = false;
        $('.count-display').removeClass("on").html("888888888888888"); // turn display light off
        $('.light').removeClass("light-glow");//turn strict light off
        turnGameOff(); //caller
      }
    }); 
 

$('.tgl-btn').click(function(){
	$(".Linkedinbutton, .Facebookbutton, .Tweetbutton, .Emailbutton ").toggleClass("Linkedinbutton-X");
 
function toggle() {
    if(shown) {
        element.hide();
        shown = false;
    } else {
        element.show();
        shown = true;
    }
}
});
  
  
/*..............Simon Game Plays (Simon sequence)..............*/ 
  
function beginSequence(){
    var i = 0; //everytime function starts, it starts with i set to zero
    var simonUserInterval = setInterval(function() {
      id = simonGamePlays[i]; //this id to be found with Math.random function
    color= $("#"+id).attr("class");
      
      //attribute to this id the classes for it (in CSS)
    console.log(id+" "+color); //print id and color eg. 0 and green
    i++;
    if (i == simonGamePlays.length){ 
      //if statement that clears setInterval variable
    clearInterval(simonUserInterval);
    }
}, 1000);
}


/*.........add interval pad class and sound...................*/
  
/**/
function illuminateCurrentButton(event){
  var button = $(event.target);
  button.toggleClass('lightup');
}

 
/*........play Simon pad sounds.......................*/ 
  
  function redButton() {
    //select the button
    var illuminateRed = document.querySelector(".hit-one-red");
    //add event Listener
    illuminateRed.addEventListener("click", function () {
        //condition to toggle the classes
        if (this.className == "pad hit-one-red")
            this.className = "pad lightup-red";
        else
            this.className = "pad hit-one-red";
    });
}
  

  
  
//old sound stuff
/*

function greenButton() {
    //select the button
    var illuminateRed = document.querySelector(".hit-zero-green");
    //add event Listener
    illuminateRed.addEventListener("click", function () {
        //condition to toggle the classes
        // == means return true if the operands are equal (but not of the same type)
        if (this.className == "pad hit-zero-green")
        // = means one operand is the equal value of the other ex. x=y
            this.className = "pad lightup-green";
        else
            this.className = "pad hit-zero-green";
    });
    
    // so if this class name is equal to (but not of the same type as) pad hit-zero-green, then this class name is the same value as pad-light-up green, else (if not), this class name is the equal value of pad-hit-zero-green
}

function redButton() {
    //select the button
    var illuminateRed = document.querySelector(".hit-one-red");
    //add event Listener
    illuminateRed.addEventListener("click", function () {
        //condition to toggle the classes
        if (this.className == "pad hit-one-red")
            this.className = "pad lightup-red";
        else
            this.className = "pad hit-one-red";
    });
}

function yellowButton() {
    //select the button
    var illuminateRed = document.querySelector(".hit-two-yellow");
    //add event Listener
    illuminateRed.addEventListener("click", function () {
        //condition to toggle the classes
        if (this.className == "pad hit-two-yellow")
            this.className = "pad lightup-yellow";
        else
            this.className = "pad hit-two-yellow";
    });
   
}

function blueButton() {
    //select the button
    var illuminateRed = document.querySelector(".hit-three-blue");
    //add event Listener
    illuminateRed.addEventListener("click", function () {
        //condition to toggle the classes
        if (this.className == "pad hit-three-blue")
            this.className = "pad lightup-blue";
        else
            this.className = "pad hit-three-blue";
    });
}
*/
  
/*
strict button workings...concepting operating concept
when strict button is pressed count is immediately reset 
strict button function will not work when start button is off
strict button light turns on when strict button is pressed
strict button function turns off when on/off button is turned off
*/  

function toggleStrict(){
if(on){$('.light').toggleClass('light-glow')}
  
}

  /*
  $('#strict').click(() => {if(on){'light-glow'()}})
  
  if(on){$('.light').toggleClass('light-glow')}
  

$('#start').click(() => {if(on){turnGameOn()}}) 
  
  */ 
  
//make part of video-screen text blink 
//var element = $(".light-glow");
//var shown = true;
//setInterval(toggle, 100);

function toggle() {
    if(shown) {
        element.hide();
        shown = false;
    } else {
        element.show();
        shown = true;
    }
}
  

 //share-links code:
//LinkedIn
$('.Linkedinbutton').click(function() {
  var shareurl = $(this).data('shareurl');
  window.open('https://www.linkedin.com/shareArticle?mini=true&url=https://codepen.io/IDCoder/full/Gxqybw/' + escape(shareurl) + '&title=' + document.title + '&source=SourceTitle&target=new');
  return false;
});

//Twitter  
  var text="Checkout this Simon Game Web App";
 $('.Tweetbutton').click(function() {
    window.open("https://twitter.com/intent/tweet?text=" + encodeURIComponent(text + " " +"https://codepen.io/IDCoder/full/Gxqybw/"));
  });

//Facebook  
 var facebookShare = document.querySelector('[class="Facebookbutton"]');

facebookShare.onclick = function(e) {
  e.preventDefault();
  var facebookWindow = window.open('https://www.facebook.com/sharer/sharer.php?u=' + document.URL, 'facebook-popup', 'height=350,width=600');
  if(facebookWindow.focus) { facebookWindow.focus(); }
    return false;
};

//Email under construction
var emailWindowSettings = 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=200px,height=120px';

$(".Emailbutton").on("click", function() {
  var emailWindow = window.open(this.dataset.href,'targetWindow', emailWindowSettings);
  return false;
}); 
});

              
            
!
999px

Console