Survay Form

HTML

              
                <h1 id="title">my game survay</h1>
<form id="survey-form" action ="">
  <p id="description">games people enjoy playing</p>
  <div class="Container">
    <div id="personalDetails">
      <p> * indicates required field</p>
      <label for="name" id="name-label">*Name</label>
       <input type="text" id="name" placeholder="Enter Your Name" required >    
      <label for="email" id="email-label">*Email</label>
      <input id = "email" type="email" placeholder="Enter your Email" required >
      <label for="number" id="number-label">*Age</label>
      <input type="number" id="number" placeholder="Enter your Age"  min="8" max="70" required>
     
    </div>
    <div id="Answer-side">
   <label for="game-genre" id='game-genre-label'> What genre and type of game do you enjoy playing(select all that apply)</label>
   <!--  List Start-->
    <div id ="GamesLists">
      <div>
        <label><input type="checkbox" name="game-genre" value="action" id="actionBox">Action</label>
    <div class="action list" id="action">
    <H1>Action</H1>        
      <p id="action-list">Here is a list of action game types</p>
      <ul>
        <li>Platform games<input type="checkbox" name="action-list" value="Platform Games"></li>
        <li>Shooter games<input type="checkbox" name="action-list" value="Shooter games"></li>
        <li>Fighting games<input type="checkbox" name="action-list" value="Fighting games"></li>
        <li>Beat 'em up games<input type="checkbox" name="action-list" value="Beat 'em up games"></li>
        <li>Stealth game<input type="checkbox" name="action-list" value="Stealth game"></li>
        <li>Survival games<input type="checkbox" name="action-list" value="Survival games"></li>
        <li>Rhythm games<input type="checkbox" name="action-list" value="Rhythm games"></li>
      </ul>
    </div>
      </div>
      <div>    
    <label><input type="checkbox" name="game-genre" value="action-adventure" id="ActAdvBox">Action-Adventure</label>
     <div class="Action-Adventure list" id="Action-Adventure">
    <label>Action-adventure DIV</label>
       
      <p id="Action-adventure-list">Here is a list of action-adventure game types</p>
      <ul>
        <li>Survival horror<input type="checkbox" name="Action-adventure-list" value="Survival horror"></li>
        <li>Metroidvania<input type="checkbox" name="Action-adventure-list" value="Metroidvania"></li>
      </ul>
    </div>
      </div>
      <div>
    <label><input type="checkbox" name="game-genre" value="adventure" id="adventBox">Adventure</label>
    <div class="Adventure list" id="Adventure">
    <label>Action DIV</label>
      <p id="Adventure-list">Here is a list of Adventure game types</p>
      <ul>
        <li>Text adventures<input type="checkbox" name="Adventure-list" value="Text adventures"></li>
        <li>Graphic adventures<input type="checkbox" name="Adventure-list" value="Graphic adventures"></li>
        <li>Visual novels<input type="checkbox" name="Adventure-list" value="Visual novels"></li>
        <li>Interactive movie<input type="checkbox" name="Adventure-list" value="Interactive movie"></li>
        <li>Real-time 3D adventures<input type="checkbox" name="Adventure-list" value="Real-time 3D adventures"></li>
      </ul>
    </div> 
      </div>
      <div>
    <label><input type="checkbox" name="game-genre" value="Role-playing(RPG)" id="RPGBox">Role-playing(RPG)</label>
    <div class="Role-playing list" id="Role-playing">
    <label>Role-playing DIV</label>
      <p id="Role-playing-list">Here is a list of Role-playing game types</p>
      <ul>
        <li>Action RPG<input type="checkbox" name="Role-playing-list" value="Action RPG"></li>
        <li>MMORPG<input type="checkbox" name="Role-playing-list" value="MMORPG"></li>
        <li>Roguelikes<input type="checkbox" name="Role-playing-list" value="Roguelikes"></li>
        <li>Tactical RPG<input type="checkbox" name="Role-playing-list" value="Tactical RPG"></li>
        <li>Sandbox RPG<input type="checkbox" name="Role-playing-list" value="Sandbox RPG"></li>
        <li>First-person party-based RPG<input type="checkbox" name="Role-playing-list" value="First-person party-based RPG"></li>
        <li>Cultural differences<input type="checkbox" name="Role-playing-list" value="Cultural differences"></li>
        <li>Choices<input type="checkbox" name="Role-playing-list" value="Choices"></li>
        <li>Fantasy<input type="checkbox" name="Role-playing-list" value="Fantasy"></li>
      </ul>
    </div>
      </div>
      <div>
    <label><input type="checkbox" name="game-genre" value="simulation" id="SimBox">Simulation</label>
    <div class="Simulation list" id="Simulation">
    <label>Simulation DIV</label>
      <p id="Simulation-list">Here is a list of Simulation game types</p>
      <ul>
        <li>Construction and management simulation<input type="checkbox" name="Simulation-list" value="Construction and management simulation"></li>
        <li>Life simulation<input type="checkbox" name="Simulation-list" value="Life simulation"></li>
        <li>Vehicle simulation<input type="checkbox" name="Simulation-list" value="Vehicle simulation"></li>       
      </ul>
    </div>
      </div>
      <div>
    <label><input type="checkbox" name="game-genre" value="strategy" id="stratBox">Strategy</label>
    <div class="Strategy list" id="Strategy">
    <label>Strategy DIV</label>
      <p id="Strategy-list">Here is a list of Strategy game types</p>
      <ul>
        <li>4X game<input type="checkbox" name="Strategy-list" value="4X game"></li>
        <li>Artillery game<input type="checkbox" name="Strategy-list" value="Artillery game"></li>
        <li>Real-time strategy (RTS)<input type="checkbox" name="Strategy-list" value="Real-time strategy (RTS)"></li>
        <li>Real-time tactics (RTT)<input type="checkbox" name="Strategy-list" value="Real-time tactics (RTT)"></li>
        <li>Multiplayer online battle arena (MOBA)<input type="checkbox" name="Strategy-list" value="Multiplayer online battle arena (MOBA)"></li>
        <li>Tower defense<input type="checkbox" name="Strategy-list" value="Tower defense"></li>
        <li>Turn-based strategy (TBS)<input type="checkbox" name="Strategy-list" value="Turn-based strategy (TBS)"></li>
        <li>Turn-based tactics (TBT)<input type="checkbox" name="Strategy-list" value="Turn-based tactics (TBT)"></li>
        <li>Wargame<input type="checkbox" name="Strategy-list" value="Wargame"></li>
        <li>Grand strategy wargame<input type="checkbox" name="Strategy-list" value="rand strategy wargame"></li>
      </ul>
    </div>
      </div>
      <div>
    <label><input type="checkbox" name="game-genre" value="simulation" id="SportBox">Sports</label>
    <div class="Sports list" id="Sports">
    <label>Sports DIV</label>
      <p id="Sports-list">Here is a list of Sports game types</p>
      <ul>
        <li>Racing<input type="checkbox" name="Sports-list" value="Racing"></li>
        <li>Sports game<input type="checkbox" name="Sports-list" value="Sports game"></li>
        <li>Competitive<input type="checkbox" name="Sports-list" value="Competitive"></li>
        <li>Sports-based fighting<input type="checkbox" name="Sports-list" value="Sports-based fighting"></li>        
      </ul>
    </div>
      </div>
    </div>
    <!-- Lits End -->   

<div id="DropDiv">

  <div id="downDiv">
    <p> Please select your favourite genre of game from the list and your favourite type within that ganre from the following list(only one choice allowed)</p> 
    <select id="dropdown">
      <option disabled value selected>Select an option</option>
      <option value="Action">Action</option>
      <option value="Action-adventure">Action-adventure</option>
      <option value="Adventure">Adventure</option>
      <option value="Role-playing">Role-playing</option>
      <option value="Simulation">Simulation</option>
      <option value="Strategy">Strategy</option>
      <option value="Sport">Sport</option>
    </select>    
    <div id="showAction" class="dList">       
      <p id="action-list2">Here is a list of action game types</p>
      <ul>
        <li>Platform games<input type="radio" name="action-list" value="Platform Games"></li>
        <li>Shooter games<input type="radio" name="action-list" value="Shooter games"></li>
        <li>Fighting games<input type="radio" name="action-list" value="Fighting games"></li>
        <li>Beat 'em up games<input type="radio" name="action-list" value="Beat 'em up games"></li>
        <li>Stealth game<input type="radio" name="action-list" value="Stealth game"></li>
        <li>Survival games<input type="radio" name="action-list" value="Survival games"></li>
        <li>Rhythm games<input type="radio" name="action-list" value="Rhythm games"></li>
      </ul>
    </div>    
    <div id="showAction-adventure" class="dList">     
      <p id="Action-adventure-list2">Here is a list of action-adventure game types</p>
      <ul>
        <li>Survival horror<input type="radio" name="Action-adventure-list" value="Survival horror"></li>
        <li>Metroidvania<input type="radio" name="Action-adventure-list" value="Metroidvania"></li>
      </ul>       
    </div>
    <div id="showAdventure" class="dList">     
      <p id="Adventure-list2">Here is a list of Adventure game types</p>
      <ul>
        <li>Text adventures<input type="radio" name="Adventure-list" value="Text adventures"></li>
        <li>Graphic adventures<input type="radio" name="Adventure-list" value="Graphic adventures"></li>
        <li>Visual novels<input type="radio" name="Adventure-list" value="Visual novels"></li>
        <li>Interactive movie<input type="radio" name="Adventure-list" value="Interactive movie"></li>
        <li>Real-time 3D adventures<input type="radio" name="Adventure-list" value="Real-time 3D adventures"></li>
      </ul>     
    </div>
    <div id="showRole-playing" class="dList">     
      <p id="Role-playing-list2">Here is a list of Role-playing game types</p>
      <ul>
        <li>Action RPG<input type="radio" name="Role-playing-list" value="Action RPG"></li>
        <li>MMORPG<input type="radio" name="Role-playing-list" value="MMORPG"></li>
        <li>Roguelikes<input type="radio" name="Role-playing-list" value="Roguelikes"></li>
        <li>Tactical RPG<input type="radio" name="Role-playing-list" value="Tactical RPG"></li>
        <li>Sandbox RPG<input type="radio" name="Role-playing-list" value="Sandbox RPG"></li>
        <li>First-person party-based RPG<input type="radio" name="Role-playing-list" value="First-person party-based RPG"></li>
        <li>Cultural differences<input type="radio" name="Role-playing-list" value="Cultural differences"></li>
        <li>Choices<input type="radio" name="Role-playing-list" value="Choices"></li>
        <li>Fantasy<input type="radio" name="Role-playing-list" value="Fantasy"></li>
      </ul>  
    </div>
    <div id="showSimulation" class="dList">     
      <p id="Simulation-list2">Here is a list of Simulation game types</p>
      <ul>
        <li>Construction and management simulation<input type="radio" name="Simulation-list" value="Construction and management simulation"></li>
        <li>Life simulation<input type="radio" name="Simulation-list" value="Life simulation"></li>
        <li>Vehicle simulation<input type="radio" name="Simulation-list" value="Vehicle simulation"></li>       
      </ul>  
    </div>
    <div id="showStrategy" class="dList">
      
      <p id="Strategy-list2">Here is a list of Strategy game types</p>
      <ul>
        <li>4X game<input type="radio" name="Strategy-list" value="4X game"></li>
        <li>Artillery game<input type="radio" name="Strategy-list" value="Artillery game"></li>
        <li>Real-time strategy (RTS)<input type="radio" name="Strategy-list" value="Real-time strategy (RTS)"></li>
        <li>Real-time tactics (RTT)<input type="radio" name="Strategy-list" value="Real-time tactics (RTT)"></li>
        <li>Multiplayer online battle arena (MOBA)<input type="radio" name="Strategy-list" value="Multiplayer online battle arena (MOBA)"></li>
        <li>Tower defense<input type="radio" name="Strategy-list" value="Tower defense"></li>
        <li>Turn-based strategy (TBS)<input type="radio" name="Strategy-list" value="Turn-based strategy (TBS)"></li>
        <li>Turn-based tactics (TBT)<input type="radio" name="Strategy-list" value="Turn-based tactics (TBT)"></li>
        <li>Wargame<input type="radio" name="Strategy-list" value="Wargame"></li>
        <li>Grand strategy wargame<input type="radio" name="Strategy-list" value="rand strategy wargame"></li>
      </ul>
    </div>
     <div id="showSport" class="dList">  
      <p id="Sports-list2">Here is a list of Sports game types</p>
      <ul>
        <li>Racing<input type="radio" name="Sports-list" value="Racing"></li>
        <li>Sports game<input type="radio" name="Sports-list" value="Sports game"></li>
        <li>Competitive<input type="radio" name="Sports-list" value="Competitive"></li>
        <li>Sports-based fighting<input type="radio" name="Sports-list" value="Sports-based fighting"></li>        
      </ul>     
    </div>
  </div>
  <div id="reasonDiv">
  <label for="reason">Please give a reason for your choice</label>
  <textarea id="reason" cols="1" rows="5"></textarea>
  </div>
  
</div>
    <div id="recomendDiv">
     <label for="recomendations" id="recomendation-lable">Do you have any comments or recamendations to help improve this page</label>
    <textarea id="recomendations" cols="1" rows="5"></textarea>
    </div>
  </div>
    
  <!--
    

    
 
 



        -->
 
  
  
  
  

  
  </div>
  <button type="submit" id="submit">Submit</button>
</form>

CSS

              
                h1, p{
  color:red;
  text-align:center;
}

#survey-form{
  background-color:#9e2541;
}
.list, .dList{
	display:none;
  BACKGROUND-COLOR:#7e9e25;
  justify-content: center;
  
}  
.Container{
  color:blue;
  display:grid;  
}

#GamesLists {  
  BACKGROUND-COLOR:#7e9e25;
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;  
  padding-bottom:458px;
}

#submit{
  color:#e08859;
  background-color: #59ace0;
  border-radius: 4px;  
  font-size: 1em;
  height: 40px;
  width: 96px;
  margin: 10px;
  border: 0px solid;
}
body{
  background-Color:#82259e;
   margin: 20px 120px 120px 120px;
}
#DropDiv{ 
  justify-content: center;
  grid-template-rows:1fr 1fr;
}
#reasonDiv{
  display:grid; 
  grid-template-rows:1fr 1fr;
   justify-content: center;
}

#recomendDiv{  
  justify-content: center;
  display:grid;
  grid-template-rows:1fr 1fr;
}
#downDiv{
  justify-content: center;
  display:grid;
  grid-template-rows:1fr 1fr;  
   padding-bottom:300px;
}

JS

              
                $(function(){
//start of list show
var fred ="";
  var strat = false;
  var act = false;
  var rpg = false;
  var Adv = false;
  var simu = false;
  var spo = false;
  var actAd = false;
  //action   
  $("#actionBox").click(function(){
   fred = "";
    fred += "ActionBox click";
    
    if($(this).is(":checked"))
    { 
      
      act = true;
      fred += "ActionBox click IF###act:56789"+act+"98765";
      
      JamesFunct(fred, spo, strat, simu, rpg, Adv, actAd, act);
      kdisplay(fred);
      
      
      
      
      $("#action").show();
      
      
    }
    else
    {
      
      act = false;
      fred += "ActionBox click ELSE###act:12345"+act+"54321*";
      
    
      JamesFunct(fred, spo, strat, simu, rpg, Adv, actAd, act);
      kdisplay(fred);
      
      $("#action").hide();
      
    }
  }); 
//Action-adventure  
  $("#ActAdvBox").click(function(){
    fred = "";
    fred += "ActAdvBox click";
   
    if($(this).is(":checked"))
    {
      actAd = true;
      fred += "ActAdvBox click IF###actAd:56789"+actAd+"98765";
      
      JamesFunct(fred, spo, strat, simu, rpg, Adv, actAd, act);
      kdisplay(fred);
     
      
      
       
      $("#Action-Adventure").show();
     
    }
    else
    {
       actAd = false;
      fred += "ActAdvBox click ELSE###actAd:12345"+actAd+"54321*";
     
      JamesFunct(fred, spo, strat, simu, rpg, Adv, actAd, act);
      kdisplay(fred);
      
      
      $("#Action-Adventure").hide();
      
    }
  });  
//Adventure
  $("#adventBox").click(function(){
    fred ="";
    fred += "adventBox click";
    
    if($(this).is(":checked"))
    {
      
      Adv = true;
      fred += "adventBox click IF###Adv:56789"+Adv+"98765";
      
      JamesFunct(fred, spo, strat, simu, rpg, Adv, actAd, act);
      kdisplay(fred);
      
      $("#Adventure").show();
      
    }
    else
    {
      Adv = false;
      fred += "adventBox click ELSE###Adv:12345"+Adv+"54321*";
      
      JamesFunct(fred, spo, strat, simu, rpg, Adv, actAd, act);
      kdisplay(fred);
      
      $("#Adventure").hide();
     
    }
      
    
      
      
      
  }); 
//Role-playing  
  $("#RPGBox").click(function(){
    fred = "";
    fred += "RPGBBox click";
    
    if($(this).is(":checked"))
    {
      rpg = true;
       fred += "RPGBBox click###rpg:56789"+rpg+"98765";      
     
      JamesFunct(fred, spo, strat, simu, rpg, Adv, actAd, act);
      kdisplay(fred);
      $("#Role-playing").show();
    }
    else
    {
      rpg = false;
      fred += "RPGBBox click ELSE###rpg:12345"+rpg+"54321*";
      
      JamesFunct(fred, spo, strat, simu, rpg, Adv, actAd, act);   
      kdisplay(fred);
      $("#Role-playing").hide();
    }
  });
//Simulation  
  $("#SimBox").click(function(){
   fred ="";
    fred += "SportBox click";
    
    if($(this).is(":checked"))
    {
      simu = true;
      fred += "SimBox click IF###simu:56789"+simu+"98765";
      
      JamesFunct(fred, spo, strat, simu, rpg, Adv, actAd, act);
      kdisplay(fred);
      $("#Simulation").show();
    }
    else
    {
       simu = false;
      fred += "SimBox click ELSE###simu:12345"+simu+"54321*";
      
      JamesFunct(fred, spo, strat, simu, rpg, Adv, actAd, act);
      kdisplay(fred);
      $("#Simulation").hide();
    }
  });
//stratergy  
  $("#stratBox").click(function(){
    fred = "";
    fred += "stratBox click";
     
    
    if($(this).is(":checked"))
    {
      strat = true;
      fred += "stratBox click IF###strat:56789"+strat+"98765";
     
      JamesFunct(fred, spo, strat, simu, rpg, Adv, actAd, act);
     kdisplay(fred);
      $("#Strategy").show();
    }
    else
    {
      strat = false;
      fred += "stratBox click ELSE###strat:12345"+strat+"54321*";
      
      JamesFunct(fred, spo, strat, simu, rpg, Adv, actAd, act);
      kdisplay(fred);
      $("#Strategy").hide();
    }
  }); 
//sports  
  $("#SportBox").click(function(){
    fred = "";
   fred += "SportBox click"
    kdisplay(fred);
    if($(this).is(":checked"))
    {
      spo = true;
     fred += "SportBox click IF###spo:56789"+spo+"98765"      
      
     
      JamesFunct(fred, spo, strat, simu, rpg, Adv, actAd, act);
      kdisplay(fred);    
      $("#Sports").show();
    }
    else
    {
      spo = false;
      fred += "SportBox click ELSE###spo:12345"+spo+"54321*"
      
      JamesFunct(fred, spo, strat, simu, rpg, Adv, actAd, act);
    kdisplay(fred);
      $("#Sports").hide();
    }
  });

//end of list show

    $('#dropdown').on('change', function(){
      fred ="";
    	 var dropvalue = $(this).val();
      fred = dropvalue;
      drdisplay(fred);
      DropHight(fred, dropvalue);
      //document.getElementById("dr").innerHTML ="!!!" +dropvalue+"!!!";
      
        $("div.dList").hide();
        $("#show"+dropvalue).show();
    });

 function JamesFunct(fred, spo, strat, simu, rpg, Adv, actAd, act){
   fred = "";
fred += "my Function24(The values of strat:!"+strat+"!, act:@"+act+"@, rpg:#"+rpg+"#, Adv:$"+Adv+"$, simu:%"+simu+"%, spo:^"+spo+"^, actAd:&"+actAd+"&)";
kdisplay(fred);
  
  
  if(strat == true)
  {
  fred += "strat = true";
    fred += "!!11!!"+fred+"@@22@@";
  kdisplay(fred);
   document.getElementById("GamesLists").style.paddingBottom = "0px";  
  }
   else if(rpg == true)
  {
  fred += "rpg = true";
    fred += "##33##"+fred+"$$44$$";
  kdisplay(fred); 
    document.getElementById("GamesLists").style.paddingBottom = "110px";
  
  }
  else if(act == true)
  {
  fred += "act = true";
    fred += "@@22@@"+fred+"##33##";
  kdisplay(fred);
  document.getElementById("GamesLists").style.paddingBottom = "125px";  
  
  }
  
  else if(Adv == true)
  {
  fred += "adv = true";
    fred += "$$44$$"+fred+"%%55%%";
  kdisplay(fred);
  document.getElementById("GamesLists").style.paddingBottom = "185px";
  
  }
  else if(simu == true)
  {
  fred += "simu = true";
    fred += "%%55%%"+fred+"^^66^^";
  kdisplay(fred);
  document.getElementById("GamesLists").style.paddingBottom = "225px";
  
  }
  else if(spo == true)
  {
  fred += "spo = true";
    fred += "^^66^^"+fred+"&&77&&";
     
    kdisplay(fred);
     document.getElementById("GamesLists").style.paddingBottom = "260px";
    
     
  }
  else if(actAd == true)
  {
  fred += "actAd = true";
    fred += "&&77&&"+fred+"**88**";
  kdisplay(fred);
  document.getElementById("GamesLists").style.paddingBottom = "300px";
  
  }
  else
  {
  fred += "ELSE all false";
    fred += "**88**"+fred+"((9900))";
    
    
    
    kdisplay(fred);
    document.getElementById("GamesLists").style.paddingBottom = "458px";
    
  } 
}

  function kdisplay(fred)  {
  //  document.getElementById("k").innerHTML =fred;
    
  }

 //* try test start
  function DropHight(fred, dropVal){
    fred += "!@##@!";
    drdisplay(fred);
   // var DLVar = document.getElementsByClassName("dList");
//
//
fred += "Drop Hight!@#$(dropVal:%^&"+dropVal+"&^%$#@!)*&^";
drdisplay(fred);
  
  
  if(dropVal == "Action")  {
    fred += "dropVal = Action";
    fred += "123";
    drdisplay(fred);
    // document.getElementById("downDiv").style.marginBottom = "125px";
    //document.getElementById("k").innerHTML ="!!11!!"+fred+"@@22@@";
    document.getElementById("downDiv").style.marginBottom = "80px";  
   // document.getElementById("downDiv").style.backgroundColor = "#4f5e9e";
    //DLVar[0].style.backgroundColor = "#3936d1";
  }
    else if(dropVal == "Action-adventure"){
    fred += "dropVal = Action-adventure";     
    fred +="456";
    drdisplay(fred);
     document.getElementById("downDiv").style.paddingBottom = "180px";  
  
     
     }
     //Adventure
    else if(dropVal == "Adventure"){
    fred += "dropVal = Adventure";
     fred += "789";
     drdisplay(fred);
      document.getElementById("downDiv").style.paddingBottom = "120px";  
  
     
     }
       //Role-playing
    else if(dropVal == "Role-playing")  {
  fred += "dropVal = Role-playing";
   fred +="!@#";
    drdisplay(fred);
    document.getElementById("downDiv").style.paddingBottom = "20px";  
    
  }
  //Simulation
    else if(dropVal == "Simulation"){
    fred += "dropVal = Simulation";
   fred += "$%^";
   drdisplay(fred);
    document.getElementById("downDiv").style.paddingBottom = "160px";  
    
   
     }
      //Strategy
    else if(dropVal == "Strategy"){
    fred += "dropVal = Strategy";
    fred += "$%^";
    drdisplay(fred);
     document.getElementById("downDiv").style.paddingBottom = "0px";  
    
     
          }
      //Sport    
    else if(dropVal == "Sport"){
    fred += "dropVal = Sport";
    
     fred +="456";
    drdisplay(fred);
     document.getElementById("downDiv").style.marginBottom = "140px";  
  //  document.getElementById("downDiv").style.backgroundColor = "#343f87";
     // DLVar[6].style.backgroundColor = "#4f5e9e";
     
     }    
          }
  
    
 

//try test end*/ 
  function drdisplay(fred)  {
   // document.getElementById("dr").innerHTML =fred;
    
  }
});

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Save Automatically?

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

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

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions