<!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>