<div id="MainContainer">
<div id="Left">
  <p id="FontSettings">Font settings</p>
  <p id="Font">Ab</p>
  <p id="FontName">
    Roboto <span id="FontWeight">Normal</span></p>
</div>
<div id="Right"><sup id="StandardFontSup">Standard font</sup>
  <select id="FontSelect" onchange="EchoFontName(); changeFont (this);">
    <option value="Roboto">Roboto</option>
    <option value="Lato">Lato</option>
    <option value="Raleway">Raleway</option>
    <option value="Ubuntu">Ubuntu</option>
  </select><sup id="StyleSup">Style</sup>
  <select id="StyleSelect" onchange="EchoStyleName(); changeStyle (this);">
    <option value="Thin">Thin</option>
    <option value="Light">Light</option>
    <option value="Normal" selected="selected">Normal</option>
    <option value="Bold">Bold</option>
  </select>
  <div id="ColorTilesContainer">
    <div id="blue" onclick="blueCheckToggle()"></div>
    <div id="blueCheck" onclick="blueCheckToggle()"></div>
    <div id="orange" onclick="orangeCheckToggle()"></div>
    <div id="orangeCheck" onclick="orangeCheckToggle()"></div>
    <div id="green" onclick="greenCheckToggle()"></div>
    <div id="greenCheck" onclick="greenCheckToggle()"></div>
    <div id="teal" onclick="tealCheckToggle()"></div>
    <div id="tealCheck" onclick="tealCheckToggle()"></div>
    <div id="custom" onclick=""></div>
  </div>
</div>

var changeFont = function(font){
  console.log(font.value)
    document.getElementById("MainContainer").style.fontFamily = font.value;
}
function EchoFontName() {
  var f = document.getElementById("FontName");
  var FontNameVar = document.getElementById("FontSelect").value;
  f.textContent = FontNameVar;
}
var changeStyle = function(font){
  console.log(font.value)
    document.getElementById("MainContainer").style.fontWeight = font.value;
}
function EchoStyleName() {
  var f = document.getElementById("FontWeight");
  var FontNameVar = document.getElementById("StyleSelect").value;
  f.textContent = FontNameVar;
}
var x = document.getElementById("blueCheck");
var t = document.getElementById("orangeCheck");
var r = document.getElementById("greenCheck");
var l = document.getElementById("tealCheck");
var p = document.getElementById("Left");

function blueCheckToggle() {
  if (x.style.opacity === "0") {
  x.style.opacity = "1";
  t.style.opacity = "0";
  r.style.opacity = "0";
  l.style.opacity = "0";
  p.style.background = "$lightblue";
  }
  else {
    x.style.opacity = "0";
  }
}
function orangeCheckToggle() {
  if (t.style.opacity === "0") {
  x.style.opacity = "0";
  t.style.opacity = "1";
  r.style.opacity = "0";
  l.style.opacity = "0";
  p.style.background = "$orange";
  }
  else {
    t.style.opacity = "0";
  }
}
function greenCheckToggle() {
  if (r.style.opacity === "0") {
  x.style.opacity = "0";
  t.style.opacity = "0";
  r.style.opacity = "1";
  l.style.opacity = "0";
  p.style.background = "$green";
  }
  else {
    r.style.opacity = "0";
  }
}
function tealCheckToggle() {
  if (l.style.opacity === "0") {
  x.style.opacity = "0";
  t.style.opacity = "0";
  r.style.opacity = "0";
  l.style.opacity = "1";
  p.style.background = "$teal";
  }
  else {
    p.style.opacity = "0";
  }
}