Task_12

by Pavel_FD2

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="./style.css" rel="stylesheet">
</head>
<body>  
  <form action="" class="wedding">
    <div class="form-inner">
      <h2>Неповторимые рецепты изысканных напитков</h2>
      <div class="form-content">
        <p><input class="add-button" type="submit" value="Ввод рецепта"></p>
        <p><input class="add-button" type="submit" value="Рецепт напитка"></p>
        <p><input class="add-button" type="submit" value="Удаление рецепта"></p>
        <p><input class="add-button" type="submit" value="Перечень всех коктейлей"></p>
      </div>
    </div>
  </form>

  <div class="output">
    <p class="nameAlco"></p>
    <p class="container">
      <ol class="contains">
        
      </ol>
    </p>
    <p class="receipt"></p>
  </div>

  <script src="./HashStorage.js"></script>
</body>
</html>

CSS

* {
  box-sizing: border-box;
}
body {
  background: #fff2e3;
}
.wedding {
  position: relative;
  max-width: 600px;
  margin: 50px auto 0;
  text-align: center;
}
.form-inner {
  padding: 0 40px 10px;
  background: #d37373;
  border-radius: 25px;
  box-shadow: 0 0 15px 15px rgb(0 0 0 / 20%);
}
.form-inner h2 {
  padding: 20px 0px 0px 0px;
  font-weight: 300;
  font-size: 20px;
  text-transform: uppercase;
  font-family: "Cormorant Garamond", serif;
}
.form-content {
  position: relative;
  margin: 0px -40px 0 -40px;
  padding: 5px 40px 0 40px;
  background: #fff8f3;
}
label,
.form-content h3 {
  font-family: "Marck Script", cursive;
  font-size: 22px;
  color: #898989;
  font-weight: normal;
}
.form-inner .alco-or-not {
  display: flex;
  justify-content: center;
  align-items: center;
}
.form-inner .first,
.form-inner .second {
  width: 20px;
}

.form-inner textarea {
  min-width: 400px;
  min-height: 200px;
  max-width: 400px;
  max-height: 200px;
}
.form-content input,
.form-content select {
  height: 38px;
  line-height: 38px;
  padding: 0 10px;
  background: #ffffff;
  border: 1px solid #dddddd;
  font-size: 20px;
  font-family: "Cormorant Garamond", serif;
  color: #808080;
  outline: none;
}
.form-content .add-button {
  width: 60%;
  height: 50px;
}

.form-content input[type="submit"] {
  margin: 5px 0;
  padding: 0 5px;
  background: #ff6b6b;
  color: #ffffff;
  font-size: 18px;
  text-transform: uppercase;
  border-width: 0;
  border-radius: 20px;
  cursor: pointer;
  transition: 0.2s linear;
}
.form-content input[type="submit"]:hover {
  background: #c44d58;
}
.output {
  margin: 0 auto;
  height: 500px;
  width: 550px;
  font-size: 22px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
}

JavaScript

class HashStorage {
  
  constructor() {
    this.storage = new Object();    
  };
  
  addValue(nameReceipt, alco, ingridients, receipt) {
    let obj = {
      alco : alco,
      ingridients: ingridients,
      receipt: receipt
    };
     this.storage[nameReceipt] = obj;
  };         
  
  getValue(key) {
    let arr = Object.keys(this.storage), n, al, rec, ing;

    if (key in this.storage) {
      n = key, al = this.storage[key].alco, rec = this.storage[key].receipt, ing = this.storage[key].ingridients;
      return {n: n, al: al, rec: rec, ing: ing}; 
    }
    else {return undefined;};
};        
  
  deleteValue(key) {    
       let arr = Object.keys(this.storage);
    for (let i=0; i<arr.length; i++) {
      if (key == arr[i]) {
        delete this.storage[arr[i]];
        return key;
      } else {return undefined;};
    };
  };
  
  getKeys() {
    return Object.keys(this.storage);
  };
};

const coctailsStorage = new HashStorage(),
      ingridientList = document.querySelector('.contains');
      add = document.getElementsByClassName('add-button'),
      nameAlco = document.getElementsByClassName('nameAlco')[0],
      contains = document.getElementsByClassName('contains')[0],
      receipt = document.getElementsByClassName('receipt')[0];

//Кнопка ввода нового рецепта
    add[0].addEventListener('click', function(event) {
      event.preventDefault();
      let nameReceipt, alco, ingridients, ingridientsArr, receipt;
      do {
        nameReceipt = prompt('Введите название напитка: ');
      } while (nameReceipt === null);        
        alco = confirm('Напиток алкогольный?');
        alco = (alco)?'да':'нет';
        ingridientsArr = [];
          do {
            ingridients = prompt('Введите ингридиенты: ');
            ingridientsArr.push(ingridients);
          } while (ingridients);
          ingridientsArr.pop();
        receipt = prompt('Введите рецепт приготовления: ');
        coctailsStorage.addValue(nameReceipt, alco, ingridientsArr,...