Skip to content

Commit 007bdfe

Browse files
harshita2216harshita2216
authored
Merge pull request #204 from supzi-del/supzi-del
Added virtual keyboard
2 parents f74d4d2 + e763d59 commit 007bdfe

File tree

5 files changed

+196
-0
lines changed

5 files changed

+196
-0
lines changed

‎Index.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,3 +73,4 @@
7373
| [BMI Calculator (Flask)](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/BMI%20Calculator%20(Flask))|This is a simple BMI calculator built using HTML, CSS, Python and Flask framework.|
7474
| [Basic Contact Form](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Basic-Contact-Form) | A basic contact form having reset and send button. |
7575
| [Online quiz portal](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/online%20quiz%20portal) | An online portal in which an individual can attend the quiz and view the result automatically |
76+
| [Virtual Keyboard](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Virtual%20Keyboard) | This is a keyboard on the screen with all the components and a display. |

‎Virtual Keyboard/index.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Virtual Keyboard</title>
7+
<meta name="description" content="Virtual Keyboard using JS">
8+
<meta name="author" content="Supritha">
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" />
10+
<link rel="stylesheet" href="style.css">
11+
</head>
12+
<body>
13+
<div class="keyboard_wrapper">
14+
<pre class="display"></pre>
15+
<div class="key">
16+
<div class="row"><span data-key="q">q</span><span data-key="w">w</span><span data-key="e">e</span><span data-key="r">r</span><span data-key="t">t</span><span data-key="y">y</span><span data-key="u">u</span><span data-key="i">i</span><span data-key="o">o</span><span data-key="p">p</span></div>
17+
<div class="row"><span data-key="a">a</span><span data-key="s">s</span><span data-key="d">d</span><span data-key="f">f</span><span data-key="g">g</span><span data-key="h">h</span><span data-key="j">j</span><span data-key="k">k</span><span data-key="l">l</span></div>
18+
<div class="row"><span class="caps">caps</span><span data-key="z">z</span><span data-key="x">x</span><span data-key="c">c</span><span data-key="v">v</span><span data-key="b">b</span><span data-key="n">n</span><span data-key="m">m</span><span class="backspace"><i class="fa fa-arrow-left"></i></span></div>
19+
<div class="row"><span class="space" data-key=" "> Space </span></div>
20+
</div>
21+
</div>
22+
<script src="script.js"></script>
23+
</body>
24+
</html>
25+
26+

‎Virtual Keyboard/readme.md

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<h1>JavaScript Virtual Keyboard</h1>
2+
3+
<p>Keyboard on the screen with all the features and a display</p>
4+
5+
### Use of the Project:
6+
7+
<p>User clicks on the virtual keys and see what is being typed on the diplay</p>
8+
9+
<h3>Used Technologies</h3>
10+
<ul>
11+
<li>HTML5</li>
12+
<li>CSS3</li>
13+
<li>JavaScript</li>
14+
</ul>
15+
16+
#### Steps to Use:
17+
18+
---
19+
20+
- Download or clone the repository
21+
22+
```
23+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
24+
```
25+
26+
- Go to the directory
27+
- Run the index.html file
28+
- Start Typing!
29+
30+
<h3> Video Demo </h3>
31+
32+
<video controls width="960" alt="tipcalc">
33+
<source src="https://user-images.githubusercontent.com/78655439/123580889-5736c300-d7f8-11eb-9c45-4642470c6f98.mp4">
34+
</video>
35+
36+
<br>
37+

‎Virtual Keyboard/script.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
let keys = document.querySelectorAll('.keyboard_wrapper .key .row span'),
2+
keyPad = document.querySelector('.keyboard_wrapper .key'),
3+
display = document.querySelector('.keyboard_wrapper .display');
4+
5+
if (keys && keyPad && display) {
6+
let capsLockMode = false;
7+
keys.forEach(key => {
8+
key.addEventListener('click', function() {
9+
// console.log(this.innerText);
10+
if (this.classList.contains('caps')) {
11+
this.classList.toggle('active');
12+
keyPad.classList.toggle('uppercase');
13+
14+
capsLockMode ? capsLockMode = false : capsLockMode = true;
15+
} else if (this.classList.contains('backspace')) {
16+
let str = display.innerText;
17+
display.innerText = str.substring(0, (str.length - 1));
18+
} else {
19+
if (capsLockMode) {
20+
display.innerText += this.dataset.key.toUpperCase();
21+
} else {
22+
display.innerText += this.dataset.key.toLowerCase();
23+
}
24+
}
25+
});
26+
});
27+
}
28+

‎Virtual Keyboard/style.css

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
body {
6+
font-family: monospace;
7+
margin: 0;
8+
background: #ececec;
9+
display: grid;
10+
place-content: center;
11+
min-height: 100vh;
12+
padding: 25px;
13+
font-size: 20px;
14+
}
15+
16+
.keyboard_wrapper {
17+
width: 740px;
18+
padding: 25px;
19+
border-radius: 15px;
20+
box-shadow: -4px -4px 8px darkgrey, 4px 4px 8px #0002;
21+
22+
background-color: #abe9cd;
23+
background-image: linear-gradient(315deg, #abe9cd 0%, #3eadcf 74%);
24+
}
25+
26+
.keyboard_wrapper .display {
27+
background-color: #aee1f9;
28+
position: relative;
29+
font-size: 18px;
30+
font-family: inherit;
31+
height: 150px;
32+
border-radius: 15px;
33+
34+
padding: 20px;
35+
overflow: hidden;
36+
overflow-y: auto;
37+
border: 2px inset #fff;
38+
white-space: pre-wrap;
39+
box-shadow: inset 2px 2px 5px #0002, inset -2px -2px 5px #fff;
40+
}
41+
42+
.keyboard_wrapper .display::before {
43+
content: "";
44+
display: inline-block;
45+
height: 100%;
46+
width: 100%;
47+
background-image: linear-gradient(45deg, #ffffff52, #0000001a);
48+
position: absolute;
49+
left: 0;
50+
top: 0;
51+
}
52+
53+
.keyboard_wrapper .key {
54+
margin-top: 20px;
55+
text-transform: lowercase;
56+
user-select: none;
57+
}
58+
59+
.keyboard_wrapper .key .row {
60+
display: flex;
61+
align-items: center;
62+
justify-content: center;
63+
margin-bottom: 20px;
64+
gap: 20px;
65+
}
66+
67+
.keyboard_wrapper .key .row span {
68+
width: 50px;
69+
height: 50px;
70+
display: grid;
71+
place-content: center;
72+
border-radius: 8px;
73+
box-shadow: 3px 3px 6px #0002, -3px -3px 6px #fff;
74+
cursor: pointer;
75+
border: 1px solid transparent;
76+
transition: 0.3s;
77+
}
78+
79+
.keyboard_wrapper .key .row span.caps,
80+
.keyboard_wrapper .key .row span.backspace {
81+
width: calc(50px * 1.6);
82+
display: flex;
83+
gap: 5px;
84+
align-items: center;
85+
}
86+
87+
.keyboard_wrapper .key .row span.space {
88+
width: calc(50px * 9.4);
89+
}
90+
91+
.keyboard_wrapper .key .row span.active,
92+
.keyboard_wrapper .key .row span:hover {
93+
color: orangered;
94+
}
95+
96+
.keyboard_wrapper .key .row span.active,
97+
.keyboard_wrapper .key .row span:active {
98+
box-shadow: inset 3px 3px 6px #0002, inset -3px -3px 6px #fff;
99+
}
100+
101+
.keyboard_wrapper .key.uppercase {
102+
text-transform: capitalize;
103+
}
104+

0 commit comments

Comments
 (0)