Simple card made with HTML, CSS & JS

Simple card made with HTML, CSS & JS

·

2 min read

Website.png

Hello everyone, today I actually forced myself to sit down and code something, anything! So I came up with this cool little card. It has the current time, a greeting with the time of day and a button that when clicked says a saying.

HTML.png First I laid out some simple HTML as the basic groundwork, I borrowed the "Lobster" typeface from Google to add some life to this. Nothing major HTML wise just something basic.

CSS.png I used the flex box feature of CSS for this, I started by using flex on the body which enables us to make the container and have it centered. (Correction) The #timeOdDay is supposed to be #timeOfDay and has been corrected in code.

JS.png As I am not the best (yet) at JS, I coded a function which ends up making our current time for our card. The second function determines if it's the afternoon or if it's the evening. Then we finally get to our JS that writes whatever we want it to say where the id="demo" is located. Right now we have it saying "Test Successful!". Look at this simple code and others like it to get a better understanding of deeper ideas. Through small and easy projects one can easily stay frosty and also learn a thing or two in the process. I had quite a bit of fun sitting down and doing this so look forward to many more small little gem projects that will scratch that coding itch but wont overwhelm you. I also provided the link to my Github with the source code for this project. My GitHub repository for this project