Toheeb Olanrewaju blog

How to build a prime number detector with html, css , and javascript (part 1)

How to build a prime number detector with html, css , and javascript (part 1)

How to build a prime number detector with HTML

Olanrewaju Toheeb Olawale's photo
Olanrewaju Toheeb Olawale
·

3 min read

Table of contents

Screenshot 2022-08-23 at 18-49-51 Document.png

Introduction

Welcome to this lesson on how to build a prime number detector. I believe we all know the meaning of a prime number, but let's remind each other of its meaning.

A prime number is a whole number greater than 1 that has only two factors: itself and 1. It can also be defined as a natural number greater than 1 that is not the product of two smaller natural numbers.

Note: 0 and 1 are not prime numbers. Bonus: Any number that is not a prime number is called a composite number.

Prerequisite

  • PC

  • Code Editor - I recommend Vscode

  • Browser

Breaking down our prime number detector app into units

The first thing is to break down our detector app into units:

  • ** Information Display Unit:** This is where information about prime numbers is display

  • **App Testing Unit:** This is where we test our app

Code

I'm writing my HTML, CSS, and JavaScript in one file, so you can name your file index.html and write all the code below inside the created file. Don't worry, I will explain everything in detail.

First, let's write our boilerplate

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prime Number Detector</title>
</head>
<body>

</body>
</html>

Let's write the tags for our layout in the body section. Don't forget that we have an Information Display Unit and an App Testing Unit.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prime Number Detector</title>
</head>
<body>
    <div class ="container">
         <div class="information_space">

         </div>
         <div class="app_space">

         </div>
    </div>


</body>
</html>

What happened above is very simple. We just created three divisions: a container division that contains the information display division (information_space) and the app testing division (app_space).

Then let's write some tags inside the information Display Division('information_space')

<div class="information_space">
         <h2>Prime Number</h2>
          <h3>What is a prime number?</h3>
          <p>
             A prime number is a whole number greater than 1 with only two factors- themselves
             and 1.It can also be define as a natural number greater than 1 that is not a product of
             two smaller natural number.Let consider 11 as an example in which it only divisor are 1
             and 11 i.e dividing 11 result in a remainder  e.g 11 &#xF7 6 = 1 remainder <br>
             NOTE: 0 and 1 are not prime number<br>
             BONUS: Any number that is not a prime number is called <em>composite number</em>
         </p>
</div>

Then let's write some tags for the App Testing Division ('app_space')

<div class="app_space">
      <input type="number" class="numberToBeCheck" placeholder="Enter Number..."><br>
      <button onclick ="isPrime()">Check</button>
      <p class="displayResult"></p> 
</div>

That's all we have for today. We have successfully created the HTML layout. Here's what we have so far:

Screenshot 2022-08-23 at 18-27-45 Document.png