<header>
  <h2 class="title">for...in</h2>
  <p class="description">Перебирає всі перелічувані властивості об'єкта.</p>
</header>
<main>
  <div class="result">
    <form id="objectEditor">
      <!-- Динамічно заповнюється властивостями -->
    </form>
    <button id="updateButton">Оновити об'єкт</button>
    <pre id="output"></pre>
  </div>
</main>
body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

form {
  margin-bottom: 15px;
}

form input {
  margin-bottom: 10px;
  padding: 5px;
  width: 100%;
}

button {
  padding: 10px 15px;
  font-size: 14px;
  cursor: pointer;
  background-color: #007BFF;
  color: #fff;
  border: none;
  border-radius: 4px;
}

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

pre {
  background-color: #eee;
  padding: 10px;
  border-radius: 5px;
  overflow-x: auto;
}
// Ініціалізація об'єкта
const user = {
  name: "Іван",
  age: 25,
  city: "Київ",
};

// Заповнення форми на основі об'єкта
const form = document.getElementById("objectEditor");
const output = document.getElementById("output");

function renderForm(obj) {
  form.innerHTML = ""; // Очищаємо форму
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      const input = document.createElement("input");
      input.type = "text";
      input.name = key;
      input.value = obj[key];
      input.placeholder = `Значення для ${key}`;
      form.appendChild(input);
    }
  }
}

// Оновлення об'єкта після змін у формі
function updateObjectFromForm(obj) {
  const inputs = form.querySelectorAll("input");
  inputs.forEach((input) => {
    obj[input.name] = input.value;
  });
  renderOutput(obj);
}

// Відображення об'єкта
function renderOutput(obj) {
  output.textContent = JSON.stringify(obj, null, 2);
}

// Ініціалізація
renderForm(user);
renderOutput(user);

// Обробка кнопки оновлення
document.getElementById("updateButton").addEventListener("click", () => {
  updateObjectFromForm(user);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.