<!DOCTYPE html>
<html>
<head>
    <title>JavaScript API</title>
    <style>
        .box{
            display: block;
            width:80%;
            margin:10px auto;
            font-size: 1.2em;
        }
        .main{
            display: block;
            width:80%;
            margin:10px auto;
            font-size: 0.8em;
            border: 1px solid #ddd;
            padding:10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <input type="text" class="val">
        <button class="btn">Click</button>
        <div class="output"></div>
    </div>
    <script src="code4.js"></script>
</body>
</html>
const btn = document.querySelector('.btn');
const inpEle = document.querySelector('input');
const output = document.querySelector('.output');
const myForm = document.createElement('form');
document.body.append(myForm);
const output1 = document.createElement('div');
output1.classList.add('main');
const baseUrl = 'https://script.google.com/macros/s/AKfycbzUcUVn99AkTK1rxxjCd-oU_707N3s23p9OriMaMzCYunuacydj/exec';
inpEle.classList.add('box');
inpEle.setAttribute('name', 'nameOG');
inpEle.value = 'Hello World';
myForm.append(inpEle);
for (let i = 0; i < 10; i++) {
    const myInput = document.createElement('input');
    myInput.setAttribute('type', 'text');
    myInput.setAttribute('placeholder', 'Value ' + i);
    myInput.classList.add('box');
    myInput.setAttribute('name', 'name' + (i + 1));
    myInput.value = 'Value ' + i;
    myForm.append(myInput);
}
myForm.append(btn);
output.append(output1);
btn.classList.add('box');
btn.addEventListener('click', getPost);

function loadData(e) {
    e.preventDefault();
    console.log('ready');
    let formData = new FormData(myForm);
    let data = [...formData.entries()];
    console.log(data);
    const para = data.map(x => `${encodeURIComponent(x[0])}=${encodeURIComponent(x[1])}`);
    const res = para.join('&');
    console.log(res);
    let url = baseUrl + '?' + res;
    getData(url);
}

function getPost(e) {
    e.preventDefault();
    const myHeaders = new Headers();
    let formData = new FormData(myForm);
    let body = {};
    formData.forEach((val, key) => {
        body[key] = val;
    })
    console.log(body);
    const opts = {
        method: 'POST',
        myHeaders,
        body: JSON.stringify(body)
    }
    fetch(baseUrl, opts)
        .then(res => res.json())
        .then(data => {
            outputObj(data);
        })

}

function getData(url) {
    fetch(url)
        .then(res => res.json())
        .then(data => {
            outputObj(data);
        })
}

function outputObj(obj) {
    console.log(obj);
    output1.innerHTML = '';
    for (const prop in obj) {
        output1.innerHTML += `${prop} : ${obj[prop]}<br>`;
    }
}