nlopin/index.html

## index.html
<!DOCTYPE html>
<html lang="ru">
<head>
  <title>Демонстрация преобразования — JSON — Дока</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">
  <style>
    body {
      align-items: center;
      justify-content: center;
      display: flex;
      min-height: 100vh;
      background-color: #18191C;
      font-family: "Roboto Mono", monospace;
      font-size: 18px;
      color: #FFFFFF;
      padding: 0;
      margin: 0;
    }

    form {
      display: grid;
      box-sizing: border-box;
      padding: 0;
      margin: 0;
      column-gap: 35px;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto;
      grid-template-areas:
        "input output"
        "submit submit";
    }

    .title {
      font-family: "Roboto", sans-serif;
      font-size: 24px;
      font-weight: 500;
      padding: 0;
      margin: 0 0 17px 0;
    }

    .inputBlock {
      grid-area: input;
      display: flex;
      flex-direction: column;
      border-radius: 6px;
      padding: 10px;
    }

    textarea {
      width: 400px;
      height: 190px;
      resize: none;
      outline: none;
      border-radius: 6px;
      font-family: inherit;
      font-size: 16px;
      padding: 5px;
    }

    textarea:focus {
      box-shadow: 0 0 0 3px inset #FFD829;
    }

    button {
      grid-area: submit;
      display: block;
      min-width: 300px;
      width: 100%;
      background-color: #FFD829;
      outline: none;
      border: 2px solid transparent;
      border-radius: 6px;
      transition-property: background-color, border;
      transition: 0.2s;
      padding: 9px 15px;
      margin: 15px 0 0 0;
    }

    button:hover {
      background-color: #FFFFFF;
      transition: 0.2s;
    }

    button:focus {
      border: 2px solid #FFFFFF;
    }

    .buttonLabel {
      font-family: "Roboto Mono", monospace;
      color: #000000;
    }

    .outputBlock {
      grid-area: output;
      display: flex;
      flex-direction: column;
      border-radius: 6px;
      padding: 10px;
    }

    .output {
      width: 400px;
      min-height: 190px;
      background-color: #FFFFFF;
      border-radius: 6px;
      white-space: pre-wrap;
      font-family: inherit;
      font-size: 16px;
      color: #000000;
      padding: 5px;
    }
  </style>
</head>

<body>
<form id="converter">
  <div class="inputBlock">
    <label for="code">
      <h2 class="title">Что преобразуем</h2>
    </label>
    <textarea id="code"></textarea>
  </div>
  <button type="submit">
    <span class="buttonLabel">Перевести в формат JSON</span>
  </button>
  <div class="outputBlock">
    <h2 class="title">Результат</h2>
    <span class="output" id="output">
    </span>
  </div>
</form>

<script>
  const code = document.getElementById('code')
  const form = document.getElementById('converter')
  const output = document.getElementById('output')

  code.value = `{
  name: "Иван",
  age: 33,
  tags: ["sport", "programming"],
  salary: undefined,
  printInfo() {alert(this.name+',', this.age)}
}`

  form.addEventListener('submit', (e) => {
    e.preventDefault()
    try {
      let obj = eval('(' + code.value + ')')
      output.textContent = JSON.stringify(obj, null, 2)
    } catch (error) {
      output.textContent = 'Ошибка ввода. Кстати, вы знали, что строки нужно вводить в \'кавычках\' ?'
    }
  })
</script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="ru">
	<head>
	<title>Демонстрация преобразования — JSON — Дока</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">
	<style>
	body {
	align-items: center;
	justify-content: center;
	display: flex;
	min-height: 100vh;
	background-color: #18191C;
	font-family: "Roboto Mono", monospace;
	font-size: 18px;
	color: #FFFFFF;
	padding: 0;
	margin: 0;
	}

	form {
	display: grid;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	column-gap: 35px;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	grid-template-areas:
	"input output"
	"submit submit";
	}

	.title {
	font-family: "Roboto", sans-serif;
	font-size: 24px;
	font-weight: 500;
	padding: 0;
	margin: 0 0 17px 0;
	}

	.inputBlock {
	grid-area: input;
	display: flex;
	flex-direction: column;
	border-radius: 6px;
	padding: 10px;
	}

	textarea {
	width: 400px;
	height: 190px;
	resize: none;
	outline: none;
	border-radius: 6px;
	font-family: inherit;
	font-size: 16px;
	padding: 5px;
	}

	textarea:focus {
	box-shadow: 0 0 0 3px inset #FFD829;
	}

	button {
	grid-area: submit;
	display: block;
	min-width: 300px;
	width: 100%;
	background-color: #FFD829;
	outline: none;
	border: 2px solid transparent;
	border-radius: 6px;
	transition-property: background-color, border;
	transition: 0.2s;
	padding: 9px 15px;
	margin: 15px 0 0 0;
	}

	button:hover {
	background-color: #FFFFFF;
	transition: 0.2s;
	}

	button:focus {
	border: 2px solid #FFFFFF;
	}

	.buttonLabel {
	font-family: "Roboto Mono", monospace;
	color: #000000;
	}

	.outputBlock {
	grid-area: output;
	display: flex;
	flex-direction: column;
	border-radius: 6px;
	padding: 10px;
	}

	.output {
	width: 400px;
	min-height: 190px;
	background-color: #FFFFFF;
	border-radius: 6px;
	white-space: pre-wrap;
	font-family: inherit;
	font-size: 16px;
	color: #000000;
	padding: 5px;
	}
	</style>
	</head>

	<body>
	<form id="converter">
	<div class="inputBlock">
	<label for="code">
	<h2 class="title">Что преобразуем</h2>
	</label>
	<textarea id="code"></textarea>
	</div>
	<button type="submit">
	<span class="buttonLabel">Перевести в формат JSON</span>
	</button>
	<div class="outputBlock">
	<h2 class="title">Результат</h2>
	<span class="output" id="output">
	</span>
	</div>
	</form>

	<script>
	const code = document.getElementById('code')
	const form = document.getElementById('converter')
	const output = document.getElementById('output')

	code.value = `{
	name: "Иван",
	age: 33,
	tags: ["sport", "programming"],
	salary: undefined,
	printInfo() {alert(this.name+',', this.age)}
	}`

	form.addEventListener('submit', (e) => {
	e.preventDefault()
	try {
	let obj = eval('(' + code.value + ')')
	output.textContent = JSON.stringify(obj, null, 2)
	} catch (error) {
	output.textContent = 'Ошибка ввода. Кстати, вы знали, что строки нужно вводить в \'кавычках\' ?'
	}
	})
	</script>
	</body>

	</html>