Coding With David

  I came across a fun application that provides a list of current movies, provides an overview of the movie, allows the user to search for a title, and shows a color-coded rating from IMDB.  I thought it would be cool to build in Blazor.  I was right it was cool to build. HTML The HTML contains a container div that has a header and main section.   The header is for the search component.  The main section contains a for loop that spins through a collection of movies and builds out the data.  It has an image element, a div that holds an H3 for the movie title, and a span for the IMDB rating. That's pretty much all you need. CSS The CSS is just as straightforward.  We set the background color,  set the location and sizing of the "movie card" and the movie "data". We use a transformation on the movie card so when the user hovers over the movie image we see the data details.  This is a nice visual effect. The one extra styling we do is to color code the IMDB rating. 

  This is a pretty cool trick if you like using placeholder text but don't like that the "text" goes away once the user starts to type.  What this does is simply moves the "placeholder" text up to a label when the input gets focus.  The cool part is it will move the "placeholder" text back once the input loses focus if there is no data in the input.  We are using actual text not the placeholder attribute.  This provides it with a cute but functional visual effect.  See live demo HTML The HTML is just s normal log-in form.  There is a form container, a form, and 2 form controls.  Both inputs are required and the password element is of type password so it will mask the input values.  Each input element also has a label that is used to let the user know the input needed. CSS Most of the CSS is to just set the layout and make it look nice.  The CSS trick we are using is to have a couple of classes to handle the moving of the text,  "focusMove" an