81 lines
2.9 KiB
HTML
81 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Women4IT - JavaScript</title>
|
|
<meta name="description" content="Women4IT JavaScript Exercise: Variables -1">
|
|
<!-- Bootstrap CSS -->
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
|
|
<!-- Customise Bootstrap for practical grid layouts -->
|
|
<link rel="stylesheet" href="../assets/css/bootstrap-custom.css">
|
|
<style>
|
|
.container { padding-top: 40px }
|
|
.js-box {
|
|
border:solid 1px gray;
|
|
padding:20px;
|
|
background-color: lightyellow;
|
|
margin-bottom: 48px;
|
|
font-size: larger;
|
|
}
|
|
#resultBox, #resultNum {
|
|
border: solid 1px green;
|
|
height: 40px;
|
|
background-color: #E7FFE7;
|
|
width: 280px;
|
|
padding: 3px 12px;
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
<div class="container col-md-8 offset-md-2">
|
|
<h1><b>Exercise 6-1</b>: JavaScript Functions with Parameters</h1>
|
|
<p>This script provides an example of a passing a parameter to a function.</p>
|
|
|
|
<h3>Passing a parameter to a function</h3>
|
|
<div class="js-box" id="js-box">
|
|
|
|
<p><button id="btn-red">Set Background to Red</button></p>
|
|
<p><button id="btn-blue">Set Background to Blue</button></p>
|
|
<p><button id="btn-green">Set Background to Green</button></p>
|
|
|
|
<p><b>Lorem Ipsum</b></p>
|
|
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt nulla adipisci labore quae dolorum excepturi, alias totam commodi perspiciatis quasi enim aut odit quod maiores eveniet dignissimos tempora eum voluptatibus quos animi vero laudantium. Quos reiciendis ex, incidunt non dolore nemo corporis amet! Exercitationem corrupti veritatis quas ipsa, minima maxime. Error nihil vero soluta. Distinctio tempora id reiciendis beatae natus.</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
|
|
document.getElementById("btn-red").addEventListener('click', function() {
|
|
setBgColor('#ffb3c8')
|
|
});
|
|
|
|
document.getElementById("btn-green").addEventListener('click', function() {
|
|
setBgColor('#ccffcc')
|
|
});
|
|
|
|
document.getElementById("btn-blue").addEventListener('click', function() {
|
|
setBgColor('#e6ecff')
|
|
});
|
|
function setBgColor(colorCode) {
|
|
document.getElementById("js-box").style.backgroundColor = colorCode;
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<!-- jQuery library -->
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
|
<!-- Popper JS -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
|
|
<!-- Latest compiled JavaScript -->
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
|
</body>
|
|
</html> |