Creating a Random Number Generator App using HTML, CSS, and Vanilla JS

mouadslider · 2025-02-27T03:29:58+0000

In this tutorial, you can learn to create a simple Random Number Generator web application. The tutorial aims to provide the students and beginners with a reference for learning some CSS tricks and Vanilla JS techniques. Here, I will be providing some scripts that demonstrate the creation of a Random Number Generator. The complete source code zip file is also provided.

How does the Random Number Generator work?

The Random Number Generator App is a simple web application that generates random numbers. It allows the users to set the minimum and maximum number of the number to be generated. If the set minimum number is greater than the maximum number, the will show a dialog that says that "Minimum Number must be greater than Maximum Number" and when the set numbers are equal, it will show "Minimum Number must not be equal to Maximum Number". The Generated Code will be shown above the form.

Creating the Random Number Generator App

Page Interface

Here is the HTML file script known as index.html. The file contains the page layout and other page elements.

<!DOCTYPE html>
<html

lang

=

"en"

>
<head

>
<meta

charset

=

"UTF-8"

>
<meta

name

=

"viewport"

content

=

"width=device-width, initial-scale=1.0"

>
<title

>

Vanilla JS Random Number Generator</

title

>
<link

rel

=

"stylesheet"

href

=

"style.css"

>
<link

rel

=

"preconnect"

href

=

"https://fonts.googleapis.com"

>
<link

rel

=

"preconnect"

href

=

"https://fonts.gstatic.com"

crossorigin>
</

head

>
<body

>
<div

class

=

"container"

>
<h1

id

=

"page-title"

>

Vanilla JS Random Number Generator</

h1

>
<hr

id

=

"title_hr"

>
<div

id

=

"generator-wrapper"

>
<form

action

=

""

id

=

"generator-form"

>
<div

id

=

"generated-code"

>

0</

div

>
<div

class

=

"inline-form-field"

>
<div

class

=

"form-field"

>
<label

for

=

""

>

Minimum Number</

label

>
<input

type

=

"number"

name

=

"minimum"

min

=

"0"

required>
</

div

>
<div

class

=

"form-field"

>
<label

for

=

""

>

Maximum Number</

label

>
<input

type

=

"number"

name

=

"maximum"

min

=

"0"

required>
</

div

>
</

div

>
<div

class

=

"btn-field"

>
<button

id

=

"generate-btn"

>

Generate</

button

>
</

div

>
</

form

>
</

div

>
</

div

>
<script

src

=

"script.js"

></

script

>
</

body

>
</

html

>

Stylesheet

Next, here's a CSS file script known as style.css. The file contains the stylesheet code of the page layout and form elements design.

@import

url

(

'https://fonts.googleapis.com/css2?f...00;1,200;1,300;1,400;1,500;1,600&display=swap" rel="stylesheet'

)

;
*

{
margin

:

0

;
padding

:

0

;
box-sizing

:

border-box

;
font-family

:

'Dongle'

,

sans-serif

;
font-family

:

'Roboto Mono'

,

monospace

;
}
::

selection

{
color

:

#fff

;
background

:

#4db2ec

;
}
body{
display

:

flex;
align-items

:

center

;
justify-content

:

center

;
min-height

:

100vh

;
background

:

#4facfe

;
background-image

:

linear-gradient(

to right

,

#4facfe

0%

,

#00f2fe

100%

)

;
padding

:

2em

0

;
}
#page-title

{
color

:

#fff

;
text-align

:

center

;
font-weight

:

500

;
text-shadow

:

0px

0px

15px

#0000003a

;
}
#title_hr

{
width

:

60px

;
border

:

2px

solid

#ffffff

;
margin

:

.35em

auto

;
}
@media

(

min-width

:

780px

)

{
#page-title

{
width

:

780px

;
}
}
div#generator-wrapper

{
width

:

480px

;
margin

:

1em

auto

;
padding

:

2em

1em

;
background

:

#fff

;
border

:

1px

solid

#d1d1d1

;
box-shadow

:

0px

0px

10px

#00000038

;
}
.inline-form-field

{
position

:

relative

;
display

:

flex;
width

:

100%

;
flex-wrap

:

wrap;
}
.form-field{
position

:

relative

;
width

:

50%

;
padding

:

15px

20px

;
}
.form-field>

label,
.form-field>

input{
display

:

block

;
width

:

100%

;
}
.form-field>

label {
color

:

#4e4e4e

;
margin-bottom

:

5px

;
}
.form-field>

input {
padding

:

0.35em

0.5em

;
border

:

1px

solid

#c9bdbd

;
outline

:

none

;
}
.form-field>

input:

focus

{
border-color

:

#94def596

;
box-shadow

:

0px

0px

7px

#94def547

;
}
.btn-field

{
display

:

flex;
align-items

:

center

;
justify-content

:

center

;
}
button

#generate-btn

{
padding

:

0.35em

0.75em

;
background

:

#00adff

;
color

:

#fff

;
font-size

:

1.3rem

;
font-weight

:

500

;
border

:

none

;
cursor

:

pointer

;
width

:

100%

;
border-radius

:

50px

;
}
button

#generate-btn

:

hover

{
background

:

#0474a8

;
box-shadow

:

0px

0px

10px

#0474a844

;
}
div#generated-code

{
text-align

:

center

;
font-size

:

4rem

;
letter-spacing

:

2px

;
}

JavaScript

Lastly, here's the JavaScript file script known as script.js. The file contains the code that generates the random number between the given minimum and maximum numbers upon submission.

const

generateEl =

document.getElementById

(

'generated-code'

)
const

form =

document.getElementById

(

'generator-form'

)
form.addEventListener

(

'submit'

,

function

(

e)

{
e.preventDefault

(

)
var

min =

form.querySelector

(

'input[name="minimum"]'

)

.value
var

max =

form.querySelector

(

'input[name="maximum"]'

)

.value
min =

parseInt(

min)
max =

parseInt(

max)
if

(

min >

max)

{
alert(

"Maximum Number must be greater than Minimum Number"

)

;
return

false

;
}
if

(

min ==

max)

{
alert(

"Minimum Number must not be equal to Maximum Number"

)

;
return

false

;
}
var

generatedCode =

Math

.floor

(

Math

.random

(

)

*

(

max -

min +

1

)

)

+

min;
generateEl.innerText

=

generatedCode
}

)

Snapshots

Here are some snapshots of the web application script results.

Page Interface

Generator Wrapper

Generator Form

Generated Code

There you go! I have provided also the complete source code zip file on this website and it is free to download. The download button is located below this tutorial's content. Feel free to download and modify the source code the way you wanted.

That's it! I hope this Creating a Random Number Generator App using HTML, CSS, and Vanilla JS Tutorial will help you with what you are looking for and that you'll find something useful for your current and future web application projects.

Explore more on this website for more Tutorials and Free Source Codes.

Happy Coding =)

Download

You must upgrade your account or reply in the thread to view hidden text.

Creating a Random Number Generator App using HTML, CSS, and Vanilla JS

More options

mouadslider

450,270

322,965

322,974