<body>
  <div class="window">
    <div class="window__menu">
    </div>
    <div class="window__header">
      <span class="logo">Grazie</span>
      <span class="menu">&#9776;</span>
    </div>
    <div class="window__body">
      <form>
        <p>Total bill</p>
        <input type="number" class="bill" id="bill">
        <p>Number of people</p>
        <input type="number" class="diners">
        <p>How was your service?</p>
        <div class="emoji-toggle emoji-happy">
          <input type="checkbox" id="toggle1" class="toggle">
          <div class="emoji"></div>
          <label for="toggle1" class="well"></label>
        </div>

        <input Class="enter " type="button" value="Enter" onclick="return insertion()">
      </form>

      <div class="window__output">
        <p>Each person pays:</p>
        <div class="calculated-output">
          
        </div>
      </div>
    </div>
  </div>
</body>
/* Vars */
//Colours
$mutedOrange: #e98074;
$orange: #e85a4f;
$beige: #efebe9;
$dark: #8e8d8a;

//Typography
$logotype: "pacifico", cursive;
$body: "news cycle", sans-serif;

// Extensions
%placement {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

%typography {
  font-family: $body;
  text-align: center;
  letter-spacing: 1px;
  color: $dark;
  font-weight: 600;
  font-size: 14px;
}


.window {
  @extend %placement;
  @extend %typography;
  width: 250px;
  height: 480px;
  box-shadow: 4px 3px 7px 2px #00000040;
  background-color: $dark;
  border-radius: 30px;
  border: 12px solid white;
}

.window__menu {
  height: 18px;
  border-radius: 20px 20px 0px 0px;
  background: $dark;
}

.window__header {
  height: 45px;
  background: $mutedOrange;
  display: flex;
  flex-direction: column;
  color: $beige;
  .logo {
    font-size: 22px;
    font-family: $logotype;
    align-self: center;
  }
  .menu {
    align-self: flex-start;
    font-size: 22px;
    margin: -35px 14px;
  }
}

.window__body {
  background: $beige;
  height: 400px;
}

form {
  display: flex;
  flex-direction: column;
  align-items: center;
  input {
    background-color: lighten($dark, 30%);
    padding:.2rem;
    border: 0;
    border-radius: 8px;
    color: $dark;
    &:focus {
      outline: 0;
    }
  }
  input.enter {
    border-radius: 8px;
    padding: 0.2rem 0.8rem;
    margin: 1rem;
    text-transform: uppercase;
    background: lighten($orange, 8%);
    color: $beige;
    font-family: inherit;
    font-size: 12px;
    letter-spacing: 1.2px;
    &:hover {
      background: lighten($orange, 0%);
    }
  }
}

.calculated-output {
  margin: 1rem;
  color: $orange;
  border: 1pt dashed $orange;
  border-radius: 8px;
}

// Emoji toggle

.emoji-toggle {
  position: relative;
  width: 60px;
  margin: 20px auto;
  .well {
    display: block;
    background-color: lighten($dark, 20%);
    height: 10px;
    border-radius: 10px;
    cursor: pointer;
  }
  .toggle {
    opacity: 0;
    border: 0;
    outline: none;
    height: 100%;
    width: 100%;
    background: transparent;
    position: absolute;
    cursor: pointer;
    z-index: 100;
    ~ .emoji:before {
      content: "\01F431";
      position: absolute;
      left: -1px;
      top: -18px;
      font-size: 28px;
      transition: 0.2s;
    }
    &:checked {
      ~ .emoji:before {
        left: 100%;
        margin-left: -0.9em;
      }
    }
    ~ label {
      white-space: nowrap;
      &:before {
        display: none;
        position: absolute;
        right: 100%;
        margin-right: 5px;
        top: 0;
      }
      &:after {
        position: absolute;
        left: 100%;
        margin-left: 5px;
        top: 0;
        display: none;
      }
    }
  }
}

@mixin emojiType($leftEmoji, $rightEmoji, $leftLabel, $rightLabel) {
  .toggle {
    ~ .emoji:before {
      content: $leftEmoji;
    }
    &:checked {
      ~ .emoji:before {
        content: $rightEmoji;
      }
    }
    ~ label {
      &:before {
        content: $leftLabel;
      }
      &:after {
        content: $rightLabel;
      }
    }
  }
}

.emoji-happy {
  @include emojiType(
    "\1f60a", "\1f61e", "Good", "Bad"
  );
}
function gratuityCalc() {
  var diners = document.querySelector("input.diners");
  var bill = document.querySelector("input.bill");
  let totalCost = ( bill.value / 100 ) * 20;
  let individualTip = totalCost/diners.value;
  return Math.round(individualTip);
}

 function insertion(){
   let placeholder = document.querySelector("div.calculated-output");
   let appOutput = document.createElement("span");
   appOutput.textContent = '£' + gratuityCalc();
   placeholder.appendChild(appOutput);
 }




External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.