37 lines
1.6 KiB
HTML
37 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>String manipulator</title>
|
|
</head>
|
|
<body>
|
|
<div class = "flex-container" style = "flex-direction: column; display: flex;">
|
|
<div class = "flex-container" style = "flex-direction: row;display: flex; margin-bottom: 10px;">
|
|
<input type="text" class="form-control" id="word">
|
|
<select class = "form-control" id="transformation">
|
|
<option value="toupper" selected> toUpper</option>
|
|
<option value="removews"> removeWhitespaces</option>
|
|
<option value="removedigits"> removeDigits</option>
|
|
<option value="tolower"> toLower</option>
|
|
</select>
|
|
<p id = "result" style = "margin-left: 10px;"></p>
|
|
</div>
|
|
<div class = "flex-container" style = "flex-direction: row;display: flex;":>
|
|
<aside style="flex: 1;"></aside>
|
|
<button type="button" class = "button align-self-center" onclick="transform()">
|
|
Transform
|
|
</button>
|
|
<aside style="flex: 8;"></aside>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<script>
|
|
async function transform()
|
|
{
|
|
const word = document.getElementById("word").value
|
|
const func = document.getElementById("transformation").value
|
|
document.getElementById("result").innerHTML = await (await fetch(`http://localhost:8080/${func}?word=${word}`)).text()
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |