This requires a minimum of HTML. A div with an input element and a button. Below that, a place to output the result.
I need to do something cool with the styling. I’m thinking exploring the possibilities of the input element and the label. Since, you know… that is what I got to work with.
The making of the function was easy enough. But I had some problems displaying the result to the page. It’s seemed the page refreshed every time I pushed the button, and the result only briefly flashed before disappearing.
The answer to this was of course embarassingly easy. I had put the input and the box inside a form element. This ment that the button is linked to the form. And, that every time the button is pushed, it redirects to the page again since I hadn’t set any action attribute.
I struggled a bit to style the placeholder text, but of course I found the answer on CSS-tricks.
Agin with the box shadow. I’m lazy so I used Cssmatic. Cool, cool, cool!
To make it a bit more awesome, I removed the submit button and made it so it updates when you type. This turned out to be a lot simpler than I initially thought… Just remove the button, and add the onkeyup attribute to the input element. Check it out on MDN.
Then I removed the autocomplete with the autocomplete attribute, turning it off.