36 lines
1.9 KiB
HTML
36 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>String manipulator</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
|
|
</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; gap: 10px;align-items: center; width: 500px;">
|
|
<input type="text" class="form-control form-control-sm" id="word" placeholder="Enter word" style="border: 3px solid black;">
|
|
<select class = "form-select-sm" id="transformation" aria-label="form-select-sm example">
|
|
<option value="toupper" selected> toUpper</option>
|
|
<option value="removews"> removeWhitespaces</option>
|
|
<option value="removedigits"> removeDigits</option>
|
|
<option value="tolower"> toLower</option>
|
|
</select>
|
|
<input id = "result" class="form-control form-control-sm" readonly style="border: 3px dotted black;">
|
|
</div>
|
|
<div class = "flex-container" style = "flex-direction: row;display: flex; width: 500px; justify-content: center;">
|
|
<button type="button" class = "btn btn-dark align-self-center" onclick="transform()">
|
|
Transform
|
|
</button>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<script>
|
|
async function transform()
|
|
{
|
|
const word = document.getElementById("word").value
|
|
const func = document.getElementById("transformation").value
|
|
document.getElementById("result").value = await (await fetch(`http://localhost:8080/${func}?word=${word}`)).text()
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |