Todost - Todo

HTML

              
                <html lang="en" >
   <head>
      <script async src="https://www.googletagmanager.com/gtag/js?id=UA-57635392-5"></script>
      <script>
         window.dataLayer = window.dataLayer || [];
         function gtag(){dataLayer.push(arguments);}
         gtag('js', new Date());
         
         gtag('config', 'UA-57635392-5');
      </script>
      <title>Todost ✍️</title>
      <meta name="viewport" content="height=device-height, initial-scale=1, user-scalable=no">
      <meta name="description" content="Todost - Beautiful Todo list to uses 🍪 to track your tasks ! Made with ❤️ by Quentin Colus" />
      <link rel="shortcut icon" href="todost.png">
      <link href="https://fonts.googleapis.com/css?family=Nunito:400,700" rel="stylesheet">
      <meta charset="UTF-8">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
      <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
      <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css'>
      <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>
      <link rel="stylesheet" href="css/style.css">
   </head>
   <body>
      <div class="logo">
         <svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <desc>Created with Sketch.</desc>
            <defs>
               <linearGradient x1="34.9523037%" y1="0%" x2="116.039609%" y2="115.484477%" id="linearGradient-1">
                  <stop stop-color="#1700FF" offset="0%"></stop>
                  <stop stop-color="#B10EF1" offset="100%"></stop>
               </linearGradient>
               <rect id="path-2" x="19.8783454" y="5.46149939" width="67.2578578" height="67.2008596" rx="8.99999976"></rect>
               <filter x="-35.7%" y="-28.3%" width="162.4%" height="162.5%" filterUnits="objectBoundingBox" id="filter-3">
                  <feOffset dx="-3" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
                  <feGaussianBlur stdDeviation="6.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
                  <feColorMatrix values="0 0 0 0 0.0296505968   0 0 0 0 0.0172602666   0 0 0 0 0.100446429  0 0 0 0.423177083 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
               </filter>
               <linearGradient x1="0%" y1="0%" x2="115.291753%" y2="112.548614%" id="linearGradient-4">
                  <stop stop-color="#1700FF" offset="0%"></stop>
                  <stop stop-color="#9E0CF3" offset="83.2001616%"></stop>
                  <stop stop-color="#B10EF1" offset="100%"></stop>
               </linearGradient>
               <path d="M40.2086259,6.21042694 C39.2480415,5.24152695 38.1027468,4.75708888 36.7727039,4.75708888 C35.4426658,4.75708888 34.3096854,5.24152695 33.3737297,6.21042694 L16.3049725,23.7622477 L12.0193093,19.3649757 C11.0833536,18.3960804 9.9503732,17.9116376 8.62033507,17.9116376 C7.29029269,17.9116376 6.14499751,18.3960804 5.1844131,19.3649757 C4.24845898,20.3338709 3.78048896,21.5077058 3.78048896,22.8865186 C3.78048896,24.2653314 4.24845898,25.4391663 5.1844131,26.4080615 L12.8690505,34.3082476 C13.8296349,35.2771428 14.9749296,35.7615833 16.3049725,35.7615833 C17.6350106,35.7615833 18.767991,35.2771428 19.7039467,34.3082476 L40.2086259,13.2535128 C41.1445816,12.2597758 41.61255,11.0797257 41.61255,9.71333379 C41.61255,8.34694665 41.1445816,7.17932216 40.2086259,6.21042694 Z" id="path-5"></path>
               <filter x="-51.5%" y="-62.9%" width="203.1%" height="225.8%" filterUnits="objectBoundingBox" id="filter-6">
                  <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
                  <feGaussianBlur stdDeviation="6.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
                  <feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.588937953 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
               </filter>
            </defs>
            <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
               <g id="Artboard-2" transform="translate(-214.000000, -272.000000)">
                  <g id="Group-4" transform="translate(201.000000, 269.000000)">
                     <g id="Group-3" transform="translate(58.787474, 58.534712) rotate(-6.000000) translate(-58.787474, -58.534712) translate(5.642436, 5.434712)">
                        <g id="Group-2" transform="translate(52.899385, 53.035097) rotate(7.000000) translate(-52.899385, -53.035097) translate(5.609309, 5.785097)">
                           <path d="M20.0219734,15.1240886 L74.1829282,14.1930575 C79.1527566,14.1076258 83.2508546,18.0672116 83.3362864,23.03704 C83.3371726,23.0885978 83.3376158,23.1401624 83.3376158,23.1917278 L83.3376158,72.0429044 C83.3376158,76.9531616 79.4018358,80.9571794 74.4923039,81.0415747 L20.3313491,81.9726057 C15.3615207,82.0580374 11.2634227,78.0984516 11.1779909,73.1286232 C11.1771047,73.0770654 11.1766615,73.0255009 11.1766615,72.9739354 L11.1766615,24.1227589 C11.1766615,19.2125016 15.1124415,15.2084838 20.0219734,15.1240886 Z" id="Rectangle" fill="url(#linearGradient-1)" transform="translate(47.257139, 48.082832) scale(-1, -1) rotate(-25.000000) translate(-47.257139, -48.082832) "></path>
                           <g id="Rectangle" transform="translate(53.507274, 39.061929) rotate(-10.000000) translate(-53.507274, -39.061929) ">
                              <use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-2"></use>
                              <use fill="#FBFBFB" fill-rule="evenodd" xlink:href="#path-2"></use>
                           </g>
                        </g>
                     </g>
                     <g id="Group-5" transform="translate(43.000000, 26.000000)">
                        <path d="M41.1093892,10.5623533 C40.1488048,9.59345333 39.0035101,9.10901526 37.6734673,9.10901526 C36.3434291,9.10901526 35.2104488,9.59345333 34.274493,10.5623533 L17.2057358,28.1141741 L12.9200727,23.716902 C11.9841169,22.7480068 10.8511366,22.263564 9.52109843,22.263564 C8.19105605,22.263564 7.04576086,22.7480068 6.08517646,23.716902 C5.14922234,24.6857973 4.68125232,25.8596322 4.68125232,27.238445 C4.68125232,28.6172578 5.14922234,29.7910927 6.08517646,30.7599879 L13.7698139,38.660174 C14.7303983,39.6290692 15.875693,40.1135096 17.2057358,40.1135096 C18.535774,40.1135096 19.6687543,39.6290692 20.6047101,38.660174 L41.1093892,17.6054392 C42.045345,16.6117022 42.5133134,15.4316521 42.5133134,14.0652602 C42.5133134,12.698873 42.045345,11.5312485 41.1093892,10.5623533 Z" id="Page-1" fill="url(#linearGradient-4)" opacity="0.3" transform="translate(23.597283, 24.611262) rotate(-16.000000) translate(-23.597283, -24.611262) "></path>
                        <path d="M42.0101526,14.2623533 C41.0495682,13.2934533 39.9042735,12.8090153 38.5742306,12.8090153 C37.2441925,12.8090153 36.1112121,13.2934533 35.1752564,14.2623533 L18.1064992,31.8141741 L13.820836,27.416902 C12.8848803,26.4480068 11.7518999,25.963564 10.4218618,25.963564 C9.09181941,25.963564 7.94652422,26.4480068 6.98593982,27.416902 C6.78271177,27.6272827 6.60154798,27.8473258 6.4424483,28.0770317 C5.8688243,28.9052219 5.58201568,29.8590202 5.58201568,30.938445 C5.58201568,32.3172578 6.04998569,33.4910927 6.98593982,34.4599879 L14.6705772,42.360174 C15.6311616,43.3290692 16.7764563,43.8135096 18.1064992,43.8135096 C19.4365373,43.8135096 20.5695177,43.3290692 21.5054734,42.360174 L42.0101526,21.3054392 C42.9461083,20.3117022 43.4140767,19.1316521 43.4140767,17.7652602 C43.4140767,16.398873 42.9461083,15.2312485 42.0101526,14.2623533 Z" id="Page-1" fill="url(#linearGradient-4)" opacity="0.2" transform="translate(24.498046, 28.311262) rotate(-16.000000) translate(-24.498046, -28.311262) "></path>
                        <g id="Page-1" transform="translate(22.696519, 20.259336) rotate(-16.000000) translate(-22.696519, -20.259336) ">
                           <use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-5"></use>
                           <use fill="url(#linearGradient-4)" fill-rule="evenodd" xlink:href="#path-5"></use>
                        </g>
                     </g>
                  </g>
               </g>
            </g>
         </svg>
      </div>
      <body class="body">
         <div class="container">
            <div class="today"></div>
            <div class="row">
               <div class="col-md-4 col-md-offset-4 col-xs-6 col-xs-offset-3">
                  <div class="add-control">
                     <div class="form-group has-feedback">
                        <input type="text" class="form-control" placeholder="✍️ Add item..."/>
                        <i class="fa fa-plus form-control-feedback add-btn" title="Add item"></i>
                     </div>
                  </div>
                  <p class="err text-danger text-center hidden"><i class="fa fa-warning"></i> Oops! Please, enter name item</p>
                  <p class="no-items text-muted text-center hidden"><i class="fa fa-ban"></i></p>
                  <ul class="todo-list">
                  </ul>
               </div>
            </div>
         </div>
         </section>
         </main>
         </div>
         <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
         <script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
         <script  src="js/index.js"></script>
         <script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
   </body>
   <div class"footer">
      <h4>
         Made with ❤️ by <a href="http://quentincolus.com">Quentin </a>
         <p> </p>
         Thanks to <a href="https://www.linkedin.com/in/antoine-renault-a84b6398/">Antoine</a> for helping ! 🚀<a href="http://todost.quentincolus.com/"> Todost</a>
      </h4>
   </div>
   </body>

CSS

              
                .body {
  background: #020631;
  font: 14px 'Nunito', sans-serif;
}
.today{
  font-size: 22px;
}

  .animated.bounceIn, .animated.bounceOut, .animated.flipOutX, .animated.flipOutY {
    font-size: 13px;
  }

.container {
  padding-top: 75px;
}
.todo-list {
  margin: 20px 0;
}
.todo-list li {
  background: #fff;
  border-radius: 5px;
  margin-bottom: 7px;
  position: relative;
  word-break: break-word;
}
.todo-list li.danger {
  background: rgb(85, 41, 220);
}
.todo-list li.danger label {
  text-decoration: line-through;
  color: #fff;
}
.todo-list li.danger label .checkbox-mask {
  border-color: transparent;
}
.todo-list li.danger label .checkbox-mask:after {
  content: '\f00c';
  font-family: 'FontAwesome';
  display: block;
  position: absolute;
  top: -3px;
  left: 0;
}
.todo-list li .checkbox {
  margin: 0;
  padding: 10px 15px;
  border-radius: 5px;
}
.todo-list li label {
  display: block;
  padding-right: 10px;
}
.todo-list li label input[type="checkbox"] {
  visibility: hidden;
}
.todo-list li label .checkbox-mask {
  display: block;
  border: 2px solid #666;
  width: 12px;
  height: 12px;
  border-radius: 2.5px;
  position: absolute;
  margin-left: -20px;
  margin-top: 4px;
}
.todo-list li .close {
  display: none;
  position: absolute;
  width: 12px;
  height: 16px;
  top: 50%;
  margin-top: -8px;
  right: 10px;
  font-size: 16px;
}
.todo-list li .close .fa {
  line-height: 16px;
}
.todo-list li:hover .close {
  display: block;
}
.has-feedback .fa {
  line-height: 35px;
  cursor: pointer;
  pointer-events: auto;
  z-index: 10;
  display: block;
  color: #666;
  -webkit-transition: color 0.15s linear;
  transition: color 0.15s linear;
}
.has-feedback .fa:hover {
  color: #999;
}
.add-control {
  margin-top: 20px;
  position: relative;
}
.add-control .form-control {
  padding-right: 25px;
}
.add-control .refresh {
  position: absolute;
  top: 8px;
  right: 0;
  font-size: 14px;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  margin-right: -10px;
  cursor: pointer;
  color: #9da1af;
  -webkit-transition: color 0.15s linear;
  transition: color 0.15s linear;
}
.add-control .refresh:hover {
  color: #666;
}
.form-control,
.form-control:focus,
.form-control:active,
.form-control:active:focus {
  border: none;
  padding: 10px 15px;
  outline: none;
}
.form-control {
  -webkit-box-shadow: none;
          box-shadow: none;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.form-control:focus {
  -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.2);
          box-shadow: 0 0 15px rgba(0,0,0,0.2);
}
.separator {
  margin: 15px auto;
  width: 50%;
  height: 1px;

}
.animated {
  -webkit-animation-duration: 0.45s;
          animation-duration: 0.45s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
.animated.fast {
  -webkit-animation-duration: 0.25s;
          animation-duration: 0.25s;
}

.today{
  text-align: center;
      color: #fff;
}


.zero{

    top: 8px;
    right: 0;
    font-size: 14px;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    margin-right: -10px;
    cursor: pointer;
    color: #9da1af;
    -webkit-transition: color 0.15s linear;
    transition: color 0.15s linear;
}


$c-gray: #8d959b;
$c-light: #f9f9f9;
$c-dark: #404060;
$c-red: #e96575;
$c-blue: #4b96f0;
// Base Classes
.group:after {
  content: "";
  display: table;
  clear: both;
}
.btn_wrapper {
  @extend .group;
  max-width: 250px;
  margin: 0 auto;
}


button {

      font-size: 16px;
      color: #ffffff;
      background: #fff0;
      padding: 10px 20px;
      transition: all 0.3s;
      outline: none;
      border-color: #FFF;
      border-radius: 35px;
      margin-left: 5px;
    margin-right: 5px;
  }
}
button[disabled] {
  color: $c-gray !important;
  background: #fff !important;
}
.output {
  padding-bottom: 10px;

  button {
    color: $c-blue;
    &:hover,
    &:focus {
      transform: scale(1.5);
      background: transparent;
    }
  }
}


#start {
    background: #6200ff;
    border: none;
    border-radius: 20px;
    padding-left: 35px;
    padding-right: 35px;
}

#start:hover {


box-shadow: 0 0 25px 0 #452579;
    color: white;
}

#inc{
  border: none;
    font-size: 40px;
    border-radius: 20px;
    padding-left: 35px;
    padding-right: 35px;
}
#dec{

    border: none;
    font-size: 40px;
    border-radius: 20px;
    padding-left: 35px;
    padding-right: 35px;
}

#reset {

  color: $c-red;
  &:hover,
  &:focus {
    background-color: $c-red;
    color: #fff;
    border-radius: 20px;
    padding-left: 35px;
    padding-right: 35px;
  }
}

.pomodoro {
    text-align: center;
}

p {
    margin: 15px 0 10px;
    font-size: 46px;
    font-weight: 700;
    color: #FFF;
   
}


.fa-ban:before {
    content: "\f05e";
    color: #8c8c8c;
    font-size: 29px;
}


.logo {
    text-align: center;
    margin-top: 30px;
    margin-bottom: -50px;
}


.h4, h4 {
    font-size: 16px;
    color: #fff;
    text-align: center;
    margin-top: 40px;
}

a:focus, a:hover {
    color: #fbfbfb;
  text-decoration: none;
}

.fa-remove:before, .fa-close:before, .fa-times:before {
    content: "\f00d";
    color: #000;
}



@media (max-width: 768px){
.col-xs-offset-3 {
    margin-left: 10%;
}
}

@media (max-width: 768px){
.col-xs-6 {
  width: 80%;
}
}
@viewport {
   width: device-width; 
   zoom: 1; 
}

@media (min-width: 992px){
.container {
    width: 100%;
    max-width: 1150PX;
}
}

@media (max-width: 680px){
svg {
    width: 70px;
    height: 70px;

}
}

.todo-list input[type="checkbox"] {
    opacity: 0;
}

JS

              
                var state = [];

function setDefaultState() {
  var id = generateID();
  var baseState = {};
  baseState[id] = {
    status: "new",
    id: id,
    title: "This site uses 🍪to keep track of your tasks"
  };
  syncState(baseState);
}

function generateID() {
  var randLetter = String.fromCharCode(65 + Math.floor(Math.random() * 26));
  return randLetter + Date.now();
}

function pushToState(title, status, id) {
  var baseState = getState();
  baseState[id] = { id: id, title: title, status: status };
  syncState(baseState);
}

function setToDone(id) {
  var baseState = getState();
  if (baseState[id].status === 'new') {
    baseState[id].status = 'done'
  } else {
    baseState[id].status =  'new';
  }

  syncState(baseState);
}

function deleteTodo(id) {
  console.log(id)
  var baseState = getState();
  delete baseState[id]
  syncState(baseState)
}

function resetState() {
  localStorage.setItem("state", null);
}

function syncState(state) {
  localStorage.setItem("state", JSON.stringify(state));
}

function getState() {
  return JSON.parse(localStorage.getItem("state"));
}

function addItem(text, status, id, noUpdate) {
  var id = id ? id : generateID();
  var c = status === "done" ? "danger" : "";
  var item =
    '<li data-id="' +
    id +
    '" class="animated flipInX ' +
    c +
    '"><div class="checkbox"><span class="close"><i class="fa fa-times"></i></span><label><span class="checkbox-mask"></span><input type="checkbox" />' +
    text +
    "</label></div></li>";

  var isError = $(".form-control").hasClass("hidden");

  if (text === "") {
    $(".err")
      .removeClass("hidden")
      .addClass("animated bounceIn");
  } else {
    $(".err").addClass("hidden");
    $(".todo-list").append(item);
  }

  $(".refresh").removeClass("hidden");

  $(".no-items").addClass("hidden");

  $(".form-control")
    .val("")
    .attr("placeholder", "✍️ Add item...");
  setTimeout(function() {
    $(".todo-list li").removeClass("animated flipInX");
  }, 500);

  if (!noUpdate) {
    pushToState(text, "new", id);
  }
}

function refresh() {
  $(".todo-list li").each(function(i) {
    $(this)
      .delay(70 * i)
      .queue(function() {
        $(this).addClass("animated bounceOutLeft");
        $(this).dequeue();
      });
  });

  setTimeout(function() {
    $(".todo-list li").remove();
    $(".no-items").removeClass("hidden");
    $(".err").addClass("hidden");
  }, 800);
}

$(function() {
  var err = $(".err"),
    formControl = $(".form-control"),
    isError = formControl.hasClass("hidden");

  if (!isError) {
    formControl.blur(function() {
      err.addClass("hidden");
    });
  }

  $(".add-btn").on("click", function() {
    var itemVal = $(".form-control").val();
    addItem(itemVal);
    formControl.focus();
  });

  $(".refresh").on("click", refresh);

  $(".todo-list").on("click", 'input[type="checkbox"]', function() {
    var li = $(this)
      .parent()
      .parent()
      .parent();
    li.toggleClass("danger");
    li.toggleClass("animated flipInX");

    setToDone(li.data().id);

    setTimeout(function() {
      li.removeClass("animated flipInX");
    }, 500);
  });

  $(".todo-list").on("click", ".close", function() {
    var box = $(this)
      .parent()
      .parent();

    if ($(".todo-list li").length == 1) {
      box.removeClass("animated flipInX").addClass("animated                bounceOutLeft");
      setTimeout(function() {
        box.remove();
        $(".no-items").removeClass("hidden");
        $(".refresh").addClass("hidden");
      }, 500);
    } else {
      box.removeClass("animated flipInX").addClass("animated bounceOutLeft");
      setTimeout(function() {
        box.remove();
      }, 500);
    }

    deleteTodo(box.data().id)
  });

  $(".form-control").keypress(function(e) {
    if (e.which == 13) {
      var itemVal = $(".form-control").val();
      addItem(itemVal);
    }
  });
  $(".todo-list").sortable();
  $(".todo-list").disableSelection();
});

var todayContainer = document.querySelector(".today");


var d = new Date();


var weekday = new Array(7);
weekday[0] = "Sunday 🖖";
weekday[1] = "Monday 💪😀";
weekday[2] = "Tuesday 😜";
weekday[3] = "Wednesday 😌☕️";
weekday[4] = "Thursday 🤗";
weekday[5] = "Friday 🍻";
weekday[6] = "Saturday 😴";


var n = weekday[d.getDay()];


var randomWordArray = Array(
  "Oh my, it's ",
  "Whoop, it's ",
  "Happy ",
  "Seems it's ",
  "Awesome, it's ",
  "Have a nice ",
  "Happy fabulous ",
  "Enjoy your "
);

var randomWord =
  randomWordArray[Math.floor(Math.random() * randomWordArray.length)];


todayContainer.innerHTML = randomWord + n;

$(document).ready(function() {
  var state = getState();

  if (!state) {
    setDefaultState();
    state = getState();
  }

  Object.keys(state).forEach(function(todoKey) {
    var todo = state[todoKey];
    addItem(todo.title, todo.status, todo.id, true);
  });

  var mins, secs, update;

  init();
  function init() {
    (mins = 25), (secs = 59);
  }


  set();
  function set() {
    $(".mins").text(mins);
  }


  $("#start").on("click", start_timer);
  $("#reset").on("click", reset);
  $("#inc").on("click", inc);
  $("#dec").on("click", dec);

  function start_timer() {

    set();

    $(".dis").attr("disabled", true);

    $(".mins").text(--mins);
    $(".separator").text(":");
    update_timer();

    update = setInterval(update_timer, 1000);
  }

  function update_timer() {
    $(".secs").text(secs);
    --secs;
    if (mins == 0 && secs < 0) {
      reset();
    } else if (secs < 0 && mins > 0) {
      secs = 59;
      --mins;
      $(".mins").text(mins);
    }
  }


  function reset() {
    clearInterval(update);
    $(".secs").text("");
    $(".separator").text("");
    init();
    $(".mins").text(mins);
    $(".dis").attr("disabled", false);
  }


  function inc() {
    mins++;
    $(".mins").text(mins);
  }


  function dec() {
    if (mins > 1) {
      mins--;
      $(".mins").text(mins);
    } else {
      alert("This is the minimum limit.");
    }
  }
});

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