symptom.html

<!DOCTYPE html>
<html lang="en-ca">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="symptom.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <title>Covi-track Symptoms</title>
</head>
<body>
  <h1>SYMPTOMS</h1>

  <div class ="overlay">
    <div class="navbar">
        <div class="logo">
          <div class="logo">
            <a href="index.html">
              <img src="logo1.png" alt="App Logo">
            </a>
          </div>
        </div>

        <nav>
            <a href = "mental.html">Mental Health</a>
            <a href = "vacc.html">Vaccinations</a>
            <a href = "symptom.html">Symptoms Tracker</a>
        </nav>
    </div>
  
  <div class="container">
    <input type="text" class="input" placeholder="enter symptoms">
    <div class="unassessed">
      <h3>unassessed symptoms</h3>
    </div>

    <div class="assessed">
      <h3>assessed symptoms</h3>
    </div>

    <div class="announc">
      <h4>Please visit the <a href="vacc.html">vaccination page </a>to locate your nearest clinic to examine COVID-19 symptoms.</h4>
      <p>Reminder to sanitize your hands and wear a fask mask in public.</p>
    </div>
  </div>

  <script type="text/javascript">
    $(".input").on("keyup",function(e){
      if(e.keyCode == 13 && $(".input").val() != ""){  //13 is the enter button
        var symptom = $("<div class='symptom'></div>").text($(".input").val());
        
        var del = $("<i class='fas fa-trash-alt'></i>").click(function(){ //"fas fa-trash-alt" is the trash-bin icon in the href linked above
          var p = $(this).parent();
          
          p.fadeOut(function(){
            p.remove();
          });
        });

        var check = $("<i class='fas fa-check'></i>").click(function(){
          var p = $(this).parent();
          
          p.fadeOut(function(){
            $(".assessed").append(p);
            p.fadeIn();
          });
          
          $(this).remove();
        });

        symptom.append(del,check);
        $(".unassessed").append(symptom);
        $(".input").val("");
      }
    });
  </script>

</body>
</html>