complete Second projent

Author: abdul rafay

Second project/index.html

@@ -31,7 +31,16 @@
 
     <!-- real project -->
 
-    
+    <div id="main">
+        <div id="container">
+            <h1>Prime Number checker</h1>
+            <input type="number" id="numberInput" placeholder="Enter a number">
+
+            <button onclick="CheckPrimeNumber()">Check</button>
+
+            <p id="result"></p>
+        </div>
+    </div>
 
 
 

Second project/index.js

@@ -0,0 +1,21 @@
+function CheckPrimeNumber() {
+   var num = Number(document.getElementById("numberInput").value);
+   var result = document.getElementById("result");
+   if (num <= 1) {
+       result.textContent = "Not a prime number";
+   } else {
+       var isPrime = true;
+       for (var i = 2; i < num; i++) {
+           if (num % i === 0) {
+               isPrime = false;
+               break;
+           }
+       }
+
+       if (isPrime) {
+           result.textContent = "Prime number";
+       } else {
+           result.textContent = "Not a prime number";
+       }
+   }
+}

Second project/style.css

@@ -46,22 +46,100 @@
  /* hover effects */
 
  #icon:hover {
-    transform: scale(1.2);
-}
+     transform: scale(1.2);
+ }
+
+ .nav-links>li>a:hover {
+     color: #2563eb;
+ }
+
+ .logo:hover {
+     color: #000000;
+     cursor: pointer;
+ }
+
+ body {
+     background-color: #000000;
+ }
+
+ /* main work */
+
+
+ #main {
+     /* width: 100%; */
+     display: flex;
+     justify-content: center;
+     align-items: center;
+     margin-top: 150px;
+ }
+
+ #container {
+     border-radius: 20px;
+     height: 400px;
+     width: 500px;
+     margin: auto;
+     text-align: center;
+     margin-top: 100px;
+     color: #090000;
+     background-color: #ffffff;
+ }
+
 
-.nav-links>li>a:hover {
-    color: #2563eb;
-}
 
-.logo:hover {
-    color: #000000;
-    cursor: pointer;
-}
+ #container>h1 {
+     /* margin-top: 30px; */
+     padding-top: 30px;
+     padding-bottom: 30px;
+     font-size: 3em;
+     margin-bottom: 20px;
+     color: #2563eb;
+     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+     font-weight: 700;
+
+ }
+
+ input[type="number"] {
+     margin-right: 10px;
+     height: 40px;
+     width: 300px;
+     font-size: 1.5em;
+     border-radius: 5px;
+     text-align: center;
+     margin-bottom: 20px;
+     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+     font-weight: 600;
+
+
+ }
+
+ input:focus {
+     outline: none;
+     border: 2px solid #2563eb;
+     color: #2563eb;
+     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+     font-weight: 600;
+ }
 
-body {
-    background-color: #000000;
-}
 
-/* main work */
+ button {
+     padding: 16px;
+     text-align: center;
+     align-items: center;
+     justify-content: center;
+     height: 48px;
+     width: 100px;
+     font-size: 1.2em;
+     border-radius: 5px;
+     background-color: #2563eb;
+     color: #ffffff;
+     cursor: pointer;
+     font-weight: 700;
+     transition: all ease-in-out 0.3s;
+ }
 
+ p {
+     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+     font-size: 1.5em;
+     margin-top: 20px;
+     font-weight: 600;