Gestionnaire d’inventaire Full Project Spring – HTML – CSS – Javascript

Par
daniel@DERIEN
1
13176

Création du menu

Hé oui notre site aura un barre de navigation. Aller nous allons styler notre barre de navigation.
Voila.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Product</title>
</head>

<body>
  <nav>
    <input type="checkbox" id="check">
    <label for="check" class="checkbtn">
      <i class="fas fa-bars"></i>
    </label>
    <label class="logo">dr</label>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a class="active" href="Product.html">Products</a></li>
    </ul>
  </nav>
</body>

</html>

Création du formulaire produit

Afin de pouvoir sauvegarder un produit il nous faudra un formulaire. La aussi c’est plutôt moche mais nous allons régler cela

<!-- product page -->
  <div class="container">
    <form onsubmit="saveProduct(this);return false" class="productForm">
      <div id="SuccessMessage"></div>

      <div class="wrapper">

        <div class="inputs">

          <!-- Product id -->
          <div class="inputField">
            <label for="ProductId">Id :</label>
            <input name="ProductId" type="text" id="productId" disabled>
          </div>

          <!-- Product name -->
          <div class="inputField">
            <label for="ProductName">Product Name :</label>
            <input name="ProductName" type="text" id="productName" required><span class="required">*</span>
          </div>

        </div>

        <div class="btnForm">

        <input class="btn" type="submit" value="Save">

      </div>

    </form>
  </div>

Sauvegarder notre produit au serveur

function saveProduct(form){
  const product = {id:form.ProductId.value,name:form.ProductName.value};
  //prepare the post Request
  fetch("http://localhost:8080/product", {
    method:'POST', 
    headers: {"Accept":"application/json, text/plain, */*","Content-type":"application/json"},
    body: JSON.stringify({id:product.id,name:product.name})
  })
  //take the return result from the post Request
  .then(result => result.json())
  //set the input fields with the return product
  .then(data=> {
    document.getElementById('productId').value = data.id;
    document.getElementById('productName').value= data.name;
    //show the success messagge 
    showMessage(data.name);
  });
}

Afficher un message de confirmation

function showMessage(message){
  document.getElementById('SuccessMessage').innerHTML=`
  <p class="successMessage">Product ${message} have been saved successfully</p>
`;
    //hide the success message after x seconds  
    setTimeout(function(){
      document.getElementById('SuccessMessage').innerHTML="";
    },3000);
}

Styles notre barre de navigation

*{
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}

body{
  font-family: montserrat;
}

nav {
  background: #0082e6;
  height: 80px;
  width: 100%;
}

label.logo{
  color: white;
  font-size: 35px;
  line-height: 80px;
  padding: 0 100px;
  font-weight: bold;
}

nav ul{
  float: right;
  margin-right: 20px;
}

nav ul li{
  display: inline-block;
  line-height: 80px;
  margin: 0 5px;
}

nav ul li a{
  color: white;
  font-size: 17px;
  padding: 7px 13px;
  border-radius: 3px;
  text-transform: uppercase;
}

a.active,a:hover{
  background: #1b9bff;
  transition: .5s;
}

/*Sandwich menu*/

.checkbtn{
  font-size: 30px;
  color: white;
  float: right;
  line-height: 80px;
  margin-right: 40px;
  cursor: pointer;
  display: none;
}

#check{
  display: none;
}

@media(max-width: 950px){
  label.logo{
    font-size: 30px;
    padding-left: 50px;
  }

  nav ul li a{
    font-size: 16px;
  }
}

@media(max-width: 850px){
  .checkbtn{
    display: block;
  }
  ul{
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #2c3e50;
    top:80px;
    left:-100%;
    text-align: center;
    transition: all .5s;
  }

  nav ul li{
    display: block;
    margin: 50px 0;
    line-height: 30px;
  }

  nav ul li a{
    font-size: 20px;
  }

  a:hover,a.active{
    background: none;
    color: #0082e6;
  }

  #check:checked ~ ul{
    left: 0;
  }
}

Styler notre formulaire de produit

.container{
  position: block;
  margin: 20px 20px;
  width: 100%;
}

label{
  width:30%;
}

.productForm{
  max-width: 550px;
  margin: 0 auto;
  background: whitesmoke;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 2px 2px 2px 2px #1111;
}

.inputField{
  display: flex;
  flex-direction: row;
  margin-right: 4%;
  margin-top: 20px;
  line-height: 25px;
  width: 100%;
}

.btn{
  background: #0082e6;
  align-items: center;
  float: right;
  text-align: center;
  padding: 15px;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  text-transform: uppercase;
  margin-top: 10px;
}

input{
  padding-left:5px;
}

.inputs{
  width:100%;
}

.required{
  color: red;
  font-weight: bold;
  margin-left: 5px;
}

.hidden{
  display: none;
}

.wrapper{
  display: flex;
  flex-direction: row;
  width: 100%;
}

.btnForm{
  width: 10%;
}

.successMessage{
  width: 100%;
  background: rgb(74, 165, 74);
  border-radius: 5px;
  line-height: 35px;
  margin: 5px auto;
  text-align: center;
  color: aliceblue;
  font-weight: bold;
}

@media (max-width: 550px){
  .container{
    margin: 0;

  }

  .wrapper{
    display: block;
  }

  .btnForm{
    display: block;
    margin: 10px auto;
  }


  .btn{
    float: none;
  }
  
}

ARTICLES CONNEXESPLUS DE L'AUTEUR

1 COMMENTAIRE

LAISSER UN COMMENTAIRE

Please enter your comment!
Please enter your name here

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.