CSS Opacity
Code the following
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: green;
[Link] {
opacity: 0.1;
[Link] {
opacity: 0.3;
[Link] {
opacity: 0.6;
</style>
</head>
<body>
<h1>Transparent Box</h1>
<p>When using the opacity property to add transparency to the background of an element, all of its
child elements become transparent as well. This can make the text inside a fully transparent element
hard to read:</p>
<div class="first">
<h1>opacity 0.1</h1>
</div>
<div class="second">
<h1>opacity 0.3</h1>
</div>
<div class="third">
<h1>opacity 0.6</h1>
</div>
<div>
<h1>opacity 1 (default)</h1>
</div>
</body>
</html>
CSS Hover (mouse over) effect and Opacity
You have to ready 3 images (img_1.jpg, img_2.jpg, img_3.jpg) and use as follows.
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.5;
img:hover {
opacity: 1.0;
</style>
</head>
<body>
<h1>Image Transparency</h1>
<p>The opacity property is often used together with the :hover selector to change the opacity on
mouse-over:</p>
<img src="img_1.jpg" alt="Forest" width="170" height="100">
<img src="img_2.jpg" alt="Mountains" width="170" height="100">
<img src="img_3.jpg" alt="Italy" width="170" height="100">
</body>
</html>
Java Script Button and Prompt
<!DOCTYPE html>
<html>
<body>
<p>Click the button to demonstrate the prompt box.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var person = prompt("Please enter your name", "Harry Potter");
if (person != null) {
[Link]("demo").innerHTML =
"Hello " + person + "! How are you today?";
</script>
</body>
</html>
Java Script if else conditions
<!DOCTYPE html>
<html>
<body>
<p>Click the button to get a time-based greeting:</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var greeting;
var time = new Date().getHours();
if (time < 10) {
greeting = "Good morning";
} else if (time < 20) {
greeting = "Good day";
} else {
greeting = "Good evening";
[Link]("demo").innerHTML = greeting;
</script>
</body>
</html>
Java Script Loops - For
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For Loop</h2>
<p id="demo"></p>
<script>
var text = "";
var i;
for (i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
[Link]("demo").innerHTML = text;
</script>
</body>
</html>
Java Script Loops - While
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript While Loop</h2>
<p id="demo"></p>
<script>
var text = "";
var i = 0;
while (i < 10) {
text += "<br>The number is " + i;
i++;
[Link]("demo").innerHTML = text;
</script>
</body>
</html>
Java Script Arrays 1
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p id="demo"></p>
<script>
var cars = [
"Saab",
"Volvo",
"BMW"
];
[Link]("demo").innerHTML = cars;
</script>
</body>
</html>
Java Script Arrays 2
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p>JavaScript array elements are accesses using numeric indexes (starting from 0).</p>
<p id="demo"></p>
First element
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var first = fruits[0]; Index no 0 (first element)
[Link]("demo").innerHTML = first;
</script>
</body>
</html>