jQuery addClass example

Change class name on click in jQuery

HTML

<div class="morning"></div>
<textarea class="breakfast"></textarea>
<div class="afternoon"></div>
<textarea class="lunch"></textarea>
<button class="save-button">save</button>

CSS

.morning {
  float: left;
  box-sizing: border-box;
  background: #f9f9f9;
  padding: .5rem;
  width: calc(50% - 1rem);
  height: 10rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
  color: #202020;
}

.breakfast {
  float: left;
  box-sizing: border-box;
  margin-left: 2rem;
  padding: .5rem;
  width: calc(50% - 1rem);
  height: 10rem;
  border: 1px solid #505050;
  resize: none;
}

.afternoon {
  float: left;
  box-sizing: border-box;
  background: #ff7256;
  padding: .5rem;
  width: calc(50% - 1rem);
  height: 10rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
  color: #202020;
}

.lunch {
  float: left;
  box-sizing: border-box;
  margin-left: 2rem;
  padding: .5rem;
  width: calc(50% - 1rem);
  height: 10rem;
  border: 1px solid #505050;
  resize: none;
}

JavaScript

var output_morning =
  document.querySelector('.morning');

var input_breakfast =
  document.querySelector('.breakfast');

var output_afternoon =
  document.querySelector('.afternoon');

var input_lunch =
  document.querySelector('.lunch');

var save_button =
  document.querySelector('.save-button');


save_button.addEventListener('click', updateJournal);

output_morning.textContent = localStorage.getItem('breakfast');
input_breakfast.value = localStorage.getItem('breakfast');
output_afternoon.textContent = localStorage.getItem('lunch');
input_lunch.value = localStorage.getItem('lunch');

function updateJournal() {
  localStorage.setItem('breakfast', input_breakfast.value);
  localStorage.setItem('lunch', input_lunch.value);
  output_morning.textContent = input_breakfast.value;
  output_afternoon.textContent = input_lunch.value;
}