Ein Code von alejandrokundrah

Im Editor öffnen Veröffentlichen Sie Ihren Code

Empfohlen

15 April 2025

Ein Code von alexandrestelmaszyk

24 March 2025

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Keyboard and Monitor</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='style.css'>
</head>

<body>
    <form class="container" name="system">
        <input type="text" name="input" class="monitor">
        <div class="keyboard" id="keyboard">
            <div class="keys">
                <input type="button" value="Q" name="Q">
                <input type="button" value="W" name="W">
                <input type="button" value="E" name="E">
                <input type="button" value="R" name="R">
                <input type="button" value="T" name="T">
                <input type="button" value="Y" name="Y">
                <input type="button" value="U" name="U">
                <input type="button" value="I" name="I">
                <input type="button" value="O" name="O">
                <input type="button" value="P" name="P">
            </div>
            <div class="keys">
                <input type="button" value="A" name="A">
                <input type="button" value="S" name="S">
                <input type="button" value="D" name="D">
                <input type="button" value="F" name="F">
                <input type="button" value="G" name="G">
                <input type="button" value="H" name="H">
                <input type="button" value="J" name="J">
                <input type="button" value="K" name="K">
                <input type="button" value="L" name="L">
            </div>
            <div class="keys">
                <input type="button" value="Z" name="Z">
                <input type="button" value="X" name="X">
                <input type="button" value="C" name="C">
                <input type="button" value="V" name="V">
                <input type="button" value="B" name="B">
                <input type="button" value="N" name="N">
                <input type="button" value="M" name="M">
                <input type="button" class="backspace" value="Backspace" name="Backspace">
            </div>
            <input type="button" class="spacebar" name="space">
        </div>
    </form>
    <script>
        document.getElementById('keyboard').addEventListener('click',function (e) {
            if(e.target.tagName === 'INPUT' && e.target.type === 'button') {
                if(e.target.classList.contains('backspace')) {
                    system.input.value = system.input.value.slice(0, -1);
                } else if(e.target.classList.contains('spacebar')) {
                    system.input.value += " ";
                } else {
                    system.input.value += e.target.value;
                }
            }
        })
    </script>
</body>

</html>

CSS

* {
    margin: 0;
    padding: 0;
    font-weight: bold;
    outline: none;
    cursor: pointer;
}

body {
    background: #a3b1c6;
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
}

.container {
    width: 950px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 800px;
    position: absolute;
}

.monitor {
    height: 300px;
    width: 500px;
    background: #a3b1c6;
    border: 10px solid #a3b1c6;
    position: absolute;
    top: 5vh;
    box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.3), -8px -8px 15px rgba(245, 345, 245, 0.25),
    8px 8px 15px rgba(0, 0, 0, 0.25) inset;
    border-radius: 20px;
    text-align: center;
    font-size: 30px;
}

.keyboard {
    height: 350px;
    width: 850px;
    box-shadow: 5px 5px 15px rgba(107, 188, 238, 0.3), -8px -8px 15px rgba(245, 245, 245, 0.25);
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    border-radius: 20px;
    position: relative;
    top: 22vh;
}

.keyboard input {
    height: 60px;
    width: 60px;
    box-shadow: 3px 3px 15px rgba(6, 106, 121, 0.3), -5px -5px 10px rgba(245, 245, 245, 0.25);
    border: 5px solid #a3b1c6;
    margin: 10px;
    border-radius: 10px;
    background:rgba(6, 120, 149, 0.81);
    font-size: 23px;
}

.keyboard input:focus{
  color: white;
  box-shadow: 5px 5px 15px rgba(110, 191, 235, 0.3), -8px -8px 15px rgba(245, 245, 245, 0.25),
  5px 5px 15px rgba(0, 0, 0, 0.25) inset;
}

.keyboard .spacebar {
    width: 300px;
}

.keyboard .backspace {
    width: 120px;
    font-size: 19px;
}

Ein Code von alejandrokundrah

Empfohlen

Ein Code von bhviet1510

Ein Code von alexandrestelmaszyk

Ein Code von ribeirosarah905

HTML

CSS

JS

Empfohlen

Ein Code von bhviet1510

Ein Code von alexandrestelmaszyk

Ein Code von ribeirosarah905

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS