Adding Random Number Generator

Anadee11 · Oct 14, 2022 · 2319fd0 · 2319fd0
1 parent acfe55f
commit 2319fd0
Show file tree

Hide file tree

Showing 5 changed files with 121 additions and 0 deletions.
diff --git a/Random-Number-Generator/Readme.md b/Random-Number-Generator/Readme.md
@@ -0,0 +1,5 @@
+# **Random Text Generator**
+
+## This is a random text generator application developed using HTML, CSS and JAVASCRIPT. This is a very helpful project to understand the basics of Javascript. Hope this project helps other developers who are starting out their web development journey.
+
+![Screenshot](Screenshot.png)
diff --git a/Random-Number-Generator/Screenshot.png b/Random-Number-Generator/Screenshot.png
diff --git a/Random-Number-Generator/index.html b/Random-Number-Generator/index.html
@@ -0,0 +1,33 @@
+<!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>Random Number Generator</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <div class="heading">Random Number Generator</div>
+        <div class="value">
+          <label>Lower Limit</label>
+          <input type="text" id="low"/>
+        </div>
+        <div class="value">
+          <label>Upper Limit</label>
+          <input type="text" id="up"/>
+        </div>
+        <div>
+          <button class="submit"  id="generate">
+           GENERATE
+          </button>
+        </div>
+        <div id="answer" class="res">
+            Click Generate Now!
+          </div>
+          <br>
+        </div>
+</body>
+<script src="script.js"></script>
+</html>
diff --git a/Random-Number-Generator/script.js b/Random-Number-Generator/script.js
@@ -0,0 +1,13 @@
+var btn= document.getElementById("generate");
+var res=
+document.getElementById("answer")
+
+btn.addEventListener("click",function() {
+var min=document.getElementById("low").value;
+var max=document.getElementById("up").value;
+
+min=parseInt(min);
+max=parseInt(max);
+ans=Math.floor(Math.random() * (max - min) ) + min;
+res.innerHTML = ans;
+});
diff --git a/Random-Number-Generator/style.css b/Random-Number-Generator/style.css
@@ -0,0 +1,70 @@
+@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300&display=swap');
+
+*{
+ padding: 0px;
+ margin: 0px;
+}
+body{
+    font-family: 'Nunito', sans-serif;
+    height: 100vh;
+    width: 100%;
+    background: linear-gradient(rgb(8, 8, 8),rgb(105, 1, 1));
+}
+.container{
+  background:white;
+  top: 50%;
+  left: 50%;
+  position: absolute;
+  transform: translate(-50%,-50%);
+  height: 450px;
+  width: 400px;
+  border-radius: 20px;
+  text-align: center;
+}
+.heading 
+{
+  color: black;
+  font-size: 30px;
+  font-weight: 800;;
+  padding: 20px 20px 0px 20px;
+}
+.value
+{
+    margin: 20px 20px;
+  color: black;
+  font-size: 20px;
+  font-weight: 600;
+}
+input{
+    padding: 10px 20px;
+    font-size: 18px;
+    border: 1px solid black;
+    border-radius: 10px;
+    margin-top: 3px;
+}
+.submit
+{
+  margin: 20px;
+  padding: 15px 25px;
+  width: 65%;
+  font-size: 16px;
+  color: white;
+  background-color: black;
+  border: none;
+  cursor: pointer;
+  border-radius: 10px;
+  transition: 0.3s all;
+}
+.submit:hover
+{
+  background: white;
+  color:black;
+  border:2px solid black;
+}
+
+.res
+{
+  font-size: 30px;
+  font-weight: 600;
+  color:black;
+}