/ * http : / / meyerweb . com / eric / tools / css / reset /
v2 . 0 | 20110126
License : none ( public domain )
* /
html , body , div , span , applet , object , iframe ,
h1 , h2 , h3 , h4 , h5 , h6 , p , blockquote , pre ,
a , abbr , acronym , address , big , cite , code ,
del , dfn , em , img , ins , kbd , q , s , samp ,
small , strike , strong , sub , sup , tt , var ,
b , u , i , center ,
dl , dt , dd , ol , ul , li ,
fieldset , form , label , legend ,
table , caption , tbody , tfoot , thead , tr , th , td ,
article , aside , canvas , details , embed ,
figure , figcaption , footer , header , hgroup ,
menu , nav , output , ruby , section , summary ,
time , mark , audio , video {
margin : 0 ;
padding : 0 ;
border : 0 ;
font-size : 100 % ;
font : inherit ;
vertical-align : baseline ;
}
/* HTML5 display-role reset for older browsers */
article , aside , details , figcaption , figure ,
footer , header , hgroup , menu , nav , section {
display : block ;
}
body {
line-height : 1 ;
}
ol , ul {
list-style : none ;
}
blockquote , q {
quotes : none ;
}
blockquote : before , blockquote : after ,
q : before , q : after {
content : '' ;
content : none ;
}
table {
border-collapse : collapse ;
border-spacing : 0 ;
}
< hr / >
< script type = "text/javascript" >
function changeColor ( ) {
document . getElementById ( "submit" ) . style . borderColor = document . getElementById ( "msg" ) . style . borderColor = document . getElementById ( "name" ) . style . borderColor = document . getElementById ( "col" ) . style . borderColor = document . getElementById ( "col" ) . options [ document . getElementById ( "col" ) . selectedIndex ] . text
}
function submit ( ) {
document . getElementById ( "submit" ) . disabled =
document . getElementById ( "name" ) . disabled =
document . getElementById ( "col" ) . disabled =
document . getElementById ( "msg" ) . disabled = true ;
fetch ( "/COMMENTS?submit=true&article=reset.css.comment&message=" + encodeURIComponent ( document . getElementById ( "msg" ) . value ) + "&name="
+ encodeURIComponent ( document . getElementById ( "name" ) . value ) + "&color=" +
+ encodeURIComponent ( document . getElementById ( "col" ) . options [ document . getElementById ( "col" ) . selectedIndex ] . text )
) . then ( ( data ) = > data . text ( ) )
. then ( ( data ) = > {
fetchComments ( )
} )
}
< / script >
< div id = "commentForm" >
< b > Leave a comment ! < / b > < br / > < br / >
< label for = "name" > Display Name : < / label > < input id = "name" > < br / > < br / >
< label for = "col" > Display Color : < / label > < select id = "col" onchange = "changeColor()" >
< option value = "RED" > RED < / option >
< option value = "GREEN" selected > GREEN < / option >
< option value = "YELLOW" > YELLOW < / option >
< option value = "BLUE" > BLUE < / option >
< option value = "MAGENTA" > MAGENTA < / option >
< option value = "CYAN" > CYAN < / option >
< option value = "WHITE" > WHITE < / option >
< / select > < br / > < br / >
< label for = "msg" style = "vertical-align:top;display:inline;" > Message : < / label > < textarea id = "msg" > < / textarea > < br / > < br / >
< button id = "submit" onload = "changeColor()" onclick = "submit()" > POST < / button >
< / div > < br / > < br / >
< div id = "commentContainer" style = "visibility:hidden;" >
< h2 > Comments < sub > ( < span class = "commentCounter" id = "commentCounter" > 0 < / span > ) < / sub > < / h2 >
< div class = "comments" id = "comments" > < / div >
< / div >
< script type = "text/javascript" >
function fetchComments ( ) {
fetch ( "/COMMENTS?article=reset.css.comment" ) . then ( ( data ) = > data . text ( ) )
. then ( ( data ) = > {
data = data . split ( "\n" ) ;
document . getElementById ( "comments" ) . innerHTML = "" ;
for ( var i = 0 ; i < data . length ; i + + ) {
if ( i = = 0 ) {
document . getElementById ( "commentCounter" ) . innerText = data [ i ]
} else {
if ( data [ i ] . trim ( ) . length > 0 ) {
if ( i % 2 = = 1 ) {
document . getElementById ( "comments" ) . innerHTML + = "<div class=\"commentDisplayer\"><div class=\"commentData\">" + data [ i ] + "</div><br>"
} else {
document . getElementById ( "comments" ) . innerHTML + = "<div class=\"commentInfo\"><sup>- " + data [ i ] + "</sup></div></div><br>"
}
}
}
}
document . getElementById ( "commentContainer" ) . style . visibility = "visible"
} )
}
fetchComments ( )
< / script >