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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ 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

              
                <!-- 
Minecraft Crafting Table by 101Computing
http://www.101computing.net/minecraft-crafting-table/
-->
<DIV id="screen">
<H1>Crafting Table</H1>
  <div id="grid">
        <div class='gridCell' onClick="selectCraftTable(0);" id="craftTable-0"></div>
        <div class='gridCell' onClick="selectCraftTable(1);" id="craftTable-1"></div>
        <div class='gridCell' onClick="selectCraftTable(2);" id="craftTable-2"></div>
        <div class='gridCell' onClick="selectCraftTable(3);" id="craftTable-3"></div>
        <div class='gridCell' onClick="selectCraftTable(4);" id="craftTable-4"></div>
        <div class='gridCell' onClick="selectCraftTable(5);" id="craftTable-5"></div>
        <div class='gridCell' onClick="selectCraftTable(6);" id="craftTable-6"></div>
        <div class='gridCell' onClick="selectCraftTable(7);" id="craftTable-7"></div>
        <div class='gridCell' onClick="selectCraftTable(8);" id="craftTable-8"></div>
  </div>
    <div class="arrow">
      &#10132;
    </div>  
    <div id="result" onClick="addItemToInventory();">
    
    </div>

<H1>Inventory</H1>
<P>Click on an ingredient from your inventory, then click on a cell of your crafting table to place this ingredient.
<div id="inventory">
<div class='gridCell' onClick="selectInventoryItem(0);" id="inventory-0"><img src="http://www.101computing.net/mc/4-0.png" alt="Cobblestone"></div>  
  <div class='gridCell' onClick="selectInventoryItem(1);" id="inventory-1"><img src="http://www.101computing.net/mc/17-0.png" alt="Wood"></div>
  <div class='gridCell' onClick="selectInventoryItem(2);" id="inventory-2"><img src="http://www.101computing.net/mc/265-0.png" alt="Iron ingot"></div>
  <div class='gridCell' onClick="selectInventoryItem(3);" id="inventory-3"><img src="http://www.101computing.net/mc/266-0.png" alt="Gold"></div>
  <div class='gridCell' onClick="selectInventoryItem(4);" id="inventory-4"><img src="http://www.101computing.net/mc/264-0.png" alt="Diamond"></div>
  <div class='gridCell' onClick="selectInventoryItem(5);" id="inventory-5"><img src="http://www.101computing.net/mc/331-0.png" alt="Red Stone"></div>
  <div class='gridCell' onClick="selectInventoryItem(6);" id="inventory-6"><img src="http://www.101computing.net/mc/287-0.png" alt="String"></div>
  <div class='gridCell' onClick="selectInventoryItem(7);" id="inventory-7"><img src="http://www.101computing.net/mc/288-0.png" alt="Feather"></div>
  <div class='gridCell' onClick="selectInventoryItem(8);" id="inventory-8"><img src="http://www.101computing.net/mc/318-0.png" alt="Flint"></div>
  <div class='gridCell' onClick="selectInventoryItem(9);" id="inventory-9"><img src="http://www.101computing.net/mc/263-0.png" alt="Coal"></div>
  <div class='gridCell' onClick="selectInventoryItem(10);" id="inventory-10"></div>
  <div class='gridCell' onClick="selectInventoryItem(11);" id="inventory-11"></div>
  <div class='gridCell' onClick="selectInventoryItem(12);" id="inventory-12"></div>
  <div class='gridCell' onClick="selectInventoryItem(13);" id="inventory-13"></div>
  <div class='gridCell' onClick="selectInventoryItem(14);" id="inventory-14"></div>
  <div class='gridCell' onClick="selectInventoryItem(15);" id="inventory-15"></div>
  <div class='gridCell' onClick="selectInventoryItem(16);" id="inventory-16"></div>
  <div class='gridCell' onClick="selectInventoryItem(17);" id="inventory-17"></div>
  <div class='gridCell' onClick="selectInventoryItem(18);" id="inventory-18"></div>
  <div class='gridCell' onClick="selectInventoryItem(19);" id="inventory-19"></div>
  <div class='gridCell' onClick="selectInventoryItem(20);" id="inventory-20"></div>
  <div class='gridCell' onClick="selectInventoryItem(21);" id="inventory-21"></div>
  <div class='gridCell' onClick="selectInventoryItem(22);" id="inventory-22"></div>
  <div class='gridCell' onClick="selectInventoryItem(23);" id="inventory-23"></div>
  <div class='gridCell' onClick="selectInventoryItem(24);" id="inventory-24"></div>
  <div class='gridCell' onClick="selectInventoryItem(25);" id="inventory-25"></div>
  <div class='gridCell' onClick="selectInventoryItem(26);" id="inventory-26"></div>
</div>
<! -- List of items in minecraft - http://minecraft-ids.grahamedgecombe.com/ -->
<! -- List of recipes in minecraft -   https://www.minecraftcraftingguide.net/ -->
<H1><br/>Recipes</H1>
<DIV id="recipes">
<P>Wooden Planks:</P>  
<IMG src="http://www.101computing.net/mc/recipe-wood-plank.png"> 
<P>Sticks:</P>  
<IMG src="http://www.101computing.net/mc/recipe-stick.png"> 
<P>Chest:</P>  
<IMG src="http://www.101computing.net/mc/recipe-chest.png"> 
<P>Crafting Table:</P>  
<IMG src="http://www.101computing.net/mc/recipe-crafting-table.png"> 
<P>Furnace:</P>  
<IMG src="http://www.101computing.net/mc/recipe-furnace.png">   
<P>Flint and Steel:</P>  
<IMG src="http://www.101computing.net/mc/recipe-flint-and-steel.png">   
<P>Redstone Block:</P>  
<IMG src="http://www.101computing.net/mc/recipe-redstone-block.png"> 
<P>Swords:</P>  
<IMG src="http://www.101computing.net/mc/recipe-swords.gif">   
<P>Fishing Rod:</P>  
<IMG src="http://www.101computing.net/mc/recipe-fishing-rod.png"> 
<P>Bow:</P>
<IMG src="http://www.101computing.net/mc/recipe-bow.png">
<P>Arrows:</P>
<IMG src="http://www.101computing.net/mc/recipe-arrow.png">
<P>Bucket:</P>  
<IMG src="http://www.101computing.net/mc/recipe-bucket.png">
<P>Hoes:</P>  
<IMG src="http://www.101computing.net/mc/recipe-hoes.gif"> 
<P>Axes:</P>  
<IMG src="http://www.101computing.net/mc/recipe-axes.gif">  
<P>Pickaxes:</P>  
<IMG src="http://www.101computing.net/mc/recipe-pickaxes.gif">  
<P>Shovels:</P>  
<IMG src="http://www.101computing.net/mc/recipe-shovels.gif">
</DIV>
</DIV>
              
            
!

CSS

              
                body {
  background-color: #c6c6c6;
  margin: 10px;
  color: #404040;
}

#screen {
  min-width: 450px;
  overflow-x: scroll;
}

H1 {
  clear: both;
}

#crafting-table {
  margin-top: 10px;
}


#grid {
  float: left;
  margin-bottom:16px;
}

.arrow {
   float: left;
  padding: 20px;
  vertical-align:top;
  font-size: 64px;
}

.gridCell {
  background-color: #8b8b8b;
  border-top: thick double #373737;
  border-left: thick double #373737;
  border-right: double #FFFFFF;
  border-bottom: double #FFFFFF;
  width: 36px;
  height: 36px;
  float: left;
}

#grid .gridCell:nth-child(3n+1){
  clear:left;
}
#inventory .gridCell:nth-child(9n+1){
  clear:left;
}

.gridCell IMG {
  padding:2px;
}
#result {
  float: left;
  text-align: center;
  padding-top:8px;
  box-sizing: border-box;
  background-color: #8b8b8b;
  border-top: thick double #373737;
  border-left: thick double #373737;
  border-right: double #FFFFFF;
  border-bottom: double #FFFFFF;
  width: 132px;
  height: 132px;
}

#recipes IMG {
  float: left;
  clear: both;
}

#recipes P {
  display: block;
  font-weight: bold;
  clear: both;
  padding-top: 12px;
  margin-bottom: 0px;
}
              
            
!

JS

              
                var COBBLESTONE = 4;
var WOOD_PLANK = 5;
var WOOD = 17;
var TORCH = 50;
var CHEST = 54;
var CRAFTING_TABLE = 58;
var FURNACE = 61;
var REDSTONETORCH = 76;
var REDSTONE_BLOCK = 152;
var IRON_SHOVEL = 256;
var IRON_PICKAXE = 257;
var IRON_AXE = 258;
var FLINT_AND_STEEL = 259;
var BOW = 261;
var ARROW = 262;
var COAL = 263;
var DIAMOND = 264;
var IRON_INGOT = 265;
var GOLD = 266;
var IRON_SWORD = 267;
var WOODEN_SWORD = 268;
var WOODEN_SHOVEL = 269;
var WOODEN_PICKAXE = 270;
var WOODEN_AXE = 271;
var STONE_SWORD = 272;
var STONE_SHOVEL = 273;
var STONE_PICKAXE = 274;
var STONE_AXE = 275;
var DIAMOND_SWORD = 276;
var DIAMOND_SHOVEL = 277;
var DIAMOND_PICKAXE = 278;
var DIAMOND_AXE = 279;
var STICK = 280;
var GOLDEN_SWORD = 283;
var GOLDEN_SHOVEL = 284;
var GOLDEN_PICKAXE = 285;
var GOLDEN_AXE = 286;
var STRING = 287;
var FEATHER = 288;
var WOODEN_HOE = 290;
var STONE_HOE = 291;
var IRON_HOE = 292;
var DIAMOND_HOE = 293;
var GOLDEN_HOE = 294;
var FLINT = 318;
var BUCKET = 325;
var REDSTONE = 331;
var COMPASS = 345;
var FISHING_ROD = 346;
var CLOCK = 347;

var craftTable = [0,0,0,0,0,0,0,0,0];
var inventory = [COBBLESTONE,WOOD,IRON_INGOT,GOLD,DIAMOND,REDSTONE,STRING,FEATHER,FLINT,COAL,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
var selectedCell;
var selectedIngredient=0;
var newItem=0;

var recipes = [];
recipes.push(["Wood Planks",WOOD_PLANK,[0,0,0,0,WOOD,0,0,0,0]]);
recipes.push(["Stick",STICK,[0,0,0,0,WOOD_PLANK,0,0,WOOD_PLANK,0]]);
recipes.push(["Bow",BOW,[STRING,STICK,0,STRING,0,STICK,STRING,STICK,0]]);
recipes.push(["Arrow",ARROW,[0,FLINT,0,0,STICK,0,0,FEATHER,0]]);
recipes.push(["Torch",TORCH,[0,0,0,0,COAL,0,0,STICK,0]]);
recipes.push(["Redstone Torch",REDSTONETORCH,[0,0,0,0,REDSTONE,0,0,STICK,0]]);
recipes.push(["Redstone Block",REDSTONE_BLOCK,[REDSTONE,REDSTONE,REDSTONE,REDSTONE,REDSTONE,REDSTONE,REDSTONE,REDSTONE,REDSTONE]]);
recipes.push(["Chest",CHEST,[WOOD_PLANK,WOOD_PLANK,WOOD_PLANK,WOOD_PLANK,0,WOOD_PLANK,WOOD_PLANK,WOOD_PLANK,WOOD_PLANK]]);
recipes.push(["Crafting Table",CRAFTING_TABLE,[0,0,0,WOOD_PLANK,WOOD_PLANK,0,WOOD_PLANK,WOOD_PLANK,0]]);
recipes.push(["Furnace",FURNACE,[COBBLESTONE,COBBLESTONE,COBBLESTONE,COBBLESTONE,0,COBBLESTONE,COBBLESTONE,COBBLESTONE,COBBLESTONE]]);
recipes.push(["Bucket",BUCKET,[0,0,0,IRON_INGOT,0,IRON_INGOT,0,IRON_INGOT,0]]);
recipes.push(["Flint and Steel",FLINT_AND_STEEL,[0,0,0,IRON_INGOT,0,0,0,FLINT,0]]);
recipes.push(["Wooden Axe",WOODEN_AXE,[WOOD_PLANK,WOOD_PLANK,0,WOOD_PLANK,STICK,0,0,STICK,0]]);
recipes.push(["Stone Axe",STONE_AXE,[COBBLESTONE,COBBLESTONE,0,COBBLESTONE,STICK,0,0,STICK,0]]);
recipes.push(["Iron Axe",IRON_AXE,[IRON_INGOT,IRON_INGOT,0,IRON_INGOT,STICK,0,0,STICK,0]]);
recipes.push(["Diamond Axe",DIAMOND_AXE,[DIAMOND,DIAMOND,0,DIAMOND,STICK,0,0,STICK,0]]);
recipes.push(["Golden Axe",GOLDEN_AXE,[GOLD,GOLD,0,GOLD,STICK,0,0,STICK,0]]);
recipes.push(["Wooden Hoe",WOODEN_HOE,[WOOD_PLANK,WOOD_PLANK,0,0,STICK,0,0,STICK,0]]);
recipes.push(["Stone Hoe",STONE_HOE,[COBBLESTONE,COBBLESTONE,0,0,STICK,0,0,STICK,0]]);
recipes.push(["Iron Hoe",IRON_HOE,[IRON_INGOT,IRON_INGOT,0,0,STICK,0,0,STICK,0]]);
recipes.push(["Diamond Hoe",DIAMOND_HOE,[DIAMOND,DIAMOND,0,0,STICK,0,0,STICK,0]]);
recipes.push(["Golden Hoe",GOLDEN_HOE,[GOLD,GOLD,0,0,STICK,0,0,STICK,0]]);
recipes.push(["Wooden Pickaxe",WOODEN_PICKAXE,[WOOD_PLANK,WOOD_PLANK,WOOD_PLANK,0,STICK,0,0,STICK,0]]);
recipes.push(["Stone Pickaxe",STONE_PICKAXE,[COBBLESTONE,COBBLESTONE,COBBLESTONE,0,STICK,0,0,STICK,0]]);
recipes.push(["Iron Pickaxe",IRON_PICKAXE,[IRON_INGOT,IRON_INGOT,IRON_INGOT,0,STICK,0,0,STICK,0]]);
recipes.push(["Diamond Pickaxe",DIAMOND_PICKAXE,[DIAMOND,DIAMOND,DIAMOND,0,STICK,0,0,STICK,0]]);
recipes.push(["Golden Pickaxe",GOLDEN_PICKAXE,[GOLD,GOLD,GOLD,0,STICK,0,0,STICK,0]]);
recipes.push(["Wooden Shovel",WOODEN_SHOVEL,[0,WOOD_PLANK,0,0,STICK,0,0,STICK,0]]);
recipes.push(["Stone Shovel",STONE_SHOVEL,[0,COBBLESTONE,0,0,STICK,0,0,STICK,0]]);
recipes.push(["Iron Shovel",IRON_SHOVEL,[0,IRON_INGOT,0,0,STICK,0,0,STICK,0]]);
recipes.push(["Diamond Shovel",DIAMOND_SHOVEL,[0,DIAMOND,0,0,STICK,0,0,STICK,0]]);
recipes.push(["Golden Shovel",GOLDEN_SHOVEL,[0,GOLD,0,0,STICK,0,0,STICK,0]]);
recipes.push(["Wooden Sword",WOODEN_SWORD,[0,WOOD_PLANK,0,0,WOOD_PLANK,0,0,STICK,0]]);
recipes.push(["Stone Sword",STONE_SWORD,[0,COBBLESTONE,0,0,COBBLESTONE,0,0,STICK,0]]);
recipes.push(["Iron Sword",IRON_SWORD,[0,IRON_INGOT,0,0,IRON_INGOT,0,0,STICK,0]]);
recipes.push(["Diamond Sword",DIAMOND_SWORD,[0,DIAMOND,0,0,DIAMOND,0,0,STICK,0]]);
recipes.push(["Golden Sword",GOLDEN_SWORD,[0,GOLD,0,0,GOLD,0,0,STICK,0]]);
recipes.push(["Fishing Rod",FISHING_ROD,[0,0,STICK,0,STICK,STRING,STICK,0,STRING]]);


//Add newly crafted item to the inventory (if it's not already there)
function addItemToInventory(){
  var inventoryIsFull=true;
  if (newItem!=0) {
    //First check if this item is not already in the inventory
    if (inventory.indexOf(newItem)==-1) {  
      //Then find an empty location in the inventory
      for (var i=0;i<inventory.length;i++) {
        if (inventory[i]==0) {
          //Empty location spotted. Add item to the inventory
          inventoryIsFull =false;
          inventory[i]=newItem;
          document.getElementById("inventory-"+i).innerHTML="<IMG src='http://www.101computing.net/mc/" + + newItem + "-0.png'>";
          break; 
        }
      }
      if (inventoryIsFull) alert("Inventory is full!");
    } else {
      alert("This item is already in your inventory!")
    }
  }
}

//A function to compare a recipe with the content of the craft table
function checkRecipe(recipe) {
  var match=true; 
  for (var i = 0; i < 9; i++) {
     if (recipe[i]!=craftTable[i]) {
       match=false;
       break;
     }
   }
  return match;
}

//A function to compare the craft table with all recipes to see if an item can be crafted
function craft() {
  //Check each recipe one at a time
  document.getElementById("result").innerHTML="";
  newItem="";
  for (var i = 0; i < recipes.length; i++) {
    if (checkRecipe(recipes[i][2])) {
      newItem=recipes[i][1];
      //Craft the new item!
      document.getElementById("result").innerHTML="<IMG src='http://www.101computing.net/mc/" + + recipes[i][1] + "-0.png'><br/>" + recipes[i][0] + "<BR/>Click on this item to add it to your inventory.";
       break;
    }
  }
  }

//Highlight inventory item when user click on it
function selectInventoryItem(cell_ID) {
  if (selectedCell) {
    selectedCell.style.backgroundColor="#8b8b8b";
  }
  selectedCell = document.getElementById("inventory-" + cell_ID);
  selectedCell.style.backgroundColor="#88FF88";
  selectedIngredient = inventory[cell_ID];
}

//Replace ingredient on craft table when the user click on one of the 9 cells of the craft table
function selectCraftTable(cell_ID) {
  var craftTableCell = document.getElementById("craftTable-" + cell_ID);
  if (craftTableCell.innerHTML=="") {
    if (selectedCell) {
      craftTableCell.innerHTML=selectedCell.innerHTML;
      craftTable[cell_ID]=selectedIngredient;
    }
  } else {
    craftTableCell.innerHTML="";
    craftTable[cell_ID]=0;
  }
  craft();
}
              
            
!
999px

Console