<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>FP650 - Calculator</title>
<link href="/style.css" rel="stylesheet" type="text/css" />
<link href="/styles/bounce.css" rel="stylesheet" type="text/css" />
<!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/visits"></script> -->
<!-- <script async src="https://api.countapi.xyz/hit/firepup650.repl.co/construction"></script> -->
</head>
<body>
<h5 hidden id='Maintenance' class="center"></h5>
<span class="center">
<h3 class="force-color">Calculator</h3>
<button class="cyan run-button" onclick="calc()">Run Calculator</button><br/>
<span class="force-color">Bookmarklet: </span><span id="access" class="force-color">javascript:x=prompt('Equation?');x=eval(x);alert(`The solution is: ${x}`)</span> <button class="cyan copy-button" onclick="copy('access')">Copy</button><br/>
</span>
<script src="/script.js"></script>
<!-- Modified from https://www.geeksforgeeks.org/how-to-create-copy-to-clipboard-button/ /!-->
<script>
function copy(element) {
const elemText = document.getElementById(element).innerText;
navigator.clipboard.writeText(elemText);
}
// <!-- End Modified GeeksforGeeks code /!-->
function calc() {
let x = prompt('Equation?');
x = eval(x);
alert(`The solution is: ${x}`);
}
</script>
<!-- Modified from https://codepen.io/nrrrdcore/pen/XbZBpq /!-->
<style>
.copy-button {
cursor: pointer;
&:before {
content: '';
display: none;
position: absolute;
z-index: 9998;
top: 35px;
left: 15px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid rgba(0,0,0,.72);
}
&:after {
content: 'Copy to Clipboard';
display: none;
position: absolute;
z-index: 9999;
top: 30px;
left: 0px;
width: 114px;
height: 36px;
color: #fff;
font-size: 10px;
line-height: 36px;
text-align: center;
border-radius: 3px;
}
&:hover {
&:before, &:after {
display: block;
}
}
&:active, &:focus {
&:after {
content: 'Copied!';
}
}
}
</style>
<!-- End Modified codepen code (Julie Horvath) /!-->
</body>
</html>