Working Subscribe Button with Desktop Notification System using JavaScript

Hello, friends today in this blog we are going to be building this Subscribe Button with Desktop Notification System, in this blog post you will be learning the fundamentals of how to use this Desktop Notification System. Before we begin as always we need to explain further what this project does and how it can be used on a website or on your next project.

The Desktop Notification System in JavaScript basically is notification being sent to your PC through some basic javascript process, now that process is sending a prompt to the user browser informing the user if he/she should accept or decline the notification, if user hits accept then the notification will be sent to that device, if the user then hits decline then no notification will be sent.

To understand furthermore on this the video to this project will be below this so that you can further understand the concept behind creating this subscribe with Desktop Notification System using JavaScript.

Video Tutorial of Subscribe Button with Desktop Notification JavaScript

With this video, I hope you have fully understood the concept behind creating this project. as you saw in the video if (Notification.permission === "granted") - this means that if permission is granted.

I created this project to inspire you to build something better or similar to this, I have tried my best to make this project very simple for you. if you still don't understand this explanation. Source Code will be listed below, you can also download the source code.

Subscribe Button with Desktop Notification JavaScript[Source Code]

To create this Subscribe Button With Desktop Notification System. First, you need to create three Files: HTML, CSS & JavaScript File. After creating these files just paste the given codes into your file. You can also download the source code files of this login form and signup form from the given download button.

HTML CODE:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Subscription Push Notification using JavaScript</title>
    <!-- Boxicons CSS -->
    <link href='https://unpkg.com/boxicons@2.0.9/css/boxicons.min.css' rel='stylesheet'>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="content">
        <div class="wrapper">
            <div class="img">
                <img src="ct-logo.png" alt="">
            </div>
        </div>
        <div class="box">
            <span class="text">Creative Tutorials</span>
            <i class="bx bx-x"></i>
            <p>Subscribe to Our YouTube Channel</p>
            <div class="btn">
                <a href="#">Subscribe</a>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS CODE:

/* Poppins Google font link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: #4834d4;
}
.content{
    width: 100%;
    max-width: 420px;
    padding: 20px 20px;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 4px 4px rgba(0,0,0,0.2);
    white-space: nowrap;
    position: absolute;
    bottom: 20px;
    left: 20px;
    transition: all 0.8s ease;
}
.content .wrapper .img img{
    width: 100px;
    height: 100px;
}
.content{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.content .box{
    margin-left: 18px;
}
.content .box span.text{
    font-weight: 500;
    font-size: 20px;
}
.content i{
    position: relative;
    left: 50px;
    bottom: 10px;
    font-size: 23px;
    font-weight: 600;
    cursor: pointer;
}
.content .box p{
    font-size: 14px;
    color: #333;
}
.content .box .btn{
    width: 100%;
    height: 40px;
    background: #4834d4;
    border-radius: 5px;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    margin-top: 5px;
    transition: all 0.3s ease;
}
.content .box .btn a{
    color: #fff;
    text-decoration: none;
    font-size: 20px;
    font-weight: 500;
}
.content .box .btn:hover{
    background: #686de0;
}
.content.clear{
    left: -100%;
    opacity: 0;
}
.content.push{
    left: -100%;
    opacity: 0;
}

JAVASCRIPT CODE:

const notification_box = document.querySelector(".content"),
close = document.querySelector(".box i"),
subscribe_btn = document.querySelector(".btn a");

close.addEventListener("click", (e)=>{
    notification_box.classList.add("clear");
});
subscribe_btn.addEventListener("click", (e)=>{
    e.preventDefault(); //preventing the link from it's default state
    console.log(Notification.permission);

    if (Notification.permission === "granted") { // if permission is granted show that on the console and send the notification
        alert("You're already subscribed to us!! Thanks");
        notification_box.classList.add("push");
    } else if (Notification.permission !== "denied") { // if permission is denied show that on the console
        Notification.requestPermission().then(permission => {
            console.log(permission);
            if (permission === "granted") {
                showNotification(); // show notification function
            } // if user grants permision then we will show notification
        });
    }
    if (Notification.permission === "denied") {
        alert("Sorry You denied the request");
    } else if (Notification.permission !== "denied") { // if permission is denied show that on the console
        Notification.requestPermission().then(permission => {
            console.log(permission)
        });
    }
});
function showNotification() { // function to send the notification
    const notification = new Notification("Message from us", { //notification header txt
        body: "Thanks for Subscribing to us!", //notification text
        icon: "ct-logo.png" //notification icon
    });
    notification.onclick = (e)=>{
        window.location.href = "https://youtube.com/c/CreativeTutorialsWeb?sub_confirmation=1";
    }
}

That's all now you've successfully created this Working Subscribe Button With Desktop Notification System, If you faced difficulty understanding or copying the source code you can just download the source code file from the given download button, extract the file, and use it.

Working Subscribe Button with Desktop Notification System using JavaScript

Creative Tutorials

2 Comments

Post a Comment

Contact Form