I'm currently designing a mini-email platform that serves as a prototype rather than a fully functional application. The HTML file contains placeholder emails that have been styled to appear presentable. I've implemented an input bar and used JavaScript to filter and display emails based on the search query entered. However, my JavaScript code seems to disrupt the CSS styles I've applied, resulting in scattered email displays.
How can I ensure that my JavaScript code aligns with the predefined CSS styles?
HTML
<section id="email">
<div class = "date-container">
...
</div>
</section>
CSS
.email{
display: flex;
justify-content: space-between;
}
.email input[type= "text"]{
...
}
.text-attachment span:last-of-type>span img{
width: 10px;
height: 10px;
transform: translateX(90px);
display: none;
}
Javascript
const searchEmail = document.querySelector('.search-email');
searchEmail.addEventListener('keyup', filterEmail);
function filterEmail (e){
...
}