var area document querySelector note button document querySelector sub

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
var area = document.querySelector('.note'),
button = document.querySelector('.submit'),
createNode = function(message){
var ul = document.querySelector('ul'),
li = document.createElement('li'),
time = document.createElement('time'),
span1 = document.createElement('span'),
span2 = document.createElement('span'),
div1 = document.createElement('div'),
div2 = document.createElement('div'),
h2 = document.createElement('h2'),
p = document.createElement('p'),
items = ['earth', 'mail', 'screen', 'phone'],
item = items[Math.floor(Math.random()*items.length)],
lines = area.value.split("\n"),
atitle = lines.shift(),
article= lines.join("\n");
var now = new Date(),
fulldate = now.format('yyyy-mm-dd HH:MM:ss'),
date = now.format('yyyy-mm-dd'),
timer = now.format('HH:MM');
time.classList ? time.classList.add( 'time' ) : time.className = 'time';
time.datetime = fulldate;
span1.appendChild( document.createTextNode( date ) );
span2.appendChild( document.createTextNode( timer ) );
time.appendChild( span1 );
time.appendChild( span2 );
div1.classList ? div1.classList.add( 'icon' ) : div1.className = 'icon';
div1.classList ? div1.classList.add( 'icon-' + item ) : div1.className += ' icon-' + item;
div2.classList ? div2.classList.add( 'label' ) : div2.className = 'label';
h2.appendChild( document.createTextNode( atitle ) );
p.appendChild( document.createTextNode( article ) );
div2.appendChild( h2 );
div2.appendChild( p );
div2.style.maxHeight = 0;
li.appendChild( time );
li.appendChild( div1 );
li.appendChild( div2 );
ul.insertBefore( li, ul.firstChild );
area.value = '';
button.style.display = 'none';
var t = setTimeout(function(){
div2.style.removeProperty('max-height');
t = null;
}, 333);
var xhr = new XMLHttpRequest(),
data = 'article=' + JSON.stringify({
title: atitle,
text: article,
type: item,
time: fulldate
});
xhr.open('POST', '/', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
xhr.send(data);
};
button.addEventListener('click', function(e){
createNode();
e.preventDefault();
});
area.addEventListener('focus', function(e){
button.style.display = 'block';
});
area.addEventListener('blur', function(e){
var t = setTimeout(function(){
if (area.value === '') {
button.style.display = 'none';
}
t = null;
}, 333);
});