task14 - Calculate Expression

Homework: JavaScript Loops, Arrays, Strings

by Polina Petrova

HTML

<section id="wrapper">        
        <input type="text" id="expression" name="expression" placeholder="Your Expression..." />
        <button id="calc" onclick="calcExpr()">Eval Result</button> 

        <p id="result" onkeypress="searchKeyPress(event)">The result will apear here</p>
    </section>

CSS

body {
    font-family:Tahoma, Arial, sans-serif;
    font-size:100%;
}
#wrapper{
    width:300px;
    margin:0 auto;
    padding:1rem;
    text-align:center;
}
input, p{
    font-family:Tahoma, Arial, sans-serif;
    background-color:#234465;
    color:orange;   
    border:0;
    width:100%;    
    margin-bottom:1rem;
    padding:0.5rem 1rem;   
}
input[placeholder], [placeholder], *[placeholder] {
   color:orange !important;
}
p{
    text-align:left;
    font-size:1.2rem;
}

button{
    padding:0.5rem 1rem;   
    border:1px solid #234465;
    background-color:#fff;    
    font-size:1.4rem;
    text-align:center;
   
}
button:hover{
    cursor:pointer;
}

JavaScript

function calcExpr() {
    var expr = document.getElementById("expression").value;
    expr = expr.replace(/[^\d\+\-\*\/\.\(\)%]/g, '');
    var result = eval(expr);
    document.getElementById("result").innerHTML = result;
    return result;
}