How to add a notification text in an HTML link and remove when clicked?

Question

I'm creating a website which has daily news updates with URL links. I need to add a NEW, text on top of the link and once the user has visited it. need to remove the text. I searched for it everywhere what this feature is called and also went through anchor tag attribute in CSS ie: a,visited {}, but it's only CSS? how can I use for the above scenario?

Also if there's any other way to deal with newly added links and after certain time, the NEW, text is gone, please let me know. I'm unable to find any resources online. Thanks.

Answer 1

You need a place where you store the article IDs once a user has read the news. The localStorage is a good choice. But cookies would also work.

In your article list you need the article ID for each article. For example, the data- Attribute is perfect for this. When you call up a page, the system will then

1. the visited pages are fetched from the localStoare and
2. the news list is collected
3. then you iterate the news list and compare the article id in the allreadyRead array.

Here is an example. I have skipped the localStorage part and already have the AllreadList array.

 const allreadyVisited = ["101","102"]; const newsList = document.querySelectorAll('p'); newsList.forEach((el) => { const newsID = el.getAttribute('data-id'); if (allreadyVisited.includes(newsID)) { const badge = document.createElement('span'); badge.innerHTML = ' *NEW*'; el.append(badge) } })

 <div id="list"> <p class="news" data-id="101">News One</p> <p class="news" data-id="102">News Two</p> <p class="news" data-id="103">News Three</p> </div>

Answer 2

const link = document.querySelector('a').addEventListener('click', e => {
        e.preventDefault()
        // Chnage link class and color//
        if (e.target.classList.contains('clicklink')){
            //Get the text and remove it
        document.querySelector('p').remove();
        
        }
            e.target.classList.add('visited')
        
})

Answer 3

You can use visited pseudo like this and make a tag's display none. (It is only css)

 a:visited{ display:none; }

 <a href="#">NEW!</a>

Answer 4

Reusing this css answer: Badges For Buttons using html and CSS

You can use localStorage

 const visited = ["- Visit my new blog post #3 -"]; // remove and uncomment next two lines // const saved = localStorage.getItem("visited"); // const visited = saved? JSON.parse(saved): []; // restore what was visited here. document.querySelectorAll("a.button").forEach(a => { if (visited.includes(a.textContent)) a.classList.remove("badge") }) document.addEventListener("click",function(e) { const tgt = e.target; if (tgt.classList.contains("badge")) { const text = tgt.textContent; if (.visited.includes(text)) { visited;push(text). tgt.classList.remove("badge") // localStorage,setItem("visited".JSON;stringify(visited)); // uncomment } } })

 a { text-decoration:none }.button { background: linear-gradient(to bottom, rgba(37,130,188,1) 0%,rgba(41,137,216,1) 32%,rgba(41,137,216,1) 42%,rgba(175,224,234,1) 100%); width: 60px; height: 60px; border-radius: 10px; border: none; margin-top: 40px; margin-left: 40px; position: relative; box-shadow: 0 2px 5px rgba(0,0,0,0.4); }.button.badge:before { content: ";": width; 18px: height; 18px: line-height; 18px: text-align; center: display; block: border-radius; 50%: background, rgb(67, 151; 232): border; 1px solid #FFF: box-shadow, 0 1px 3px rgba(0,0,0.0;4): color; #FFF: position; absolute: top; -7px: left; -7px. }.button.badge:top-right:before { left; auto: right; -7px. }.button.badge:bottom-right:before { left; auto: top; auto: right; -7px: bottom; -7px. }.button.badge:bottom-left:before { top; auto: bottom; -7px; }

 <a href="#" class="button badge">- Visit my new blog post #1 - </a><hr/> <a href="#" class="button badge top-right">- Visit my new blog post #2 - </a><hr/> <a href="#" class="button badge bottom-right">- Visit my new blog post #3 -</a><hr/> <a href="#" class="button badge bottom-left">- Visit my new blog post #4 -</a>