<header>
  <h2 class="title">String.prototype.codePointAt()</h2>
  <p class="description">Повертає кодову точку символу, що знаходиться на певній позиції у рядку.</p>
</header>
<main>
  <div class="result">
    <label for="inputString">Введіть символ або рядок:</label>
    <input type="text" id="inputString" value="👩‍💻" />
    <button onclick="getCodePoint()">Отримати кодову точку</button>
    <div id="codePointResult"></div>
  </div>
</main>

/* Додано до наданого CSS */
.result input[type="text"] {
  margin: 10px 0;
  padding: 8px;
  font-size: 1em;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.result button {
  padding: 10px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.result button:hover {
  background-color: #0056b3;
}

#codePointResult {
  margin-top: 15px;
  padding: 10px;
  background-color: #e9ecef;
  border-radius: 4px;
}

function getCodePoint() {
  const inputElement = document.getElementById('inputString');
  const resultElement = document.getElementById('codePointResult');
  const str = inputElement.value;
  const codePoint = str.codePointAt(0).toString(16);
  resultElement.innerText = `Кодова точка першого символу "${str[0]}" у рядку: U+${codePoint.toUpperCase()}`;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.