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 i.e. 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.

Look into `:before`. You can add text by simply adding a CSS class. https://www.w3schools.com/cssref/sel_before.asp. JS `setTimeout()` to do something after a specified amt of tmie. — wazz, Dec 13 '21 at 07:55
Welcome to Stack Overflow! Visit the [help], take the [tour] to see what and [ask]. If you get stuck, post a [mcve] of your attempt, noting input and expected output using the [`[<>]`](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) snippet editor. It is not clear what you mean by `add a NEW! text on top of the link` — mplungjan, Dec 13 '21 at 07:56
`:visited` has very limited support with regard to what you can manipulate, and for good reason, as it's been a constant cause of headache for privacy concerns. https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector — connexo, Dec 13 '21 at 08:07

score 1 · Accepted Answer · answered Dec 13 '21 at 09:53

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

the visited pages are fetched from the localStoare and
the news list is collected
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>

score 0 · Answer 2 · answered Dec 13 '21 at 10:42

0

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')
        
})

answered Dec 13 '21 at 10:42

Muchuu

1
1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 13 '21 at 10:59

score -1 · Answer 3 · answered Dec 13 '21 at 08:43

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>

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

3 Answers3