DEV Community

Simple Calculator with Dark Mode.

Mohammed Farmaan. on July 08, 2020

Here's a simple calculator built using HTML, CSS and obviously, JavaScript. This calculator also has dark mode which looks really good. And here's...

Read full post

Abhijit Hota • Jul 8 '20

Great web-app with great UI! I surely learned something about dark-mode implementation.

Although, may I suggest you to add the readonly attribute to the text input for result, since you're using the notorious eval() function? I'm aware that it's a 'simple' calculator but I'm just suggesting.

Great project, though!😄

Mohammed Farmaan. • Jul 8 '20

Yeah sure. I was more focussed on the UI so I didn't put that little extra effort to look into that. Thanks for the suggestion tho. Glad you learned something!😁

Clay Murray • Jul 8 '20

Here you go so you don't have to use eval.

// Turns a string equation into a value eg '2*2 + 4' will return '8'
function calcString(input) {
    const values = input.split("");
    const out = [];
    const ops = [];
    const allOps = ["*", "/", "+", "-", ")", "("];

    let num = "";
    for(let index = 0; index < values.length; index++){
    const v = values[index];
        if(v === " ") {
          continue;
        }
      if(!allOps.includes(v)){
        while(!allOps.includes(values[index]) && values[index] !== " " && index < values.length){
          num += values[index];
                 index ++;
        }
        index--;
      out.push(num);
      num = "";
        continue;
      }          

            if (v === ")"){
                let top = ops.pop();

                while(top !== "(" && ops.length) {
                    out.push(top);
                    top = ops.pop();

                }
                if(top !== "("){
                    return "Mismatched parens"
                }
              continue;
            }
            if(ops.length && v !== "(") {
                let top = ops[ops.length - 1];
                let topP = getPrecedence(top);
                const currP = getPrecedence(v);

              while(currP >= topP && top !== "(" && ops.length) {

                out.push(top)
                ops.pop();
                top = ops[ops.length - 1];
                topP = getPrecedence(top);

              }

            } 
            ops.push(v);


    }
    while(ops.length) {
            out.push(ops.pop());
    }
    const stack = [];
    out.forEach((o)=>{
      if(!allOps.includes(o)){
        stack.push(parseFloat(o, 10));
      } else {
        const r = stack.pop();
        const l = stack.pop();
        switch(o) {
          case "+":
            stack.push(l+r);
            break;
          case "-":
            stack.push(l-r);
            break;
          case "*":
            stack.push(l*r);
            break;
          case "/":
            stack.push(l/r);
            break;
        }
      }
    })

  return ""+stack[0]

}
function getPrecedence(value) {
    const precedence = [["("], ["*", "/"], ["+", "-"]];
    return precedence.findIndex((p)=> {
        return p.includes(value);
    })
}

Mohammed Farmaan. • Jul 9 '20

Great. Thanks for the explanation!😄

Clay Murray • Jul 10 '20 • Edited

Totally forgot to mention! Looks really great the design is super nice.

Mohammed Farmaan. • Jul 11 '20

Thank you!😇

Mathurah Ravigulan • Jul 14 '20

It would be cool if you could add something with local storage so it saves the dark mode/light mode toggle the user has, so it doesn't automatically change light mode when the screen is reloaded! I came across this blog, thought it could be helpful 😊 joshwcomeau.com/gatsby/dark-mode/

Madza • Jul 9 '20

Year 2020: If there is not dark mode, it doesn't count xdd

Mohammed Farmaan. • Jul 9 '20

Yess it doesn't count!😂

Tadeu Barbosa • Jul 8 '20

Congrats! It's a good design and project!

Mohammed Farmaan. • Jul 9 '20

Thank you!😊

Jayant Lohani • Jul 9 '20

This looks amazing. Great work.
I made a calculator a while ago but its design was not good and had some flaws. Will try to create another one like yours which supports dark mode.

Mohammed Farmaan. • Jul 9 '20

Thank you!😄 Yeah sure. Feel free to check how I implemented things and don't forget to add your own design to it. Good luck.

Jayant Lohani • Jul 9 '20

All I have to do is change the GitHub link at the end.😏
Just kidding.😂😂 Will just look at the implementation and make my own.

Mohammed Farmaan. • Jul 9 '20

Hahah sure. You can do that too xD.😜

touibeg mohamed • Jul 8 '20

good job mohammad ...

Mohammed Farmaan. • Jul 8 '20

Thank you!😇

Anik Khan • Jul 9 '20

The UI looks astonishing 😍
And as per the code, I have the same suggestion as @Abhijit.
Thanks a lot for sharing. #Kudos

Mohammed Farmaan. • Jul 9 '20

Thank you!😄 Yeah I've considered that suggestion.

Willem Odendaal • Jul 9 '20

I like that this is just plain Javascript. Good job :)

Mohammed Farmaan. • Jul 9 '20

Thank you!😄

Shubham_Yedve • Jul 10 '20

Impressive Ui/design I loved it. Especially the transition between the light and the dark theme.

Mohammed Farmaan. • Jul 10 '20

Thank you. I'm glad you liked it!😄

Hussein AbdulQohar • Aug 7 '20

Thumbs up for the design. Did you notice that evaluating 0.2 multiplied by 6 or 0.2 multiplied by 3 is giving a funny answer, or this just happens to be one of the disadvantages of the eval function.