Skip to main content
Create new
Introduction
Reactivity
Props
Logic
Events
Bindings
Lifecycle
Stores
Motion
Transitions
Animations
Easing
SVG
Actions
Classes
Component composition
Context API
Special elements
Module context
Debugging
7GUIs
Miscellaneous
App.svelte
Katex.svelte
KatexMultiPara.svelte
fractionClass.js
gcd.js
termClass.js
<script lang="ts">
import Katex from './Katex.svelte';
import KatexMultiPara from './KatexMultiPara.svelte';
import Fraction from './fractionClass.js';
/** The Constructor */
const twoThird = new Fraction(2,3); // {num: 2, den: 3}
const negativeThree = new Fraction(-3); // {num: -3, den: 1}
const zero = new Fraction(0, 6); // {num: 0, den: 1}
const negativeThreeFifth = new Fraction(6,-10); // {num: -3, den: 5}
const oneQuarter = new Fraction(0.25); // {num: 1, den: 4}
//const errorFraction1 = new Fraction(1,0); // ERROR: denominator cannot be 0
//const errorFraction2 = new Fraction(1/3); // ERROR: unable to convert float to Fraction
//const errorFraction3 = new Fraction(2, 0.3); // ERROR: non-integer denominator not supported
</script>

<h1>
The Fraction Class
</h1>

<h2>
.toString() conversion to LaTeX
</h2>
<Katex math={`
${twoThird}, ${negativeThree}, ${zero}, ${negativeThreeFifth}, ${oneQuarter}, ${oneQuarter.toString({displayMode: true})}
`}/>

<h2>
Arithmetic Methods
</h2>
<KatexMultiPara mathArray={[
`${twoThird} + (-3) = ${twoThird.plus(-3)}`,
`${twoThird} + ${oneQuarter} = ${twoThird.plus(oneQuarter)}`,
`${twoThird} - ${oneQuarter} = ${twoThird.minus(oneQuarter)}`,
`${twoThird} \\times (${negativeThreeFifth}) \\div (${negativeThree}) =
loading Svelte compiler...
/* Select a component to see its compiled code */
result = svelte.compile(source, {
generate: ,
});
/* Select a component to see its compiled code */