daily pastebin goal
25%
SHARE
TWEET

Untitled

a guest Jun 13th, 2018 53 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <div id="MainContainer">
  2. <div id="Left">
  3.   <p id="FontSettings">Font settings</p>
  4.   <p id="Font">Ab</p>
  5.   <p id="FontName">
  6.     Roboto <span id="FontWeight">Normal</span></p>
  7. </div>
  8. <div id="Right"><sup id="StandardFontSup">Standard font</sup>
  9.   <select id="FontSelect" onchange="EchoFontName(); changeFont (this);">
  10.     <option value="Roboto">Roboto</option>
  11.     <option value="Lato">Lato</option>
  12.     <option value="Raleway">Raleway</option>
  13.     <option value="Ubuntu">Ubuntu</option>
  14.   </select><sup id="StyleSup">Style</sup>
  15.   <select id="StyleSelect" onchange="EchoStyleName(); changeStyle (this);">
  16.     <option value="Thin">Thin</option>
  17.     <option value="Light">Light</option>
  18.     <option value="Normal" selected="selected">Normal</option>
  19.     <option value="Bold">Bold</option>
  20.   </select>
  21.   <div id="ColorTilesContainer">
  22.     <div id="blue" onclick="blueCheckToggle()"></div>
  23.     <div id="blueCheck" onclick="blueCheckToggle()"></div>
  24.     <div id="orange" onclick="orangeCheckToggle()"></div>
  25.     <div id="orangeCheck" onclick="orangeCheckToggle()"></div>
  26.     <div id="green" onclick="greenCheckToggle()"></div>
  27.     <div id="greenCheck" onclick="greenCheckToggle()"></div>
  28.     <div id="teal" onclick="tealCheckToggle()"></div>
  29.     <div id="tealCheck" onclick="tealCheckToggle()"></div>
  30.     <div id="custom" onclick=""></div>
  31.   </div>
  32. </div>
  33.    
  34. var changeFont = function(font){
  35.   console.log(font.value)
  36.     document.getElementById("MainContainer").style.fontFamily = font.value;
  37. }
  38. function EchoFontName() {
  39.   var f = document.getElementById("FontName");
  40.   var FontNameVar = document.getElementById("FontSelect").value;
  41.   f.textContent = FontNameVar;
  42. }
  43. var changeStyle = function(font){
  44.   console.log(font.value)
  45.     document.getElementById("MainContainer").style.fontWeight = font.value;
  46. }
  47. function EchoStyleName() {
  48.   var f = document.getElementById("FontWeight");
  49.   var FontNameVar = document.getElementById("StyleSelect").value;
  50.   f.textContent = FontNameVar;
  51. }
  52. var x = document.getElementById("blueCheck");
  53. var t = document.getElementById("orangeCheck");
  54. var r = document.getElementById("greenCheck");
  55. var l = document.getElementById("tealCheck");
  56. var p = document.getElementById("Left");
  57.  
  58. function blueCheckToggle() {
  59.   if (x.style.opacity === "0") {
  60.   x.style.opacity = "1";
  61.   t.style.opacity = "0";
  62.   r.style.opacity = "0";
  63.   l.style.opacity = "0";
  64.   p.style.background = "$lightblue";
  65.   }
  66.   else {
  67.     x.style.opacity = "0";
  68.   }
  69. }
  70. function orangeCheckToggle() {
  71.   if (t.style.opacity === "0") {
  72.   x.style.opacity = "0";
  73.   t.style.opacity = "1";
  74.   r.style.opacity = "0";
  75.   l.style.opacity = "0";
  76.   p.style.background = "$orange";
  77.   }
  78.   else {
  79.     t.style.opacity = "0";
  80.   }
  81. }
  82. function greenCheckToggle() {
  83.   if (r.style.opacity === "0") {
  84.   x.style.opacity = "0";
  85.   t.style.opacity = "0";
  86.   r.style.opacity = "1";
  87.   l.style.opacity = "0";
  88.   p.style.background = "$green";
  89.   }
  90.   else {
  91.     r.style.opacity = "0";
  92.   }
  93. }
  94. function tealCheckToggle() {
  95.   if (l.style.opacity === "0") {
  96.   x.style.opacity = "0";
  97.   t.style.opacity = "0";
  98.   r.style.opacity = "0";
  99.   l.style.opacity = "1";
  100.   p.style.background = "$teal";
  101.   }
  102.   else {
  103.     p.style.opacity = "0";
  104.   }
  105. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top