ann-dev/index.html

## index.html
<!--Made while following two tutorial by Zell Liew from FreeCodeCamp, LINK to Tutorial: https://bit.ly/2PAeKUy LINK to Starter File: https://codepen.io/zellwk/pen/pLgmGL-->
<body>
  <div class="container">
    <p>Too lazy to calculate, eh?*&nbsp;🙈</p>
  <div class="calc">
    <div class="calc-display">0</div>
    <!--Keys-START-->
    <div class="calc-key">
      <button class="key-op">+</button>
      <button class="key-op">-</button>
      <button class="key-op">&times;</button>
      <button class="key-op" data-action="divide">÷</button>
      <button class="key-norm">7</button>
      <button class="key-norm">8</button>
      <button class="key-norm">9</button>
      <button class="key-norm">4</button>
      <button class="key-norm">5</button>
      <button class="key-norm">6</button>
      <button class="key-norm">1</button>
      <button class="key-norm">2</button>
      <button class="key-norm">3</button>
      <button class="key-norm">0</button>
      <button class="key-norm" data-action="decimal">.</button>
      <button class="key-norm" data-action="clear">AC</button>
      <button class="key-eq" data-action="calculate">=</button>
    </div>
    </div>
    <div class="themer">
    <button class="switch opt1"></button>
      <button class="switch opt2"></button>
      <button class="switch opt3"></button>
    </div>
    <p class="small-text">Try changing colours, too!*</p>
    <p class="mini-text">*Js functions coming soon...<br/>@Merkund</p>
    </div>
    </div>
</body>

## script.js
//Coming soon!

## simple-calculator.markdown

      
    Raw
  

              simple-calculator.markdown
            
          
    Simple Calculator

Calculator made with HTML & Sass (first try). For now it doesn't work, sorry!
A Pen by Anno H. on CodePen.
License.

  
## style.sass
//Trying out Sass for the first time, please don't bite if it looks messy...

//Colours
$blue: #2196f3
$dark-grey: #333
$light-grey: #eee
$pastel: #8EC5FC
$purple: #9c27b0
$violet: #e91e63
$white: #ffffff

//Fonts
@import url('https://fonts.googleapis.com/css?family=Quicksand:400,500')
$title-text: 'Quicksand', sans-serif
$big-key: 1.25em

//CSS Resets
html
  box-sizing: border-box

*,
*::before,
*::after
  box-sizing: inherit

body
  align-items: center
  display: flex
  height: 100vh
  justify-content: center

body,
p
  margin: 0

//Style

html
  display: grid
  min-height: 100%

body
  display: grid
  font-family: $title-text
  background-color: $pastel
  background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%)

.container
  max-width: 20em

.container > p
  text-align: center

p
  color: $dark-grey
  font-size: 2em

.small-text
  margin-top: 1em
  font-size: 1.5em

.mini-text
  font-size: 0.9em
  margin-top: 1em

.calc
  background-color: $white
  margin: auto
  position: relative
  height: 24em
  width: 20em
  margin-top: 2em
  margin-bottom: 2em
  overflow: hidden
  border-radius: 20px
  box-shadow: 0 0 40px 0px rgba(0, 0, 0, 0.30)

.calc-display
  background-color: $white
  color: #000
  font-size: 2.5em
  padding: 0.5em 0.75em
  text-align: right

.calc-key
  display: grid
  grid-gap: 0px
  grid-template-columns: repeat(4, 1fr)

.calc-key > *
  padding: 1.25em 1.25em
  position: relative
  text-align: center

.calc-key > *:active::before,
.calc-key > .is-depressed::before
  background-color: $pastel
  content: ""
  bottom: 0
  left: 0
  right: 0
  top: 0
  opacity: 0.3
  position: absolute
  z-index: 1

button
  border: 0
  border-radius: 0
  background-color: transparent
  font-size: inherit
  font-family: inherit
  font-weight: inherit
  outline: none
  appearance: none
  text-align: left

button:hover,
button:active,
button:focus
  outline: none

.key-op
  background-color: $light-grey
  font-size: $big-key
  padding: 0.8em

.key-eq
  background-color: $dark-grey
  color: $white
  grid-column: -2
  grid-row: 2 / span 4
  font-size: $big-key

.themer
  margin: auto
  display: flex
  justify-content: space-between
  max-width: 10em

.switch
  padding: 1.1em
  border-radius: 50%

.opt1
  background-color: $blue

.opt2
  background-color: $purple

.opt3
  background-color: $violet
	<!--Made while following two tutorial by Zell Liew from FreeCodeCamp, LINK to Tutorial: https://bit.ly/2PAeKUy LINK to Starter File: https://codepen.io/zellwk/pen/pLgmGL-->
	<body>
	<div class="container">
	<p>Too lazy to calculate, eh?* 🙈</p>
	<div class="calc">
	<div class="calc-display">0</div>
	<!--Keys-START-->
	<div class="calc-key">
	<button class="key-op">+</button>
	<button class="key-op">-</button>
	<button class="key-op">×</button>
	<button class="key-op" data-action="divide">÷</button>
	<button class="key-norm">7</button>
	<button class="key-norm">8</button>
	<button class="key-norm">9</button>
	<button class="key-norm">4</button>
	<button class="key-norm">5</button>
	<button class="key-norm">6</button>
	<button class="key-norm">1</button>
	<button class="key-norm">2</button>
	<button class="key-norm">3</button>
	<button class="key-norm">0</button>
	<button class="key-norm" data-action="decimal">.</button>
	<button class="key-norm" data-action="clear">AC</button>
	<button class="key-eq" data-action="calculate">=</button>
	</div>
	</div>
	<div class="themer">
	<button class="switch opt1"></button>
	<button class="switch opt2"></button>
	<button class="switch opt3"></button>
	</div>
	<p class="small-text">Try changing colours, too!*</p>
	<p class="mini-text">*Js functions coming soon...<br/>@Merkund</p>
	</div>
	</div>
	</body>
	//Trying out Sass for the first time, please don't bite if it looks messy...

	//Colours
	$blue: #2196f3
	$dark-grey: #333
	$light-grey: #eee
	$pastel: #8EC5FC
	$purple: #9c27b0
	$violet: #e91e63
	$white: #ffffff

	//Fonts
	@import url('https://fonts.googleapis.com/css?family=Quicksand:400,500')
	$title-text: 'Quicksand', sans-serif
	$big-key: 1.25em

	//CSS Resets
	html
	box-sizing: border-box

	*,
	*::before,
	*::after
	box-sizing: inherit

	body
	align-items: center
	display: flex
	height: 100vh
	justify-content: center

	body,
	p
	margin: 0

	//Style

	html
	display: grid
	min-height: 100%

	body
	display: grid
	font-family: $title-text
	background-color: $pastel
	background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%)

	.container
	max-width: 20em

	.container > p
	text-align: center

	p
	color: $dark-grey
	font-size: 2em

	.small-text
	margin-top: 1em
	font-size: 1.5em

	.mini-text
	font-size: 0.9em
	margin-top: 1em

	.calc
	background-color: $white
	margin: auto
	position: relative
	height: 24em
	width: 20em
	margin-top: 2em
	margin-bottom: 2em
	overflow: hidden
	border-radius: 20px
	box-shadow: 0 0 40px 0px rgba(0, 0, 0, 0.30)

	.calc-display
	background-color: $white
	color: #000
	font-size: 2.5em
	padding: 0.5em 0.75em
	text-align: right

	.calc-key
	display: grid
	grid-gap: 0px
	grid-template-columns: repeat(4, 1fr)

	.calc-key > *
	padding: 1.25em 1.25em
	position: relative
	text-align: center

	.calc-key > *:active::before,
	.calc-key > .is-depressed::before
	background-color: $pastel
	content: ""
	bottom: 0
	left: 0
	right: 0
	top: 0
	opacity: 0.3
	position: absolute
	z-index: 1

	button
	border: 0
	border-radius: 0
	background-color: transparent
	font-size: inherit
	font-family: inherit
	font-weight: inherit
	outline: none
	appearance: none
	text-align: left

	button:hover,
	button:active,
	button:focus
	outline: none

	.key-op
	background-color: $light-grey
	font-size: $big-key
	padding: 0.8em

	.key-eq
	background-color: $dark-grey
	color: $white
	grid-column: -2
	grid-row: 2 / span 4
	font-size: $big-key

	.themer
	margin: auto
	display: flex
	justify-content: space-between
	max-width: 10em

	.switch
	padding: 1.1em
	border-radius: 50%

	.opt1
	background-color: $blue

	.opt2
	background-color: $purple

	.opt3
	background-color: $violet