so im trying to practice oop with a onscreen keyboard and my functions and buttons are working as intended. but i dont think im doing it correctly simply bc im not using class or constructor, so i did it this way, is this still considered oop. Btw its not finished i just added functionality to few keys for testing. so do i need to use classes and constructors for it to be considered oop?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Open KeyBoard</title>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<div id="input"></div>
<div id="KeyBoard">
<button id="key1" class="keys">`</button>
<button id="key2" class="keys">1</button>
<button id="key3" class="keys">2</button>
<button id="key4" class="keys">3</button>
<button id="key5" class="keys">4</button>
<button id="key6" class="keys">5</button>
<button id="key7" class="keys">6</button>
<button id="key8" class="keys">7</button>
<button>8</button>
<button>9</button>
<button>0</button>
<button>-</button>
<button>=</button>
<button id="backspace">backspace</button>
<button id="tab">tab</button>
<button>q</button>
<button>w</button>
<button>e</button>
<button>r</button>
<button>t</button>
<button>y</button>
<button>u</button>
<button>i</button>
<button>o</button>
<button>p</button>
<button>[</button>
<button>]</button>
<button>\</button>
<button id="caps">caps</button>
<button>a</button>
<button>s</button>
<button>d</button>
<button>f</button>
<button>g</button>
<button>h</button>
<button>j</button>
<button>k</button>
<button>l</button>
<button>;</button>
<button>'</button>
<button id="enter">enter</button>
<button class="shift">shift</button>
<button>z</button>
<button>x</button>
<button>c</button>
<button>v</button>
<button>b</button>
<button>n</button>
<button>m</button>
<button>,</button>
<button>.</button>
<button>/</button>
<button class="shift">shift</button>
<button>.com</button>
<button>@</button>
<button id="space"></button>
</div>
<script src="script.js"></script>
</body>
</html>
const button = document.getElementsByClassName('keys');
const input = document.getElementById('input');
const keys = [
{
name: '`',
cap: '~',
id: 0,
keybind: document.getElementById('key1'),
pressed(){
this.keybind.addEventListener('click', () =>{
input.innerHTML += '`';
})
}
},
{
name: '1',
cap: '!',
id: 1,
keybind: document.getElementById('key2'),
pressed(){
this.keybind.addEventListener('click', () =>{
input.innerHTML += '1';
})
}
},
{
name: '2',
cap: '@',
id: 2,
keybind: document.getElementById('key3'),
pressed(){
this.keybind.addEventListener('click', () =>{
input.innerHTML += '2';
})
}
},
{
name: '3',
cap: '#',
id: 3,
keybind: document.getElementById('key4'),
pressed(){
this.keybind.addEventListener('click', () =>{
input.innerHTML += '3';
})
}
},
{
name: '4',
cap: '$',
id: 4,
keybind: document.getElementById('key5'),
pressed(){
this.keybind.addEventListener('click', () =>{
input.innerHTML += '4';
})
}
},
{
name: '5',
cap: '%',
id: 5,
keybind: document.getElementById('key6'),
pressed(){
this.keybind.addEventListener('click', () =>{
input.innerHTML += '5';
})
}
},
{
name: '6',
cap: '^',
id: 6,
keybind: document.getElementById('key7'),
pressed(){
this.keybind.addEventListener('click', () =>{
input.innerHTML += '6';
})
}
},
{
name: '7',
cap: '&',
id: 7,
keybind: document.getElementById('key8'),
pressed(){
this.keybind.addEventListener('click', () =>{
input.innerHTML += '7';
})
}
},
];
keys.forEach((key) =>{
key.pressed()
})
#KeyBoard{
border: 1px solid black;
width: 48vw;
height: 40%;
}
button{
width: 50px;
height: 40px;
margin: 4px;
}
#input{
border: 1px solid black;
width:100vw;
height: 50vh;
}
#backspace{
width: 100px;
}
#tab{
width: 100px;
}
#caps{
width: 120px;
}
#enter{
width: 90px;
}
.shift{
width: 120px;
}
#space{
width: 85%;
}