front
This commit is contained in:
parent
504c935b72
commit
1b59c23805
6
Frontend/dist/assets/index-37892e52.css
vendored
Normal file
6
Frontend/dist/assets/index-37892e52.css
vendored
Normal file
File diff suppressed because one or more lines are too long
3
Frontend/dist/assets/index-3c0098aa.js
vendored
Normal file
3
Frontend/dist/assets/index-3c0098aa.js
vendored
Normal file
File diff suppressed because one or more lines are too long
62
Frontend/dist/index.html
vendored
Normal file
62
Frontend/dist/index.html
vendored
Normal file
@ -0,0 +1,62 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite App</title>
|
||||
<script type="module" crossorigin src="/assets/index-3c0098aa.js"></script>
|
||||
<link rel="stylesheet" href="/assets/index-37892e52.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container-sm p-3">
|
||||
<form id="add">
|
||||
<h2 class="text-center mb-3">Add</h2>
|
||||
<div class="mb-3">
|
||||
<div class="input-group mb-1">
|
||||
<input type="number" class="form-control" placeholder="V1" aria-label="First Number" name="v1" autocomplete="off">
|
||||
<span class="input-group-text">+</span>
|
||||
<input type="number" class="form-control" placeholder="V2" aria-label="Second Number" name="v2" autocomplete="off">
|
||||
<span class="input-group-text" id="add_result">0</span>
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<form id="toLowerCase">
|
||||
<h2 class="text-center mb-3">To Lower Case</h2>
|
||||
<div class="mb-3">
|
||||
<div class="input-group mb-1">
|
||||
<input type="text" class="form-control" placeholder="String" aria-label="Your String" name="value" autocomplete="off">
|
||||
<span class="input-group-text" id="tlc_result"></span>
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<form id="split">
|
||||
<h2 class="text-center mb-3">Split String</h2>
|
||||
<div class="mb-3">
|
||||
<div class="input-group mb-1">
|
||||
<input type="text" class="form-control" placeholder="String" aria-label="Your String" name="value" autocomplete="off">
|
||||
<input type="text" class="form-control" placeholder="Separator" aria-label="Your String" name="sep" autocomplete="off">
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</div>
|
||||
<span class="input-group-text" id="ss_result"></span>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<form id="toBin">
|
||||
<h2 class="text-center mb-3">Number To Bin</h2>
|
||||
<div class="mb-3">
|
||||
<div class="input-group mb-1">
|
||||
<input type="number" class="form-control" placeholder="Number" aria-label="Your Number" name="value" autocomplete="off">
|
||||
<span class="input-group-text" id="ntb_result"></span>
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
61
Frontend/index.html
Normal file
61
Frontend/index.html
Normal file
@ -0,0 +1,61 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container-sm p-3">
|
||||
<form id="plus">
|
||||
<h2 class="text-center mb-3">Plus</h2>
|
||||
<div class="mb-3">
|
||||
<div class="input-group mb-1">
|
||||
<input type="number" class="form-control" placeholder="V1" aria-label="First Number" name="v1" autocomplete="off">
|
||||
<span class="input-group-text">+</span>
|
||||
<input type="number" class="form-control" placeholder="V2" aria-label="Second Number" name="v2" autocomplete="off">
|
||||
<span class="input-group-text" id="plus_result">0</span>
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<form id="minus">
|
||||
<h2 class="text-center mb-3">Minus</h2>
|
||||
<div class="mb-3">
|
||||
<div class="input-group mb-1">
|
||||
<input type="number" class="form-control" placeholder="V1" aria-label="First Number" name="v1" autocomplete="off">
|
||||
<span class="input-group-text">-</span>
|
||||
<input type="number" class="form-control" placeholder="V2" aria-label="Second Number" name="v2" autocomplete="off">
|
||||
<span class="input-group-text" id="minus_result">0</span>
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<form id="toLowerCase">
|
||||
<h2 class="text-center mb-3">To Lower Case</h2>
|
||||
<div class="mb-3">
|
||||
<div class="input-group mb-1">
|
||||
<input type="text" class="form-control" placeholder="String" aria-label="Your String" name="value" autocomplete="off">
|
||||
<span class="input-group-text" id="tlc_result"></span>
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<form id="toUpperCase">
|
||||
<h2 class="text-center mb-3">To Upper Case</h2>
|
||||
<div class="mb-3">
|
||||
<div class="input-group mb-1">
|
||||
<input type="text" class="form-control" placeholder="String" aria-label="Your String" name="value" autocomplete="off">
|
||||
<span class="input-group-text" id="tuc_result"></span>
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
<script type="module" src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
72
Frontend/main.js
Normal file
72
Frontend/main.js
Normal file
@ -0,0 +1,72 @@
|
||||
import 'bootstrap/dist/css/bootstrap.css'
|
||||
import serverRequest from "./serverRequsest.js";
|
||||
|
||||
const $forms = document.querySelectorAll("form");
|
||||
|
||||
const onSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
const form = e.target;
|
||||
|
||||
switch (form.id) {
|
||||
case "plus" : {
|
||||
plus(form)
|
||||
break;
|
||||
}
|
||||
case "toLowerCase" : {
|
||||
tlc(form)
|
||||
break;
|
||||
}
|
||||
case "toUpperCase" : {
|
||||
tuc(form)
|
||||
break;
|
||||
}
|
||||
case "minus" : {
|
||||
minus(form)
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const plus = (form) => {
|
||||
const v1 = form.v1.value;
|
||||
const v2 = form.v2.value;
|
||||
|
||||
serverRequest.plus(v1, v2).then(data => {
|
||||
const $res = document.getElementById("plus_result");
|
||||
$res.innerHTML = data;
|
||||
})
|
||||
}
|
||||
|
||||
const minus = (form) => {
|
||||
const v1 = form.v1.value;
|
||||
const v2 = form.v2.value;
|
||||
|
||||
serverRequest.minus(v1, v2).then(data => {
|
||||
const $res = document.getElementById("minus_result");
|
||||
$res.innerHTML = data;
|
||||
})
|
||||
}
|
||||
|
||||
const tlc = (form) => {
|
||||
const value = form.value.value;
|
||||
|
||||
serverRequest.toLowerCase(value).then(data => {
|
||||
const $res = document.getElementById("tlc_result");
|
||||
$res.innerHTML = data;
|
||||
})
|
||||
}
|
||||
|
||||
const tuc = (form) => {
|
||||
const value = form.value.value;
|
||||
|
||||
serverRequest.toUpperCase(value).then(data => {
|
||||
const $res = document.getElementById("tuc_result");
|
||||
$res.innerHTML = data;
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
$forms.forEach(item => {
|
||||
item.onsubmit = onSubmit;
|
||||
})
|
||||
|
||||
1115
Frontend/package-lock.json
generated
Normal file
1115
Frontend/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
19
Frontend/package.json
Normal file
19
Frontend/package.json
Normal file
@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "interface_project",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "./node_modules/.bin/vite",
|
||||
"build": "./node_modules/.bin/vite build",
|
||||
"preview": "./node_modules/.bin/vite preview"
|
||||
},
|
||||
"devDependencies": {
|
||||
"vite": "^4.1.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"ajax": "^0.0.4",
|
||||
"axios": "^1.3.2",
|
||||
"bootstrap": "^5.2.3"
|
||||
}
|
||||
}
|
||||
27
Frontend/serverRequsest.js
Normal file
27
Frontend/serverRequsest.js
Normal file
@ -0,0 +1,27 @@
|
||||
import axios from "axios";
|
||||
|
||||
export default class serverRequest {
|
||||
static #url = "http://localhost:8080/";
|
||||
|
||||
static async plus(v1 = 0, v2 = 0) {
|
||||
const { data } = await axios.get(this.#url + `plus?v1=${v1}&v2=${v2}`);
|
||||
return data;
|
||||
}
|
||||
|
||||
static async minus(v1 = 0, v2 = 0) {
|
||||
const { data } = await axios.get(this.#url + `minus?v1=${v1}&v2=${v2}`);
|
||||
return data;
|
||||
}
|
||||
|
||||
static async toLowerCase(str = "") {
|
||||
const { data } = await axios.get(this.#url + `toLowerCase/${str}`);
|
||||
return data;
|
||||
}
|
||||
|
||||
static async toUpperCase(str = "") {
|
||||
const { data } = await axios.get(this.#url + `toUpperCase/${str}`);
|
||||
return data;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user