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