Add calculator

This commit is contained in:
Monty 2022-03-27 19:27:01 +02:00
parent 04d8c4304c
commit 43773774ed
3 changed files with 97 additions and 0 deletions

View file

@ -172,6 +172,7 @@ module.exports = function (grunt) {
all: {
src: {
'warning': 'node_modules/ionicons/dist/svg/alert-outline.svg',
'calculator-outline': 'node_modules/ionicons/dist/svg/calculator-outline.svg',
'close': 'node_modules/ionicons/dist/svg/close-outline.svg',
'chevron-up-outline': 'node_modules/ionicons/dist/svg/chevron-up-outline.svg',
'chevron-right': 'node_modules/ionicons/dist/svg/chevron-forward-outline.svg',

View file

@ -448,6 +448,7 @@ article[data-vim-selected].category-social {
grid-template-rows: min-content min-content 1fr min-content;
gap: 0 @results-gap;
grid-template-areas:
"calculator sidebar"
"corrections sidebar"
"answers sidebar"
"urls sidebar"
@ -459,6 +460,45 @@ article[data-vim-selected].category-social {
margin-top: 0;
}
#calculator {
grid-area: calculator;
padding: 1rem;
margin-bottom: 1em;
border-radius: 1em;
#calc_header {
display: flex;
justify-content: space-between;
align-items: center;
#calc_title {
display: flex;
align-items: center;
#calc_icon {
display: inline-flex;
align-items: center;
margin-right: 0.3em;
}
}
}
#calc_input {
font-size: 2rem;
padding: 1.7rem 1rem 1rem;
margin-bottom: 0.5rem;
text-align: end;
}
#calc_keypad {
display: flex;
#keypad_group {
display: grid;
}
}
}
#urls {
padding: 0;
grid-area: urls;

View file

@ -19,6 +19,62 @@
{% endif %}
<div id="results" class="{{ only_template }}">
{% if is_math == True %}
<div id="calculator">
<div id="calc_header">
<div id="calc_title">
<div id="calc_icon">{{ icon_big('calculator-outline') }}</div>
<span id="calc_title_text">{{ _('Calculator') }}</span>
</div>
<div id="calc_query"> {{ q }} =</div>
</div>
<div id="calc_input">
<div id="calc_switch"></div>
<div id="calc_answer"></div>
</div>
<div id="calc_keypad">
<div id="keypad_group numbers">
<button value="(">(</button>
<button value=")">)</button>
<button value="%">%</button>
<button value="7">7</button>
<button value="8">8</button>
<button value="9">9</button>
<button value="4">4</button>
<button value="5">5</button>
<button value="6">6</button>
<button value="1">1</button>
<button value="2">2</button>
<button value="3">3</button>
<button value="0">0</button>
<button value=".">.</button>
<button value="=">=</button>
</div>
<div id="keypad_group operators">
<button class="clear"></button>
<button value="/">/</button>
<button value="*">*</button>
<button value="-">-</button>
<button value="+">+</button>
</div>
<div id="keypad_group advanced">
<button value="e">e</button>
<button value="p">π</button>
<button value="s">sin</button>
<button value="c">cos</button>
<button value="l">ln</button>
<button value="g">log</button>
<button value="t">tan</button>
<button value="q"></button>
<button value="!">x!</button>
<button value="^"></button>
</div>
</div>
</div>
{% endif %}
{% if answers -%}
<div id="answers" role="complementary" aria-labelledby="answers-title"><h4 class="title" id="answers-title">{{ _('Answers') }} : </h4>
{%- for answer in answers.values() -%}