Js & jQuery exercice 2

Reprendre cet exercice fait précédemment, et ajouter une vérification que l'input n'est pas vide avant de pouvoir ajouter un élément.

by Arnaud

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <div id="page">
      <h1 id="header">Liste</h1>
      <h2>Achats épicerie</h2>
      <ul>
        <li id="un" class="important">figues <em> fraiches</em></li>
        <li id="deux" class="important">noix</li>
        <li id="trois" class="important">miel</li>
        <li id="quatre">vinaigre balsamique</li>
      </ul>
      <div id="boutNouvelItem"><button href="#" id="afficheForm">Nouvel élément</button></div>
      <form id="formNouvelItem">
        <input type="text" id="itemDescription" placeholder="Ajouter un produit" />
        <input type="submit" id="boutAjout" value="ajout" />
      </form>
    </div>

CSS

body {
  background-color: #000;
  font-family: 'Oswald', 'Futura', sans-serif;
  margin: 0; 
  padding: 0;}

#page {
  background-color: #403c3b;
  margin: 0 auto 0 auto;
  position: relative;
  text-align: center;}
  /* Responsive page rules at bottom of style sheet */

h1 {
  background-repeat: no-repeat;
  background-position: center center;
  text-align: center;


  margin: 0 auto 0 auto;
  padding: 30px 10px 20px 10px;}

h2 {
  color: #fff;
  font-size: 24px;
  font-weight: normal;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .3em;
  display: inline-block;
  margin: 0 0 23px 0;}

h2 span {
  background-color: #fff;
  color: #000;
  font-size: 12px;
  text-align: center;
  letter-spacing: 0;
  display: inline-block;
  position: relative;
  border-radius: 50%;
  top: -5px;
  height: 22px;
  width: 26px;
  padding: 4px 0 0 0;}
.headline{
  color:#ccc;
  text-shadow:0px 0px 10px #000;
}
ul {
  border:none;
  padding: 0;
  margin: 0;}

li {
  background-color: #ec8b68;
  color: #fff;
  border-top: 1px solid #fe9772;
  border-bottom: 1px solid #9f593f;
  font-size: 24px;
  letter-spacing: .05em;
  list-style-type: none;
  text-shadow: 2px 2px 1px #9f593f;
  text-align: left;
  height: 50px;
  padding-left: 1em;
  padding-top: 10px;}

li a {
  color: #fff;
  background-image: url('../images/icon-link.png');
  background-position: right, center;
  background-repeat: no-repeat;
  text-decoration: none;
  padding-right: 36px;}

li.complete a {
  background-image: none;}

p {
  background-color: #fff;
  color: #666; 
  padding: 10px;
  display: inline-block;
  margin: 20px auto 20px auto;
  width: 80%;
  border-radius: 5px;
  text-align: center;}

.important {
  background-color: #d7666b;
  color: #fff;
  text-shadow: 2px 2px 1px #914141;
  border-top: 1px solid #e99295;
  border-bottom: 1px solid #914141;}

.cool {
  background-color: #6cc0ac;
  color: #fff;
  text-shadow: 2px 2px 1px #3b6a5e;
  border-top: 1px solid #7ee0c9;
  border-bottom:...

JavaScript

$(function() {

  var $boutNouvelItem = $('#boutNouvelItem');
  var formNouvelItem = $('#formNouvelItem');
  var inputTexte = $('input:text');

  $boutNouvelItem.show();
  formNouvelItem.hide();

  $('#afficheForm').on('click', function(){
    $boutNouvelItem.hide();
    formNouvelItem.show();
  });

  formNouvelItem.on('submit', function(e){
    e.preventDefault();
    var nouveauTexte = inputTexte.val();
    $('li:last').after('<li>' + nouveauTexte + '</li>');
    formNouvelItem.hide();
    $boutNouvelItem.show();
    inputTexte.val('');
  });

});

/*
// SCRIPT AVEC VERIF FORM VIDE

var $boutNouvelItem = $('#boutNouvelItem');
  var formNouvelItem = $('#formNouvelItem');
  var inputTexte = $('input:text');

  $boutNouvelItem.show();
  formNouvelItem.hide();

  $('#afficheForm').on('click', function(){
    $boutNouvelItem.hide();
    formNouvelItem.show();
  });

  formNouvelItem.on('submit', function(e){
    e.preventDefault();
    var nouveauTexte = inputTexte.val();
		
		if(nouveauTexte != "" ) {
	 $('li:last').after('<li>' + nouveauTexte + '</li>');
    formNouvelItem.hide();
    $boutNouvelItem.show();
    inputTexte.val('');
		$('.avertissement').remove();

		}
   else{
		 var msgErreur = "<p class=\"avertissement\">Merci de remplir ce champ</p>";
		 $('.avertissement').remove();
			$(msgErreur).insertAfter('#boutAjout');
		
	 }
  });
  
  */