diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 163 |
1 files changed, 0 insertions, 163 deletions
diff --git a/index.html b/index.html deleted file mode 100644 index 3e445c5..0000000 --- a/index.html +++ /dev/null @@ -1,163 +0,0 @@ -<!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.mp3" type="audio/mp3"> - 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> - <footer> - <a href="about.html">How it works</a><br> - <a href="https://kumardamani.net" target="_blank">Author</a> - </footer> - </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> |