Html - Issues with displaying results after user's input

Candyce
November 24, 2023
133 views
0 votes
2 Answers

Context:

I am creating a webapp that allows users to key in the url within the field, click the check button and there will be a result box displayed to show if the url belongs to a trusted site or not. Thereafter, there should also be a ‘try again’ button for users to clear the field and pop in another url. I’ve tried to chatgpt the whole day and it did not seem to work.

Problems:
Appreciate help in the following areas:

Display of results: The current display of the results is messy. The intended layout would be the header at the top, then followed by the results saying whether if it’s a trusted site and then lastly a ‘try again’ button. Welcome any further suggestions for a more user-friendly layout!
Keying in empty field shows results: By right if the field is empty, there should not be any function triggered. However, it does not work.

document.getElementById("urlInput").addEventListener("keyup", function(event) {
    if (event.key === "Enter") {
        if (document.getElementById("urlInput").value.trim() !== "") {
            checkURL();
        } else {
            displayErrorMessage("Please enter a URL.");
        }
    }
});

document.querySelector(".check").addEventListener("click", function() {
    if (document.getElementById("urlInput").value.trim() !== "") {
        checkURL();
    } else {
        displayErrorMessage("Please enter a URL.");
    }
});

function checkURL() {
    let userInput = document.getElementById("urlInput").value;
    let resultContainer = document.querySelector('.result');
    let headerResult = document.getElementById("headerResult");
    let isTrusted = document.getElementById("trustedResult");
    let notTrusted = document.getElementById("notTrustedResult");
    let retryButton = document.getElementById("retryButton");

    if (retryButton) {
        retryButton.style.display = "none";
    }

    resultContainer.style.display = "none";
    

    if (userInput.includes(".gov.sg") || userInput.includes(".for.sg") || userInput.includes(".for.edu.sg")) {
        // Display trusted result
        resultContainer.style.display = "flex";
        headerResult.style.display = "block";
        isTrusted.style.display = "block";
        notTrusted.style.display = "none";
        headerResult.innerHTML = "Result";
        if (retryButton) {
            retryButton.style.display = "block";
        }
        
    } else {
        // Display not trusted result
        resultContainer.style.display = "flex";
        headerResult.style.display = "block";
        isTrusted.style.display = "none";
        notTrusted.style.display = "block";
        headerResult.innerHTML = "Result";

        if (retryButton) {
            retryButton.style.display = "block";
        }
}
}
function clearResults() {
    let resultContainer = document.querySelector('.result');
    let headerResult = document.getElementById("headerResult");
    let isTrusted = document.getElementById("trustedResult");
    let notTrusted = document.getElementById("notTrustedResult");
    let retryButton = document.getElementById("retryButton");

    resultContainer.style.display = "none";
    headerResult.style.display = "none";
    isTrusted.style.display = "none";
    notTrusted.style.display = "none";

    if (retryButton) {
        retryButton.style.display = "none";
    }
}

function retryButtonClick() {
    clearResults();
    document.getElementById("urlInput").value = ""; // Clear the input field
}
    
    function getLastModifiedDate (){
        let lastModified = new Date(document.lastModified);
        let options = {year:'numeric', day:'numeric', month: 'short'};
        return lastModified.toLocaleDateString('en-SG',options);
    }
    document.getElementById('lastUpdated').innerHTML=getLastModifiedDate();

body {
  margin: 0;
  padding: 0;
}

#mastbanner {
  background-color: rgb(240, 240, 240);
  color: hsl(0, 0%, 28%);
  font-size: 0.6875rem;
  max-width: 2000px;
  height: 20px;
  position: relative;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", "Liberation Sans", sans-serif;
  display: flex;
  align-items: center;
}

#mastheadImage {
  width: auto;
  max-height: 70%;
  position: absolute;
  left: 0.3rem;
  margin-top: 0;
}

#textContainer {
  position: relative;
  left: 1.8rem;
}

#checkerHeader {
  padding-top: 5rem;
  text-align: center;
  color: rgb(26, 24, 21);
  font-family: "Open Sans", sans-serif;
}

#myHeader {
  margin-bottom: 35px;
}

.headerPara {
  line-height: 0%;
}

#search-container {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", "Liberation Sans", sans-serif;
  border-bottom: 1.5px solid #bbb4b4; /* Add a border to the bottom of the search container */
  padding-top: 25px;
  padding-bottom: 40px; /* Add padding to create space for the border */
  width: 70%; /* Adjust the width to change the length of the border */
  margin: auto; /* Center the container on the page */
  box-sizing: border-box; /* Include padding and border in the element's total width */;
}

input {
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 5px;
  width: 255px;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #4285f4;
  color: #fff;
  border: 1px solid #4285f4;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
}

button:hover {
  background-color: #3c78d8;
}

.resultContainer{
  display: flex;
  flex-direction: column; /* Stack children vertically */
  align-items: center;
  position: relative;
  width: 10%;
  margin: 5% auto;
}

#retryButton {
  display: none;
  align-items: center;
  margin-top: 10px; /* Add space above the retry button */
}

.result {
  display: none;
  border-radius: 10px;
  background-color: rgb(240, 240, 240);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", "Liberation Sans", sans-serif;
  top: 62%; /* Center vertically */
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
  box-sizing: border-box;
  position: absolute;
}

#headerResult {
  display: none;
  text-align: center;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", "Liberation Sans", sans-serif;
  margin-bottom: 10px; /* Add spacing between header and text */
}

#trustedResult, #notTrustedResult {
  text-align: center;
  font-size: 20px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", "Liberation Sans", sans-serif;
  margin: 10px 0;
  padding: 15px;
  border-radius: 5px;
  display: none;
}



#status {
  text-align: left;
  position: fixed;
  bottom: 0;
  right: 0;
  padding: 0%;
  font-size: 0.6875rem;
  padding-right: 1%;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>GovCheck</title>
    <script src="https://kit.fontawesome.com/07db50a2cb.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <header>
      <div id="mastbanner" class="masthead">
        <img src="./red_lionhead transparent.png" alt="masthead image" id="mastheadImage">
        <div id="textContainer" class="masthead">
          <p id="mastText">A Singapore Government Agency Website</p>
        </div>
      </div>

      <div id="checkerHeader">
        <h1 id="myHeader">Trusted sites by GovSG</h1>
        <p class="headerPara">Key in a web link, and we'll tell you if it's safe or not.</p>
        <p class="headerPara">
          Start surfing with confidence!
          <i class="fa-solid fa-shield-heart" style="color: #d32709;"></i>
        </p>
      </div>
    </header>

    <div id="search-container">
      <form onsubmit="event.preventDefault(); checkURL();"></form>
      <input type="text" id="urlInput" placeholder="Enter a URL" autofocus autocomplete="off">
      <button class="check" onclick="checkURL()">Check</button>
    </div>
  
    <div class="result">
      <div class="resultContainer">
        <h2 id="headerResult">Result</h2><div id="resultContent">
        <p id="trustedResult"><i class="fa-solid fa-square-check" style="color: #6cf25a;"></i> This is a trusted site by Singapore Gov. Click ahead!</p>
      <p id="notTrustedResult"><i class="fa-solid fa-triangle-exclamation" style="color: #d7a042;"></i> This may not be a trusted site. Think twice before clicking ahead!</p>
      </div>
      <button id="retryButton" onclick="retryButtonClick()">Try again</button>
      </div>
      
    </div>
  
    <div id="status">
      <p>&copy; 2023 Government of Singapore. Last updated on <span id="lastUpdated"></span>.</p>
    </div>

    <script src="./functions.js"></script>
  </body>
</html>

Am a newbie to this. Thanks

Answers

Display of Results:

Your layout can be improved for better readability and presentation of results. Let’s revise the HTML structure and CSS for a more organized display:
Updated HTML Structure:

html

<!-- Your HTML content until the form -->
<div id="search-container">
  <form onsubmit="event.preventDefault(); checkURL();">
    <input type="text" id="urlInput" placeholder="Enter a URL" autofocus autocomplete="off">
    <button class="check" onclick="checkURL()">Check</button>
  </form>
</div>

<!-- Result Section -->
<div class="result" id="resultSection">
  <h2 id="headerResult">Result</h2>
  <div id="resultContent">
    <p id="trustedResult"><i class="fa-solid fa-square-check" style="color: #6cf25a;"></i> This is a trusted site by Singapore Gov. Click ahead!</p>
    <p id="notTrustedResult"><i class="fa-solid fa-triangle-exclamation" style="color: #d7a042;"></i> This may not be a trusted site. Think twice before clicking ahead!</p>
  </div>
  <button id="retryButton" onclick="retryButtonClick()">Try again</button>
</div>
<!-- Your remaining HTML content -->

Updated CSS for Results:

css

/* Add or modify CSS as needed for better layout and visibility */
.result {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Styles for result paragraphs and button */
#headerResult {
  font-size: 24px;
  margin-bottom: 15px;
}

#resultContent p {
  margin: 10px 0;
}

#retryButton {
  padding: 10px 20px;
  margin-top: 20px;
  font-size: 16px;
  background-color: #4285f4;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#retryButton:hover {
  background-color: #3c78d8;
}

Keying in an Empty Field Shows Results:

To prevent displaying results when the field is empty, you’ll need to modify your JavaScript logic.
Updated JavaScript:

javascript

function checkURL() {
  let userInput = document.getElementById("urlInput").value.trim();
  let resultSection = document.getElementById("resultSection");
  let headerResult = document.getElementById("headerResult");
  let isTrusted = document.getElementById("trustedResult");
  let notTrusted = document.getElementById("notTrustedResult");
  let retryButton = document.getElementById("retryButton");

  if (userInput === "") {
    clearResults();
    return; // Exit function if the input is empty
  }

  // Rest of your checkURL() function logic remains unchanged
  // ...
}

Additional Recommendations:

Error Handling: Consider displaying an error message if the URL format is invalid or if there's a connection error while checking the URL.
Accessibility: Ensure the web app is accessible, and elements like buttons and inputs are properly labeled for screen readers.

Try implementing these changes to improve your web app’s functionality and layout. Adjust the styles and functionalities further according to your requirements.

There’s more that can be done, such as refactoring the visibility of the modal (results), which you could do by toggling a class over the results to control the popup in fewer lines.

It looks like you just needed to widen the results styling, I also added a background div for the results so it darkens the page:

document.getElementById("urlInput").addEventListener("keyup", function(event) {
  if (event.key === "Enter") {
    if (document.getElementById("urlInput").value.trim() !== "") {
      checkURL();
    } else {
      displayErrorMessage("Please enter a URL.");
    }
  }
});

document.querySelector(".check").addEventListener("click", function() {
  if (document.getElementById("urlInput").value.trim() !== "") {
    checkURL();
  } else {
    displayErrorMessage("Please enter a URL.");
  }
});

function checkURL() {
  let userInput = document.getElementById("urlInput").value;
  let resultContainer = document.querySelector('.result');
  let resultShadowContainer = document.querySelector('.resultShadow');
  let headerResult = document.getElementById("headerResult");
  let isTrusted = document.getElementById("trustedResult");
  let notTrusted = document.getElementById("notTrustedResult");
  let retryButton = document.getElementById("retryButton");

  if (retryButton) {
    retryButton.style.display = "none";
  }

  resultContainer.style.display = "none";


  if (userInput.includes(".gov.sg") || userInput.includes(".for.sg") || userInput.includes(".for.edu.sg")) {
    // Display trusted result
    resultContainer.style.display = "flex";
    resultShadowContainer.style.display = "block";
    headerResult.style.display = "block";
    isTrusted.style.display = "block";
    notTrusted.style.display = "none";
    headerResult.innerHTML = "Result";
    if (retryButton) {
      retryButton.style.display = "block";
    }

  } else {
    // Display not trusted result
    resultContainer.style.display = "flex";
    resultShadowContainer.style.display = "block";
    headerResult.style.display = "block";
    isTrusted.style.display = "none";
    notTrusted.style.display = "block";
    headerResult.innerHTML = "Result";

    if (retryButton) {
      retryButton.style.display = "block";
    }
  }
}

function clearResults() {
  let resultContainer = document.querySelector('.result');
  let resultShadowContainer = document.querySelector('.resultShadow');
  let headerResult = document.getElementById("headerResult");
  let isTrusted = document.getElementById("trustedResult");
  let notTrusted = document.getElementById("notTrustedResult");
  let retryButton = document.getElementById("retryButton");

  resultContainer.style.display = "none";
  headerResult.style.display = "none";
  isTrusted.style.display = "none";
  notTrusted.style.display = "none";
  resultShadowContainer.style.display = "none";

  if (retryButton) {
    retryButton.style.display = "none";
  }
}

function retryButtonClick() {
  clearResults();
  document.getElementById("urlInput").value = ""; // Clear the input field
}

function getLastModifiedDate() {
  let lastModified = new Date(document.lastModified);
  let options = {
    year: 'numeric',
    day: 'numeric',
    month: 'short'
  };
  return lastModified.toLocaleDateString('en-SG', options);
}
document.getElementById('lastUpdated').innerHTML = getLastModifiedDate();

body {
  margin: 0;
  padding: 0;
}

#mastbanner {
  background-color: rgb(240, 240, 240);
  color: hsl(0, 0%, 28%);
  font-size: 0.6875rem;
  max-width: 2000px;
  height: 20px;
  position: relative;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  display: flex;
  align-items: center;
}

#mastheadImage {
  width: auto;
  max-height: 70%;
  position: absolute;
  left: 0.3rem;
  margin-top: 0;
}

#textContainer {
  position: relative;
  left: 1.8rem;
}

#checkerHeader {
  padding-top: 5rem;
  text-align: center;
  color: rgb(26, 24, 21);
  font-family: "Open Sans", sans-serif;
}

#myHeader {
  margin-bottom: 35px;
}

.headerPara {
  line-height: 0%;
}

#search-container {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  border-bottom: 1.5px solid #bbb4b4;
  /* Add a border to the bottom of the search container */
  padding-top: 25px;
  padding-bottom: 40px;
  /* Add padding to create space for the border */
  width: 70%;
  /* Adjust the width to change the length of the border */
  margin: auto;
  /* Center the container on the page */
  box-sizing: border-box;
  /* Include padding and border in the element's total width */
  ;
}

input {
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 5px;
  width: 255px;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #4285f4;
  color: #fff;
  border: 1px solid #4285f4;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
}

button:hover {
  background-color: #3c78d8;
}

.resultContainer {
  display: flex;
  flex-direction: column;
  /* Stack children vertically */
  align-items: center;
  position: relative;
  width: 90%;
  margin: 5% auto;
}

#retryButton {
  display: none;
  align-items: center;
  margin-top: 10px;
  /* Add space above the retry button */
}

.resultShadow {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #000000aa;
}

.result {
  display: none;
  border-radius: 10px;
  background-color: rgb(240, 240, 240);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  top: 50%;
  /* Center vertically */
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
  box-sizing: border-box;
  position: absolute;
  width: 70%;
}

#headerResult {
  display: none;
  text-align: center;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  margin-bottom: 10px;
  /* Add spacing between header and text */
}

#trustedResult,
#notTrustedResult {
  text-align: center;
  font-size: 20px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  margin: 10px 0;
  padding: 15px;
  border-radius: 5px;
  display: none;
}

#status {
  text-align: left;
  position: fixed;
  bottom: 0;
  right: 0;
  padding: 0%;
  font-size: 0.6875rem;
  padding-right: 1%;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>GovCheck</title>
  <script src="https://kit.fontawesome.com/07db50a2cb.js" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="./styles.css" />
</head>

<body>
  <header>
    <div id="mastbanner" class="masthead">
      <img src="./red_lionhead transparent.png" alt="masthead image" id="mastheadImage">
      <div id="textContainer" class="masthead">
        <p id="mastText">A Singapore Government Agency Website</p>
      </div>
    </div>

    <div id="checkerHeader">
      <h1 id="myHeader">Trusted sites by GovSG</h1>
      <p class="headerPara">Key in a web link, and we'll tell you if it's safe or not.</p>
      <p class="headerPara">
        Start surfing with confidence!
        <i class="fa-solid fa-shield-heart" style="color: #d32709;"></i>
      </p>
    </div>
  </header>

  <div id="search-container">
    <form onsubmit="event.preventDefault(); checkURL();"></form>
    <input type="text" id="urlInput" placeholder="Enter a URL" autofocus autocomplete="off">
    <button class="check" onclick="checkURL()">Check</button>
  </div>

  <div class="resultShadow"></div>
  <div class="result">
    <div class="resultContainer">
      <h2 id="headerResult">Result</h2>
      <div id="resultContent">
        <p id="trustedResult"><i class="fa-solid fa-square-check" style="color: #6cf25a;"></i> This is a trusted site by Singapore Gov. Click ahead!</p>
        <p id="notTrustedResult"><i class="fa-solid fa-triangle-exclamation" style="color: #d7a042;"></i> This may not be a trusted site. Think twice before clicking ahead!</p>
      </div>
      <button id="retryButton" onclick="retryButtonClick()">Try again</button>
    </div>
  </div>

  <div id="status">
    <p>&copy; 2023 Government of Singapore. Last updated on <span id="lastUpdated"></span>.</p>
  </div>

  <script src="./functions.js"></script>
</body>

</html>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Issues with displaying results after user's input

Answers