<!DOCTYPE html> <html lang="en"> <head> <!-- Meta --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>these-3-words Map</title> <!-- Style --> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> </head> <body> <div class="container"> % if err: <aside class="alert alert-danger" role="alert">Error: {{ err }}</aside> % end <main class="jumbotron"> <h1>These3Words Map</h1> <p class="lead"> Find a location anywhere in the world identified by three simple words. </p> <p id="input3wordsContainer"> <input type="text" class="form-control" id="input3words" placeholder="engirt-aleutic-canun"> </p> <p> <button id="button3words" class="btn btn-lg btn-primary">Find on Map</button> </p> </main> <script> (function() { var default3words = 'engirt-aleutic-canun'; var threewordsField = document.getElementById('input3words'); document.getElementById('button3words').addEventListener('click', function(evt) { var threewords = threewordsField.value; if (threewords.length === 0) { threewords = default3words; } if (/\w+-\w+-\w+/.test(threewords)) { window.location = '/' + threewords; } else { document.getElementById('input3wordsContainer').classList.add('has-error'); } }); })(); </script> </div> </body> </html>