I've created a small input field whose border turns green when the user enters text. When the user deletes the text, the border returns to it's default color. Nothing fancy.
The structure of the page is an input field with a placeholder attribute. This one has some simple text that says, "Please type text in here ..." For the stylesheet, I imported a nice sans-serif font from the Google Fonts website using @import. To the universal selector, I've set the box-sizing to border-box which includes both padding and borders when calculating the width of an element (the margin is not included in this calculation). The input field, I've set to display:block so that I am able to easily center the field horizontally on the page using margin:auto. I've removed the default focus glow from the input field and styled it's text with the imported Google font.
The micro interaction is controlled by setting the input element to a variable, in this case I left it at input to keep things simple. Then, used this input element to add an event listener (in this case I'm using keydown) so that when we interact with the element by placing our cursor in the field and start typing, we can get the border color to change. I save the border color information to a class in the CSS file.
The event listener takes in two parameters, the first is the event and the second is the function that holds the behavior for the event. The second parameter in the event listener will run after the user does the action in the first parameter. The second parameter contains a conditional statement that states when the user types something in the input field, the border will turn green else if the field is empty it will revert to its default color. A class of .success is added to the input element via the classList property which references the .success class defined in the CSS file.