We Keep Coding

Why are my results displaying the way they are after I delete my typed input

I am trying to figure out why my list of results is looking the way it does after I clear my input field, It seems an extra list item with a comma as its value is being to my list of search results. When I clear my input field, I would like My search results to display the way they do when the user first opens the modal
let results = document.querySelector(".result-list")
let listItems = results.getElementsByTagName('li')
$('button').click(function() {
$('#school-popup-modal').attr('style', 'display:flex')
$('#select-buttons').attr('style', 'display:none')
})
$('#cancel-btn').click(function(e) {
$('#school-popup-modal').attr('style', 'display:none')
$('#select-buttons').attr('style', 'display:flex')
$('li').attr('style', 'display:flex')
$("#search-input").val("")
$("#undo").attr('style', 'display:none')
})
let dummyData = [{
name: 'gables',
id: 111
}, {
name: 'palmetto',
id: 222
}, {
name: 'southwest',
id: 333
}, {
name: 'killian',
id: 444
}]
dummyData.forEach((school) => {
let schoolName = school.name
$('.result-list').append(`
<ul><li id="list-item">${schoolName}</li><ul>
`)
})
$('li').click(function(e) {
let elem = e.target
$("#undo").attr('style', 'display:inline')
$("#search-input").val($(elem).text())
$('li').attr('style', 'display:none')
$('#school-popup-content').attr('style', 'padding-bottom:20px')
})
// $('#search-input').keyup(function(){
// let schoolsArr = []
// const searchString = $("#search-input").val().toLowerCase()
// dummyData.forEach((school)=>{
// schoolsArr.push(school.name)
// })
// for(let school of schoolsArr){
// if(school.includes(searchString)){
// results.innerHTML = `<ul><li>${school}</li></ul>`
// }
// else if(searchString === "") {
// console.log('empty')
// }
// }
// })
document.querySelector("#search-input").addEventListener("keyup", (e) => {
const searchString = e.target.value.toLowerCase()
const filteredSchools = dummyData.filter((school) => {
return school.name.toLowerCase().includes(searchString)
})
console.log(filteredSchools)
let filtered = filteredSchools.map((school) => {
return `
<ul>
<li>${school.name}</li>
</ul>
`
})
results.innerHTML = filtered
})
body {
margin: 0;
padding: 0;
font-family: 'itc-avant-garde-gothic-pro', sans-serif;
}
p {
font-size: 15px;
margin-right: 230px;
margin-top: 20px;
margin-bottom: 0px;
}
button {
text-align: center;
margin-bottom: 30px;
padding: 30px;
display: flex;
text-transform: uppercase;
letter-spacing: 4px;
padding: 16px 50px 14px;
border-radius: 2px;
min-width: 297px;
font-size: 14px;
text-align: center;
background: #000;
color: #fff;
line-height: normal;
border: 1px solid #000;
transition: all ease-in-out .3s;
-webkit-transition: all ease-in-out .3s;
-ms-transition: all ease-in-out .3s;
-o-transition: all ease-in-out .qs;
}
#popup-buttons {
margin-top: 70px;
margin-right: 30px;
display: flex;
padding-bottom: 5px;
}
#cancel-btn {
min-width: 217px;
font-size: 10px;
background-color: #ffffff;
color: #000000;
border: red;
}
a {
text-decoration: none;
color: #000000;
}
#cancel-btn: hover {
color: #000;
}
#popup-btn {
font-size: 10px;
min-width: 67px;
padding-top: 5px;
width: 180px;
}
#popup-btn a {
display: flex;
justify-content: space-between;
color: white;
}
button:hover {
color: #000;
background: transparent;
}
#school-popup-modal {
position: fixed;
z-index: 100000;
top: 0;
display: none;
justify-content: center;
background-color: rgba(0, 0, 0, 0.4);
width: 100vw;
height: 100vh;
}
#school-popup-content {
background-color: #ffffff;
border: 1px solid black;
border-radius: 16px;
display: flex;
flex-direction: column;
align-items: center;
max-width: 440px;
height: 400px;
padding: 14px;
width: 400px;
margin-top: 30px;
margin-bottom: 10px;
padding-bottom: 80px;
}
input {
width: 250px;
padding: 10px;
margin-top: 4px;
margin-left: 5px;
margin-bottom: 0px;
}
ul {
margin-left: 0px;
display: flex;
padding-left: 0px;
flex-direction: column;
justify-content: flex-start;
padding-right: 50px;
}
li {
display: flex;
justify-content: flex-start;
align-items: left;
margin-right: 20px;
font-size: 10px;
margin-top: 0px;
padding-top: 15px;
border-bottom: 1px solid #e8e8e8;
padding-right: 10px;
width: 253px;
padding-left: 10px;
padding-bottom: 10px;
}
li:hover {
background-color: #e8e8e8;
}
#search-results {
border: 1px solid #e1e1e1;
border-radius: 4px;
position: relative;
width: 272px;
margin-left: 5px;
}
input span {}
input[value=undo] {
color: grey;
text-align: right;
}
#undo {
position: absolute;
display: none;
top: 10;
color: grey;
font-size: 12px;
margin-top: 18px;
right: 25px;
}
.fas fa-check {
height: 5%;
}
#undo:hover {
color: black;
border-bottom: 1px solid black;
transition: .2s
}
#span-container {
position: relative;
overflow: hidden;
display: inline-block;
}
.popup-header {
font-family: 'itc-avant-garde-gothic-pro', sans-serif;
font-style: normal;
font-weight: bold;
font-size: 20px;
line-height: 28px;
align-items: left;
color: #000000;
margin-right: 120px;
}
#select-buttons {
display: flex;
flex-direction: column;
width: 5%;
}
#select-buttons button {}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="school-popup-modal">
<div id="school-popup-content">
<div class="popup-header">
<span>Find your School</span>
</div>
<p>School</p>
<form>
<div id="span-container">
<input autocomplete="off" id="search-input" placeholder='Start typing...' type="text">
<span id="undo">undo
<span style="font-size: 10px; color: green;">
<i class="fas fa-check"></i>
</span>
</span>
</div>
<div id="#search-results">
<div class="result-list">
</div>
</div>
</form>
<div id="popup-buttons">
<button id="cancel-btn">Cancel</button>
<button id="popup-btn">Start Testing</button>
</div>
</div>
</div>
<div id="select-buttons">
<button>Test for School</button>
<button>Test for work</button>
</div>

Your are putting an array in your HTML.
Try delete the line results.innerHTML = filtered from your JavaScript, and add:
// clear the results
results.innerHTML = '';
// insert the filtered results
filtered.forEach((filteredSchool) => {
results.innerHTML += filteredSchool;
});

HTML and JavaScript Issue 'Uncaught TypeError: Cannot set property 'textContent' of null' found in console

So I have been following this youtube tutorial on how to create a login/sign up form and I've run into a problem. Whilst coding the JS, I tried testing out the continue button without any values submitted into the input groups, and nothing happened. So I went to check the console and I was met with this error message, "Uncaught TypeError: Cannot set property 'textContent' of null". The error occurs around the 'messageElement.textContent = message;' area. Any help would be greatly appreciated.
function setFormMessage(formElement, type, message) {
const messageElement = formElement.querySelector(".form__message");
messageElement.textContent = message;
messageElement.classList.remove("form__message--success", "form__message--error");
messageElement.classList.add(`form__message--${type}`);
}
function setInputError(inputElement, message) {
inputElement.classList.add("form__input--error");
inputElement.parentElement.querySelector(".form__input-error-message").textContent = message;
}
function clearInputError(inputElement) {
inputElement.classList.remove("form__input--error");
inputElement.parentElement.querySelector(".form__input-error-message").textContent = "";
}
document.addEventListener("DOMContentLoaded", () => {
const loginForm = document.querySelector("#login");
const createAccountForm = document.querySelector("#createAccount");
document.querySelector("#linkCreateAccount").addEventListener("click", e => {
e.preventDefault();
loginForm.classList.add("form--hidden");
createAccountForm.classList.remove("form--hidden");
});
document.querySelector("#linkLogin").addEventListener("click", e => {
e.preventDefault();
loginForm.classList.remove("form--hidden");
createAccountForm.classList.add("form--hidden");
});
loginForm.addEventListener("submit", e => {
e.preventDefault();
// Perform your AJAX/Fetch login
setFormMessage(loginForm, "error", "Invalid username/password combination");
});
document.querySelectorAll(".form__input").forEach(inputElement => {
inputElement.addEventListener("blur", e => {
if (e.target.id === "signupUsername" && e.target.value.length > 0 && e.target.value.length < 10) {
setInputError(inputElement, "Username must be at least 10 characters in length");
}
});
inputElement.addEventListener("input", () => {
clearInputError(inputElement);
});
});
});
#import url('https://fonts.googleapis.com/css2?family=Belleza&display=swap') * {
box-sizing: border-box;
}
/*Navugation Bar*/
nav {
z-index: 1;
height: 120px;
background: black;
box-shadow: grey;
overflow: hidden;
background-color: black;
position: sticky;
top: 0;
width: 100%;
}
nav ul {
float: centre;
text-align: center;
}
nav ul li {
display: inline-block;
line-height: 0px;
margin: 0px 15px;
padding: 30px;
}
nav ul li a {
position: sticky;
color: grey;
font-size: 20px;
text-transform: uppercase;
padding: 50px;
text-decoration: none;
width: 100px;
}
nav ul li a:hover {
color: white;
font-size: 30px
}
/*Home Page*/
.header-image {
padding: 0px;
position: sticky;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
margin-top: auto;
width: 100%;
background-color: black;
height: 290px
}
#Home-page {
font-size: 2em;
margin: 0;
margin-bottom: 250px;
background: url(About\ Page\ Background.png)no-repeat;
background-position: center;
background-size: cover;
}
.first-container {
height: 75hv;
background: rgb(0, 0, 0, .7);
border: white 10px solid;
color: grey;
padding: 50px;
margin-top: 20%;
margin-bottom: 30%;
}
.first-container-h1 {
color: white;
text-align: center;
font-size: 4em;
border-bottom: 20px solid white;
}
.first-container-h2 {
color: white;
text-align: center;
font-size: 4em;
}
#second-container-main {
width: 80%;
margin: auto;
min-width: 460px;
margin-top: 5%;
margin-bottom: 10%;
}
.second-container-title {
background: white;
text-align: center;
font-size: 40px;
height: 6pc;
line-height: 90px;
}
.second-container {
height: 75hv;
background: rgb(0, 0, 0, .7);
border: white 2px solid;
color: grey;
padding: 50px;
font-size: 20px;
}
.second-container:hover {
font-size: 1em;
color: white;
}
.logo {
float: center;
width: 20%;
float: center;
text-align: center;
color: white;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
background-color: black;
height: 100px;
border: none
}
/* Footer*/
.footer-wrapper {
width: 100%;
margin: 0 auto;
display: block;
}
footer {
width: 100%;
height: 300px;
float: right;
text-align: center;
position: relative;
bottom: 0;
background-color: black;
}
/*About Page*/
.About-me-page-header {
font-size: 1em;
margin: 0;
background-position: center;
background-size: cover;
background-color: grey;
position: relative;
text-align: left;
padding-top: 50px;
padding-left: 50px;
height: 400px;
border: white 10px solid;
background-color: rgb(0, 0, 0, .7);
color: white;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}
#About-page {
font-size: 1em;
margin: 0;
margin-bottom: 250px;
background: url(About\ Page\ Background.png)no-repeat;
background-position: center;
background-size: cover;
}
#About-page-main {
width: 80%;
margin: auto;
min-width: 460px;
margin-top: 5%;
margin-bottom: 10%;
}
.About-page-container {
height: 75hv;
background: rgb(0, 0, 0, .7);
border: white 2px solid;
color: grey;
padding: 50px;
font-size: 1em;
}
.About-page-container:hover {
font-size: 30px;
color: white;
}
.about-page-title {
background: white;
text-align: center;
font-size: 40px;
height: 6pc;
line-height: 90px;
}
.AB-container-h {
color: white;
text-align: center;
}
/* Resources*/
.R-first-container {
height: 75hv;
background: rgb(0, 0, 0, .7);
border: white 10px solid;
color: grey;
padding: 50px;
margin-top: 20%;
margin-bottom: 30%;
}
.R-first-container-h1 {
color: white;
text-align: center;
font-size: 4em;
}
/*Login Page*/
.About-me-page-header {
font-size: 1em;
margin: 0;
background-position: center;
background-size: cover;
background-color: grey;
position: relative;
text-align: left;
padding-top: 50px;
padding-left: 50px;
height: 400px;
border: white 10px solid;
background-color: rgb(0, 0, 0, .7);
color: white
}
#About-page {
font-size: 1em;
margin: 0;
margin-bottom: 250px;
background: url(About\ Page\ Background.png)no-repeat;
background-position: center;
background-size: cover;
}
#About-page-main {
margin: auto;
min-width: 460px;
margin-top: 5%;
margin-bottom: 10%;
}
/* Login in and Sign Up Form*/
#Login-page {
font-size: 2em;
margin: 0;
margin-bottom: 250px;
background: url(About\ Page\ Background.png)no-repeat;
background-position: center;
background-size: cover;
}
#Login-page-main {
--color-primary-dark: #009579;
--color-primary-dark: #007f67;
--color-secondary: #252c6a;
--color-primary-dark: #cc3333;
--color-success: #4bb544;
--color-error: red;
border-radius: 4px;
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container {
max-width: 400px;
margin: 2rem;
padding: 5rem;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
border-radius: var(--border-radius);
background-color: rgba(0, 0, 0, .7);
color: white;
border: 3px solid white;
width: 1000px
}
.form--hidden {
display: none
}
.form>*:firstchild {
margin-top: 0;
}
.form>*:lastchild {
margin-bottom: 0;
}
.form__title {
margin-bottom: 2rem;
text-align: center;
font-size: 3rem;
}
.form__message {
margin-bottom: 1rem;
}
.form__message--success {
color: var(--color-success);
}
.form__message--error {
text-align: center;
color: var(--color-error);
}
.form__input-group {
margin-bottom: 2rem;
}
input,
select,
textarea {
color: white;
}
.form__input-error-message {
color: var(--color-error);
border-bottom: var(--color-error)
}
.form__input-error-message {
margin-top: 2rem;
font-size: 1.5rem;
color: var(--color-error);
}
.form__button {
width: 100%;
padding: 1rem 2rem;
font-weight: bold;
font-size: 1.1rem;
color: white;
background-color: rgb(0, 0, 0, .7);
outline: none;
cursor: pointer;
border: none;
border-radius: 20px
}
.form__button:hover {
background-color: white;
color: black
}
.form__button:active {
transform: scale(0.98)
}
.form__text {
font-size: 20px;
text-align: center;
cursor: pointer;
}
.form-text,
.form-textarea {
border-style: none;
}
.form__link {
text-decoration: none;
color: white
}
.form__link:hover {
text-decoration: underline;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Clarte Mentale - Login</title>
<link rel="stylesheet" href="Style.css" />
</head>
<body id="Login-page">
<div class="header-image">
<a href="Home.html">
<img src="Website Header.png">
</a>
</div>
<nav>
<ul>
<li>Welcome</li>
<li>About</li>
<li>Resources</li>
<li>Login</li>
</ul>
</nav>
<div class="About-me-page-header">
<h1 style="font-size:48px">Login Page</h1>
<p style="font-size:35px">
Contents:
</p>
<ul style="font-size:25px">
<li>Login</li>
<li>Sign Up</li>
</ul>
</div>
<main id="Login-page-main">
<div class="container">
<div class="form-container">
<!-- Login FormUp Form-->
<form class="form" id="login">
<h1 class="form__title">Login</h1>
<div class="form__messsage form__message--error"></div>
<div class="form__input-group">
<input type="text" class="form__input" autofocus placeholder="Username or Email" input style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width:100%;">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Password" style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width: 100%">
<div class="form__input-error-message"></div>
</div>
<button class="form__button" type="submit">Continue</button>
<p class="form__text" style="margin-top: 35px;">
<a class="form__link" id="linkCreateAccount">Don't have an account? Create account</a>
</p>
</form>
<!-- Sign Up Form-->
<form class="form form--hidden" id="createAccount">
<h1 class="form__title">Create Account</h1>
<div class="form__messsage form__message--error"></div>
<div class="form__input-group">
<input type="text" class="form__input" autofocus placeholder="Username" input style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width:100%;">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="text" class="form__input" autofocus placeholder="Email" input style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width:100%;">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Password" style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width: 100%">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Confirm password" style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width: 100%">
<div class="form__input-error-message"></div>
</div>
<button class="form__button" type="submit">Continue</button>
<p class="form__text" style="margin-top: 35px;">
<a class="form__link" id="linkLogin">Already have an account? Sign</a>
</p>
</form>
</main>
<footer>
<button class="logo" class="footer-wrapper" onclick="topFunction()" id="myBtn" title="Go to top">
<img src="Logo.png">
</button>
</footer>
<script src="Javascript.js"></script>
<script src="Login.js"></script>
</body>
</html>

You have <div class="form__messsage ... "> instead of <div class="form__message ... ">. Fixing that should work. GL.

Try and replace DomContentLoaded with load

My form close button doesn't work with JavaScript

I've created an X button to close a form with Javascript but it's not working and I can't figure out why. Once I open it I can't close.
I'm just putting here the code for the button and the form, not the whole page behind it. Hope someone can help me.
html
<div class="open-btn">
<button id="show-modal"><strong>Open Form</strong></button>
</div>
<div class="modal modal--hidden">
<div class="modal_content">
<div class="close">
<i class="fas fa-times">X</i>
</div>
<h1>Ask away</h1>
<form id="submit">
<input type="text" placeholder="Name">
<input type="email" id="email" placeholder="Email">
<input type="text" placeholder="Subject">
<textarea placeholder="Message"></textarea>
<button>Submit</button>
</form>
</div>
</div>
css
#show-modal {
border: none;
border-bottom: 2px solid rgb(48, 51, 54);
cursor: pointer;
color: rgb(48, 51, 54);
padding: 5px;
font-family: "Lato", sans-serif;
letter-spacing: 0.1em;
font-size: 13px;
line-height: 1.4;
}
.open-btn {
padding-top: 30px;
}
.modal {
background-color: rgb(0, 0, 0, 0.8);
position: absolute;
top: 0;
height: 1000px;
width: 100%;
display: none;
justify-content: center;
align-items: center;
}
.modal_content {
background-color: #fff;
padding: 2rem 4rem;
width: 500px;
height: 450px;
border-radius: 4px;
}
input[type="text"],
input[type="email"],
textarea {
width: 100%;
padding: 0.5rem;
display: block;
margin: 15px auto;
border: none;
border-bottom: 1px solid #000000;
}
textarea {
height: 100px;
}
.modal_content h1 {
font-family: "Ibarra Real Nova", serif;
color: rgba(40, 44, 48, 1);
font-weight: bold;
text-align: center;
font-size: 35px;
}
.close {
display: flex;
justify-content: flex-end;
margin-right: -2rem;
margin-top: -1rem;
cursor: pointer;
}
.submit {
width: 100%;
padding: 0.5rem;
background-color: rgba(234, 203, 193, 0.4);
border: none;
color: #fff;
transition: all 0.3s ease;
}
.submit:hover {
background-color: rgba(143, 126, 121, 0.4);
}
.modal--hidden {
display: none;
}
JavaScript
document.getElementById("show-modal").addEventListener("click", function() {
document.querySelector(".modal").style.display = "flex";
});
document.querySelector(".fas fa-times").addEventListener("click", function() {
document.querySelector(".modal").style.dispay = "none";
});
https://codepen.io/joanaoli09/pen/JjYoZoa

First your click position and X were different. Though you was attaching event on i but was clicking on X. In these case place X as a text of i. Secondly it has to be document.querySelector(".fas.fa-times") instead of document.querySelector(".fas fa-times") and thirdly use classList.toggle instead of adding class to style attribute
document.getElementById("show-modal").addEventListener("click", function() {
togglElementeClass();
});
document.querySelector(".fas.fa-times").addEventListener("click", function() {
togglElementeClass();
});
function togglElementeClass() {
document.querySelector(".modal").classList.toggle('flex');
}
#show-modal {
border: none;
border-bottom: 2px solid rgb(48, 51, 54);
cursor: pointer;
color: rgb(48, 51, 54);
padding: 5px;
font-family: "Lato", sans-serif;
letter-spacing: 0.1em;
font-size: 13px;
line-height: 1.4;
}
.open-btn {
padding-top: 30px;
}
.modal {
background-color: rgb(0, 0, 0, 0.8);
position: absolute;
top: 0;
height: 1000px;
width: 100%;
display: none;
justify-content: center;
align-items: center;
}
.modal_content {
background-color: #fff;
padding: 2rem 4rem;
width: 500px;
height: 450px;
border-radius: 4px;
}
input[type="text"],
input[type="email"],
textarea {
width: 100%;
padding: 0.5rem;
display: block;
margin: 15px auto;
border: none;
border-bottom: 1px solid #000000;
}
textarea {
height: 100px;
}
.modal_content h1 {
font-family: "Ibarra Real Nova", serif;
color: rgba(40, 44, 48, 1);
font-weight: bold;
text-align: center;
font-size: 35px;
}
.close {
display: flex;
justify-content: flex-end;
margin-right: -2rem;
margin-top: -1rem;
cursor: pointer;
}
.submit {
width: 100%;
padding: 0.5rem;
background-color: rgba(234, 203, 193, 0.4);
border: none;
color: #fff;
transition: all 0.3s ease;
}
.submit:hover {
background-color: rgba(143, 126, 121, 0.4);
}
.modal--hidden {
display: none;
}
.flex {
display: flex;
}
.fas.fa-times {
width: 20px;
height: 20px;
border: 1px solid green;
}
<div class="open-btn">
<button id="show-modal"><strong>Open Form</strong></button>
</div>
<div class="modal modal--hidden">
<div class="modal_content">
<div class="close">
<i class="fas fa-times">X</i>
</div>
<h1>Ask away</h1>
<form id="submit">
<input type="text" placeholder="Name">
<input type="email" id="email" placeholder="Email">
<input type="text" placeholder="Subject">
<textarea placeholder="Message"></textarea>
<button>Submit</button>
</form>
</div>
</div>

u have two mistake about closing event. one of them is your class name u need to write fa-times another one u wrote dispay it is wrong
document.querySelector(".fa-times").addEventListener("click", function() {
console.log("casa")
document.querySelector(".modal").style.display = "none";
});

The problem is in your second event listener:
you are trying to get element by ".fa fa-times" which is not a valid selector for your cross element.
Just replace ".fa fa-times" with ".fa.fa-times or ".fa-times" and it should work perfectly.
document.querySelector(".fa-times").addEventListener("click", function() {
document.querySelector(".modal").style.display = "none";
});

document.getElementById("show-modal").addEventListener("click", function() {
document.querySelector(".modal").style.display = "flex";
});
function closeMe() {
document.querySelector(".modal").style.display = "none";
}
#show-modal {
border: none;
border-bottom: 2px solid rgb(48, 51, 54);
cursor: pointer;
color: rgb(48, 51, 54);
padding: 5px;
font-family: "Lato", sans-serif;
letter-spacing: 0.1em;
font-size: 13px;
line-height: 1.4;
}
.open-btn {
padding-top: 30px;
}
.modal {
background-color: rgb(0, 0, 0, 0.8);
position: absolute;
top: 0;
height: 1000px;
width: 100%;
display: none;
justify-content: center;
align-items: center;
}
.modal_content {
background-color: #fff;
padding: 2rem 4rem;
width: 500px;
height: 450px;
border-radius: 4px;
}
input[type="text"],
input[type="email"],
textarea {
width: 100%;
padding: 0.5rem;
display: block;
margin: 15px auto;
border: none;
border-bottom: 1px solid #000000;
}
textarea {
height: 100px;
}
.modal_content h1 {
font-family: "Ibarra Real Nova", serif;
color: rgba(40, 44, 48, 1);
font-weight: bold;
text-align: center;
font-size: 35px;
}
.close {
display: flex;
justify-content: flex-end;
margin-right: -2rem;
margin-top: -1rem;
cursor: pointer;
}
.submit {
width: 100%;
padding: 0.5rem;
background-color: rgba(234, 203, 193, 0.4);
border: none;
color: #fff;
transition: all 0.3s ease;
}
.submit:hover {
background-color: rgba(143, 126, 121, 0.4);
}
.modal--hidden {
display: none;
}
<div class="open-btn">
<button id="show-modal"><strong>Open Form</strong></button>
</div>
<div class="modal modal--hidden">
<div class="modal_content">
<div class="close">
<i class="fas fa-times" onclick="closeMe()">X</i>
</div>
<h1>Ask away</h1>
<form id="submit">
<input type="text" placeholder="Name">
<input type="email" id="email" placeholder="Email">
<input type="text" placeholder="Subject">
<textarea placeholder="Message"></textarea>
<button>Submit</button>
</form>
</div>
</div>

First of all getting elements by general classes like fas fa which third party libraries provide (in this case font-awesome) is not a good practice. Because it's possible to use the same classes for another element in page. I suggest using an id for this situation or a specific class. Another problem is that we usually use <button> for actions not <i>.<i> tag is not action ready so by clicking on it you actually click on its content(X) not the tag. Now the problem in ur code is that when you set display:flex in your JS the element gets the style and when you document.querySelector(".modal").style.dispay = "none"; you don't clear the previous style (display:flex) so both of them are applied. You should clear display:flex then apply display:none or make a class like d-flex which toggels by click.
In HTML
<div class="close">
<i id="close-btn" class="fas fa-times">X</i>
</div>
In CSS
.d-flex
{
display:flex !important;
}
In Js
document.getElementById("show-modal").addEventListener("click", function() {
togglElementeClass();
});
document.querySelector("#close-btn").addEventListener("click", function() {
togglElementeClass();
});
function togglElementeClass() {
document.querySelector(".modal").classList.toggle('d-flex');
}

How to disable transformation of search-box when there's input?

I'm not sure how to describe this further, and sorry if it's hard to understand what I"m trying to say.
Hello, firstly I'll like to apologize as I'm a newbie to this. I'd like to know if it's possible to ensure that the search-box in the codesnippet does not transform after I have keyed in some words. In other words it does not go back to its original state which is a circle when there's input.
Thank you in advance!
body {
margin: 0;
padding: 0;
font-family: Century Gothic, sans-serif;
}
.displayNavigation input[type="search"],
.displayNavigation textarea {
border: 1px solid grey;
border-radius: 20px;
border-bottom: 1px solid grey;
background: transparent;
outline: none;
height: 25px;
color: autoselect;
font-size: 16px;
}
.displayNavigation {
padding: 0 0 10px 0;
transition: .4s;
display: block;
border-collapse: collapse;
margin-bottom: 3px;
}
table {
margin-top: 50px;
margin-left: 50px;
}
.search-box {
position: absolute;
transform: translate(-7%, -25%);
background: -moz-linear-gradient(top, #87a5ca, #144989);
background: -webkit-gradient(linear, 0 10, 0 85%, from(#407ac0), to(#144989));
height: 40px;
border-radius: 40px;
padding: 4px;
margin-top: 5px;
margin-left: 25px;
font-family: Century Gothic;
sans-serif;
cursor: pointer;
}
.search-box:hover>.search-txt {
width: 240px;
padding: 0 6px;
}
.search-box:hover>.search-btn {
background: #e0e9f3;
}
.search-btn {
color: #e84118;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #144989;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: .4s;
border: none;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0px;
color: white;
font-size: 15px;
transition: .4s;
line-height: 40px;
width: 0px;
}
::placeholder {
color: rgba(255, 255, 255, .35);
font-size: 15px;
font-family: Century Gothic, sans-serif;
}
<html>
<head>
<title>Search-Box</title>
</head>
<body>
<table class="displayNavigation" align="center">
<form method="POST" action="Search_Teachers.php">
<td class="search-box">
<input autocomplete="off" name="Search" class="search-txt" type="text" placeholder="Search...">
<button class="search-btn" href="#"><img src ='Icons/search_blue.png' height ='27px' width ='27px'></button>
</td>
</table>
</form>
</body>
</html>

In your input you can add something like an id and required like this:
<input id=someInput autocomplete="off" name="Search" class="search-txt" type="text" placeholder="Search..." required>
In your css add :
#someInput: :valid { width: 240px;}
and do what you want with invalid:
#someInput :invalid { what you want}
Tested and it works fine, good luck!

This is what javascript is for. To get the desired behavior you could check for a non empty string in the search field. Or you can listen for a click and change the state like I did here. This way it wont shrink when you delete text though.
body {
margin: 0;
padding: 0;
font-family: Century Gothic, sans-serif;
}
.displayNavigation input[type="search"],
.displayNavigation textarea {
border: 1px solid grey;
border-radius: 20px;
border-bottom: 1px solid grey;
background: transparent;
outline: none;
height: 25px;
color: autoselect;
font-size: 16px;
}
.displayNavigation {
padding: 0 0 10px 0;
transition: .4s;
display: block;
border-collapse: collapse;
margin-bottom: 3px;
}
table {
margin-top: 50px;
margin-left: 50px;
}
.search-box {
position: absolute;
transform: translate(-7%, -25%);
background: -moz-linear-gradient(top, #87a5ca, #144989);
background: -webkit-gradient(linear, 0 10, 0 85%, from(#407ac0), to(#144989));
height: 40px;
border-radius: 40px;
padding: 4px;
margin-top: 5px;
margin-left: 25px;
font-family: Century Gothic;
sans-serif;
cursor: pointer;
}
.search-box:hover>.search-txt {
width: 240px;
padding: 0 6px;
}
.search-txt:focus {
width: 240px;
}
.search-box:hover>.search-btn {
background: #e0e9f3;
}
.search-btn {
color: #e84118;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #144989;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: .4s;
border: none;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0px;
color: white;
font-size: 15px;
transition: .4s;
line-height: 40px;
width: 0px;
}
::placeholder {
color: rgba(255, 255, 255, .35);
font-size: 15px;
font-family: Century Gothic, sans-serif;
}
<html>
<head>
<title>Search-Box</title>
</head>
<body>
<table class="displayNavigation" align="center">
<form method="POST" action="Search_Teachers.php">
<td class="search-box">
<input autocomplete="off" name="Search" class="search-txt" type="text" placeholder="Search...">
<button class="search-btn" href="#"><img src ='Icons/search_blue.png' height ='27px' width ='27px'></button>
</td>
</table>
</form>
<script>
const search = document.getElementsByClassName("search-txt")[0];
search.addEventListener("click", function() {
search.style.width = '240px';
});
</script>
</body>
</html>

You can use input:focus to make sure the text box is wide enough when being typed / in focus
I have added js, so that the input box stays same if there any value present, hope this helps you
$('.search-txt').on("input", function() {
if($('.search-txt').val())
{
$('.search-txt').addClass('inputExist');
}
else
{
$('.search-txt').removeClass('inputExist');
}
});
body {
margin: 0;
padding: 0;
font-family: Century Gothic, sans-serif;
}
.displayNavigation input[type="search"],
.displayNavigation textarea {
border: 1px solid grey;
border-radius: 20px;
border-bottom: 1px solid grey;
background: transparent;
outline: none;
height: 25px;
color: autoselect;
font-size: 16px;
}
.displayNavigation {
padding: 0 0 10px 0;
transition: .4s;
display: block;
border-collapse: collapse;
margin-bottom: 3px;
}
table {
margin-top: 50px;
margin-left: 50px;
}
.search-box {
position: absolute;
transform: translate(-7%, -25%);
background: -moz-linear-gradient(top, #87a5ca, #144989);
background: -webkit-gradient(linear, 0 10, 0 85%, from(#407ac0), to(#144989));
height: 40px;
border-radius: 40px;
padding: 4px;
margin-top: 5px;
margin-left: 25px;
font-family: Century Gothic;
sans-serif;
cursor: pointer;
}
.search-box:hover>.search-txt {
width: 240px;
padding: 0 6px;
}
.search-txt:focus, .search-txt.inputExist {
width: 240px;
}
.search-box:hover>.search-btn {
background: #e0e9f3;
}
.search-btn {
color: #e84118;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #144989;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: .4s;
border: none;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0px;
color: white;
font-size: 15px;
transition: .4s;
line-height: 40px;
width: 0px;
}
::placeholder {
color: rgba(255, 255, 255, .35);
font-size: 15px;
font-family: Century Gothic, sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<html>
<head>
<title>Search-Box</title>
</head>
<body>
<table class="displayNavigation" align="center">
<form method="POST" action="Search_Teachers.php">
<td class="search-box">
<input autocomplete="off" name="Search" class="search-txt" type="text" placeholder="Search...">
<button class="search-btn" href="#"><img src ='Icons/search_blue.png' height ='27px' width ='27px'></button>
</td>
</table>
</form>
</body>
</html>

JQuery .show() and .hide() not working correctly

I have been trying to get the below code working for the past 2 hours with no luck. Can anyone see where I am having issues?
Snippet:
<script>
$(document).ready(function(e) {
$('.messageBox').hide();
$('#color').text('');
$('.color-select-orange').click(function(e) {
$('.messageBox').show().delay(2000).hide();
$('#color').text('Orange').show().delay(2000).hide();
});
});
</script>
$(document).ready(function(e) {
$('.messageBox').hide();
$('#color').text('');
$('.color-select-orange').click(function(e) {
$('.messageBox').show().delay(2000).hide();
$('#color').text('Orange').show().delay(2000).hide();
});
});
.messageBox {
height: auto;
width: auto;
text-align: center;
z-index: 100;
padding: 100px;
background-color: #222;
color: #fff;
font-family: poppins;
font-size: 14px;
display: block;
}
.messageBox span {
color: #fff;
font-weight: bold;
font-family: poppins;
font-size: 14px;
}
.customiser {
height: auto;
width: auto;
position: fixed;
top: 10px;
left: 0px;
font-size: 14px;
font-family: poppins;
display: inline-block;
background-color: transparent;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
cursor: pointer;
}
.themes {
height: auto;
width: auto;
position: relative;
font-size: 14px;
font-family: poppins;
display: inline-block;
background-color: #222;
color: #777;
border-top-right-radius: 10px;
cursor: pointer;
}
.color-select {
height: auto;
width: 100px;
padding: 20px;
font-size: 14px;
font-family: poppins;
display: inline-block;
background-color: #333;
color: #777;
}
.color-select:hover {
background-color: #222;
color: #fff;
}
.color-select-table {
width: 100%;
background-color: #222;
display: inline-block;
margin-top: 10px;
}
.color-select-orange {
height: auto;
width: 100%;
display: inline-block;
background-color: transparent;
color: #ff6e00;
border-radius: 5px;
border: thin solid #222;
padding-top: 5px;
padding-bottom: 5px;
}
.color-select-orange:hover {
background-color: #ff6e00;
color: #fff;
}
.color-select-green {
height: auto;
width: 100%;
display: inline-block;
background-color: transparent;
color: #9ad749;
border-radius: 5px;
border: thin solid #222;
padding-top: 5px;
padding-bottom: 5px;
}
.color-select-green:hover {
background-color: #9ad749;
color: #fff;
}
.color-select-blue {
height: auto;
width: 100%;
display: inline-block;
background-color: transparent;
color: #4589f3;
border-radius: 5px;
border: thin solid #222;
padding-top: 5px;
padding-bottom: 5px;
}
.color-select-blue:hover {
background-color: #4589f3;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="messageBox">Theme successfully changed to<br> <span id="color">*SELECTED_COLOUR*</span></div>
<div class="customiser">
<div class="themes">
<div class="color-select">Theme<br>
<div class="color-select-table">
<div class="color-select-orange" onclick="swapStyleSheet('_scripts/default.css')">Orange</div><br>
<div class="color-select-green" onclick="swapStyleSheet('_scripts/green.css')">Green</div><br>
<div class="color-select-blue" onclick="swapStyleSheet('_scripts/blue.css')">Blue</div>
</div>
</div><!--END COLOR-SELECT-->
</div><!--END THEMES-->
</div><!--END OF CUSTOMISER-->
The swapStyleSheet command works fine, but the text change for #color and the display change for .messageBox does not.

jQuery's show() and hide() are not animated by default, and doesn't support delay() as they don't add the the FX queue.
When the delay doesn't work, the elements are hidden right away, and never made visible for two seconds.
To make them animated, one has to pass in a number, and even zero should do it
$(document).ready(function(e) {
$('.messageBox').hide();
$('#color').text('');
$('.color-select-orange').click(function(e) {
console.log('ds')
$('.messageBox').show().delay(2000).hide(0);
$('#color').text('Orange').show().delay(2000).hide(0);
});
});
.messageBox {
height: auto;
width: auto;
text-align: center;
z-index: 100;
padding: 100px;
background-color: #222;
color: #fff;
font-family: poppins;
font-size: 14px;
display: block;
}
.messageBox span {
color: #fff;
font-weight: bold;
font-family: poppins;
font-size: 14px;
}
.customiser {
height: auto;
width: auto;
position: fixed;
top: 10px;
left: 0px;
font-size: 14px;
font-family: poppins;
display: inline-block;
background-color: transparent;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
cursor: pointer;
}
.themes {
height: auto;
width: auto;
position: relative;
font-size: 14px;
font-family: poppins;
display: inline-block;
background-color: #222;
color: #777;
border-top-right-radius: 10px;
cursor: pointer;
}
.color-select {
height: auto;
width: 100px;
padding: 20px;
font-size: 14px;
font-family: poppins;
display: inline-block;
background-color: #333;
color: #777;
}
.color-select:hover {
background-color: #222;
color: #fff;
}
.color-select-table {
width: 100%;
background-color: #222;
display: inline-block;
margin-top: 10px;
}
.color-select-orange {
height: auto;
width: 100%;
display: inline-block;
background-color: transparent;
color: #ff6e00;
border-radius: 5px;
border: thin solid #222;
padding-top: 5px;
padding-bottom: 5px;
}
.color-select-orange:hover {
background-color: #ff6e00;
color: #fff;
}
.color-select-green {
height: auto;
width: 100%;
display: inline-block;
background-color: transparent;
color: #9ad749;
border-radius: 5px;
border: thin solid #222;
padding-top: 5px;
padding-bottom: 5px;
}
.color-select-green:hover {
background-color: #9ad749;
color: #fff;
}
.color-select-blue {
height: auto;
width: 100%;
display: inline-block;
background-color: transparent;
color: #4589f3;
border-radius: 5px;
border: thin solid #222;
padding-top: 5px;
padding-bottom: 5px;
}
.color-select-blue:hover {
background-color: #4589f3;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="messageBox">Theme successfully changed to
<br> <span id="color">*SELECTED_COLOUR*</span>
</div>
<div class="customiser">
<div class="themes">
<div class="color-select">Theme
<br>
<div class="color-select-table">
<div class="color-select-orange">Orange</div>
<br>
<div class="color-select-green">Green</div>
<br>
<div class="color-select-blue">Blue</div>
</div>
</div>
</div>
</div>