Adding a calculator into a knowledge article

已回答

已于 2024年6月24日发布

We are looking to add a working calculator to one of our knowledge articles. Does anyone have a code to be able to incorporate this functionality in an article? I'm new to coding and had tried one I found online but it didn't work.

5 条评论

日期

Ifra Saqlain

Zendesk LuminaryMost Engaged Community Member - 2022Most Engaged Community Member of The Year - 2021Community Moderator

2024年6月28日

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;

}