CodePen Embed - BEEQjL

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="css/normalize.css" rel="stylesheet">
    <link href="css/styles.css" rel="stylesheet">
</head>
<body>
  <header>
    <div class = "logo">
      <img src = "img/logo.png" alt = "">
        <h1>БД Студент</h1>
      </div>
    </div>
    <nav>
      <ul>
        <li><a href="#" class="btn-viewing">Просмотр БД</a></li>
        <li><a href="#">Поиск даныых</a></li>
        <li><a href="#">Корректировка</a></li>
        <li><a href="#">Удаление</a></li>
        <li><a href="#">Диаграмма</a></li>
      </ul>
    </nav>
  </header>
  <main class = "container">
    </div>
    <form action="#" class="form">
      <div class="form-wrapper">
        <div class="input-wrapper">
          <label for = "name"></label>
          <input class="item-input name" id="name" placeholder="ФИО">
        </div>
        <div class="input-wrapper">
          <label for = "date"></label>
          <input type="number" class="item-input date" id="date" placeholder="Год рождения">
        </div>
        <div class="input-wrapper">
          <label for = "home-adress"></label>
          <input class="item-input home-adress" id = "home-adress" placeholder="Домашний адрес">
        </div>
        <div class="input-wrapper">
          <label for = "faculty"></label>
          <input class="item-input faculty" id = "faculty" placeholder="Факультет">
        </div>
        <div class="input-wrapper">
          <label for = "specialty"></label>
          <input class="item-input specialty" id = "specialty" placeholder="Специальность">
        </div>
        <div class="input-wrapper">
          <label for = "course"></label>
          <input type="number" class="item-input course" id ="course" placeholder="Курс">
        </div>
        <div class="input-wrapper">
          <label for = "university"></label>
          <input class="item-input university" id = "university" placeholder="ВУЗ">
        </div>
        <div class="sumbit-wrapper">
          <label for = "submit"></label>
          <input type = "submit"class="btn-submit" id = "submit">
        </div>
    </div>
  </form>
  </main>
  
  <div class="showcontent-wrap hide">
    <h1>Содержимое БД</h1>
    <div class="choose-studen-wrap">
      <div class="choose-navigation">
        <select class="choose-student">
        </select>
        <button class="btn-showbd">Показать</button>
      </div>
      <div class="showbd">
        <input class="item-output name" disabled>
        <input class="item-output date" disabled>
        <input class="item-output home-adress" disabled>
        <input class="item-output faculty" disabled>
        <input class="item-output specialty" disabled>
        <input class="item-output course" disabled>
        <input class="item-output university" disabled>
      </div>
    </div>
  </div>

  <div class = "modal-wrapper hide">
    <div class = "upper-modal">
      <div  class = "pictureModal">
        <img src="img/warning.png" alt="">
        <div class = "messange-modal">
          <p>В базе данных нет студентов!</p>
        </div>
      </div >
      </div>
    <div class = "lower-modal">
      <button class = "btn-close">ОК</button>
    </div>
  </div>
  
<script src="script/external.js"></script> 
</body>
</html>

* {
    box-sizing: border-box;
 }

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
	padding: 0 100px;
    color: #fff;
    background-color: #ee6e73;
    width: 100%;
    min-height: 56px;
}
  
a {
    text-decoration: none;
}

li {
  list-style: none;
}

.logo h1 {
  display: inline-block;
  margin: 0 10px;
  vertical-align: super;
}

.logo img {
    margin-left: -90px;
}

nav ul {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

nav {
    display: inline-block;
    margin-right: -90px;
    width: 50%;
    
}

nav a {
	display: inline-block;
	padding: 10px 0;
	width: 100%;
	color: #fff;
	text-align: center;
}

nav li {
	display: inline-block;
	vertical-align: top;
	width: 100%;
}

nav li:hover {
	background: #fff;
    color: #ee6e73;
    height: 100%;
}

nav li:hover a {
    color: #ee6e73;
    height: 100%;
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 400px;
    height: 450px;
    margin: 20px auto;
    border: 2px solid red;
}

.form-wrapper {
    padding: 75px;
    padding-top: none;
}

.item-input {
    width: 250px;
    margin-bottom: 10px;
    border-radius: 5px;
    font-size: 24px;
}
.sumbit-wrapper{
    text-align: center;
}

.btn-sumbit {
    width: 70%;
    outline: 0;
}

.show {
    display: block;
}

.hide {
    display: none;
}

.modal-wrapper {
    position: absolute;
    top: 25%;
    left: 35%;
    width: 400px;
    height: 200px;
    border: 3px solid black;
    border-radius: 10px;
    z-index: 10;
  }
  .upper-modal {
    position: relative;
    height: 70%;
    background-color: #ee3322;
  }
  
  .lower-modal {
    position: relative;
    height: 30%;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: white;
  }
  
  .btn-close {
    position: relative;
    width: 100px;
    height: 35px;
    left: 38%;
    top: 25%;
    outline: none;
    border-radius: 50px;
    background-color: #ee3322;
  }
  
  .pictureModal img {
    width: 64px;
    height: 64px;
  }
  
  .pictureModal {
    position: relative;
    top: 25%;
    left: 43%;
  }
  
  .pictureModal p {
    margin: -2px 0  0 -50px;
  }
  
  .invalid-input {
    border: 1px solid red;
  }

   .showcontent-wrap {
    text-align: center;
  }

  .choose-studen-wrap {
    position: relative;
    width: 400px;
    height: 400px;
    top: 30%;
    left: 35%;
    border: 2px solid red;
  }

.choose-navigation{
  margin-top: 20px;
}
.btn-showbd {
  padding: 12px 20px;
  margin-left: 5px;
  color: white;
  background-color: #7f7f7f ;
  border-radius: 5px; 
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  outline: none;
}

.btn-active {
  color: #0abf53;
  background-color: #f9f9f9;
  border: 1px solid #0abf53;
}

.showbd {
  margin-top: 10px;
}

.body-blur {
  filter: blur(4px);
}

const btnViewing = document.querySelector(".btn-viewing"),
      containerForm = document.querySelector(".container"),
      containerShowBD = document.querySelector(".showcontent-wrap"),
      inputs = document.querySelectorAll(".item-input"),
      closeModal = document.querySelector(".btn-close"),
      modalWrapper = document.querySelector(".modal-wrapper"),
      btnSubmit = document.querySelector(".btn-submit");

let dataBase;

btnViewing.addEventListener("click", () => {

  if (isEmptyObject(dataBase) != true) {

    if (!containerForm.classList.contains('hide')){

        containerForm.classList.add("hide");
        btnViewing.innerText = "Показать форму";
        containerShowBD.classList.remove("hide");

        } else {

        containerForm.classList.remove("hide");
        btnViewing.innerText = "Показать БД";
        containerShowBD.classList.add("hide");
            }
    } else {

        modalWrapper.classList.remove("hide");
        document.querySelector("body").classList.add("body-blur");
        closeModal.addEventListener("click", () => {
        modalWrapper.classList.add("hide");
        document.querySelector("body").classList.remove("body-blur");
        });
    }
});

btnSubmit.addEventListener("click", () => {

    if (formValidator() == true) {
        recordObject();
        insertSelect();
    }
});

function formValidator () {

let correctInputs = 0;
  for (let i = 0; i < inputs.length; i++) {
    if (i == 1 || i == 5) i++;
      if (inputs[i].value.match(/[А-я]/)) { 
       correctInputs++;
       inputs[i].classList.remove("invalid-input");
    }
      else {
        inputs[i].classList.add("invalid-input");
        }
    }

    if (+inputs[1].value.match(/^\d{4}$/))  {
        correctInputs++;
        inputs[1].classList.remove("invalid-input");
        }
    else inputs[1].classList.add("invalid-input");
    
    if (+inputs[5].value > 0 && +inputs[5].value < 7) {
    correctInputs++;
    inputs[5].classList.remove("invalid-input");
        }
    else inputs[5].classList.add("invalid-input");

    return correctInputs == 7 ? true : false;
}



function resetInputs () {
    document.querySelector('.form').reset();
}

function isEmptyObject(dataBase) {
    for (let key in dataBase) {
        if (dataBase.hasOwnProperty(key)) {
            return false;
        }
    }
    return true;
}

function recordObject () {

    let i = 0;
    dataBase = {
        fullName : '',
        dateOfBirth : '',
        address : '',
        faculty : '',
        spetsial : '',
        course : '',
        institution : ''
    }

    for(let key in dataBase){
        dataBase[key] = inputs[i].value;
        i++;
    }
    console.log(dataBase);
}

const chooseStudent = document.querySelector(".choose-student");

function insertSelect () {

    let nameOption = document.createElement("option");
    nameOption.textContent = dataBase.fullName;
    chooseStudent.appendChild(nameOption);
}   

const btnShowBD = document.querySelector(".btn-showbd");

chooseStudent.addEventListener("change", () => {

    if (chooseStudent.selectedIndex != 0) {
        btnShowBD.classList.add("btn-active");
    }
});

const itemOutput = document.querySelectorAll(".item-output");

btnShowBD.addEventListener("click", () => {
    for(let key in dataBase){
        dataBase[key] = inputs[i].value;
        i++;
    }
});

This Pen is owned by DG on CodePen.

See more by @DGonz0 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.