I was just making a demo site but there is a problem. when i click on escape button the escape section overlaps with next section any solution?
Everything thing is OK but if i put any HTML code and escape HTML, the section overlaps with the next section
// Scroll event to change navbar background color
window.addEventListener('scroll', function() {
const navbar = document.getElementById('navbar');
if (window.scrollY > 50) {
navbar.classList.add('scrolled');
} else {
navbar.classList.remove('scrolled');
}
});
// Mobile menu toggle
const mobileMenu = document.getElementById('mobile-menu');
const navLinks = document.getElementById('nav-links');
mobileMenu.addEventListener('click', function() {
navLinks.classList.toggle('active');
});
// Function to escape HTML and validate input
function validateHTML() {
const htmlInputField = document.getElementById('html-input');
const escapedHtmlOutput = document.getElementById('escaped-html');
const escapedHtmlBox = document.getElementById('escaped-html-box');
const errorMessage = document.getElementById('error-message');
const htmlInput = htmlInputField.value;
// Simple HTML validation (basic pattern to check for HTML tags)
const validHTMLPattern = /</?[a-z][sS]*>/i;
if (!validHTMLPattern.test(htmlInput)) {
errorMessage.textContent = "Please enter valid HTML.";
htmlInputField.classList.add('error');
escapedHtmlBox.style.display = "none"; // Hide the escaped HTML box on error
} else {
errorMessage.textContent = "";
// Escape HTML function
function escapeHTML(html) {
return html
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}
const escapedHTML = escapeHTML(htmlInput);
escapedHtmlOutput.value = escapedHTML; // Display escaped HTML in the text area
htmlInputField.classList.remove('error');
// Show the escaped HTML text area
escapedHtmlBox.style.display = "block";
// Scroll to escaped HTML area
escapedHtmlBox.scrollIntoView({
behavior: 'smooth'
});
}
}
// Add event listener to button to call validateHTML function
document.getElementById('escape-button').addEventListener('click', validateHTML);* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #000;
color: #fff;
line-height: 1.6;
position: relative;
}
/* Navbar styles */
.navbar {
position: fixed;
top: 0;
width: 100%;
padding: 15px 20px;
background: transparent;
transition: background-color 0.3s;
z-index: 100;
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar.scrolled {
background-color: rgba(0, 0, 0, 0.9);
}
.navbar .logo {
font-size: 24px;
font-weight: bold;
color: white;
}
.navbar ul {
list-style: none;
display: flex;
}
.navbar ul li {
margin: 0 20px;
}
.navbar ul li a {
color: white;
text-decoration: none;
font-size: 18px;
padding: 8px;
transition: color 0.3s;
}
.navbar ul li a:hover {
color: #ff5733;
}
/* Hamburger menu icon */
.menu-toggle {
display: none;
flex-direction: column;
cursor: pointer;
}
.menu-toggle div {
width: 30px;
height: 3px;
background-color: white;
margin: 5px 0;
}
/* Responsive Navbar for smaller screens */
@media (max-width: 768px) {
.navbar ul {
position: absolute;
top: 60px;
right: 0;
height: 0;
overflow: hidden;
flex-direction: column;
width: 100%;
background-color: rgba(0, 0, 0, 0.9);
transition: height 0.3s ease;
}
.navbar ul.active {
height: 200px;
/* Adjust based on how many links you have */
}
.navbar ul li {
margin: 10px 0;
text-align: center;
}
.menu-toggle {
display: flex;
}
}
/* Main Section */
.main-section {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
text-align: center;
padding: 120px 20px 20px;
}
.main-section h1 {
font-size: 48px;
margin-bottom: 10px;
}
.main-section h2 {
font-size: 24px;
background: linear-gradient(90deg, #ff6f61, #ffcd2b);
-webkit-background-clip: text;
color: transparent;
}
.input-box {
margin-top: 30px;
width: 80%;
max-width: 600px;
}
.input-box textarea {
width: 100%;
height: 200px;
padding: 15px;
border: none;
border-radius: 8px;
background-color: #333;
color: #fff;
font-size: 16px;
resize: none;
}
.input-box textarea::placeholder {
color: #888;
}
.input-box .error {
border: 2px solid red;
}
.input-box button {
margin-top: 15px;
padding: 10px 20px;
font-size: 16px;
background-color: #ff5733;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.input-box button:hover {
background-color: #ff6f61;
}
/* Escaped HTML Section */
#escaped-html-box {
display: none;
margin-top: 20px;
width: 80%;
max-width: 600px;
position: relative;
}
#escaped-html-box textarea {
width: 100%;
height: 200px;
padding: 15px;
border: none;
border-radius: 8px;
background-color: #333;
color: #fff;
font-size: 16px;
resize: none;
}
/* Information Section */
.info-section {
padding: 50px 20px;
background-color: #111;
justify-content: start;
display: flex;
transition: margin 0.3s;
/
}
.info-section h2 {
text-align: center;
margin-bottom: 20px;
}
.info-section p {
max-width: 800px;
margin: 0 auto;
text-align: center;
font-size: 18px;
line-height: 1.8;
}
/* FAQ Section */
.faq-section {
padding: 50px 20px;
}
.faq-section h2 {
text-align: center;
margin-bottom: 20px;
}
.faq-section .faq {
max-width: 800px;
margin: 0 auto;
}
.faq-section .faq-item {
margin-bottom: 20px;
}
.faq-section .faq-item h3 {
font-size: 20px;
margin-bottom: 10px;
}
.faq-section .faq-item p {
font-size: 16px;
color: #ccc;
}
/* Footer */
footer {
padding: 20px;
text-align: center;
background-color: #111;
color: #888;
}```
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style type="text/css">
/* Reset some default styles */
</style>
<!-- Navbar -->
<nav class="navbar" id="navbar">
<div class="logo">Histolix</div>
<ul id="nav-links">
<li><a href="#">Home</a></li>
<li><a href="#info">About</a></li>
<li><a href="#faq">FAQ</a></li>
</ul>
<div class="menu-toggle" id="mobile-menu">
<div> </div>
<div> </div>
<div> </div>
</div>
</nav>
<!-- Main Section -->
<section class="main-section" id="home">
<h1>WELCOME TO HISTOLIX</h1>
<h2>THE BEST TOOL FOR <span>ESCAPING HTML</span></h2>
<div class="input-box"><textarea id="html-input" placeholder="Enter your HTML here..."></textarea><button id="escape-button">Escape HTML</button>
<p id="error-message" style="color: red;"> </p>
</div>
<div id="escaped-html-box">
<h3>ESCAPED HTML</h3><textarea id="escaped-html" readonly="readonly"></textarea></div>
</section>
<!-- Information Section -->
<section class="info-section" id="info">
<h2>About the HTML Escape Tool</h2>
<p>This tool helps you escape HTML by converting special characters into their corresponding HTML entities. It ensures your code is safe and properly rendered in the browser. Whether you're a developer or just getting started with HTML, Histolix makes
your job easier.</p>
</section>
<!-- FAQ Section -->
<section class="faq-section" id="faq">
<h2>Frequently Asked Questions</h2>
<div class="faq">
<div class="faq-item">
<h3>What is HTML escaping?</h3>
<p>HTML escaping is the process of converting special characters like <, >, &, and " into their corresponding HTML entities to ensure they are displayed correctly in the browser.</p>
</div>
<div class="faq-item">
<h3>Why do I need to escape HTML?</h3>
<p>Escaping HTML is essential to prevent code injection attacks and ensure your HTML is safely rendered, especially in dynamic applications or user-submitted content.</p>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<p>© 2024 Histolix - All Rights Reserved.</p>
</footer>
