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.

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

1
2
3
4
5

<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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

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