ckaminer/client-side storage

## client-side storage
INDEX.JS
=====================================

var scoreButton = document.getElementById('score-button');
var highScoreSpan = document.getElementById('high-score');
var nameSpan = document.getElementById('name');
var highScore = 0 || JSON.parse(localStorage.getItem("highscore"))[0];
var name = JSON.parse(localStorage.getItem("highscore"))[1];
debugger
addHighScoreToPage(highScore, name);

scoreButton.addEventListener('click', function(){
  var score = generateScore();
  highScore = calculateHighScore(score);
  addHighScoreToPage(highScore);
  var name = document.getElementById("score-name").value;
  var store = [highScore, name];
  localStorage.setItem("highscore", JSON.stringify(store));
}, false);

function calculateHighScore(score){
  return Math.max(score, highScore);
}

function addHighScoreToPage(score, name){
  highScoreSpan.innerText = score;
  nameSpan.innerText = name;
}

function generateScore(){
  return getRandomInt(1, 1000);
}

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}


INDEX.HTML
====================================

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Game Time</title>
</head>
<body>
  <div>
    <button id="score-button">Generate High Score</button>
  </div>
  <div>
    <h4>Name: <input type="text-field" name="Name" id="score-name"></h4>
  </div>
  <div>
    <h4>The high score is: <span id="high-score"></span></h4>
    <h4>The user is: <span id="name"></span></h4>
  </div>
  <script src="main.bundle.js"></script>
</body>
</html>
	INDEX.JS
	=====================================

	var scoreButton = document.getElementById('score-button');
	var highScoreSpan = document.getElementById('high-score');
	var nameSpan = document.getElementById('name');
	var highScore = 0 \|\| JSON.parse(localStorage.getItem("highscore"))[0];
	var name = JSON.parse(localStorage.getItem("highscore"))[1];
	debugger
	addHighScoreToPage(highScore, name);

	scoreButton.addEventListener('click', function(){
	var score = generateScore();
	highScore = calculateHighScore(score);
	addHighScoreToPage(highScore);
	var name = document.getElementById("score-name").value;
	var store = [highScore, name];
	localStorage.setItem("highscore", JSON.stringify(store));
	}, false);

	function calculateHighScore(score){
	return Math.max(score, highScore);
	}

	function addHighScoreToPage(score, name){
	highScoreSpan.innerText = score;
	nameSpan.innerText = name;
	}

	function generateScore(){
	return getRandomInt(1, 1000);
	}

	function getRandomInt(min, max) {
	return Math.floor(Math.random() * (max - min + 1)) + min;
	}



	INDEX.HTML
	====================================

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Game Time</title>
	</head>
	<body>
	<div>
	<button id="score-button">Generate High Score</button>
	</div>
	<div>
	<h4>Name: <input type="text-field" name="Name" id="score-name"></h4>
	</div>
	<div>
	<h4>The high score is: <span id="high-score"></span></h4>
	<h4>The user is: <span id="name"></span></h4>
	</div>
	<script src="main.bundle.js"></script>
	</body>
	</html>