Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Sedona - JS</title>
  <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700&amp;subset=latin,cyrillic" rel="stylesheet">
</head>
<body>
    <div class="page-wrapper">
      <form action="/echo" method="post" id="form-recall" class="form-recall">
        <fieldset class="form-recall__overall">
          <legend>Ваше общее впечатление</legend>
          <input type="radio" name="overall" id="good" value="good">
          <label for="good">Скорее положительное</label>
          <input type="radio" name="overall" id="bad" value="bad">
          <label for="bad">Скорее отрицательное</label>
        </fieldset>
        <fieldset class="form-recall__date">
          <legend>Даты вашей поездки</legend>
          <div class="form-recall__row">
            <div class="form-recall__column">
              <label for="days" class="required">Длительность пребывания:</label>
              <button type="button" data-operation="subtract">-</button>
              <input type="number" name="days" id="days" min="0" value="0" required>
              <button type="button" data-operation="add">+</button>
            </div>
            <div class="form-recall__column">
              <label for="date-in" class="required">Дата приезда:</label>
              <input type="date" name="date-in" id="date-in" required>
            </div>
            <div class="form-recall__column">
              <label for="date-out" class="required">Дата отъезда:</label>
              <input type="date" name="date-out" id="date-out" required>
            </div>
          </div>
        </fieldset>
        <fieldset class="form-recall__tourist-number">
          <legend>Количество путешественников</legend>
          <div class="form-recall__row">
            <div class="form-recall__column  form-recall__column--adult">
              <label for="adult" class="required">Количество взрослых</label>
              <button type="button" data-operation="subtract">-</button>
              <input type="number" name="adult" id="adult" min="0" value="0" required>
              <button type="button" data-operation="add">+</button>
            </div>
            <div class="form-recall__column  form-recall__column--children">
              <label for="children" class="required">Количество детей</label>
              <button type="button" data-operation="subtract">-</button>
              <input type="number" name="children" id="children" min="0" value="0" required>
              <button type="button" data-operation="add">+</button>
            </div>
            <div class="form-recall__column"></div>
          </div>
          <section class="form-recall__adult-list">
          </section>
          <section class="form-recall__children-list">
          </section>
        </fieldset>
        <fieldset class="form-recall__sight">
          <legend>Посещенные<br>достопримечательности</legend>
          <input type="checkbox" name="bridge" id="bridge">
          <label for="bridge">Мост дьявола</label>
          <input type="checkbox" name="mountain-bell" id="mountain-bell">
          <label for="mountain-bell">Гора-колокол</label>
          <input type="checkbox" name="park" id="park">
          <label for="park">Слайд-парк</label>
          <input type="checkbox" name="red-rocks" id="red-rocks">
          <label for="red-rocks">Красные скалы</label>
        </fieldset>
        <fieldset class="form-recall__photo">
          <legend>Загрузите фотографии</legend>
          <label class="btn" for="photo-input">Выбрать фотографии</label>
          <input type="file" name="photo" id="photo-input" multiple>
          <section class="photo-container">
          </section>
        </fieldset>
        <button class="btn  btn--blue" type="submit">Отправить отзыв</button>
      </form>
    </div>
  <script id="image-template" type="text/html">
      <a href="#" class="photo-container__close-item" title="Удалить"></a>
      <div class="photo-container__img-wrapper">
        <img src="{{image}}" alt="{{name}}" title="{{name}}">
      </div>
      <div class="photo-container__item-name">{{name}}</div>
  </script>
  <script id="person-template" type="text/html">
    <div class="form-recall__column">
      <label for="{{person}}-surname-{{number}}" class="required">Фамилия {{personLabel}} №{{number}}</label>
      <input type="text" name="{{person}}-surname-{{number}}" id="{{person}}-surname-{{number}}">
    </div>
    <div class="form-recall__column">
      <label for="{{person}}-name-{{number}}" class="required">Имя {{personLabel}} №{{number}}</label>
      <input type="text" name="{{person}}-name-{{number}}" id="{{person}}-name-{{number}}">
    </div>
    <div class="form-recall__column">
      <label for="{{person}}-patronymic-{{number}}">Отчество {{personLabel}} №{{number}}</label>
      <input type="text" name="{{person}}-patronymic-{{number}}" id="{{person}}-patronymic-{{number}}">
    </div>
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.2.1/mustache.min.js"></script>
  <script src="js/script.min.js"></script>
</body>
</html>
 
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}html{box-sizing:border-box;font-size:10px}*,*::before,*::after{box-sizing:inherit}body{min-width:940px;background:#f2f2f2}form fieldset{border:none;border-top:1px solid #dbdbdb}form legend{padding-left:50px;padding-right:50px;font-weight:700;text-transform:uppercase;font-size:1.2em;margin-bottom:20px}form label{text-transform:uppercase;font-weight:700}form input[type="text"],form input[type="date"],form input[type="number"]{outline:none;border:none;background:#f2f2f2;margin:0;padding:0;padding:10px;font-size:1.5rem;line-height:2.6rem;font-weight:700;color:black;margin-bottom:25px}form input[type="number"]{width:125px;vertical-align:top;-moz-appearance:textfield}form input[type="number"]::-webkit-inner-spin-button{display:none}form button[type="button"]{outline:none;border:none;background:#f2f2f2;margin:0;padding:0;width:45px;height:45px;font-size:2em;color:#b8b8b8}form button[type="button"]:hover,form button[type="button"]:active{color:black}form input[type="file"]{display:none}form input[type="radio"]{display:none}form input[type="radio"]+label{position:relative;font-size:1.1em;display:inline-block;vertical-align:top;padding-left:60px;margin-right:115px;cursor:pointer;margin-bottom:25px}form input[type="radio"]+label::before{content:"";position:absolute;height:40px;width:40px;border:10px solid #f2f2f2;top:-5px;left:0;background:#f2f2f2;border-radius:50%}form input[type="radio"]:checked+label::before{background:#bfbfbf}form input[type="checkbox"]{display:none}form input[type="checkbox"]+label{position:relative;text-transform:uppercase;font-weight:700;font-size:1.1em;display:inline-block;vertical-align:top;padding-left:60px;margin-right:20px;cursor:pointer;margin-bottom:25px}form input[type="checkbox"]+label::before{content:"";position:absolute;height:40px;width:40px;border:10px solid #f2f2f2;top:-5px;left:0;background:#f2f2f2}form input[type="checkbox"]:checked+label::before{background:#bfbfbf}.btn{display:inline-block;vertical-align:top;text-align:center;border:none;outline:none;background:#f2f2f2;color:rgba(0,0,0,0.5);text-transform:uppercase;text-decoration:none;font-size:1.1em;line-height:2.5rem;font-weight:700;padding:7px;min-width:350px;cursor:pointer}.btn:hover{color:black;background:#d9d9d9}.btn:active{color:rgba(0,0,0,0.3);background:#ccc}.btn--blue{background:#81b3d2;color:white}.btn--blue:hover{color:white;background:#5b9cc5}.btn--blue:active{color:rgba(255,255,255,0.3);background:#4991be}.page-wrapper{width:940px;padding:50px;padding-top:10px;margin:auto;background:white;color:black;min-height:100vh;box-shadow:0 5px 10px rgba(0,0,0,0.3);font-family:"PT Sans","Arial",sans-serif;font-size:1.4rem;line-height:2.6rem;font-weight:400;letter-spacing:.1px}.form-recall{text-align:center}.form-recall__overall label:nth-of-type(2n){margin-right:0}.form-recall__sight label:nth-of-type(4n){margin-right:0}.form-recall__row{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;text-align:left;-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.form-recall__column{width:30%;margin-right:5%}.form-recall__column:nth-of-type(3n){margin-right:0}.form-recall__column label{padding-left:10px;display:block}.form-recall__column input[type="date"],.form-recall__column input[type="text"]{width:100%}.form-recall .required{position:relative}.form-recall .required::after{content:" *";color:red;font-size:1.2em}.photo-container{padding:75px 25px;padding-bottom:15px;font-size:0;text-align:left}.photo-container__item{position:relative;width:120px;height:150px;display:inline-block;vertical-align:top;margin-right:40px;margin-bottom:40px;font-size:1.4rem;text-transform:uppercase;font-weight:700}.photo-container__item:nth-child(5n){margin-right:0}.photo-container__item img{width:120px;height:120px;display:block;-webkit-transition:-webkit-transform .5s ease-in-out;transition:transform .5s ease-in-out}.photo-container__item img:hover{-webkit-transform:scale(1.5);-ms-transform:scale(1.5);transform:scale(1.5)}.photo-container__item-name{overflow:hidden;height:20px}.photo-container__img-wrapper{width:120px;height:120px;overflow:hidden}.photo-container__close-item{position:absolute;right:-25px;top:-25px;width:50px;height:50px;border-radius:50%;background:#f2f2f2;z-index:2}.photo-container__close-item::before{content:"";position:absolute;top:23px;left:12px;height:2px;width:50%;background:#b8b8b8;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.photo-container__close-item::after{content:"";position:absolute;top:23px;left:12px;height:2px;width:50%;background:#b8b8b8;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}.photo-container__close-item:hover{background:#e5e5e5;box-shadow:0 2px 5px rgba(0,0,0,0.5)}.photo-container__close-item:hover::before,.photo-container__close-item:hover::after{background:#929292}.photo-container__close-item:active{opacity:.5}
/*# sourceMappingURL=style.css.map */
 
(function () {
  var buttons = document.querySelectorAll("button[type=button]");
  for (var i=0; i<buttons.length; i++) {
    var button = buttons[i];
    button.addEventListener("click", function(e) {
      e.preventDefault();
      var parent = this.parentNode;
      var input = parent.querySelector("input");
      var operation = this.dataset.operation;
      if (operation === "subtract") {
        if (input.value == 0) return;
        else input.value = +input.value - 1;
      }
      if (operation == "add") {
        input.value = +input.value + 1;
      }
    });
  }
  var adult = document.querySelector(".form-recall__column--adult");
  var adultButtons = adult.querySelectorAll("button[type=button]");
  var children = document.querySelector(".form-recall__column--children");
  var childrenButtons = children.querySelectorAll("button[type=button");
  for (i=0; i<adultButtons.length; i++) {
    personButtonListener("adult", adultButtons[i]);
    personButtonListener("child", childrenButtons[i]);
  }
  function personButtonListener (person, button) {
    button.addEventListener("click", function() {
      var area;
      var personLabel;
      if (person == "adult") {
        area = document.querySelector(".form-recall__adult-list");
        personLabel = "взрослого";
      }
      if (person == "child") {
        area = document.querySelector(".form-recall__children-list");
        personLabel = "ребенка";
      }
      var operation = this.dataset.operation;
      var parent = this.parentNode;
      var input = parent.querySelector("input");
      var template = document.querySelector("#person-template").innerHTML;
      if (operation === "subtract") {
        var element = area.querySelector(".form-recall__row:last-child");
        element.parentNode.removeChild(element);
      }
      if (operation === "add") {
        var html = Mustache.render(template, {
          "number": input.value,
          "person": person,
          "personLabel": personLabel
        });
        var div = document.createElement("div");
        div.classList.add("form-recall__row");
        div.innerHTML = html;
        area.appendChild(div);
      }
    });
  };
})();
(function () {
  if (!("FormData" in window)) return;
  var queue = [];
  var form = document.querySelector("#form-recall");
  form.addEventListener("submit", function(e) {
    e.preventDefault();
    var data = new FormData(form);
    queue.forEach(function (element) {
      data.append("images", element.file);
    });
    request(data, function(response) {
      console.log(response);
    });
  });
  function request(data, fn) {
    var xhr = new XMLHttpRequest();
    xhr.open("post", "/send?" + (new Date()).getTime());
    xhr.addEventListener("readystatechange", function() {
      if (xhr.readyState == 4) {
        fn(xhr.responseText);
      }
    });
    xhr.send(data);
  }
  if ("FileReader" in window) {
    var area = document.querySelector(".photo-container");
    var template = document.querySelector("#image-template").innerHTML;
    form.querySelector("#photo-input").addEventListener("change", function() {
      var files = this.files;
      for (var i =0; i<files.length; i++) {
        preview(files[i]);
      }
      this.value = "";
    });
    function preview(file) {
      if (file.type.match(/image.*/)) {
        var reader = new FileReader();
        reader.addEventListener("load", function(e) {
          var html = Mustache.render(template, {
            "image": e.target.result,
            "name": file.name
          });
          var div = document.createElement("div");
          div.classList.add("photo-container__item");
          div.innerHTML = html;
          area.appendChild(div);
          div.querySelector(".photo-container__close-item").addEventListener("click", function(e) {
            e.preventDefault();
            removePreview(div);
          });
          queue.push({"file": file, "div": div});
        });
        reader.readAsDataURL(file);
      }
    }
    function removePreview(div) {
      queue = queue.filter(function(element) {
        return element.div != div;
      });
      div.parentNode.removeChild(div);
    }
  }
})();
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers