Table of Contents
Today we are learning How to Use JavaScript and Create an Alphabet Program.
First, create normal HTML format and add JavaScript add and create a new function and create logic.
Output:-
Example:-
<html>
<head><title>abcd </title></head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<style type="text/css">
img {
position: fixed;
z-index: 1;
}
#img{
display: block;
text-align: center;
margin: auto;
}
button{
width: 200px;
margin: 5px;
}
.btn {
display: inline-block;
font-weight: 700;
color: #fff;
}
</style>
<body>
<h1 style="text-align:center;"> Learning English Alphabets</h1>
<div class="img text-center">
<img src="https://i.ibb.co/nf4XTRd/abcd.jpg" id="abcd" width="200px">
</div>
<div class="container text-center" style="
margin-top: 250px;">
<div class="row">
<div class="col-sm-12 col-md-3">
<button class="btn bg-primary" onclick="document.getElementById('abcd').src='https://i.ibb.co/d5SfLXD/a.jpg'"> A For Apple</button>
<button class="btn bg-primary" onclick="document.getElementById('abcd').src='https://i.ibb.co/Vq6FwT0/b.jpg'"> B For Ball</button>
<button class="btn bg-primary" onclick="document.getElementById('abcd').src='https://i.ibb.co/47TZdkj/c.jpg'"> C For Cat</button>
<button class="btn bg-primary" onclick="document.getElementById('abcd').src='https://i.ibb.co/VvGfqzL/d.jpg'"> D Dor Dall </button>
<button class="btn bg-primary" onclick="document.getElementById('abcd').src='https://i.ibb.co/GVL4Q7n/e.jpg'"> E For Elephant</button>
<button class="btn bg-primary" onclick="document.getElementById('abcd').src='https://i.ibb.co/bv09Mfk/f.jpg'"> F For Fox</button>
<button class="btn bg-primary" onclick="document.getElementById('abcd').src='https://i.ibb.co/qJtKsN9/g.jpg'"> G For Gun </button>
</div>
<div class=" col-sm-12 col-md-3">
<button class="btn bg-primary" onclick="document.getElementById('abcd').src='https://i.ibb.co/4Z7V4LM/h.jpg'"> h For Hoursh</button>
<button class="btn bg-primary" onclick="document.getElementById('abcd').src='https://i.ibb.co/zXzhkcM/i.png'"> I For Ice-cream</button>
<button class="btn bg-primary" onclick="document.getElementById('abcd').src='https://i.ibb.co/BrzKLjZ/j.jpg'"> J For Jug</button>
<button class="btn bg-primary" onclick="document.getElementById('abcd').src='https://i.ibb.co/NNm556p/k.jpg'"> K For Kite</button>
<button class="btn bg-primary" onclick="document.getElementById('abcd').src='https://i.ibb.co/fdD1NFv/l.jpg'"> L For Lion</button>
<button class="btn bg-primary" onclick="document.getElementById('abcd').src='https://i.ibb.co/1JCGkgC/m.jpg'"> M For Monkey</button>
<button class="btn bg-primary" onclick="document.getElementById('abcd').src='https://i.ibb.co/dtz5178/n.jpg'"> N For Nose</button>
</div>
<div class=" col-sm-12 col-md-3">
<button class="btn bg-primary" onclick="document.getElementById('abcd').src='https://i.ibb.co/jVbqrRN/o.jpg'"> O For Owl</button>
<button class="btn bg-primary" onclick="document.getElementById('abcd').src='https://i.ibb.co/486KpMv/p.jpg'"> P For Parrot </button>
<button class="btn bg-primary" onclick="document.getElementById('abcd').src='https://i.ibb.co/gtY0vwQ/q.jpg'"> Q For Queen</button>
<button class="btn bg-primary" onclick="document.getElementById('abcd').src='https://i.ibb.co/60K9gwB/r.jpg'"> R For Rabbit</button>
<button class="btn bg-primary" onclick="document.getElementById('abcd').src='https://i.ibb.co/3hMv1DH/s.jpg'"> S For Sun</button>
<button class="btn bg-primary" onclick="document.getElementById('abcd').src='https://i.ibb.co/68pdkyc/t.jpg'"> T For Train</button>
<button class="btn bg-primary" onclick="document.getElementById('abcd').src='https://i.ibb.co/kHxhdCT/u.jpg'"> U For Umbrella</button>
</div>
<div class=" col-sm-12 col-md-3">
<button class="btn bg-primary" onclick="document.getElementById('abcd').src='https://i.ibb.co/fv1nFZ0/v.jpg'"> V For Van</button>
<button class="btn bg-primary" onclick="document.getElementById('abcd').src='https://i.ibb.co/NrX0mJm/w.jpg'"> W For watch</button>
<button class="btn bg-primary" onclick="document.getElementById('abcd').src='https://i.ibb.co/K5n7JLY/x.jpg'"> X For Xerox </button>
<button class="btn bg-primary" onclick="document.getElementById('abcd').src='https://i.ibb.co/7KT9HDp/y.jpg'"> Y For Yak </button>
<button class="btn bg-primary" onclick="document.getElementById('abcd').src='https://i.ibb.co/ThJ3KN3/z.jpg'"> Z For zebra </button>
</div>
</div>
</div>
<script>
window.onscroll = function() {myFunction()};
var abcd = document.getElementById("abcd");
var sticky = abcd.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
abcd.classList.add("sticky")
} else {
abcd.classList.remove("sticky");
}
}
document.getElementById('demo').innerHTML = Date();
</script>
</body>
</html>
Demo Here:-
Learning English Alphabets
How to Create an English alphabet in javascript?
add id and create function myFunction( ) in JavaScript.
