Creat custom alert in JavaScript

Question

Hey am new Web developer and am working on a quote website.

To understand clearly this question just visit my CodePen project below and just once click any copy button in the project. https://codepen.io/Akash11166666/pen/JjRzqzp

Did see my CodePen. As you can see I have created a custom copy alert which alerts you the text is copied but it will not vanish after some seconds.

I have tried many ways to solve this problem but none of them were useful.

My CodePen project for reference

My Javascript

<script>
const resultEl = document.querySelector('.allquotes');
const pageSize = document.querySelector('select[name="page-size"]');
const pageCurr = document.querySelector('input[name="page-curr"]')
const resultCount = document.querySelector('.result-count')
const pageNoCurr = document.querySelector('.page-no-curr');
const pageNoCount = document.querySelector('.page-no-count')
const btnFirst = document.querySelector('.page-btn-first');
const btnPrev = document.querySelector('.page-btn-prev');
const btnNext = document.querySelector('.page-btn-next');
const btnLast = document.querySelector('.page-btn-last');

let results = [];

const getResultCount = () => results.length;
const getPageSize = () => +pageSize.value;
const getCurrPage = () => +pageCurr.value;
const getPageCount = () => Math.ceil(getResultCount() / getPageSize());

const pageResponse = (records, pageSize, page) =>
  (start => records.slice(start, Math.min(records.length, start + pageSize)))
  (pageSize * (page - 1));

const main = async() => {
  btnFirst.addEventListener('click', navFirst);
  btnPrev.addEventListener('click', navPrev);
  btnNext.addEventListener('click', navNext);
  btnLast.addEventListener('click', navLast);
  pageSize.addEventListener('change', changeCount);

  results = await retrieveAllQuotes();
  updatePager(results);
  redraw();
};
const redraw = () => {
  resultEl.innerHTML = '';
  const paged = pageResponse(results, getPageSize(), getCurrPage());
  const contents = document.createElement('div');
  contents.innerHTML = paged.map(record => `<div class='latestatus'><p class='copytxt'>${record.quotes}</p><div> <button class="copystatus btn">Copy</button><span class="status-copy-alert hidden">Copied</span></div></div>`).join('');
  resultEl.append(contents);
};

const navFirst = (e) => {
  pageNoCurr.textContent = 1;
  pageCurr.value = 1;
  redraw();
}

const navPrev = (e) => {
  const pages = getPageCount();
  const curr = getCurrPage();
  const prevPage = curr > 1 ? curr - 1 : curr;
  pageCurr.value = prevPage;
  pageNoCurr.textContent = prevPage;
  redraw();
}

const navNext = (e) => {
  const pages = getPageCount();
  const curr = getCurrPage();
  const nextPage = curr < pages ? curr + 1 : curr;
  pageCurr.value = nextPage;
  pageNoCurr.textContent = nextPage;
  redraw();
}

const navLast = (e) => {
  pageNoCurr.textContent = getPageCount();
  pageCurr.value = getPageCount();
  redraw();
}

const changeCount = () => {
  updatePager();
  redraw();
};

const updatePager = () => {
  const count = getPageCount();
  const curr = getCurrPage();
  pageCurr.value = curr > count ? 1 : curr;
  pageNoCurr.textContent = curr > count ? 1 : curr;
  pageNoCount.textContent = count;
  resultCount.textContent = getResultCount();
};

const retrieveAllQuotes = async function() {

  // write your asynchronous fetching here

  return[{
      quotes: "1The cat is better than dog."
    },
    {
      quotes: "2Google is a open source library."
    },
    {
      quotes: "3Cats are better than ferrets."
    },
    {
      quotes: "4Love books."
    },
    {
      quotes: "5Life is short make it possible."
    },
    {
      quotes: "6The cat is better than dog"
    },
    {
      quotes: "7Google is a open source library."
    },
    {
      quotes: "8Cats are better than ferrets."
    },
    {
      quotes: "9Love books."
    },
    {
      quotes: "10Life is short make it possible."
    },
]; 
}
document.querySelector('.allquotes').addEventListener(

  'click',

  function (e) {

    e.preventDefault();
    

    if (e.target && e.target.matches('.copystatus')) {

        const quote = e.target.parentNode.closest('.latestatus')

            .childNodes[0].textContent;
      
      const notify = e.target.nextSibling.closest('.status-copy-alert');
      
      notify.classList.toggle('hidden');

        const textArea = document.createElement('textarea');

        textArea.value = quote;

        document.body.appendChild(textArea);

        textArea.select();

        document.execCommand('Copy');

        textArea.remove();

    }

  },

  false

);
main();

</script>

My Css

<style>
/* Main Status */
.hidden {
  display:none;
}
.mainStatus{
 background-color: #fff;
 border-radius: 10px;
 box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
 padding-bottom: 5px;
 margin: 10px;
 margin-top: 10px;
 max-width: 95%;
 width: 95%;
 height: auto;
 border-radius: 20px;
 box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}
.statusHeading{
 text-align: center;
 background-color: #18b495;
 color: #ffffff;
 padding: 10px 10px 10px 10px;
 border-top-right-radius: 20px;
 border-top-left-radius: 20px;
 font-weight: 300;
 font-size: 20px;
}
.latestatus{
 display: grid;
 height: auto;
 box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
 padding: 10px 20px 10px 20px;
 border-radius: 30px;
 margin: 10px 10px 10px 10px;
 width: 445px;
 min-height: 130px;
 font-size: 15px;
}
.allStatus{
 display: flex;
}
.latestatus p{
 width: auto;
 position: relative;
}
.copystatus{
 font-weight: 500;
 text-transform: uppercase;
 width: 100px;
 height: 40px;
}
.pagable {
  display: flex;
  flex-direction: column;
  border: var(--pageable-border);
  background: var(--pageable-background);
}

.pagable .pagable-results {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0.25em;
}

.pagable .pagable-status {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0.25em;
  background: var(--pageable-status-background);
}

.pagable .pagable-actions {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 0.25em;
}
.pagable .pagable-actions input[name="page-curr"] {
  width: 3em;
}
.btn {
 display: inline-block;
 padding: 10px 20px;
 cursor: pointer;
 background: #18b495;
 color: #fff;
 border: none;
 border-radius: 30px;
}
.btn:hover {
 transform: scale(0.98);
}
.status-copy-alert {

 position: relative;

 background-color: #18b495;

 color: #ffffff;

 padding: 10px 10px;

 border-radius: 5px;

 left: 8px;

 text-transform: uppercase;

 letter-spacing: 0.05em;

 font-weight: 500;

 visibility: visible;

}

.status-copy-alert:before{

 content:"";

 position: absolute;

 height: 10px;

 width: 10px;

 background-color: #18b495;

 left: -5px;

 transform: rotate(45deg);

 top: 39%;

}

</style>

My Html

<!DOCTYPE html>
<html>
<head></head>
<body>
    <a href="hindinj.html">caeman</a>
<div class="mainStatus">
   <h2 class="statusHeading">Latest English Status</h2>
<div class="allquotes"></div>
<div class="pagable-status">
  <label>Page <span class="page-no-curr">1</span> of <span class="page-no-count">1</span></label>
  <div class="pagable-actions">
    <button class="page-btn-first">&#x226A;</button>
    <button class="page-btn-prev">&#60;</button>
    <input type="number" name="page-curr" min="1" value="1" />
    <button class="page-btn-next">&#62;</button>
    <button class="page-btn-last">&#x226B;</button>
    <select name="page-size">
      <option>5</option>
      <option>10</option>
      <option>20</option>
    </select>
  </div>
  <label>(<span class="result-count"></span> items)</label>
</div>
</body>
</html>

copy alert which alerts you the text is copied but it will not vanish after some seconds.

I hartley thanks for those who answer this question.

Answer 1

You can add an onclick function to copy button to trigger timeout of the span. Just add this to end of your javascript file:

function hideSpan() {
    setTimeout(function(){ $(".status-copy-alert").addClass("hidden");
     //document.getElementById("status-copy-alert").classList.add("hidden"); use this code for javascript only 
    }, 3000);
    //you can change 3000 milliseconds to anything that you wish
}

And configure your button to:

<button class="copystatus btn" onclick="hideSpan();">Copy</button
<span class="status-copy-alert hidden" id="status-copy-alert">

If you're using Javascript only, don't forget to add an id to your alert span.

It's basically like, when user clicks on copystatus button, it triggers hideSpan() function. You can learn more about setTimout from this link

Answer 2

You are showing a tooltip (or "alert" as you call it) by removing (or actually toggling) its hidden class. You can hide it again by adding the hidden class back. You can do that after some time, e.g. 3 seconds, by using setTimeout().

notify.classList.toggle('hidden');

// New code below:

setTimeout(() => {
  notify.classList.add('hidden');
}, 3000);