Zackhardtoname/annotatable-calculator.markdown

## annotatable-calculator.markdown

      
    Raw
  

              annotatable-calculator.markdown
            
          
    Annotatable Calculator

A Pen by Zack Light on CodePen.
License.

  
## index.html
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>StudyDate Calculator</title>
</head>
<body>
  <h1>StudyDate Calculator</h1>
  <div class="wrapper">
    <div class="dash">
      <form id = "io">
        <input type="text" id = "annotation" placeholder="Optional annotation">
        <input type="text" id = "formula" placeholder="Press Enter to Calculate">
        * The result is always on your clipboard. (Control + V to see the result).
      </form>
      <button class="clear" id="clearAnnotation">Clear annotation</button>
      <button class="clear" id="clearFormula">Clear formula</button>
      <button class="clear" id="clearHistory">Clear history</button>
    </div>
    <div class="keyboard">
      <div class="row">
        <button class="num">7</button>
        <button class="num">8</button>
        <button class="num">9</button>
        <button class="oper">/</button>
      </div>
      <div class= "row">
        <button class="num">4</button>
        <button class="num">5</button>
        <button class="num">6</button>
        <button class="oper">*</button>
      </div>
      <div class="row">
        <button class="num">1</button>
        <button class="num">2</button>
        <button class="num">3</button>
        <button class="oper">-</button>
      </div>
      <div class="row">
        <button id="ce">CE</button>
        <button class="num">0</button>
        <button class="oper">**</button>
        <button class="oper">+</button>
      </div>
      <div class="row">
        <button id="ac">AC</button>
        <button class="num">.</button>
        <button id="sign">±</button>
        <button class="equal">=</button>
      </div>
    </div>
    <div id="history">
      <div id="historyTitle"><h3>History</h3></div>
      <div id="historyContent"></div>
    </div>
  </div>
  <br>
  <br>
  <footer>Product by <a href="ZackLight.com">Zack Light</a></footer>
</body>
</html>

## script.js
/*
Future Features
Delete individual calcs
*/

let calc = "";
let counter = 0;
const opers = "+-**/";
changed_mul_operator_symbol = false

function preWash () {
   ori =  $("#formula").val()
   calc = ori.replace("^", "**")
   changed_mul_operator_symbol = true
}

function postWash () {
  ori =  $("#formula").val()
  if (changed_mul_operator_symbol == true) {
    ori.replace("**", "^")
  }
  changed_mul_operator_symbol = false
  return ori
}

function finalUpdate() {
  $("#formula").val(calc)
  copyToClipboard()
  $("#formula").select();
}

function evaluate() {
  if ($("#annotation").val() != "" | $("#formula").val() != "") {
    let anno = $("#annotation").val()
    let toBeInserted = ""
    if (anno != "") {
      anno += ":" + "<br>"
    }
    counter += 1
    toBeInserted = "<div class = 'historical' id =" + counter + " >" + counter + ". " + anno + postWash(calc) + "= <b>" + eval(calc) + "</b></div>"
    $("#historyContent").prepend(toBeInserted)
    calc = ""
    $("#annotation").val("")
    finalUpdate()
  }
}

function numUpdate(para) {
  calc += para
   finalUpdate()
}

function operUpdate(para) {
  if (calc.length !== 0) {
      const last = calc.slice(-1)
      if (opers.indexOf(last) === -1 ){
        calc += para
      }
    else if (opers.indexOf(last) >= 0 && calc.slice(-2) !== "**") {
         calc = calc.slice(0, -1) + para
      }
    else {
      calc = calc.slice(0, -2) + para
    }
      finalUpdate()
    }
}

function ceUpdate() {
  while (true) {
    if (opers.indexOf(calc.slice(-1)) >= 0) {
        break
        }
    calc = calc.slice(0, -1)
  }
  finalUpdate()
}

function acUpdate() {
    calc = ""
    finalUpdate()
}

function signUpdate() {
  calc = "-1*(" + calc + ")"
  finalUpdate()
}

function copyToClipboard() {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($("#" + counter + " b").html()).select();
  document.execCommand("copy");
  $temp.remove();
}

function doc_keyUp(e) {
    if (e.ctrlKey && e.keyCode == 67) {
      copyToClipboard("historyContent")
    }
}

$(document).ready(function () {
  document.addEventListener('keyup', doc_keyUp, false);

  $("#clearAnnotation").click(function () {
    $("#annotation").val("")
  })

  $("#clearFormula").click(function () {
    acUpdate()
  })

  $("#clearHistory").click(function () {
    $("#history").html('<div id="historyTitle"><h3>History</h3></div><div id="historyContent"></div>')
    counter = 0
  })

  $(".num").click(function () {
    let para = this.innerHTML
   numUpdate(para)
  })

  $(".oper").click(function() {
    let para = this.innerHTML
    operUpdate(para)
  })

    $("#ac").click(acUpdate()
  )

  $("#ce").click(function() {
    ceUpdate()
  })

  $(".equal").click(function() {
    evaluate()
    $("#annotation").val("")
  })

  $("#sign").click(function() {
    signUpdate()
  })

  $( "#formula" ).change(function() {
    preWash()
    evaluate()
  })
}
)

## scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

## studydate-calculator.markdown

      
    Raw
  

              studydate-calculator.markdown
            
          
    StudyDate Calculator

A Pen by Zack Light on CodePen.
License.

  
## style.css
body {
 font-family: Arial, sans-serif;
 text-align: center;
}

a {
  text-decoration: none;
}

button:active {
  transform: translate(0px, 3px);
  box-shadow: none;
}

.clear, input{
  display: block;
  margin-left: 2px;
  margin-bottom: 5px;
  font-size: 1em;
}

.clear {
   width: 200px;
}

.keyboard button {
    display: inline-block;
    text-decoration: none;
    font-weight: bold;
    color: #fff;
    background-color: black;
    font-size: 1.5em;
}

#ac, #ce, .keyboard .equal {
  background-color: maroon;
  color: white;
}

.keyboard .oper, .keyboard #sign {
    background-color: Indigo;
}

calculator {
  border: 1px solid black;
}

#historyContent {
  font-size: 1.5em;
  border: 1px solid black;
  margin: 20px 0;
}

.historical {
  vertical-align: middle;
  border: 1px solid black;
}

#io {
  margin: 15px 0;
  display: grid;
  grid-gap: .4em;
}

row {
  display: block;
}

.keyboard {
  display: grid;
  grid-gap: 10px;
  grid-template-rows: repeat(5, 50px);
  justify-items: center;
}

.row {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(4, 50px);
}

.wrapper {
  display: grid;
    grid-gap: 5px;
    grid-template-columns: 1fr 1fr 1fr;
}
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>StudyDate Calculator</title>
	</head>
	<body>
	<h1>StudyDate Calculator</h1>
	<div class="wrapper">
	<div class="dash">
	<form id = "io">
	<input type="text" id = "annotation" placeholder="Optional annotation">
	<input type="text" id = "formula" placeholder="Press Enter to Calculate">
	* The result is always on your clipboard. (Control + V to see the result).
	</form>
	<button class="clear" id="clearAnnotation">Clear annotation</button>
	<button class="clear" id="clearFormula">Clear formula</button>
	<button class="clear" id="clearHistory">Clear history</button>
	</div>
	<div class="keyboard">
	<div class="row">
	<button class="num">7</button>
	<button class="num">8</button>
	<button class="num">9</button>
	<button class="oper">/</button>
	</div>
	<div class= "row">
	<button class="num">4</button>
	<button class="num">5</button>
	<button class="num">6</button>
	<button class="oper">*</button>
	</div>
	<div class="row">
	<button class="num">1</button>
	<button class="num">2</button>
	<button class="num">3</button>
	<button class="oper">-</button>
	</div>
	<div class="row">
	<button id="ce">CE</button>
	<button class="num">0</button>
	<button class="oper">**</button>
	<button class="oper">+</button>
	</div>
	<div class="row">
	<button id="ac">AC</button>
	<button class="num">.</button>
	<button id="sign">±</button>
	<button class="equal">=</button>
	</div>
	</div>
	<div id="history">
	<div id="historyTitle"><h3>History</h3></div>
	<div id="historyContent"></div>
	</div>
	</div>
	<br>
	<br>
	<footer>Product by <a href="ZackLight.com">Zack Light</a></footer>
	</body>
	</html>
	/*
	Future Features
	Delete individual calcs
	*/

	let calc = "";
	let counter = 0;
	const opers = "+-**/";
	changed_mul_operator_symbol = false

	function preWash () {
	ori = $("#formula").val()
	calc = ori.replace("^", "**")
	changed_mul_operator_symbol = true
	}

	function postWash () {
	ori = $("#formula").val()
	if (changed_mul_operator_symbol == true) {
	ori.replace("**", "^")
	}
	changed_mul_operator_symbol = false
	return ori
	}

	function finalUpdate() {
	$("#formula").val(calc)
	copyToClipboard()
	$("#formula").select();
	}

	function evaluate() {
	if ($("#annotation").val() != "" \| $("#formula").val() != "") {
	let anno = $("#annotation").val()
	let toBeInserted = ""
	if (anno != "") {
	anno += ":" + "<br>"
	}
	counter += 1
	toBeInserted = "<div class = 'historical' id =" + counter + " >" + counter + ". " + anno + postWash(calc) + "= <b>" + eval(calc) + "</b></div>"
	$("#historyContent").prepend(toBeInserted)
	calc = ""
	$("#annotation").val("")
	finalUpdate()
	}
	}

	function numUpdate(para) {
	calc += para
	finalUpdate()
	}

	function operUpdate(para) {
	if (calc.length !== 0) {
	const last = calc.slice(-1)
	if (opers.indexOf(last) === -1 ){
	calc += para
	}
	else if (opers.indexOf(last) >= 0 && calc.slice(-2) !== "**") {
	calc = calc.slice(0, -1) + para
	}
	else {
	calc = calc.slice(0, -2) + para
	}
	finalUpdate()
	}
	}

	function ceUpdate() {
	while (true) {
	if (opers.indexOf(calc.slice(-1)) >= 0) {
	break
	}
	calc = calc.slice(0, -1)
	}
	finalUpdate()
	}

	function acUpdate() {
	calc = ""
	finalUpdate()
	}

	function signUpdate() {
	calc = "-1*(" + calc + ")"
	finalUpdate()
	}

	function copyToClipboard() {
	var $temp = $("<input>");
	$("body").append($temp);
	$temp.val($("#" + counter + " b").html()).select();
	document.execCommand("copy");
	$temp.remove();
	}

	function doc_keyUp(e) {
	if (e.ctrlKey && e.keyCode == 67) {
	copyToClipboard("historyContent")
	}
	}

	$(document).ready(function () {
	document.addEventListener('keyup', doc_keyUp, false);

	$("#clearAnnotation").click(function () {
	$("#annotation").val("")
	})

	$("#clearFormula").click(function () {
	acUpdate()
	})

	$("#clearHistory").click(function () {
	$("#history").html('<div id="historyTitle"><h3>History</h3></div><div id="historyContent"></div>')
	counter = 0
	})

	$(".num").click(function () {
	let para = this.innerHTML
	numUpdate(para)
	})

	$(".oper").click(function() {
	let para = this.innerHTML
	operUpdate(para)
	})

	$("#ac").click(acUpdate()
	)

	$("#ce").click(function() {
	ceUpdate()
	})

	$(".equal").click(function() {
	evaluate()
	$("#annotation").val("")
	})

	$("#sign").click(function() {
	signUpdate()
	})

	$( "#formula" ).change(function() {
	preWash()
	evaluate()
	})
	}
	)
	body {
	font-family: Arial, sans-serif;
	text-align: center;
	}

	a {
	text-decoration: none;
	}

	button:active {
	transform: translate(0px, 3px);
	box-shadow: none;
	}

	.clear, input{
	display: block;
	margin-left: 2px;
	margin-bottom: 5px;
	font-size: 1em;
	}

	.clear {
	width: 200px;
	}

	.keyboard button {
	display: inline-block;
	text-decoration: none;
	font-weight: bold;
	color: #fff;
	background-color: black;
	font-size: 1.5em;
	}

	#ac, #ce, .keyboard .equal {
	background-color: maroon;
	color: white;
	}

	.keyboard .oper, .keyboard #sign {
	background-color: Indigo;
	}

	calculator {
	border: 1px solid black;
	}

	#historyContent {
	font-size: 1.5em;
	border: 1px solid black;
	margin: 20px 0;
	}

	.historical {
	vertical-align: middle;
	border: 1px solid black;
	}

	#io {
	margin: 15px 0;
	display: grid;
	grid-gap: .4em;
	}

	row {
	display: block;
	}

	.keyboard {
	display: grid;
	grid-gap: 10px;
	grid-template-rows: repeat(5, 50px);
	justify-items: center;
	}

	.row {
	display: grid;
	grid-gap: 5px;
	grid-template-columns: repeat(4, 50px);
	}

	.wrapper {
	display: grid;
	grid-gap: 5px;
	grid-template-columns: 1fr 1fr 1fr;
	}