Step 1: Open your text editor and type the program and save the program name as "oddnum.html"
Step 2: Open another text editor and type the CSS script and save it as "oddnum1.css"
Step 3: To link css with html type the below code inside head tag.
<link rel="stylesheet" type="text/css" href="oddnum1.css" />
</script>
Program:
oddnum.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="oddnum1.css" />
</head>
<body>
<div class="container">
<div class="card">
<header>
<h4>
Odd Numbers Generator
</h4>
</header>
<div class="card-body">
<div class="title">
<h6>Press start and End to enter numbers</h6>
<small>Enter a starting number to calculate <b>Odd numbers</b> to an End number that you also entered..</small>
</div>
<hr class="divider">
<div class="text">
<div class="first">
<input type="number" id="first-num" placeholder="Start"/>
</div>
<h1>&</h1>
<div class="second">
<input type="number" id="second-num" placeholder="End"/>
<button id="gen">Generate</button>
</div>
</div>
</div>
</div>
</div>
<div class="loader">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
<div id="results">
<h1 id="output"></h1>
</div>
<script>
const el =
[
document.querySelector('#first-num'),
document.querySelector('#second-num'),
document.querySelector('#gen'),
document.querySelector('#output'),
document.querySelector('.loader')
];
let allOdd = [];
el[2].addEventListener('click', gen);
function gen(){
let start = el[0].value;
let end = el[1].value
if (start == '' || end == '') {
alert('Enter a valid number');
}
else if (isNaN(start) || isNaN(end)) {
alert('User Integers');
}
else if (start.indexOf('.') != -1 || end.indexOf('.') != -1) {
alert('Please dont use float numbers');
}
else {
let i = parseInt(start);
let count = parseInt(end);
if (i > count) {
alert('Start can not be greater than End number atleast its must be negative');
}
else {
generator(i,count);
}
}
}
function generator (i, x)
{
el[3].innerHTML = '<h5 style="font-size: 14px; text-transform: capitalize">Odd numbers from '+ i + ' to ' + x + '<br></h5>';
for (i; i <= x; i++) {
allOdd.push(i);
}
el[4].style.display = 'block';
timer = setTimeout(()=> {
allOdd.forEach(num => {
let number = (num / 2).toString();
if(number.indexOf('.') != -1) {
el[4].style.display = 'none';
el[0].value = '';
el[1].value = '';
el[3].innerHTML += num + ' ';
allOdd = [];
}
})
}, 5000);
}
</script>
</body>
</html>
oddnum1.css
body {
padding: 0;
margin: 0;
box-sizing: border-box;
background: #aaa;
}
.container {
width: 90%;
padding: 15px;
margin: 0 auto;
background: #bbb;
box-shadow: 0 0 50px #000;
}
.card {
width: 90%;
margin-top: 5rem;
margin: 0 auto;
box-shadow: 0px 0px 100px #777;
padding: 5px;
background: #ccc;
border-radius: 10px;
}
.card header {
padding: 4px 0;
border-bottom: 1px solid #777;
text-transform: uppercase;
text-align: center;
margin-bottom: 7px;
color: #777;
box-shadow: 0 0 30px #777;
}
.card .title {
padding: 5px;
color: #777;
}
.card .card-body {
width: 100%;
}
.divider {
width: 50%;
position: relative;
left: -23%;
border-color: #aaa;
border-width: 1px;
}
.first, .second{
width: 100%;-
}
input {
width: 50%;
height: 40px;
border: none;
border-radius: 15px;
margin-top: 5px;
font-weight: bold;
text-align: center;
font-size: 22px;
color: #555;
background: transparent;
text-transform: uppercase;
}
input:focus {
outline: none;
box-shadow: 0 0 50px #333;
border: 1px solid #aaa;
}
h1 {
width: 55%;
margin: 0 auto;
color: #aaa;
font-size: 17px;
text-transform: lowercase;
}
button {
width: 47%;
border: 1px solid #aaa;
height: 40px;
position: relative;
top: -5px;
border-radius: 30px;
font-weight: bold;
font-size: 18px;
color: #555;
text-transform: uppercase;
}
button:focus {
outline: none;
box-shadow: 0 0 50px #444;
}
#results h1{
margin-top: 15px;
font-size: 30px;
color: #111;
}
.loader {
text-align: center;
width: 50%;
margin: 10px auto;
display: none;
}
.loader div {
width: 20px;
height: 20px;
border: 1px solid #333;
border-radius: 50%;
background: #777;
display: inline-block;
margin: 5px auto;
position: relative;
}
.loader .one, .loader .three {
animation-name: ball;
animation-duration: 1s;
animation-iteration-count: infinite;
transition: 2s all ease;
}
.loader .two {
animation-name: ball;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: reverse;
transition: 2s all ease;
}
@keyframes ball {
from {
left: 0;
}
to {
top: 20px;
}
}
OUTPUT:
Post a Comment