Automatic Today’s day name card

Today I am writing a useful code snippet which you can use in your websites or may be for yourself if you often forget the current day name like me.  This code snippet is similar to my previous snippet as it’s also based on HTML CSS card, and I am using Date object in it to get the current date and showing in a card. See the Pen Automatic Today’s day name card – simple and easy by Tayab Raza (@TayabRaza) on CodePen.

Read More

Automatic Happy New Year’s Card

I am going to share a very interesting code snippet which you can edit easily with basic knowledge of JavaScript. In this code snippet I have created a simple card with HTML, CSS and programmed it with Date object in JavaScript many of you are already familiar with Date object and some of you use it often. However, to see the result of this code snippet you have to wait until 1st January 2025 as I have configured it with time, so when the clock hit the 00:00:00 on 1st…

Read More

Vanilla JavaScript Digital clock with complete date and time

This code snippet is my one of the favourite snippet. I hope you will like it, in this code snippet I have created a digital clock which not even shows the time but also the complete date.  As I have mentioned above, that digital clock shows the date as well, so I think many of you already have guessed that it would be based on the JavaScript Date object.  I hope you will like my colour combinations, which are not so common.  See the Pen Vanilla JavaScript Digital clock with…

Read More

First letter capitalized of each word – JavaScript

I am going to show you how you can create a custom method to capitalize the first letter of each word by using String prototype. However, you can achieve the same results by using CSS, all you need to do is create a class .capitalize{ text-transform: capitalize; } Despite the fact that it is possible with CSS but sometimes on certain scenarios we need to do this by JavaScript. See the Pen First letter capitalized of each word with pure JavaScript – simple and easy by Tayab Raza (@TayabRaza) on…

Read More

Card design with dynamic rainbow colours

Today I’m presenting you a very useful code snippet which you can use on your websites for different purposes. It is a Card with dynamic rainbow colours, currently the time interval is 1 second, but of course you can change it according to your needs. Also, you can change the colours or add a fade effects to the colours to make the dynamic colours card more attractive.  See the Pen Pure JavaScript Card with dynamic rainbow colors – simple and easy by Tayab Raza (@TayabRaza) on CodePen.

Read More