<!doctype html>
<html lang="en">
<title>5 events</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<div class="container">
<div class="row text-center">
<h1>Here is the 5 different events</h1>
</div>
<div class="row" id="paragraph1_div">
<p id="paragraph1" onclick="hideParagraph()"><kbd>This paragraph hide on click function. </kbd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, aliquid amet blanditiis consequuntur cumque doloribus esse expedita fugit laborum officia optio, possimus quia quo ratione totam! Perferendis quas soluta voluptas.</p>
</div>
<div class="row" id="paragraph2_div">
<p id="paragraph2" onmouseover="mouseOver()" onmouseout="mouseOut()"><kbd>This paragraph show on mouseover and on mouseout event.</kbd> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, aliquid amet blanditiis consequuntur cumque doloribus esse expedita fugit laborum officia optio, possimus quia quo ratione totam! Perferendis quas soluta voluptas.</p>
</div>
<div class="row">
<div class="form-group">
<label for="name">name <kbd>on keyup event</kbd></label>
<input type="text" onkeyup="keyUp()" name="" class="form-control" id="name" placeholder="Enter name">
</div>
<div id="name_result"></div>
<div class="form-group">
<label for="email">email <kbd>on keydown event</kbd></label>
<input type="text" name="" class="form-control" onkeydown="keyDown()" id="email" placeholder="Enter email">
</div>
<div id="email_result"></div>
</div>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.js"></script>
<script>
function hideParagraph(){
$paragraph_div = document.getElementById('paragraph1_div');
$paragraph = document.getElementById('paragraph1') ;
$paragraph_div.removeChild($paragraph);
}
function mouseOver(){
$paragraph = document.getElementById('paragraph2') ;
$paragraph.style.color = "white";
$paragraph.style.backgroundColor = "salmon";
}
function mouseOut(){
$paragraph = document.getElementById('paragraph2') ;
$paragraph.style.color = "black";
$paragraph.style.backgroundColor = "white";
}
function keyUp(){
$name = document.getElementById('name').value;
$result = document.getElementById('name_result');
$result.innerHTML = "My name is " +$name;
}
function keyDown(){
$email = document.getElementById('email').value;
$result = document.getElementById('email_result');
$result.innerHTML = "My email is " +$email;
}
</script>
</body>
</html>
<html lang="en">
<title>5 events</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<div class="container">
<div class="row text-center">
<h1>Here is the 5 different events</h1>
</div>
<div class="row" id="paragraph1_div">
<p id="paragraph1" onclick="hideParagraph()"><kbd>This paragraph hide on click function. </kbd>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, aliquid amet blanditiis consequuntur cumque doloribus esse expedita fugit laborum officia optio, possimus quia quo ratione totam! Perferendis quas soluta voluptas.</p>
</div>
<div class="row" id="paragraph2_div">
<p id="paragraph2" onmouseover="mouseOver()" onmouseout="mouseOut()"><kbd>This paragraph show on mouseover and on mouseout event.</kbd> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, aliquid amet blanditiis consequuntur cumque doloribus esse expedita fugit laborum officia optio, possimus quia quo ratione totam! Perferendis quas soluta voluptas.</p>
</div>
<div class="row">
<div class="form-group">
<label for="name">name <kbd>on keyup event</kbd></label>
<input type="text" onkeyup="keyUp()" name="" class="form-control" id="name" placeholder="Enter name">
</div>
<div id="name_result"></div>
<div class="form-group">
<label for="email">email <kbd>on keydown event</kbd></label>
<input type="text" name="" class="form-control" onkeydown="keyDown()" id="email" placeholder="Enter email">
</div>
<div id="email_result"></div>
</div>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.js"></script>
<script>
function hideParagraph(){
$paragraph_div = document.getElementById('paragraph1_div');
$paragraph = document.getElementById('paragraph1') ;
$paragraph_div.removeChild($paragraph);
}
function mouseOver(){
$paragraph = document.getElementById('paragraph2') ;
$paragraph.style.color = "white";
$paragraph.style.backgroundColor = "salmon";
}
function mouseOut(){
$paragraph = document.getElementById('paragraph2') ;
$paragraph.style.color = "black";
$paragraph.style.backgroundColor = "white";
}
function keyUp(){
$name = document.getElementById('name').value;
$result = document.getElementById('name_result');
$result.innerHTML = "My name is " +$name;
}
function keyDown(){
$email = document.getElementById('email').value;
$result = document.getElementById('email_result');
$result.innerHTML = "My email is " +$email;
}
</script>
</body>
</html>
No comments:
Post a Comment