<main>
  <header>
    <h1 class="text-5xl font-light">Typescript Today</h1>
    <div class="text-2xl mb-4 text-indigo-400 uppercase ">Dynamic Typing</div>
  </header>
  
  <p class="mt-8 px-4 prose">
    Below is the ouput for the script running.
    View the JS editor window to see the code.
  </p>
  <div class="code-block output">
      <div class="title">Ouput</div>
      <div class="inner" id="output"></div>
</div>

</main>

// these get used often so in the interest of reducing code writing (and consistency) we are using css-classes
main {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 2rem 0.5rem;
}
header {
  width: 100%;
  padding-bottom: 0.25rem;
  border-bottom: solid 4px #cccccc;
  border-radius: 2px;
  text-align: center;
}

p { margin-bottom: 1rem; }

.prose {
  font-family: 'Poppins', sans-serif;
  font-size: 1.1rem;
  font-weight: 400;
}

$code-color-bg: #ffffff;
$code-color-text: #666666;
$code-color-border: #cccccc;
$code-color-title: #ffffff;
$output-color-bg: #444444;
$output-color-text: #ffffff;
$output-color-border: #000000;
$output-color-title: #ffffff;

.code-block {
  position: relative;
  padding: 0.5rem 0.5rem;
  margin: 1rem 0;
  
  .title {
    position: absolute;
    display: inline-block;
    top: 0; right: 0;
    padding: 1px 4px;
    border-radius: 4px;
    font-family: monospace; 
    font-size: 1rem; 
    text-align: right; 
    margin: 0 1rem;
    background-color: $code-color-border;
    color: $code-color-title;
  }

  .inner {
    background-color: $code-color-bg;
    color: $code-color-text;
    padding: .5rem 1rem;
    border: solid 2px $code-color-border;
    border-left-width: 1rem; 
    border-radius: .5rem;
  }
  
  &.output {
    .title {
      background-color: $output-color-border;
      color: $output-color-title;
    }
    .inner {
      background-color: $output-color-bg;
      color: $output-color-text;
      border-color: $output-color-border; 
    }
  }
}


.actions {
  margin: 0.25rem 0;
  display: flex;
  align-items: center;
  & > * { margin-right: 1rem; margin-left: 0; }
  &.right {
    justify-content: flex-end;
    & > * { margin-right: 0; margin-left: 1rem; }
  }
}
button {
  padding: 0.25rem 1rem;
  border: solid 1px #cccccc;
  border-radius: 0.5rem;
  cursor: pointer;
  background: #f0f0f0;
  color: #666666;
  font-weight: bold;
  transition: all .3s ease-in-out;
  &:hover {
    color: #000000;
    background: #dddddd;
  }
}
View Compiled 
/*
  * Demostration of Javascript's dynamic typing.
  * Notice how the `age` variable's type changes as we change it's value
  * 
  * NOTES...
  *   This script makes use of our custom logger (see https://hallpass-academy.netlify.app/js/logger.js)
  *   We write the JS operator `typeof` as if it were a function (wrapping the var in parentheses).  This is just our preference. 
*/

const logger = new Logger('output');  

let age = 25;                 
logger.log(typeof(age)); 

age = `${age} years old`;     
logger.log(typeof(age));

age = {
  years: 15,
  months: 4,
  days: 2,
  minor: false
};                            
logger.log(typeof(age));

age = true;
logger.log(typeof(age));

age = Symbol();
logger.log(typeof(age));

age = undefined;
logger.log(typeof(age));

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css

External JavaScript

  1. https://hallpass-academy.netlify.app/js/logger.js