<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);
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.