Calculating Square-Roots with CSS

Calculating square-roots with CSS

You can use a preprocessing system for CSS. For example, you can use Compass and Sass. Compass has a sqrt function.

Why? Perhaps for print styling, or maybe to experiment with the golden mean.

I'm creating a calculator using with HTML, CSS and Javascript. I'm stuck at the square root function

Judging by the way you want this to work (when hitting '=' the calculator should eval the content of the textbox) you should probably put something in the textbox what does the Math.sqrt like this:

function sqrt() {
    var val = document.getElementById("ro").value;
    document.getElementById("ro").value = "Math.sqrt(" + val + ")";
}

<!DOCTYPE html>
<head>  <h1><center>Emma' Calculator</center></h1></head>
<div class="back">  <div class="readonly">    <input type="text" readonly size="20" id="ro">  </div>  <div class="key">
    <p>      <input type="button" class="button one" value="√" onclick="sqrt()">
      <input type="button" class="button one" value="?" onclick='v("?")'>
      <input type="button" class="button one" value="CE" onclick='v("")'>
      <input type="button" class="button one" value="C" onclick='c("")'>    </p>
    <p>      <input type="button" class="button two" value="7" onclick='v("7")'>
      <input type="button" class="button two" value="8" onclick='v("8")'>
      <input type="button" class="button two" value="9" onclick='v("9")'>
      <input type="button" class="button one" value="+" onclick='v("+")'>    </p>
    <p>      <input type="button" class="button two" value="4" onclick='v("4")'>
      <input type="button" class="button two" value="5" onclick='v("5")'>
      <input type="button" class="button two" value="6" onclick='v("6")'>
      <input type="button" class="button one" value="-" onclick='v("-")'>    </p>
    <p>      <input type="button" class="button two" value="1" onclick='v("1")'>
      <input type="button" class="button two" value="2" onclick='v("2")'>
      <input type="button" class="button two" value="3" onclick='v("3")'>
      <input type="button" class="button one" value="*" onclick='v("*")'>    </p>
    <p>      <input type="button" class="button two" value="0" onclick='v("0")'>
      <input type="button" class="button one" value="." onclick='v(".")'>
      <input type="button" class="button two" value="=" onclick='e()'>
      <input type="button" class="button one" value="/" onclick='v("/")'>    </p>  </div></div>

<style>  body {    background-color: #d9b3ff;  }  .back {    position: absolute;    background-color: #33004d;    width: 250px;    height: 320px;    left: 40%;    top: 200px;  }  .readonly {    position: relative;    width: 220px;    left: 15px;    top: 20px;    height: 40px;  }  .readonly input {    position: relative;    left: 2px;    top: 2px;    height: 35px;    color: black;    background-color: #ffe6f7;    font-size: 21px;    text-align: justify;  }  .key {    position: relative;    top: 30px;  }  .button {    width: 41px;    height: 32px;    border: none;    margin-left: 14px;  }  .button.one {    color: white;    background-color: #b300b3;  }  .button.two {    color: black;    background-color: #ffe6ff;  }</style>

<script>  function sqrt() {      var val = document.getElementById("ro").value;      document.getElementById("ro").value = "√(" + val + ")";  }
  function c(val) {    document.getElementById("ro").value = val;  }
  function v(val) {    document.getElementById("ro").value += val;  }
  function e() {    try {      var toEval = document.getElementById("ro").value.replace("√", "Math.sqrt");      c(eval(toEval))    } catch (e) {      c('Error')    }  }</script>
See the snippet below. If you don't like the Math.Sqrt() showing up in the textbox, you could change it to some other character and replace that just before the Eval.
Hope this helps.

How to calc square root in stylus

As answered there you can use the built-in math function for this, so the custom sqrt could look better:

sqrt(x)
  return math(x, 'sqrt')

Adding a square root function to a calc using js

There is already one.

The Math.sqrt() function returns the square root of a number, that is, ∀x≥0,Math.sqrt(x)=x
=the uniquey≥0such thaty2=x

MDN Docs

Calculating Square-Roots with CSS