Categories
Technology

Make your own Custom Birthday Wisher

Introduction

πŸ‘‹ Hello friend, πŸ“œ πŸ™‚ 🏠

I was looking for a very creative way to wish someone " Happy Birthday “ πŸŽ‰ . As you think we will make some creativity using javascript. also added this to the List of Tools

All Code Given Here:- Github Link

Live demo Here:- Live Demo

Template

You can found this HTML template on anywhere, Websites like codepen. I have taken from codepen.

ProTip: select very simple first time for learning βœ‹

i have chosed once very simple template. i have mentioned in the code. My Template Link

How to make tool dynamic

If the birthday wishes tool is dynamic then we do not need to make changes every time, so we can send personalized emails from the link like this.

demo of personal birthday wishes tool

if you see we have one attribute ?name in the URL. That is the key to make this dynamic 😊

https://vanpariyar.github.io/birthday-wishes/?name=ShreeHariJI

  • this is our HTML
<div class="text">
    <h1>Happy Birthday! <span id="name">To you!!!</span> </h1>
    <p>I hope you have a wonderful birthday</p>
    <p class="muted">- Enjoy Birthday</p>
</div>

we will replave with <span id="name">To you!!!</span> by javascript.

  • Add JavaScript
var parseQueryString = function() {

    var str = window.location.search;
    var objURL = {};

    str.replace(
        new RegExp( "([^?=&]+)(=([^&]*))?", "g" ),
        function( $0, $1, $2, $3 ){
            objURL[ $1 ] = $3;
        }
    );
    return objURL;
};

//Example how to use it: 
var params = parseQueryString(); 

document.getElementById('name').innerText = ( params.name ) ? decodeURIComponent(params.name) : 'To You'; 

Finishing Up

You can host this tool anywhere you want to host. I prefer Github pages. But you can host anywhere like netlify, varcel, Heroku etc…

How to use

Add parameter to the end of the URL like

https://vanpariyar.github.io/birthday-wishes/?name=ShreeHariJI

Here ?name=ShreeHariJI is parameter

change with you name and copy to browser you will see your desired name


If it is helpfulΒ and saves your valuable Time ⏱ please show your support πŸ‘‡.

Buy Me A Coffee

Buy me A Coffee, Thank you and canva ( For Beautiful designs ). Thanks for the reading πŸ‘.