anilgautamm/kapiltaratarun

## kapiltaratarun
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Web Page</title>
    <!-- Add any additional meta tags, link to CSS, or other head content here -->
</head>
<style>
    /* CSS for the popup */
    .popup {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        justify-content: center;
        align-items: center;
    }

    .popup-content {
        background-color: white;
        padding: 100px;
        border-radius: 5px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    }
</style>
<body>
<header>
    <h1>Welcome to My Web Page</h1>
    <!-- You can add a navigation menu, logo, or other header content here -->
</header>

<nav>
    <!-- You can include navigation links here -->
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

<main>
    <!-- The main content of your page goes here -->
    <section>
        <h2>About Us</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    </section>

    <section>
        <h2>Our Services</h2>
        <ul>
            <li onclick="showpopup('kapilkadoubt')">Service 1 View-More</li>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed aug

            </p>
            <li onclick="showpopup('tarun ka doubt')">Service 2 View-More</li>
            <p>Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volut

            </p>
            <li onclick="showpopup('tara ka doubt')">Service 3 View-More</li>
            <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. , nibh. Quisque volut
            </p>
        </ul>
    </section>
    <div id="popup" class="popup">
        <div class="popup-content">
            <h2>Enter Your Age:</h2>
            <h2>tara ka h2</h2>
            <input type="number" id="numberInput">
            <button onclick="kapilkadoubt()">Submit</button>
        </div>
    </div>
</main>

<footer>
    <!-- Footer content such as copyright information, contact details, etc. goes here -->
    <p>&copy; 2023 My Web Page</p>
</footer>

<!-- You can include scripts and other resources at the end of the body section -->
<script>
var liElements = document.getElementsByTagName('section')[1].getElementsByTagName("li");
var age = 23;
// console.log(liElements.length);
for(i=0;  i< liElements.length; i++ ){

    liElements[i].onclick =  function(i) {
        showpopup(i.target.innerText, i.target.nextElementSibling.innerHTML);
    };
}


// showpopup();
//function neeeds calling // call
function showpopup(titleOfPopup, contentOfModel){
    contentOfModel = contentOfModel.substring(0, 30);
    var h2Elements = document.getElementById("popup").getElementsByTagName("h2");
    console.log(h2Elements);
    h2Elements[0].innerText = titleOfPopup;
    h2Elements[1].innerText = contentOfModel;

    document.getElementById("numberInput").value = '';
    if(document.getElementById("popup")){
        document.getElementById("popup").style.display = "block";
    }
}
function kapilkadoubt() {
    var numberInputValue = document.getElementById("numberInput").value;
    var numberInputValue = document.getElementById("numberInput").value;
    if(numberInputValue > age){
        document.getElementById("popup").style.display = "none";
    }else{
        alert("Sorry you are not allowed to visit this");
    }

}

//javsaCRIPT LANGUAGE
//JQUERY LIBRARY

// A B C D E F
// ASKLDFALKS JLASD ALSKJFDJ

//JAVSCRIPT --> LENGTH
// arguments

</script>
</body
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>My Web Page</title>
	<!-- Add any additional meta tags, link to CSS, or other head content here -->
	</head>
	<style>
	/* CSS for the popup */
	.popup {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	justify-content: center;
	align-items: center;
	}

	.popup-content {
	background-color: white;
	padding: 100px;
	border-radius: 5px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
	}
	</style>
	<body>
	<header>
	<h1>Welcome to My Web Page</h1>
	<!-- You can add a navigation menu, logo, or other header content here -->
	</header>

	<nav>
	<!-- You can include navigation links here -->
	<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Services</a></li>
	<li><a href="#">Contact</a></li>
	</ul>
	</nav>

	<main>
	<!-- The main content of your page goes here -->
	<section>
	<h2>About Us</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
	</section>

	<section>
	<h2>Our Services</h2>
	<ul>
	<li onclick="showpopup('kapilkadoubt')">Service 1 View-More</li>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed aug

	</p>
	<li onclick="showpopup('tarun ka doubt')">Service 2 View-More</li>
	<p>Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volut

	</p>
	<li onclick="showpopup('tara ka doubt')">Service 3 View-More</li>
	<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. , nibh. Quisque volut
	</p>
	</ul>
	</section>
	<div id="popup" class="popup">
	<div class="popup-content">
	<h2>Enter Your Age:</h2>
	<h2>tara ka h2</h2>
	<input type="number" id="numberInput">
	<button onclick="kapilkadoubt()">Submit</button>
	</div>
	</div>
	</main>

	<footer>
	<!-- Footer content such as copyright information, contact details, etc. goes here -->
	<p>© 2023 My Web Page</p>
	</footer>

	<!-- You can include scripts and other resources at the end of the body section -->
	<script>
	var liElements = document.getElementsByTagName('section')[1].getElementsByTagName("li");
	var age = 23;
	// console.log(liElements.length);
	for(i=0; i< liElements.length; i++ ){

	liElements[i].onclick = function(i) {
	showpopup(i.target.innerText, i.target.nextElementSibling.innerHTML);
	};
	}



	// showpopup();
	//function neeeds calling // call
	function showpopup(titleOfPopup, contentOfModel){
	contentOfModel = contentOfModel.substring(0, 30);
	var h2Elements = document.getElementById("popup").getElementsByTagName("h2");
	console.log(h2Elements);
	h2Elements[0].innerText = titleOfPopup;
	h2Elements[1].innerText = contentOfModel;

	document.getElementById("numberInput").value = '';
	if(document.getElementById("popup")){
	document.getElementById("popup").style.display = "block";
	}
	}
	function kapilkadoubt() {
	var numberInputValue = document.getElementById("numberInput").value;
	var numberInputValue = document.getElementById("numberInput").value;
	if(numberInputValue > age){
	document.getElementById("popup").style.display = "none";
	}else{
	alert("Sorry you are not allowed to visit this");
	}

	}

	//javsaCRIPT LANGUAGE
	//JQUERY LIBRARY

	// A B C D E F
	// ASKLDFALKS JLASD ALSKJFDJ

	//JAVSCRIPT --> LENGTH
	// arguments

	</script>
	</body