jQuery addClass example

Change class name on click in jQuery

by warrenkc

HTML

<p>
Input JSON
</p>
<textarea id="input" type="text" rows="5" cols="50"></textarea><br />
<input type="button" value="Process JSON" onclick="myFunction()">
<p>
Output SRT Subtitle File <a class="hidden" id="download_link" download="subtitle.srt" href=”” >Download as subtitle File</a>

</p>

<textarea id="output" rows="10" cols="50"></textarea>

CSS

body {
 
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

.hidden {
  display: none;
}

JavaScript

var counter = 0;
srtCount = 0;
$('input#mybutton').click(function() {
  var text = $('textarea#mytextarea').val();
  //send to server and process response
});

function myFunction() {
  var txt = $('textarea#input').val();
  var data = JSON.parse(txt);
  $.each(data, function(i, obj) {
    //use obj.id and obj.name here, for example:
    $('#output').append(inputToSRT(obj));
  });

  // Prompt user to save the output file.
  var txt = $('textarea#output').val();
  var fileData = new Blob([txt], {
    type: 'text/plain'
  });

  var url = window.URL.createObjectURL(fileData);

  document.getElementById('download_link').href = url;
  
  $( "#download_link" ).show();
  
}

function processJsonFromUrl() {
  $.get("https://api.myjson.com/bins/5ydqg", function(data) {
    $.each(data, function(i, obj) {
      //use obj.id and obj.name here, for example:
      $('#output').append(inputToSRT(obj));
    });
  });

}
function formatSeconds(totalSeconds) {
  var hours = Math.floor(totalSeconds / 3600);
  totalSeconds %= 3600;
  var minutes = Math.floor(totalSeconds / 60);
  var seconds = Math.floor(totalSeconds) % 60;
  var milliseconds = Math.floor(totalSeconds * 1000) % 1000;

  return pad(hours) + ':' + pad(minutes) + ':' + pad(seconds) + ',' + pad(milliseconds);
}

function inputToSRT(sub_in) {
  return ++srtCount + "\r\n" + formatSeconds(sub_in.from) + " --> " + formatSeconds(sub_in.to) + "\r\n" + sub_in.value + "\r\n\r\n";
}

function pad(n) {
  return (n < 10) ? ("0" + n) : n;
}