function createElement(text, millis, upvotes, name, author, languageCode, i) {
  const date = new Date(millis);

  const wrapper = document.createElement("div");
  wrapper.className = "comment";

  // box containing comment text and timestamp
  const box = document.createElement("div");
  box.className = "comment-box";

  const textWrapper = document.createElement("div");
  textWrapper.className = "comment-text";
  textWrapper.id = "comment" + i;
  textWrapper.innerText = text;

  const timeWrapper = document.createElement("div");
  timeWrapper.className = "comment-time";
  timeWrapper.innerText = dateString(date);

  box.appendChild(textWrapper);
  box.appendChild(timeWrapper);

  // can only delete comments if you are the original author 
  if(author.localeCompare(user.email) == 0) {
    const trash = document.createElement("img");
    trash.className = "trash";
    trash.alt = "Delete";
    trash.src = "/images/trash.png";
    trash.onclick = function() {
      deleteComment(i);
    };
    box.appendChild(trash);
  }

  // box containing upvote and author info
  const upDownBox = document.createElement("div");
  upDownBox.className = "upvote-downvote";
  
  const up = document.createElement("div");
  up.className = "up";
  up.innerText = "+";

  const upCounter = document.createElement("div");
  upCounter.className = "up-counter";
  var count = upvotes;
  if(upvotes > 0) {
    count = "+" + upvotes;
  } else if (upvotes == 0) {
    count = "";
  }
  upCounter.innerText = count;
  
  const down = document.createElement("div");
  down.className = "down";
  down.innerText = "-";
  
  if(user.loggedIn) {
    var v = js[i]["propertyMap"][user.email];
    if(v === undefined) {
      v = 0;
    }
    if(v < 0) {
      down.style.color = red;
    } else if (v > 0) {
      up.style.color = green;
    }
  }

  up.onclick = function() {
    vote(i, 1);
  }
  down.onclick = function() {
    vote(i, -1);
  }

  const authorField = document.createElement("div");
  authorField.className = "comment-author";
  if(name != null && name.length > 0) {
    authorField.innerText = name;
  } else {
    authorField.innerText = "Guest";
  }
  
  // build drop-down area to select language
  const languageBox = document.createElement("div");
  languageBox.className = "select-language";
  const thisLang = document.createElement("span");
  var language = "??";
  if(langs.hasOwnProperty(languageCode)) {
    language = langs[languageCode];
  }
  thisLang.id = "thisLang" + i;
  thisLang.innerText = "Language: " + language;
  const divider = document.createElement("span");
  divider.innerText = " | ";
  divider.className = "divider";
  const languageLabel = document.createElement("span");
  languageLabel.innerText = "Translate to: ";
  const languageSelect = document.createElement("select");
  languageSelect.id = "lang" + i;
  languageSelect.className = "select-dropdown";
  languageDropdown(languageSelect);
  languageBox.appendChild(thisLang);
  languageBox.appendChild(divider);
  languageBox.appendChild(languageLabel);
  languageBox.appendChild(languageSelect);
  languageSelect.onchange = function() {
    translateDropdown(textWrapper.id, textWrapper.id, languageSelect.id, thisLang.id, 3);
  }

  upDownBox.appendChild(up);
  upDownBox.appendChild(upCounter);
  upDownBox.appendChild(down);
  upDownBox.appendChild(authorField);

  const commentBottom = document.createElement("div");
  commentBottom.className = "comment-bottom";
  commentBottom.appendChild(upDownBox);
  commentBottom.appendChild(languageBox);
  
  wrapper.appendChild(box);
  wrapper.appendChild(commentBottom);
  return wrapper;
}
/** 
 * Creates a <div> element for an individual comment and returns it. 
 * 
 * @param {string} text The text content of the comment.
 * @param {number} millis The timestamp, in milliseconds, of the comment.
 * @param {number} upvotes The upvote count of the comment.
 * @param {string} author The original comment author id.
 * @param {number} i The index of the comment in the js array.
 */
Creates a  element for an individual comment and returns it.

@param {string} text The text content of the comment.
@param {number} millis The timestamp, in milliseconds, of the comment.
@param {number} upvotes The upvote count of the comment.
@param {string} author The original comment author id.
@param {number} i The index of the comment in the js array.
Creates a element for an individual comment and returns it . @param { string } text The text content of the comment . @param { number } millis The timestamp in milliseconds of the comment . @param { number } upvotes The upvote count of the comment . @param { string } author The original comment author id . @param { number } i The index of the comment in the js array .
function createElement(text, millis, upvotes, name, author, languageCode, i) {
  const date = new Date(millis);
  const wrapper = document.createElement("div");
  wrapper.className = "comment";
  const box = document.createElement("div");
  box.className = "comment-box";
  const textWrapper = document.createElement("div");
  textWrapper.className = "comment-text";
  textWrapper.id = "comment" + i;
  textWrapper.innerText = text;
  const timeWrapper = document.createElement("div");
  timeWrapper.className = "comment-time";
  timeWrapper.innerText = dateString(date);
  box.appendChild(textWrapper);
  box.appendChild(timeWrapper);
  if(author.localeCompare(user.email) == 0) {
    const trash = document.createElement("img");
    trash.className = "trash";
    trash.alt = "Delete";
    trash.src = "/images/trash.png";
    trash.onclick = function() {
      deleteComment(i);
    };
    box.appendChild(trash);
  }
  const upDownBox = document.createElement("div");
  upDownBox.className = "upvote-downvote";
  const up = document.createElement("div");
  up.className = "up";
  up.innerText = "+";
  const upCounter = document.createElement("div");
  upCounter.className = "up-counter";
  var count = upvotes;
  if(upvotes > 0) {
    count = "+" + upvotes;
  } else if (upvotes == 0) {
    count = "";
  }
  upCounter.innerText = count;
  const down = document.createElement("div");
  down.className = "down";
  down.innerText = "-";
  if(user.loggedIn) {
    var v = js[i]["propertyMap"][user.email];
    if(v === undefined) {
      v = 0;
    }
    if(v < 0) {
      down.style.color = red;
    } else if (v > 0) {
      up.style.color = green;
    }
  }
  up.onclick = function() {
    vote(i, 1);
  }
  down.onclick = function() {
    vote(i, -1);
  }
  const authorField = document.createElement("div");
  authorField.className = "comment-author";
  if(name != null && name.length > 0) {
    authorField.innerText = name;
  } else {
    authorField.innerText = "Guest";
  }
  const languageBox = document.createElement("div");
  languageBox.className = "select-language";
  const thisLang = document.createElement("span");
  var language = "??";
  if(langs.hasOwnProperty(languageCode)) {
    language = langs[languageCode];
  }
  thisLang.id = "thisLang" + i;
  thisLang.innerText = "Language: " + language;
  const divider = document.createElement("span");
  divider.innerText = " | ";
  divider.className = "divider";
  const languageLabel = document.createElement("span");
  languageLabel.innerText = "Translate to: ";
  const languageSelect = document.createElement("select");
  languageSelect.id = "lang" + i;
  languageSelect.className = "select-dropdown";
  languageDropdown(languageSelect);
  languageBox.appendChild(thisLang);
  languageBox.appendChild(divider);
  languageBox.appendChild(languageLabel);
  languageBox.appendChild(languageSelect);
  languageSelect.onchange = function() {
    translateDropdown(textWrapper.id, textWrapper.id, languageSelect.id, thisLang.id, 3);
  }
  upDownBox.appendChild(up);
  upDownBox.appendChild(upCounter);
  upDownBox.appendChild(down);
  upDownBox.appendChild(authorField);
  const commentBottom = document.createElement("div");
  commentBottom.className = "comment-bottom";
  commentBottom.appendChild(upDownBox);
  commentBottom.appendChild(languageBox);
  wrapper.appendChild(box);
  wrapper.appendChild(commentBottom);
  return wrapper;
}
function createElement ( text , millis , upvotes , name , author , languageCode , i ) { const date = new Date ( millis ) ; const wrapper = document . createElement ( "div" ) ; wrapper . className = "comment" ; const box = document . createElement ( "div" ) ; box . className = "comment-box" ; const textWrapper = document . createElement ( "div" ) ; textWrapper . className = "comment-text" ; textWrapper . id = "comment" + i ; textWrapper . innerText = text ; const timeWrapper = document . createElement ( "div" ) ; timeWrapper . className = "comment-time" ; timeWrapper . innerText = dateString ( date ) ; box . appendChild ( textWrapper ) ; box . appendChild ( timeWrapper ) ; if ( author . localeCompare ( user . email ) == 0 ) { const trash = document . createElement ( "img" ) ; trash . className = "trash" ; trash . alt = "Delete" ; trash . src = "/images/trash.png" ; trash . onclick = function ( ) { deleteComment ( i ) ; } ; box . appendChild ( trash ) ; } const upDownBox = document . createElement ( "div" ) ; upDownBox . className = "upvote-downvote" ; const up = document . createElement ( "div" ) ; up . className = "up" ; up . innerText = "+" ; const upCounter = document . createElement ( "div" ) ; upCounter . className = "up-counter" ; var count = upvotes ; if ( upvotes > 0 ) { count = "+" + upvotes ; } else if ( upvotes == 0 ) { count = "" ; } upCounter . innerText = count ; const down = document . createElement ( "div" ) ; down . className = "down" ; down . innerText = "-" ; if ( user . loggedIn ) { var v = js [ i ] [ "propertyMap" ] [ user . email ] ; if ( v === undefined ) { v = 0 ; } if ( v < 0 ) { down . style . color = red ; } else if ( v > 0 ) { up . style . color = green ; } } up . onclick = function ( ) { vote ( i , 1 ) ; } down . onclick = function ( ) { vote ( i , - 1 ) ; } const authorField = document . createElement ( "div" ) ; authorField . className = "comment-author" ; if ( name != null && name . length > 0 ) { authorField . innerText = name ; } else { authorField . innerText = "Guest" ; } const languageBox = document . createElement ( "div" ) ; languageBox . className = "select-language" ; const thisLang = document . createElement ( "span" ) ; var language = "??" ; if ( langs . hasOwnProperty ( languageCode ) ) { language = langs [ languageCode ] ; } thisLang . id = "thisLang" + i ; thisLang . innerText = "Language: " + language ; const divider = document . createElement ( "span" ) ; divider . innerText = " | " ; divider . className = "divider" ; const languageLabel = document . createElement ( "span" ) ; languageLabel . innerText = "Translate to: " ; const languageSelect = document . createElement ( "select" ) ; languageSelect . id = "lang" + i ; languageSelect . className = "select-dropdown" ; languageDropdown ( languageSelect ) ; languageBox . appendChild ( thisLang ) ; languageBox . appendChild ( divider ) ; languageBox . appendChild ( languageLabel ) ; languageBox . appendChild ( languageSelect ) ; languageSelect . onchange = function ( ) { translateDropdown ( textWrapper . id , textWrapper . id , languageSelect . id , thisLang . id , 3 ) ; } upDownBox . appendChild ( up ) ; upDownBox . appendChild ( upCounter ) ; upDownBox . appendChild ( down ) ; upDownBox . appendChild ( authorField ) ; const commentBottom = document . createElement ( "div" ) ; commentBottom . className = "comment-bottom" ; commentBottom . appendChild ( upDownBox ) ; commentBottom . appendChild ( languageBox ) ; wrapper . appendChild ( box ) ; wrapper . appendChild ( commentBottom ) ; return wrapper ; }
Creates a <div> element for an individual comment and returns it.
Creates a <div > element for an individual comment and returns it .
// box containing comment text and timestamp // can only delete comments if you are the original author  // box containing upvote and author info // build drop-down area to select language