Alphabets with JavaScript

Learning English Alphabets with JavaScript

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:-

Alphabets with JavaScript

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.


Alphabet in Javascript Download


Leave a Comment

Your email address will not be published. Required fields are marked *