57 lines
2.2 KiB
HTML
57 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Манипуляции с числами</title>
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
|
||
</head>
|
||
<body>
|
||
<article class="container align-content-center">
|
||
<div class="row">
|
||
<div class="col-md-2 m-2 p-0">
|
||
<select class="form-control" id="type">
|
||
<option value="int" selected>Числа</option>
|
||
<option value="string">Строки</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-md-2 m-2 p-0">
|
||
<select class="form-control" id="calc">
|
||
<option value="sum" selected>Сумма</option>
|
||
<option value="sub">Вычитание</option>
|
||
<option value="mult">Умножение</option>
|
||
<option value="div">Деление</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-md-2 m-2 p-0">
|
||
<input type="text" class="form-control" id="item1">
|
||
</div>
|
||
<div class="col-md-2 m-2 p-0">
|
||
<input type="text" class="form-control" id="item2">
|
||
</div>
|
||
<div class="col-md-3 m-2 p-0">
|
||
<button type="button" class="form-control btn btn-info" onclick="calculator()">Вывести результат</button>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-5 m-2 p-0 align-middle">
|
||
<p class="h4" id="result"></p>
|
||
</div>
|
||
</article>
|
||
|
||
|
||
<script>
|
||
async function calculator() {
|
||
const calc = document.getElementById("calc").value
|
||
const item1 = document.getElementById("item1").value
|
||
const item2 = document.getElementById("item2").value
|
||
const type = document.getElementById("type").value
|
||
|
||
var url = `http://127.0.0.1:8080/${calc}?item1=${item1}&item2=${item2}&type=${type}`
|
||
|
||
const responce = await fetch(url)
|
||
const resout = await responce.text()
|
||
|
||
document.getElementById("result").innerHTML = resout
|
||
}
|
||
</script>
|
||
</body> |