<!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="code3.js"></script>
</body>
</html>const btn = document.querySelector('.btn');
const inpEle = document.querySelector('input');
const output = document.querySelector('.output');
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';
output.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;
output.append(myInput);
}
output.append(btn);
output.append(output1);
btn.classList.add('box');
btn.addEventListener('click', loadData);
function loadData() {
console.log('ready');
let url = baseUrl + '?';
const eles = output.querySelectorAll('input');
let tempArr = [];
eles.forEach((el)=>{
console.log(el.name);
let temp = `${el.name}=${el.value}`;
tempArr.push(temp);
})
let reqUrl = tempArr.join('&');
url += reqUrl;
console.log(url);
getData(url);
}
function getData(url){
fetch(url)
.then(res => res.json())
.then(data => {
outputObj(data);
})
}
function outputObj(obj){
output1.innerHTML = '';
for(const prop in obj){
output1.innerHTML +=`${prop} : ${obj[prop]}<br>`;
}
}