portfolio/src/main/webapp/script.js
/**
 * Fetches comments JSON from server at /data URL and adds the message to 
 * the div with id "comment-list". If no comments were returned, adds
 * "No Comments" message to the div.
 * @param quantity [OPTIONAL] The number of comments to fetch from the server. 
 *     Defaults to 5 if not provided.
 * @return none
 */
Fetches comments JSON from server at /data URL and adds the message to
the div with id "comment-list". If no comments were returned, adds
"No Comments" message to the div.
@param quantity [OPTIONAL] The number of comments to fetch from the server.
Defaults to 5 if not provided.
@return none
Fetches comments JSON from server at / data URL and adds the message to the div with id " comment - list " . If no comments were returned adds " No Comments " message to the div . @param quantity [ OPTIONAL ] The number of comments to fetch from the server . Defaults to 5 if not provided . @return none
function fetchComments(quantity=5) {
  const endpoint = '/data?';
  var queryString = new URLSearchParams();
  queryString.append('quantity', String(quantity));
  const url = endpoint + queryString.toString();
  fetch(url).then(response => response.json()).then((commentData) => {
    let commentContent = "";
    if (commentData.length === 0 ) { 
      document.getElementById('delete-comments-button').setAttribute('disabled','true');
      commentContent = '<div class="comment"><p class="body-text">No Comments</p></div>';
      document.getElementById('comment-list').innerHTML = commentContent;
    } else { 
      for (let i = 0; i < commentData.length; i++) {
        let commentText = commentData[i].commentText; 
        let commentAuthor = commentData[i].commentAuthor === "" ? "Anonymous" : commentData[i].commentAuthor; 
        let authorEmailContent = "";
        if (commentData[i].showEmail == true) {
          let authorEmail = commentData[i].authorEmail === "" ? "No email provided" : commentData[i].authorEmail;
          authorEmailContent = '<p class="footnote-text"> ' + authorEmail + '</p>';
        }
        let blobKey = commentData[i].blobKey;
        fetchCommentImage(blobKey).then((imageUrl) => {
          commentContent += '<div class="comment"><div class="flex-item"><p class="body-text"><b>' + commentAuthor + '</b></p>'
              + authorEmailContent
              + '<p class="body-text">' + commentText + '</p></div>'; 
          if (imageUrl === null) { 
            commentContent += '</div>'; 
          } else if (imageUrl === undefined) { 
            commentContent += '<div class="body-text">Error fetching image</div></div>';
          } else {
            commentContent += '<div class="flex-item"><a href=' + imageUrl + ' target="_blank"><img class="comment-image" src=' 
                + imageUrl + '></a></div></div>'; 
          }
          document.getElementById('comment-list').innerHTML = commentContent;
        });
      }
    }
  });
}
function fetchComments ( quantity = 5 ) { const endpoint = '/data?' ; var queryString = new URLSearchParams ( ) ; queryString . append ( 'quantity' , String ( quantity ) ) ; const url = endpoint + queryString . toString ( ) ; fetch ( url ) . then ( response => response . json ( ) ) . then ( ( commentData ) => { let commentContent = "" ; if ( commentData . length === 0 ) { document . getElementById ( 'delete-comments-button' ) . setAttribute ( 'disabled' , 'true' ) ; commentContent = '<div class="comment"><p class="body-text">No Comments</p></div>' ; document . getElementById ( 'comment-list' ) . innerHTML = commentContent ; } else { for ( let i = 0 ; i < commentData . length ; i ++ ) { let commentText = commentData [ i ] . commentText ; let commentAuthor = commentData [ i ] . commentAuthor === "" ? "Anonymous" : commentData [ i ] . commentAuthor ; let authorEmailContent = "" ; if ( commentData [ i ] . showEmail == true ) { let authorEmail = commentData [ i ] . authorEmail === "" ? "No email provided" : commentData [ i ] . authorEmail ; authorEmailContent = '<p class="footnote-text"> ' + authorEmail + '</p>' ; } let blobKey = commentData [ i ] . blobKey ; fetchCommentImage ( blobKey ) . then ( ( imageUrl ) => { commentContent += '<div class="comment"><div class="flex-item"><p class="body-text"><b>' + commentAuthor + '</b></p>' + authorEmailContent + '<p class="body-text">' + commentText + '</p></div>' ; if ( imageUrl === null ) { commentContent += '</div>' ; } else if ( imageUrl === undefined ) { commentContent += '<div class="body-text">Error fetching image</div></div>' ; } else { commentContent += '<div class="flex-item"><a href=' + imageUrl + ' target="_blank"><img class="comment-image" src=' + imageUrl + '></a></div></div>' ; } document . getElementById ( 'comment-list' ) . innerHTML = commentContent ; } ) ; } } } ) ; }
Fetches comments JSON from server at /data URL and adds the message to
 the div with id "comment-list".
Fetches comments JSON from server at / data URL and adds the message to the div with id " comment - list " .
// if there are no existing comments // disable the delete comments button & display "No Comments" // otherwise display the comments and any attached image // The actual comment // Comment author name: "'Anonymous' if there was not a name submitted." // Show email if the user said so // 'No email provided' if comment had been submitted before implementation of authentication // Display image as well, if there is an image // outer <div> not closed yet // No image // close outer div // Error occured // add image