<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Sedona - JS</title>
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700&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;text-size-adjust:100%;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"]{appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::focus-inner,input::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"]::inner-spin-button,input[type="number"]::outer-spin-button{height:auto}input[type="search"]{appearance:textfield;box-sizing:content-box}input[type="search"]::search-cancel-button,input[type="search"]::search-decoration{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;appearance:textfield}form input[type="number"]::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:box;display:flex;display:flexbox;display:flex;flex-wrap:wrap;flex-wrap:wrap;flex-wrap:wrap;text-align:left;justify-content:space-around;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;transition:transform .5s ease-in-out;transition:transform .5s ease-in-out}.photo-container__item img:hover{transform:scale(1.5);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;transform:rotate(45deg);transform:rotate(45deg);transform:rotate(45deg)}.photo-container__close-item::after{content:"";position:absolute;top:23px;left:12px;height:2px;width:50%;background:#b8b8b8;transform:rotate(-45deg);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
Keyboard Shortcuts
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + ] | Indents selected lines |
ctrl + [ | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + shift + L | Beautify code in active panel |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Open the share options |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
JS Bin URLs
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |