JSFiddle - React, Tailwind, and code Playground

by maplol

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
<fieldset>
	<legend>Расчет определенного интеграла</legend>
	<fieldset style="display:inline">
		<legend>Ввод исходных данных</legend>
		<img src="formuli1.PNG" alt="s"><br>
		<label>a(левая граница)	<input type="text" id="a"></label><br>
		<label>b(правая граница)<input type="text" id="b"></label><br>
		<label>N(параметр)	<input type="text" id="N"></label><br>
		<label>p(параметр)<input type="text" id="p"></label><br>
		<label>s(параметр)	<input type="text" id="s"></label><br><br>
		<button onclick="integral()">Вычислить интеграл</button>
	</fieldset>
	<fieldset style="display:inline;    vertical-align: top;">
		<legend>История вычислений</legend>
		<label for="buf"><textarea name="text" id="buf" rows="29" cols="70" style=" height: 436px; width: 495px;"></textarea></label><br>
		<button class="blo" onclick="clear_buff()">Очистить memo</button>
		<button class="blo" onclick="download(buff.value, 'Results.txt')">Сохранить в файл</button>
		<button class="blo" onclick="copy()">Сохранить в буфер</button>
		<input type='file' accept='text/plain' onchange='openFile(event)' class="inp">
	</fieldset>
	<fieldset style="display:inline;    vertical-align: top;">
		<legend>График</legend>
		<canvas id="c"></canvas><br>
		<div id="info"></div>
		<button onclick="createGraph()">Построить график</button>
		<button onclick="clearGraph()">Очистить график</button>
	</fieldset>
	<fieldset class="text">
		<legend>Результат вычислений</legend>
		<div class="box">Результат = <output id="res"></output></div>
		<div class="box">Точный результат = <output id="tocnres"></output></div>
		<div class="box">Абс. погрешность = <output id="pogr"></output></div>
	</fieldset>
</fieldset>
Струков Дмитрий ФЭ-21
</body>
<script src="js.js"></script>
</html>

CSS

img{
    width: 50%;
}
button{
    text-decoration: none;
    outline: none;
    display: inline-block;
    color: #040404;
    box-shadow: 0 0 0 2px white;
    width: 150px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.blo{
    display: block;
}

.text{
    display:block;
    vertical-align: top;
    font-size: 14.55px;
}
.t1{
    top: 340px;
}
.t2{
    top: 460px;
}
canvas{
    overflow: hidden;
}

JavaScript

let
    x,i,h,S,xs,
    N = document.getElementById("N"),
    a = document.getElementById("a"),
    b = document.getElementById("b"),
    p = document.getElementById("p"),
    s = document.getElementById("s"),
    tocnres = document.getElementById("tocnres"),
    pogr = document.getElementById("pogr"),
    res = document.getElementById("res"),
    buff = document.getElementById("buf"),
    ys = xs => "",
    c = document.getElementById("c"),
    ctx = c.getContext("2d"),
    cw = c.width = 500,
    ch = c.height = 500,
    scrollX     = 0,
    scrollY     = 0,
    scale       = 1,
    scaleFactor = 0.1;

a.focus();

/**
 * @return {number}
 */

function F(x,p,s) {
    return Math.pow(p * x + s, 3);
}
function prec(a,b,p,s) {
    return ((b-a)*(2*s+(b+a)*p)*(2*Math.pow(s,2)+2*(b+a)*p*s+(Math.pow(b,2)+Math.pow(a,2))*Math.pow(p,2)))/4;
}
function integral(){
    let
        p1 = parseFloat(p.value.replace(",",".")),
        a1 = parseFloat(a.value.replace(",","."))+0.0001,
        N1 = parseFloat(N.value.replace(",",".")),
        s1 = parseFloat(s.value.replace(",",".")),
        b1 = parseFloat(b.value.replace(",","."));

    if(!a1 ||!b1 || !p1 ||!s1 || !N1) {
        alert("не все данные введены!");
        return;
    }
    h=(b1-a1)/N1;
    S=(F(a1,p1,s1)+F(b1,p1,s1))/2;
    for (i=1; i<N1;i++){
        x=a1+h*i;
        S=S+F(x,p1,s1);
    }
    tocnres.value = prec(a1,b1,p1,s1).toFixed(4) ;
    res.value=(S*h).toFixed(4);
    pogr.value=Math.abs(tocnres.value-res.value).toFixed(4);
    buff.value += "Интеграл с шагом N= "+N1+" от a= "+(a1-0.0001)+" до b= "+b1+" с параметром r="+p1+" равен: "+res.value+ "\nТочный результат = "+ tocnres.value+"\nАбс. погрешность "+pogr.value+"\n" ;
}

///////////////////////////////Само построение графика, которое лагает


ctx.translate(cw/2, ch/2);
// clear canvas and draw two boxes
function render(){
    let
        r = parseFloat(b.value.replace(",", ".")),
        l = parseFloat(a.value.replace(",", ".")),
       ...