Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

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.

+ add another resource

Packages

Add 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.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@300&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/074773b176.js" crossorigin="anonymous"></script>

</head>
<body>
    <!--Calculator container-->
<div class="calculator-body">
        <!--Holds active calculations-->
        <div id="active-calculations" class="active-calculations">0</div>

    <div class="main-buttons">

        <div id="num-1" class="number one">1</div>

        <div id="num-2" class="number two">2</div>

        <div id="num-3" class="number three">3</div>

        <div id="plus" class="operation plus"><i class="fas fa-plus"></i></div>

        <div id="num-4" class="number four">4</div>

        <div id="num-5" class="number five">5</div>

        <div id="num-6" class="number six">6</div>

        <div id="minus" class="operation minus"><i class="fas fa-minus"></i></div>

        <div id="num-7" class="number seven">7</div>

        <div id="num-8" class="number eight">8</div>

        <div id="num-9" class="number nine">9</div>

        <div id="times" class="operation times"><i class="fas fa-times"></i></div>

        <div id="clear" class="operation clear">C</div>

        <div id="num-0" class="number zero">0</div>

        <div id="equals" class="operation equals"><i class="fas fa-equals"></i></div>

        <div id="division" class="operation division"> <i class="fas fa-divide"></i></div>
    

    </div>

</div>
</body>
</html>
<script src="script.js"></script>
              
            
!

CSS

              
                *{
    margin: 0;
    padding: 0;
}

body{
    font-family: 'Bai Jamjuree', sans-serif;
    
    display: flex;
    height: 100vh;
    width: 100%;
    justify-content: center;
    align-items: center;
    
}

.number{
    font-family: 'Bai Jamjuree', sans-serif;
}



.calculator-body{
    background: rgb(255, 104, 104);
    height: 54.8%;
    border-radius: 10px;
    width: 35%; 
    
}

.active-calculations{
    background-color: rgb(113, 235, 119);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    height: 102px;
    line-height: 135px;
    width: 100%;
    text-align: right;
    margin-right: 10px;
    
    
}

h1{
    padding-right: 15px;
}

.number{
    background-color: rgb(113, 235, 119);
    border: 1px solid rgb(85, 78, 78);
    color: rgb(228, 16, 8);
    border-radius: 10px;
    
}

.operation{
    background-color: rgb(113, 235, 119);
    border: 1px solid rgb(85, 78, 78);
    color: rgb(228, 16, 8);
    border-radius: 10px;
}



.main-buttons{
    display: grid;
    height: 75px;
    line-height: 75px;
    vertical-align: middle;
    width: 100%;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    cursor: pointer;
    text-align: center;
    
    

}
              
            
!

JS

              
                var numbers = document.getElementsByClassName("number"); //length of nunmbers array

var calcDisplay = document.querySelector(".active-calculations"); //selects the calculators display

var clear = document.getElementById("clear"); // selects clear button

var addition = document.getElementById("plus"); // selects add button

var equals = document.getElementById("equals");

var minus = document.getElementById("minus");


/*
upon clicking a number this function displays numbers to the calculators display
*/
function displayNums() 
{
    for(let index = 0; index < numbers.length; index++)
    {
        numbers[index].addEventListener("click", function(){
            calcDisplay.innerHTML = parseInt(numbers[index].innerHTML);
        })
    }
}
displayNums();


function numberOperations(){
    let total = 0;
    let storedNumber = 0;
    let subtractedNumber = 0;

    for(let index = 0; index < numbers.length; index++)
    {
        numbers[index].addEventListener("click", function(){
            storedNumber = parseInt(numbers[index].innerHTML);
            //subtractedNumber = parseInt(-Math.abs(numbers[index].innerHTML))
            console.log(storedNumber); 
        })
    }

    addition.addEventListener("click", function(){ // Originally didnt work because it was place in loop
        total += parseInt(storedNumber);
        calcDisplay.innerHTML = total;
        storedNumber = 0; // stored number must be reset every time plus is pressed
        /*When plus is pressed we want it only to add the numbers weve selected, 
        it should NOT continually add the stored number everytime plus is pressed  */
    })

    // clears number from calc display
    clear.addEventListener("click", function(){
        total = 0;
        storedNumber = 0;
        calcDisplay.innerHTML = parseInt(total);
    });

    equals.addEventListener("click", function(){
        total += parseInt(storedNumber);
        calcDisplay.innerHTML = total;
        storedNumber = 0;  
        // if total < 0 display something if total > 0 display something
    })

    minus.addEventListener("click", function(){
        for(let index = 0; index< numbers.length; index++)
        {
            let secondStored;
            numbers[index].addEventListener("click", function(){
                secondStored = parseInt(numbers[index].innerHTML); 
            })
            console.log(storedNumber, secondStored);
        }
        
    })

}   
    //console.log(-Math.abs(5));

numberOperations();
              
            
!
999px

Console