JSFiddle - React, Tailwind, and code Playground

by markrummel

HTML

<input type="text" id="movie-id" value="44444" /><br />
<button id="voteYes" class="voteYesNo">Yes</button>
<button id="voteNo" class="voteYesNo">No</button>
<button id="why">Why</button><br />
<input type="checkbox" name="scenes" id="vote-scenes" value="Extra Scene(s)" data-role="button" />
            <label for="checkbox1">Extra Scene(s)</label>
            
            <input type="checkbox" name="outtakes" id="vote-outtakes" value="Outtakes/Bloopers" data-role="button" />
<label for="checkbox2">Outtakes/Bloopers</label>
<button id="submitWhy">Submit Why</button><br /><br />
<button id="exist">Exist?</button>
<button id="movie-check">Movie?</button>
<button id="yes-check">Yes?</button>

CSS

/*{"movie44444":{"yes":1}}

if (localStorage.votes == null) {
    retrievedVotes = {};
  }
  
  else {
    retrievedVotes = JSON.parse(localStorage.votes);
  }
  
  if (retrievedVotes['movie' + movieID] == null) {
    retrievedVotes['movie' + movieID] = {};
  }
  
  if (retrievedVotes['movie' + movieID]['yes'] != null) {
    alert('Already Voted Yes');
  }
  
  else if (retrievedVotes['movie' + movieID]['no'] != null) {
    alert('Already Voted No');
  }
  
  else {
    if (voteID == 'voteYes') {
      retrievedVotes['movie' + movieID]['yes'] = 1;
    }
    else (voteID == 'voteNo') {
      retrievedVotes['movie' + movieID]['no'] = 1;
    }  
    
    localStorage.votes = JSON.stringify(retrievedVotes);
    alert ('Now Set');
    
  }

*/

JavaScript

var movieID = $('#movie-id').val();

alert(movieID);

$('.voteYesNo').click(function() {
  var movieID = $('#movie-id').val();
  var voteID = $(this).attr('id');
  alert(voteID + ' for ' + movieID);
  //retrievedVotes = {};
  //retrievedVotes['movie' + movieID] = {};
  //retrievedVotes['movie' + movieID]['yes'] = 1;
  //localStorage.votes = JSON.stringify(retrievedVotes);
  //alert ('Now Set');

  if (localStorage.votes == null) {
    retrievedVotes = {};
  }
  
  else {
    retrievedVotes = JSON.parse(localStorage.votes);
  }
    
  if (retrievedVotes['movie' + movieID] == null) {
    retrievedVotes['movie' + movieID] = {};
  }
    
  if (retrievedVotes['movie' + movieID]['yes'] != null) {
    alert('Already Voted Yes');
  }
  
  else if (retrievedVotes['movie' + movieID]['no'] != null) {
    alert('Already Voted No');
  }
    
  else {
    
    //alert ('Else');
    if (voteID == 'voteYes') {
      retrievedVotes['movie' + movieID]['yes'] = 1;
    }
    else if (voteID == 'voteNo') {
      retrievedVotes['movie' + movieID]['no'] = 1;
    }  
    
    localStorage.votes = JSON.stringify(retrievedVotes);
    alert ('Now Set');
    
  }
  
    
});

$('#why').click(function() {
  var movieID = $('#movie-id').val();
  retrievedVotes = JSON.parse(localStorage.votes);
  retrievedVotes['movie' + movieID]['why'] = 'awesome';
  localStorage.votes = JSON.stringify(retrievedVotes);
});

$('#submitWhy').click(function() {
  var movieID = $('#movie-id').val();
  retrievedVotes = JSON.parse(localStorage.votes);
  if ($('#vote-scenes').is(':checked')) {
    retrievedVotes['movie' + movieID]['scenes'] = 1;
  }
  if ($('#vote-outtakes').is(':checked')) {
    retrievedVotes['movie' + movieID]['outtakes'] = 1;
  }
  localStorage.votes = JSON.stringify(retrievedVotes);
});

$('#exist').click(function() {
    if (localStorage.votes == null) {
      alert('Does Not Exist');
    }
    else {alert('Exists');}
});

$('#movie-check').click(function() {
    retrievedVotes =...