Создай приложение которое позволяет делать пост и нет запросы на урл с параметрами если в ответ приходит json то выводи с помощью jsoneditor

<head>

<title>POST и GET запрос с выводом JSON</title>

<style>

#jsoneditor {

height: 400px;

border: 1px solid #cbd5e1; / Tailwind ring color /

border-radius: 0.375rem; / Tailwind rounded-md /

}

</style>

</head>

<h1 class="text-3xl font-semibold mb-6 text-center">Запросы POST и GET с выводом JSON</h1>

<div>

<label for="method" class="block mb-1 font-medium text-gray-700">Метод запроса</label>

</select>

</div>

<div>

<input type="url" id="url" name="url" placeholder="https://example.com/api" autocomplete="off" required

class="w-full border border-gray-300 rounded-md p-2" />

</div>

<label class="block font-medium text-gray-700">Параметры (ключ - значение)</label>

<input name="paramKey" type="text" placeholder="Ключ" autocomplete="off"

class="flex-1 border border-gray-300 rounded-md p-2" />

<input name="paramValue" type="text" placeholder="Значение" autocomplete="off"

class="flex-1 border border-gray-300 rounded-md p-2" />

<button type="button" aria-label="Удалить параметр"

class="text-red-500 hover:text-red-700 focus:outline-none flex items-center" onclick="removeParam(this)">

</button>

</div>

<button type="button" id="addParamBtn"

class="mt-2 px-3 py-1 bg-blue-600 hover:bg-blue-700 text-white rounded-md focus:outline-none flex items-center gap-2">

<i class="fas fa-plus"></i> Добавить параметр

</button>

</div>

<button type="submit"

class="bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded-md font-semibold transition-colors duration-200">

Отправить запрос

</button>

</div>

</form>

<h2 class="text-xl font-semibold mb-3">Ответ</h2>

</section>

</div>

alert('ff');

const paramsContainer = document.getElementById('paramsContainer');

document.getElementById('addParamBtn').addEventListener('click', () => {

const paramDiv = document.createElement('div');

paramDiv.className = 'flex space-x-2';

const keyInput = document.createElement('input');

keyInput.name = 'paramKey';

keyInput.type = 'text';

keyInput.placeholder = 'Ключ';

keyInput.autocomplete = 'off';

keyInput.className = 'flex-1 border border-gray-300 rounded-md p-2';

const valueInput = document.createElement('input');

valueInput.name = 'paramValue';

valueInput.type = 'text';

valueInput.placeholder = 'Значение';

valueInput.autocomplete = 'off';

valueInput.className = 'flex-1 border border-gray-300 rounded-md p-2';

const removeBtn = document.createElement('button');

removeBtn.type = 'button';

removeBtn.setAttribute('aria-label', 'Удалить параметр');

removeBtn.className = 'text-red-500 hover:text-red-700 focus:outline-none flex items-center';

removeBtn.onclick = () => paramDiv.remove();

removeBtn.innerHTML = '<i class="fas fa-minus-circle fa-lg"></i>';

paramDiv.appendChild(keyInput);

paramDiv.appendChild(valueInput);

paramDiv.appendChild(removeBtn);

paramsContainer.appendChild(paramDiv);

});

function removeParam(button) {

const div = button.parentElement;

div.remove();

}

const container = document.getElementById('jsoneditor');

const rawResponse = document.getElementById('rawResponse');

let jsonEditor = new JSONEditor(container, {

mode: 'view',

mainMenuBar: false,

navigationBar: false,

statusBar: false,

onError: (err) => {

console.error(err);

}

});

document.getElementById('requestForm').addEventListener('submit', async (e) => {

e.preventDefault();

jsonEditor.set({});

rawResponse.classList.add('hidden');

rawResponse.textContent = '';

const method = e.target.method.value.toUpperCase();

let url = e.target.url.value.trim();

const keys = Array.from(e.target.querySelectorAll('input[name="paramKey"]')).map(i => i.value.trim()).filter(k => k !== '');

const values = Array.from(e.target.querySelectorAll('input[name="paramValue"]')).map(i => i.value);

let params = {};

for (let i = 0; i < keys.length; i++) {

params[keys[i]] = values[i];

}

try {

let response;

if (method === 'GET') {

// append params as query string

const urlObj = new URL(url);

Object.keys(params).forEach(key => {

urlObj.searchParams.append(key, params[key]);

});

url = urlObj.toString();

response = await fetch(url, { method: 'GET' });

} else if (method === 'POST') {

// send params as JSON body

response = await fetch(url, {

method: 'POST',

headers: {

'Content-Type': 'application/json'

body: JSON.stringify(params)

});

} else {

alert('Метод не поддерживается');

return;

}

const contentType = response.headers.get('content-type') || '';

const text = await response.text();

try {

if (contentType.includes('application/json')) {

const json = JSON.parse(text);

jsonEditor.set(json);

rawResponse.classList.add('hidden');

} else {

// Не JSON, показать как текст

rawResponse.textContent = text;

rawResponse.classList.remove('hidden');

jsonEditor.set({});

}

} catch (err) {

// Ошибка парсинга JSON - показать сырой текст

rawResponse.textContent = text;

rawResponse.classList.remove('hidden');

jsonEditor.set({});

}

} catch (error) {

jsonEditor.set({});

rawResponse.textContent = 'Ошибка запроса: ' + error.message;

rawResponse.classList.remove('hidden');

}

});

</script>

</body>

</html>