## Pen Settings

### CSS

#### Vendor Prefixing

Any URL's added here will be added as `<link>`s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

### JavaScript

#### JavaScript Preprocessor

Babel includes JSX processing.

Any URL's added here will be added as `<script>`s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

### Packages

Search for and use JavaScript packages from npm here. By selecting a package, an `import` statement will be added to the top of the JavaScript editor for this package.

### Behavior

#### Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

#### Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

#### Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

## HTML

```              ```
<body>
<div class="container">

<div id="calculator-outside">
<h2 class="title">Da Calculator</h2>
<div id="calculator-inside">

<!-- display -->
<div id="field">
<div id="field-equation"></div>
<div id="field-number">0</div>
</div>

<button type="button" class="clear" id="AC"     value="AC">AC</button>
<button type="button" class="clear" id="CE" value="CE">DEL</button>
<button type="button" class="operation" value="*">x</button>
<button type="button" class="operation" value="/">&divide;       </button>
<button type="button" class="number" value="7">7</button>
<button type="button" class="number" value="8">8</button>
<button type="button" class="number" value="9">9</button>
<button type="button" class="operation" value="-">-</button>
<button type="button" class="number" value="4">4</button>
<button type="button" class="number" value="5">5</button>
<button type="button" class="number" value="6">6</button>
<button type="button" class="operation" value="+">+</button>
<button type="button" class="number" value="1">1</button>
<button type="button" class="number" value="2">2</button>
<button type="button" class="number" value="3">3</button>
<button type="button" class="equals">=</button>
<button type="button" class="number" id="zero" value="0">0</button>
<button type="button" class="number" id="dot" value=".">.</button>
</div>
</div>
</div>
</div>
</body>
```
```
!

## CSS

```              ```
body {
background-color:#3C4150;
font-family: 'arial', tahoma;
}

.title{
font-family:arial, tahoma;
text-align:center;
color: #505256;
margin-top:8px;
}

#calculator-outside {
width:320px;
height:440px;
position:absolute;
top:60%;
bottom: 40%;
left:50%;
transform:translate(-50%, -50%);
background-color:#53e835;
margin-bottom: 30px;
}

#calculator-inside{
width:310px;
height:380px;
position:absolute;
top:50px;
left:5px;
background-color:#3C4150;
}

button {
font-family: 'Nova Mono', monospace;
width:54px;
height:40px;
background-color:#2b2f3a;
border:2px;
border-style:outset;
border-color:#c0c0c0;
margin:5px 10px;
font-size:1.25em;
color:white;
float:left;
}

/* -- display --*/
#field {
background-color:#818181;
width:290px;
height:90px;
position:absolute;
left:8px;
top:10px;
font-size:2.5em;
text-align:right;
}

#field-number{
margin:-10px 5px;
overflow:hidden;
}

#field-equation{
height:20px;
font-size:.4em;
margin:10px 5px 5px 5px;
overflow:hidden;
}

width:300px;
height:280px;
position:absolute;
top:105px;
left:5px;
}

.equals {
height: 92px;
}

#zero {
width:130px;
margin-top:-45px;
}

#dot {
margin-top:-45px;
margin-left:158px;
}

#AC {
background: #74767f;
color: red;
}

#CE {
background: #74767f;
color: red;
}

```
```
!

## JS

```              ```
// If you want an event to work on your page, you should call it inside the \$(document).ready() function. Everything inside it will load as soon as the DOM is loaded and before the page contents are loaded.
arrNumber = [];
arrEquation = [];

function calculate(arr) {
str = arr.join(""); //join to become string

if (str.indexOf("/0") !== -1) { //dividing by 0 = error
return "Error";
} else {
return eval(str); //eval = function evaluates or executes an argument.
}
}

//click = number is pressed to run a function
\$('.number').on("click", function() {
var number = \$(this).val();

if(!(number == "0" && arrNumber == "0" && arrNumber.length == 1) && !(number == "." && arrNumber.indexOf(".")!==-1)){
arrNumber.push(number);
\$('#field-number').html(arrNumber);
\$('#field-equation').html(arrEquation);
}
});

//operation depressed
\$('.operation').on("click", function() {
var number = arrNumber.join('');
var operation = \$(this).val();

if (!isNaN(number)) {
arrEquation.push(number);//push number
arrNumber = [];
\$('#field-number').html("0");
arrEquation.push(operation); //push operation
\$('#field-equation').html(arrEquation); //pushed to arrEquation and clear arrNumber
}
});

//AC depressed
\$('.clear').on("click", function() {
if (\$(this).val() == "AC") {
arrNumber = [];
arrEquation = [];
\$('#field-number').html("0");
\$('#field-equation').empty(); //empty or clear arrNumbeer & arrEquation
} else if (\$(this).val() == "CE") { //if CE DEL pressed, clear arrNumber
arrNumber = [];
\$('#field-number').html("0");
}
});

//= pressed
\$('.equals').on("click", function() {
var number = arrNumber.join('');

if(!isNaN(number)){ //clear both arrays
arrEquation.push(number);
\$('#field-equation').html(arrEquation);
\$('#field-number').html(parseFloat(calculate(arrEquation).toPrecision(12)));
{"ft_lang_label":"__label__en","ft_lang_prob":0.6448165,"math_prob":0.83353925,"size":8610,"snap":"2020-45-2020-50","text_gpt3_token_len":2217,"char_repetition_ratio":0.1447827,"word_repetition_ratio":0.16209263,"special_character_ratio":0.29430893,"punctuation_ratio":0.18847539,"nsfw_num_words":0,"has_unicode_error":false,"math_prob_llama3":0.96910846,"pos_list":[0],"im_url_duplicate_count":[null],"WARC_HEADER":"{\"WARC-Type\":\"response\",\"WARC-Date\":\"2020-11-27T03:20:52Z\",\"WARC-Record-ID\":\"<urn:uuid:86903c99-998e-4cf4-abc4-c1e57b22f4d8>\",\"Content-Length\":\"90279\",\"Content-Type\":\"application/http; msgtype=response\",\"WARC-Warcinfo-ID\":\"<urn:uuid:6a5aa0b8-5cb0-4385-92ca-346527522887>\",\"WARC-Concurrent-To\":\"<urn:uuid:ec720594-e453-45a6-bde2-2bf6da4d3bbd>\",\"WARC-IP-Address\":\"104.16.176.44\",\"WARC-Target-URI\":\"https://codepen.io/islandwebtek/pen/WpMraL\",\"WARC-Payload-Digest\":\"sha1:I3JQS4WUXEGWJDHHMA4RTJXOJOY4C3E3\",\"WARC-Block-Digest\":\"sha1:DK4A6BJZITRWPHNUJIWJMLUHV5FVU4KQ\",\"WARC-Identified-Payload-Type\":\"text/html\",\"warc_filename\":\"/cc_download/warc_2020/CC-MAIN-2020-50/CC-MAIN-2020-50_segments_1606141189038.24_warc_CC-MAIN-20201127015426-20201127045426-00172.warc.gz\"}"}