CODEWITHSUNDEEP
javascripthtml
osherez
osherez

Reputation: 99

creating a Push notification on website with JavaScript

thanks in advance to all. I really don't know where to start my question's and whats the right terms for what I'm looking for, but sure you guys have some answers for a newbie. I'm trying to get better with js and I want to create a simple push notification msg that will show some pre-written text in the html markup. I'v achieved that with some functions manipulating the css but not sure if its a good method of doing so.

// get msg div
var msg = document.getElementById('msg');
// get button
var btn = document.getElementById('btn');
// get test button
var closeBtn = document.getElementById('closeBtn');

// event lisnters - click btn to run msg
btn.addEventListener('click',runMsg);
// event lisnters - click btn to close msg
closeBtn.addEventListener('click',closeMsg);

// functions list
function runMsg(){
  msg.style.display = 'block'
}

function closeMsg(e){
  if(e.target === closeBtn){
    msg.style.display = 'none';

  }
}

1.method one: what is a better way of doing that? creating the html markup and all the css premade and in position just hidden and using js to reveal it?

2.method two: creating all of the html markup using js when a user clicks a certain element using the createElemnt() method ?

**I'm just curious how all the plugins out there create this, my guess is that they have the markup ready and they just linked the two together in some way.

hoping I was clear, cheers to all.

Upvotes: 0

Views: 1076

Answers (3)

imanshu15
imanshu15

Reputation: 764

Since you have tagged Jquery and If you are using Jquery you can simply achieve what you are doing by this,

$("#btn").click(function(){ //Capture btn click
    $('#msg').css('display','block') // display msg
}); 

$("#closeBtn").click(function(){ // Capture closeBtn click
    $('#msg').css('display','none') // hide msg
});

Upvotes: 1

Kristiyan D Kovachev
Kristiyan D Kovachev

Reputation: 132

The more elements you have pre-generated, and hidden, the slower your page will be. Also, even if you build the entire page with all potential pop-up not all users will be using/triggering them, thus it is a waste. That is why the consensus in web development is that you only build elements when you need them.

In some cases where you are targeting mobile devices you might want to prepare all assets ahead of time but you need to read up on https://developers.google.com/web/progressive-web-apps/ and potentially https://ionicframework.com/

Upvotes: 1

oninross
oninross

Reputation: 999

Sounds like you are looking for a progressive web app. Start your journey here.

Upvotes: 1

Related Questions