I still have so much to learn about HTML and CSS, but I want to do some Javascript as well. The reverse string function is something I’ve done with Free Code Camp. This time I’m displaying the result with HTML. I know. It’s simple and safe, but it’s something. I had fun and I learned som new stuff.

Prepare

I downloaded a simple HTML5 template from Initializr, set up my project folder and added it to my github repository.

Plan

This requires a minimum of HTML. A div with an input element and a button. Below that, a place to output the result.

The javascript is simple as well. I’ve done this before so the function itself I can do without any outside help.

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.

Perform

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!

Perfect

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.

So…

To the project!