script.js

let parameterBox = document.getElementById("parameterBox")
let requestJsonBox = document.getElementById("requestJsonBox")
let params= document.getElementById('params')
parameterBox.style.display = 'none'

let paramsRadio = document.getElementById('paramsradio')
let jsonRadio = document.getElementById('jsonradio')

let addedParamsCount = 1

paramsRadio.addEventListener("click",()=>{
    requestJsonBox.style.display = 'none'
    parameterBox.style.display = 'block'
        params.style.display = 'block'
})

jsonRadio.addEventListener("click",()=>{
    parameterBox.style.display = 'none'
    requestJsonBox.style.display = 'block'
    params.style.display = 'none'
})


function getElementFromString(string){
  let   div = document.createElement('div') //<div></div>
  div.innerHTML = string;// <div>...</div>
  
  return div.firstElementChild
}


let addParam = document.getElementById('addParam')
addParam.addEventListener("click",function(){
        addedParamsCount++;

        let string = `
        <div class="form-row my-2">
        <label for="url" class="col-sm-2 col-form-label">Parameter ${addedParamsCount}</label>
        <div class="col-md-4">
          <input type="text" class="form-control" id="parameterkey${addedParamsCount}" placeholder="Enter Parameter ${addedParamsCount} Key">
        </div>
        <div class="col-md-4">
          <input type="text" class="form-control" id="parametervalue${addedParamsCount}" placeholder="Enter Parameter ${addedParamsCount} Value">
        </div>
        <button type="button" id="addParam" class="btn btn-primary deleteParam">-</button>
      </div>
        `

        params.appendChild(getElementFromString(string))

})

let submit = document.getElementById("submit")

submit.addEventListener("click",()=>{
    document.getElementById('responseJsonText').value = 'Please Wait....'

    let requestType = document.querySelector("input[name=requestType]:checked").value
    let contentType = document.querySelector("input[name=contentType]:checked").value
    let url = document.getElementById('urlField').value
    let data = {}
    if(contentType === 'params'){
        for(let i=1;i<=addedParamsCount;i++){
            let key = document.getElementById('parameterkey'+i).value;
            let value = document.getElementById('parametervalue'+i).value
            data[key] = value // {name:"david"}
        }
        console.log(data)
    }else{
        data = document.getElementById('requestJsonText').value
    }
    console.log(data)

    if(requestType === 'POST'){
        fetch(url,{
            method:"POST",
             headers: {
'Content-Type': 'application/json'

        },
        body: JSON.stringify(data)
        })
        .then(res => res.json())
        .then(res => {
             document.getElementById('responseJsonText').value = JSON.stringify(res)
        })
    }else{
        fetch(url,{method:"GET"})
        .then(res => res.json())
        .then(res => {
             document.getElementById('responseJsonText').value = JSON.stringify(res)
        })
    }
})