<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Project #12 - The Keyboard App</title>
  </head>
  <body>
    <div class="container">
      <form class="wrapper">
        <div class="display">
          <textarea name="textarea" cols="30" rows="10"></textarea>
        </div>
        <!-- 1단 -->
        <div class="keys">
          <input type="button" value="Q" />
          <input type="button" value="W" />
          <input type="button" value="E" />
          <input type="button" value="R" />
          <input type="button" value="T" />
          <input type="button" value="Y" />
          <input type="button" value="U" />
          <input type="button" value="I" />
          <input type="button" value="O" />
          <input type="button" value="P" />
        </div>
        <!-- 2단 -->
        <div class="keys">
          <input type="button" value="A" />
          <input type="button" value="S" />
          <input type="button" value="D" />
          <input type="button" value="F" />
          <input type="button" value="G" />
          <input type="button" value="H" />
          <input type="button" value="J" />
          <input type="button" value="K" />
          <input type="button" value="L" />
        </div>
        <!-- 3단 -->
        <div class="keys">
          <input type="button" value="Z" />
          <input type="button" value="X" />
          <input type="button" value="C" />
          <input type="button" value="V" />
          <input type="button" value="B" />
          <input type="button" value="N" />
          <input type="button" value="M" />
        </div>
        <!-- 스페이스바 -->
        <div class="keys">
          <input type="button" value=" " />
        </div>
      </form>
    </div>

    <!-- ----------------------- -->
    <!-- JS File -->
    <script src="app.js"></script>
  </body>
</html>

* {
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: rgb(174, 239, 239);
  flex-direction: column;
}

.container {
  width: 60%;
}

.wrapper {
  min-width: 750px;
  max-width: 1000px;
  padding: 25px;
  border-radius: 10px;

  background: #cc83e4;
  box-shadow: 2px 2px 5px rgba(104, 38, 170, 0.5),
    -3px -3px 7px rgba(255, 255, 255, 0.05);
}

.wrapper .keys {
  display: flex;
  justify-content: center;
}

.wrapper .keys input {
  height: 50px;
  min-width: 50px;
  padding: 10px;
  border: none;
  outline: none;

  background: #480392;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5),
    -3px -3px 7px rgba(255, 255, 255, 0.05);
  margin: 10px;
  color: #26d767;
  font-size: 20px;
  border-radius: 5px;
  cursor: default;
}
.wrapper .keys input:focus {
  font-size: 19px;
  color: rgb(252, 13, 0);

  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.5),
    inset -3px -3px 7px rgba(255, 255, 255, 0.05);
}

.wrapper .keys input[value=" "] {
  width: 60%;
}

.wrapper .display {
  width: 100%;
  height: 150px;
  margin-bottom: 20px;
}

.display textarea {
  height: 100%;
  width: 100%;
  border: none;
  outline: none;
  padding: 10px 15px;
  background: #576ac5;
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.5),
    inset -3px -3px 7px rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  resize: none;
  color: white;
  font-size: 20px;
}

const keyContainers = document.querySelectorAll(".keys");
let textArea = document.querySelector(".display textarea");

keyContainers.forEach(function (key) {
  key.addEventListener("click", function (e) {
    //e.path는 <input type = 'button' value = "키값">을 뜻한다.
    if (!e.path[0].value) return;

    //전부 대문자로 되있으므로 소문자로 낮춰서 내보내기. 
    let keyClicked = e.path[0].value.toLowerCase();
    textArea.value += keyClicked;
  });
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.