Adding a calculator into a knowledge article

Hi Customer Service,

Please try this:

i). Add the given HTML code to your Article source while creating the article and save and publish the article

<form class="calculator" name="Calculator">

  <table border="2" cellspacing="12" cellpadding="15" align="center" bgcolor="#c0c0c0">

    <tbody>

      <tr>

        <td>

          <input id="display" type="text" name="Input" size="35">

        </td>

      </tr>

      <tr>

        <td>

          <input style="font-size: 30px;" onclick="Calculator.Input.value += '1'" type="button" name="one" value=" 1 ">

          <input style="font-size: 30px;" onclick="Calculator.Input.value += '2'" type="button" name="two" value=" 2 ">

          <input style="font-size: 30px;" onclick="Calculator.Input.value += '3'" type="button" name="three" value=" 3 ">

          <input class="btnTop" style="font-size: 30px;" onclick="Calculator.Input.value += ' + '" type="button" name="add" value=" + "><br>

          <input style="font-size: 30px;" onclick="Calculator.Input.value += '4'" type="button" name="four" value=" 4 ">

          <input style="font-size: 30px;" onclick="Calculator.Input.value += '5'" type="button" name="five" value=" 5 ">

          <input style="font-size: 30px;" onclick="Calculator.Input.value += '6'" type="button" name="six" value=" 6 ">

          <input style="font-size: 30px;" onclick="Calculator.Input.value += ' - '" type="button" name="minus" value=" - "><br>

          <input style="font-size: 30px;" onclick="Calculator.Input.value += '7'" type="button" name="seven" value=" 7 ">

          <input style="font-size: 30px;" onclick="Calculator.Input.value += '8'" type="button" name="eight" value=" 8 ">

          <input style="font-size: 30px;" onclick="Calculator.Input.value += '9'" type="button" name="nine" value=" 9 ">

          <input style="font-size: 30px;" onclick="Calculator.Input.value += ' * '" type="button" name="mul" value=" * "><br>

          <input style="font-size: 30px;" onclick="Calculator.Input.value = ''" type="button" name="clear" value=" c ">

          <input style="font-size: 30px;" onclick="Calculator.Input.value += '0'" type="button" name="zero" value=" 0 ">

          <input style="font-size: 30px;" onclick="Calculator.Input.value = eval(Calculator.Input.value)" type="button" name="DoIt" value=" = ">

          <input style="font-size: 30px;" onclick="Calculator.Input.value += ' / '" type="button" name="div" value=" / ">

        </td>

      </tr>

    </tbody>

  </table>

</form>

ii). Go to your style.css file, paste this CSS code at te bottom.

.title {  

margin-bottom: 10px;  

padding: 5px 0;  

font-size: 40px;  

font-weight: bold;  

text-align: center;  

color: red;  

font-family: 'Cookie', cursive;  

}  

input[type=button] {  

  width: 60px;  

  height: 60px;  

  float: left;  

  padding: 0;  

  margin: 5px;  

  box-sizing: border-box;  

  background: #ecedef;  

  border: none;  

  font-size: 30px;  

  line-height: 30px;  

  border-radius: 50%;  

  font-weight: 700;  

  color: #5E5858;  

  cursor: pointer;    

}  

input[type=text] {  

  width: 270px;  

  height: 60px;  

  float: left;  

  padding: 0;  

  box-sizing: border-box;  

  border: none;  

  background: none;  

  color: red;  

  text-align: right;  

  font-weight: 700;  

  font-size: 60px;  

  line-height: 60px;  

  margin: 0 25px;  

  }  

.calculator {  

  background-color: #c0c0c0;  

  box-shadow: 0px 0px 0px 10px #666;  

  border: 5px solid black;  

  border-radius: 10px;  

}  

#display {  

  height: 40px;  

  text-align: right;  

  background-color: black;  

  border: 3px solid white;  

  font-size: 18px;  

  left: 2px;  

  top: 2px;  

  color: red;  

}  

.btnTop {  

  color: white;  

  background-color: #6f6f6f;  

  font-size: 14px;  

  margin: auto;  

  width: 50px;  

  height: 25px;  

} 

iii). Add this link to your document_head.hbs file.

   <link href="https://fonts.googleapis.com/css2?family=Cookie&display=swap" rel="stylesheet"> 

iv). Output is here.

If any issue let me know :)

Thanks

Great solution here Ifra Saqlain. You're a rockstar! 

Thank you sooooo much, Mr. Brett.

Very cool Ifra Saqlain!

Thanks :)