Hi there @yourfriendra and welcome to the community 
I really like that you have pushed yourself here and made the assessment your own. A couple of notes on the code. Let’s start with the HTML.
<section class="preview">
<label for="searchName">Search Name for Phone Number: </label><br>
<input type="text" id="searchName"><br>
<button id="search">Search</button>
<br>
<p id="result"></p>
</section>
I would update this to the following:
<section class="preview">
<form name="search" id="search-form" action="/" method="get">
<fieldset>
<legend>Search for a phone number</legend>
<label for="name">Name:</label>
<input type="text" id="name" required />
<button type="submit" id="search">Search</button>
</fieldset>
</form>
<p id="result"></p>
</section>
I start by wrapping your form controls in a form
element which is generally how you would markup this kind of functionality. I then use a fieldset
element to group the related input elements. Here we only have one input
element but, if you for example also had a surname input
element, you would group it together with the name element using the same fieldset
.
I then add a legend
to the fieldset
. The legend
describes what our form is about, essentially providing a heading for the form. I then add the label
and input
. I am glad to see you associated the two with each other using the for
attribute and id
. This is great for accessibility and a best practice. 
I also added the required
attribute to the input
element. This will stop the form from being submitted if the input field is empty.
I then add the button
element but, I add a type
attribute and set it to submit
. We want the button
to submit the form when it is clicked. Outside the form
we then have the container element for your result.
Also, update the CSS to the following.
* {
box-sizing: border-box;
}
fieldset {
border: 0;
}
p {
color: purple;
margin: 0.5em 0;
}
Now onto the JavaScript! You no longer use the name
variable and so we can safely remove it.
const form = document.getElementById("search-form");
form.addEventListener("submit", search);
We now get the form
element instead of the search input. We attach the event listener to the form and listen for the submit event. This means that the search function will be called if you press enter inside the input element and also when you click the button.
function search(event) {
event.preventDefault();
We update the search
function to take the event
as an argument and then call preventDefault
on the event. This stops the browser from taking the default action when submitting the form and hands control to us.
Next we get the value from the input next:
const searchTerm = document.getElementById("name").value;
Next we update our loop a little bit:
for (const element of phonebook) {
if (element.name.toLowerCase() === searchTerm.toLowerCase()) {
para.textContent = `${element.name} : ${element.number}`;
break;
} else {
para.textContent = "Name not found";
}
}
Instead of using slice
and string concatenation we lower case both values when we compare them to each other. Lastly, we output our search result:
const section = document.querySelector("section");
section.appendChild(para);
Again, great work! I hope the above will add to what you have already learned.
–
Schalk
Staff Community Manager - MDN Web Docs