Merge pull request #589 from amanver45/main

create virtual keyboard
iamrahulmahato · Oct 6, 2024 · 02d1575 · 02d1575
2 parents dfadb30 + f644d3a
commit 02d1575
Show file tree

Hide file tree

Showing 7 changed files with 214 additions and 0 deletions.
diff --git a/assets/image/vc.jpg b/assets/image/vc.jpg
diff --git a/index.html b/index.html
@@ -656,6 +656,17 @@ <h3 class="card-heading">Maze Game</h3>
                         </p>
                     </div>
                 </a>
+                <a href="./projects/Virtual Keyboard/index.html" class="card">
+                    <div class="card-cover counter-cover-colour">
+                        <img src="./assets/image/vc.jpg" alt="Virtual Keyboard'">
+                    </div>
+                    <div class="card-content">
+                        <h3 class="card-heading">Virtual Keyboard</h3>
+                        <p class="card-description">
+                            Virtual Keyboard
+                        </p>
+                    </div>
+
 
             </a>
             <a href="./projects/Tetris_Game/index.html" class="card">

diff --git a/projects/Virtual Keyboard/bg.jpg b/projects/Virtual Keyboard/bg.jpg
diff --git a/projects/Virtual Keyboard/index.html b/projects/Virtual Keyboard/index.html
@@ -0,0 +1,68 @@
+<!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>Virtual Keyboard</title>
+    <link rel="stylesheet" href="./style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+</head>
+<body>
+    <div class="textContainer">
+    </div>
+    <div class="keyboard">
+        <div class="row">
+            <div class="key">1</div>
+            <div class="key">2</div>
+            <div class="key">3</div>
+            <div class="key">4</div>
+            <div class="key">5</div>
+            <div class="key">6</div>
+            <div class="key">7</div>
+            <div class="key">8</div>
+            <div class="key">9</div>
+            <div class="key">0</div>   
+            <div class="key delete"><i class="fa-solid fa-delete-left"></i></div>
+        </div>
+        <div class="row">
+            <div class="key">q</div>
+            <div class="key">w</div>
+            <div class="key">e</div>
+            <div class="key">r</div>
+            <div class="key">t</div>
+            <div class="key">y</div>
+            <div class="key">u</div>
+            <div class="key">i</div>
+            <div class="key">o</div>
+            <div class="key">p</div>
+        </div>
+        <div class="row">
+            <div class="key capslock">CapsLock</div>
+            <div class="key">a</div>
+            <div class="key">s</div>
+            <div class="key">d</div>
+            <div class="key">f</div>
+            <div class="key">g</div>
+            <div class="key">h</div>
+            <div class="key">j</div>
+            <div class="key">k</div>
+            <div class="key">l</div>
+            <div class="key enter">Enter</div>
+        </div>
+        <div class="row last">
+            <div class="key">z</div>
+            <div class="key">x</div>
+            <div class="key">c</div>
+            <div class="key">v</div>
+            <div class="key">b</div>
+            <div class="key">n</div>
+            <div class="key">m</div>
+        </div>
+        <div class="row">
+            <div class="key space"></div>
+        </div>
+    </div>
+</body>
+<script src="./script.js"></script>
+</html>
diff --git a/projects/Virtual Keyboard/script.js b/projects/Virtual Keyboard/script.js
@@ -0,0 +1,62 @@
+let textContainer = document.querySelector(".textContainer");
+let deleteKey = document.querySelector(".delete");
+let enterKey = document.querySelector(".enter");
+let spaceKey = document.querySelector(".space");
+let capsLock = document.querySelector(".capslock");
+let allKey = document.querySelectorAll(".key");
+let isCaps = false;
+
+deleteKey.addEventListener("click",function(){
+    let textContainerContent = textContainer.innerText;
+    if(textContainerContent.length == 0){
+        return;
+    }
+    console.log(textContainerContent);
+    let newContent = textContainerContent.slice(0,textContainerContent.length-1);
+    textContainer.innerText = newContent;
+})
+
+enterKey.addEventListener("click",function(){
+    let content = textContainer.innerText;
+    let newContent = content+"\n";
+    textContainer.innerText = newContent;
+})
+
+spaceKey.addEventListener("click",function(){
+    let content = textContainer.innerText;
+    let newContent = content+ '\u00A0';
+    textContainer.innerText = newContent;
+})
+
+capsLock.addEventListener("click",function(){
+    if(isCaps){
+        capsLock.classList.remove("active");
+        for(let key of allKey){
+            if(key.classList.contains("delete") || key.classList.contains("enter")||
+             key.classList.contains("space") || key.classList.contains("capslock")){
+                //nothing
+            }else
+                key.innerText = key.innerText.toLowerCase();
+        }
+    }else{
+        capsLock.classList.add("active");
+        for(let key of allKey){
+                if(key.classList.contains("delete") || key.classList.contains("enter")||
+                 key.classList.contains("space") || key.classList.contains("capslock")){
+                    //nothing
+                }else
+                    key.innerText = key.innerText.toUpperCase();
+            }
+        }
+    isCaps=!isCaps
+})
+
+for(let key of allKey){
+    key.addEventListener("click",function(){
+        if(key.classList.contains("delete") || key.classList.contains("enter")||
+         key.classList.contains("space") || key.classList.contains("capslock")){
+            return;
+        }
+        textContainer.innerText += key.innerText;
+    })
+}
diff --git a/projects/Virtual Keyboard/style.css b/projects/Virtual Keyboard/style.css
@@ -0,0 +1,73 @@
+body
+{
+     background:url(bg.jpg) ;
+}
+body
+{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    background-color: whitesmoke;
+    font-family: sans-serif;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-evenly;
+    height: 100vh;
+    font-size: 1.5rem;
+}
+
+.textContainer{
+    height: 15vh;
+    width: 90vw;
+    background: white;
+    border-radius: 0.5rem;
+    box-shadow: 0 0 10px 1px grey;
+    outline: none;
+    padding: 2rem;
+    overflow-y: scroll;
+    display: flex;
+    flex-direction: column-reverse;
+}
+
+.keyboard{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    height: 50vh;
+    width: 70vw;
+    background-color: darkgrey;
+    border-radius: 1rem;
+}
+
+.row{
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;   
+}
+
+.last{
+    width: 65%;
+    margin: 0 auto ;
+}
+
+.space{
+    background:grey;
+    width: 50%;
+    height: 2rem;   
+}
+
+.key{
+    cursor: pointer;
+    padding: 0.5rem;
+    border-radius: 3px;
+
+}
+
+.key:active{
+    background: lightgrey;
+}
+
+.active{
+    background-color: whitesmoke;
+}
diff --git a/projects/Virtual Keyboard/vc.jpg b/projects/Virtual Keyboard/vc.jpg