Rakesh9100 · Rakesh9100 · May 27, 2024 · May 27, 2024 · May 27, 2024 · May 27, 2024
diff --git a/Calculators/Random-Letter-Generator-Calculator/README.md b/Calculators/Random-Letter-Generator-Calculator/README.md
@@ -0,0 +1,22 @@
+# <p align="center">Random Letter Generator Calculator</p>
+
+## Description :-
+
+The Random Letter Generator Calculator is a simple and interactive web-based application that provides users with an entertaining way to test their reflexes and vocabulary. This presents users with a constantly changing random letter from the English alphabet and challenges them to click on the displayed letter as quickly as possible.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Features :-
+
+- Random Letter Generation: The game dynamically generates random letters from the English alphabet and displays them to the user.
+- Interactive Interface: Users can interact with the game by clicking on the displayed letter.
+- Visual Feedback: The game provides visual feedback to users, highlighting the clicked letter
+- Responsive Design: The game is designed to be responsive, ensuring it works well on various devices and screen sizes.
+
+## Screenshots :-
+
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/5cafb572-fcce-4233-b44f-83497c2dce8f)
diff --git a/Calculators/Random-Letter-Generator-Calculator/index.html b/Calculators/Random-Letter-Generator-Calculator/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Random Letter Generator Calculator</title>
+</head>
+<body>
+    <div class="container">
+        <div class="title"><h1>Random Letter Generator</h1></div>
+        <div id="outer">
+            <div id="innerContainer">
+                <div id="changing" onClick="setPause(true)">A</div>
+                <p>Please click on the letter to start.</p>
+            </div>
+            <p id="clickedLetter">The letter is </p>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
+
diff --git a/Calculators/Random-Letter-Generator-Calculator/script.js b/Calculators/Random-Letter-Generator-Calculator/script.js
@@ -0,0 +1,25 @@
+var letters = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M",
+    "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"
+];
+
+var isPaused = false;
+
+function setPause() {
+    isPaused = !isPaused;
+}
+
+var letter = setInterval(function () {
+    if (isPaused) {
+
+        var randomLetter = Math.round(Math.random() * (letters.length - 1));
+
+        document.getElementById("changing").innerHTML = letters[randomLetter];
+    }
+}, 150);
+
+document.getElementById('changing').addEventListener('click', function () {
+    if (!isPaused) {
+        var clickedLetter = this.textContent;
+        document.getElementById('clickedLetter').textContent = `You clicked: ${clickedLetter}`;
+    }
+});
diff --git a/Calculators/Random-Letter-Generator-Calculator/style.css b/Calculators/Random-Letter-Generator-Calculator/style.css
@@ -0,0 +1,68 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html, body {
+    width: 100%;
+    height: 100%;
+    font-family: Arial, sans-serif;
+}
+
+body {
+    background-image: url("assets/bg.jpg");
+    background-size: cover;
+    background-repeat: no-repeat;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.container {
+    text-align: center;
+    color: black;
+    font-size: 40px;
+    align-items: center;
+}
+.title{
+    background-color: white;
+    opacity: 70%;
+}
+#outer {
+    width: 100%;
+    max-width: 400px;
+    background-color: rgba(0, 0, 0, 0.7);
+    border-radius: 10px;
+    padding: 20px;
+    margin-top: 50px;
+    margin-left:250px;
+}
+
+#innerContainer {
+    color: #663399;
+    padding: 15px 25px;
+    width: 100%;
+    text-align: center;
+    border-radius: 10px;
+    background-color: white;
+}
+
+#changing {
+    font-size: 100px;
+    height: 200px;
+    line-height: 200px;
+    margin-bottom: 20px;
+    cursor: pointer;
+    user-select: none;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+#changing:hover {
+    background-color: rebeccapurple;
+    border-radius: 10px;
+    color: white;
+}
+
+
+
diff --git a/index.html b/index.html
@@ -1741,7 +1741,21 @@ <h3>Reverse Polish Notation calculator which represents expressions by placeing
                     </a>
                 </div>
             </div>
-        </div> 
+        </div>
+        <div class="box">
+            <div class="content">
+                <h2>Random Letter Generator Calculator</h2>
+                <h3>Generates randomized English alphabets used in brain teaser activities.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Random-Letter-Generator-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Random-Letter-Generator-Calculator" title="Source Code" target="_blank">
+                        <img src="./assets/images/github.png" alt="Source Code"></img>
+                    </a>
+                </div>
+            </div>
+        </div>
         <div class="box">
             <div class="content">
                 <h2>Ratio Calculator</h2>