73 lines
2.5 KiB
Plaintext
73 lines
2.5 KiB
Plaintext
<%@ taglib prefix = "c" uri = "http://java.sun.com/jsp/jstl/core" %>
|
|
<%--
|
|
Created by IntelliJ IDEA.
|
|
User: ministicraft
|
|
Date: 21/01/2019
|
|
Time: 14:36
|
|
To change this template use File | Settings | File Templates.
|
|
--%>
|
|
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
|
<html>
|
|
<head>
|
|
<title>Anagramme</title>
|
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
</head>
|
|
<body>
|
|
<nav>
|
|
<div class="nav-wrapper">
|
|
<a href="index.jsp" class="brand-logo">Anagramme</a>
|
|
<ul id="nav-mobile" class="right hide-on-med-and-down">
|
|
<li><a href="index.jsp">Home</a></li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
<main class="container">
|
|
<div>
|
|
<h3>Enter letters, you want the anagram to be found:</h3>
|
|
<div class="input-field col s5">
|
|
<input id="letters" type="text">
|
|
<label for="letters">Letters</label>
|
|
</div>
|
|
<button class="btn waves-effect waves-light col s2" id="search">Search</button>
|
|
</div>
|
|
<div class="divider"></div>
|
|
<div>
|
|
<h3>Result:</h3>
|
|
<ul class="collection col s8" id="resultList">
|
|
</ul>
|
|
</div>
|
|
</main>
|
|
<script>
|
|
document.getElementById('search').onclick = function(){
|
|
var letters = document.getElementById('letters').value;
|
|
var Http = new XMLHttpRequest();
|
|
var url='/anagram?letters='+letters;
|
|
Http.open("GET", url);
|
|
Http.send();
|
|
Http.onreadystatechange=(e)=>{
|
|
console.log(Http.responseText);
|
|
var result = JSON.parse(Http.responseText);
|
|
var resultList = document.getElementById('resultList');
|
|
while (resultList.firstChild) {
|
|
resultList.removeChild(resultList.firstChild);
|
|
}
|
|
result.anagrams.forEach(function(anagram) {
|
|
var node = document.createElement("li");
|
|
node.className = "collection-item";
|
|
var textnode = document.createTextNode(anagram);
|
|
node.appendChild(textnode);
|
|
resultList.appendChild(node)
|
|
})
|
|
}
|
|
};
|
|
</script>
|
|
<footer class="page-footer">
|
|
<div class="container">
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
</html>
|