diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 160 |
1 files changed, 160 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..785667b --- /dev/null +++ b/index.html @@ -0,0 +1,160 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Name my Dragon - Home</title> + <link rel="stylesheet" href="style.css"> +</head> +<body> + <center> + <h1>Name my Dragon</h1> + <audio id="audio-player" loop> + <source src="audio/western-cover.m4a" type="audio/mp4"> + Enable audio on your browser to get the best experience. + </audio> + <div class="alert"> + Warning: The button below will play some sweet tunes! + Hit the "Stop music" button to stop it or just mute your device. + <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span> + </div> + <div class="container"> + <form id="nameForm" class="flex"> + <label style="color: black;" for="firstName">Enter your first name:</label> + <input type="text" id="firstName" placeholder="bob" required> + <button type="submit">Name my Dragon</button> + </form> + <div class="flex"> + <button id="stop-music" onclick="stopMusic();">Stop music</button> + </div> + </div> + <p>And your Dragon is...</p> + <div id="results" class="container"> + <div id="dragonName" class="flex flex1"></div> + <div id="dragonStats" class="flex flex2"></div> + <div id="lasso" class="flex"></div> + </div> + <div id="alternatives"></div> + <div> + <p>See a comparison of all the dragons here:</p> + <img src="images/dragon-sizes.png" width="50%" alt="Comparison chart for all the dragons"> + </div> + <a href="about.html">How it works</a> + </center> + + <script type="text/javascript" src="dragons.js"></script> + <script> + const dragonNames = dragons.map(d => d.name); + console.log(dragonNames); + + function levenshteinDistance(a, b) { + if (a.length === 0) return b.length; + if (b.length === 0) return a.length; + + const matrix = []; + + for (let i = 0; i <= b.length; i++) { + matrix[i] = [i]; + } + + for (let j = 0; j <= a.length; j++) { + matrix[0][j] = j; + } + + for (let i = 1; i <= b.length; i++) { + for (let j = 1; j <= a.length; j++) { + if (b.charAt(i - 1) === a.charAt(j - 1)) { + matrix[i][j] = matrix[i - 1][j - 1]; + } else { + matrix[i][j] = Math.min( + matrix[i - 1][j - 1] + 1, + matrix[i][j - 1] + 1, + matrix[i - 1][j] + 1 + ); + } + } + } + + return matrix[b.length][a.length]; + } + + function cosineSimilarity(a, b) { + const aSet = new Set(a.toLowerCase()); + const bSet = new Set(b.toLowerCase()); + const intersection = new Set([...aSet].filter(x => bSet.has(x))); + return intersection.size / Math.sqrt(aSet.size * bSet.size); + } + + function jaccardSimilarity(a, b) { + const aSet = new Set(a.toLowerCase()); + const bSet = new Set(b.toLowerCase()); + const intersection = new Set([...aSet].filter(x => bSet.has(x))); + const union = new Set([...aSet, ...bSet]); + return intersection.size / union.size; + } + + function calculateSimilarities(name) { + const results = dragonNames.map(n => ({ + name: n, + levenshtein: 1 - levenshteinDistance(name, n) / Math.max(name.length, n.length), + cosine: cosineSimilarity(name, n), + jaccard: jaccardSimilarity(name, n) + })); + + return { + levenshtein: results.sort((a, b) => b.levenshtein - a.levenshtein).slice(0, 5), + cosine: results.sort((a, b) => b.cosine - a.cosine).slice(0, 5), + jaccard: results.sort((a, b) => b.jaccard - a.jaccard).slice(0, 5) + }; + } + + function getDragonObject(name) { + return dragons.filter(dragon => (dragon.name === name))[0]; + } + + function stopMusic() { + document.getElementById('audio-player').pause(); + } + + document.getElementById('nameForm').addEventListener('submit', function(e) { + e.preventDefault(); + const name = document.getElementById('firstName').value; + const similarities = calculateSimilarities(name); + console.log(similarities); + + const topChoice = similarities.cosine[0].name; + const topChoiceDragon = getDragonObject(topChoice); + const possibleAlternatives = new Set( + Array.prototype.concat( + similarities.jaccard.slice(0, 2).map(n => n.name), + similarities.levenshtein.slice(0, 2).map(n => n.name) + ) + ).difference( + new Set([topChoice]) + ); + + document.getElementById('dragonName').innerHTML = + `<p><span style="font-size:xx-large;" class="legible">${topChoice}</span></p>`; + document.getElementById('dragonName').style.backgroundColor = topChoiceDragon.primaryColor; + + document.getElementById('dragonStats').innerHTML = ` + <p>${topChoiceDragon.description}</p> + <p> + Size: ${topChoiceDragon.size}<br> + Age: ${topChoiceDragon.age}<br> + Abilities: ${topChoiceDragon.notableAbilities}<br> + </p>`; + document.getElementById('dragonStats').style.backgroundColor = topChoiceDragon.secondaryColor; + + document.getElementById('lasso').innerHTML = ` + <img src="images/hat-texas.gif" width="100%" alt="Cowboy lasso gif">`; + document.getElementById('lasso').style.backgroundColor = topChoiceDragon.primaryColor; + + document.getElementById('alternatives').innerHTML = + `<p>Possible alternatives: <strong>${[...possibleAlternatives].join(', ')}</strong></p>`; + + document.getElementById('audio-player').play(); + }); + </script> +</body> +</html> |