Codepen keeps going to "Not Found" Error

HTML

<div class="topnav">
<a href="#"> HOME </a>
<a href="#"> Link1 </a>
<a href="#"> Link2 </a>
<a href="#"> Link3 </a>
<a href="#"> Link4 </a>
 <div class="search-container">
    <form id="search">
      <input  type="text" placeholder="Search..." id="inputVal">
    
      <button id="btn" >&#8981;</button>
    </form>
  
 </div>
  </div>
<div id="searchtext">
<p>JavaScript is the programming language of the Web. The overwhelming majority of
modern websites use JavaScript, and all modern web browsers—on desktops, game
consoles, tablets, and smart phones—include JavaScript interpreters, making Java-
Script the most ubiquitous programming language in history. JavaScript is part of the
triad of technologies that all Web developers must learn: HTML to specify the content
of web pages, CSS to specify the presentation of web pages, and JavaScript to specify
the behavior of web pages. This book will help you master the language.</p>
<p>If you are already familiar with other programming languages, it may help you to know
that JavaScript is a high-level, dynamic, untyped interpreted programming language
that is well-suited to object-oriented and functional programming styles. JavaScript
derives its syntax from Java, its first-class functions from Scheme, and its prototypebased
inheritance from Self. But you do not need to know any of those languages, or
be familiar with those terms, to use this book and learn JavaScript.</p>
<p>The name "JavaScript" is actually somewhat misleading. <span>Except</span> for a superficial syntactic
resemblance, JavaScript is completely different from the Java programming 
And JavaScript has long since outgrown its scripting-language roots to become
  a robust and efficient general-purpose language. </p>
</div>

CSS

.topnav{
  background-color: #3a3b42;
  height: 44px;
  color: white;
  position: relative;
  border-radius: 10px;
  box-shadow: 0px 5px 16px 0px           rgba(0,0,0,0.4);
}
a:link, a:visited {
  background-color: #3a3b42;
  color: white;
  padding: 14px 28px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 10px;
}

a:hover, a:active {
  background-color: gray;
}
.topnav .search-container {
  float: right;
}

.topnav input[type=text] {
  padding: 4px;
  margin-top: 7.5px;
  font-size: 17px;
  border: none;
  width: 300px;
  border-radius: 5px 0px 0px 5px;
  position: relative;
  outline: none;
}

.topnav .search-container button {
  float: right;
  padding: 3.7px 15px;
  margin-top: 7.5px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
  border-radius: 1px 5px 5px 1px ;
  position: relative;
  right: 0.4%;
}

.topnav .search-container button:hover {
  background: #ccc;
}

@media screen and (max-width: 600px) {
  .topnav .search-container {
    float: none;
  }
  .topnav a, .topnav input[type=text], .topnav .search-container button {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 15px;
    border: 20px #ccc;
    outline: none;
  } 

JS

$('#btn').click( // if someone clicks the button
  function () {
    let input = $("#inputVal").val() //Takes the textbox textmy search text

    $("p:contains('" + input + "')").css("background-color", "yellow");

  });

That is because if you do not specify an action attribute, the default is to try to target the same page again. I think what you really want to do is when the button is clicked, for the applicable paragraph to be highlighted. In order to do that, you will need to prevent the default behavior of a form when a button is clicked in it. That default behavior is to try submitting to the location specified in the action attribute. To prevent this behavior, reseach the preventDefault method available on the event object that you have access to when the button is clicked.

Thank you! And I didn’t realize that it highlighted the whole paragraph, since it always cuts out, but I’m going to fix it.
I’m fairly new to coding/scripting so this helps a lot.