How to make a hidden div appear when clicking a button appear and then hide over time

Question

I’m trying to make a div as if it were a alert, I need it to appear when I click on a button because it starts hidden, and when it appears it starts to count a time for it to disappear.

<div id="alertcart" style="display:none;" class="alert">
    Produto adicionado ao carrinho!
</div>

Up here is the div in question, I believe that the processing should be done with java script, I ask someone for a light of how I could do it.

Answer 1

I made a version with jQuery that uses a fadeIn/Out and setTimeout do the fadeIn of .alert when you click the button, and the setTimeout counts 2 seconds before doing the fadeOut of .alert

$(function(){
  $('#box').on('click', function(){
	var mv = $('.alert');
	mv.fadeIn();
    setTimeout(function(){
      mv.fadeOut();
    }, 2000)
  })
});

.alert {
	display: none;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>	

<button id="box" type="button">Mostra Alert</button>


  <div id="alertcart" class="alert">
    Produto adicionado ao carrinho!
  </div>