Ein Code von alejandrokundrah

Im Editor öffnen Veröffentlichen Sie Ihren Code

Empfohlen

1 December 2024

<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 ledoc

Ein Code von Codex

Ein Code von kouadioarmel055

HTML

CSS

JS

Empfohlen

Ein Code von ledoc

Ein Code von Codex

Ein Code von kouadioarmel055

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS