quotes generator

by Pranab Dey

HTML

<div class="main">
  <button>Another Quote</button>
  <div class="quotes"></div>
</div>

CSS

button{
  background: green;
  padding: 6px 12px;
  color: white;
  font-size: 18px;
  border: 0;
  border-radius: 4px;
  box-shadow: 0 5px 0 0 #064206;
  cursor: pointer;
}
button:active{
  box-shadow: 0 0 0 0 #064206;
  /* transform: translateY(5px); */
}
button:focus{
  outline: 0;
}
button:hover{
  background: #066b06;
}
.quotes{
  margin-top: 25px;
}

JavaScript

var quotes = {
	"line1": "this is the first quote",
  "line2": "this is the second quote",
  "line3": "this is the third quote",
  "line4": "this is the fourth quote",
},
count=1,
quotesList = document.querySelector(".quotes"),
btn = document.querySelector("button");

quotesList.innerHTML = quotes.line + parseInt(count);
console.log(quotes['"' + Object.keys(quotes)[count] + '"']);

btn.addEventListener("click", function(){
	(count === Object.keys(quotes).length)?count=1:count++;
	quotesList.innerHTML = quotes.line[count];
});