JSFiddle - React, Tailwind, and code Playground

by novikov433

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Data-consuming SPA</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='2.css'>
</head>
<body>
    <input id="name"/>
    <input id="city"/>
    <button id="start">старт</button>

    <div id="results"></div>
</body>
<script src='2.js'></script>
</html>

JavaScript

function loadData(name, city) {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', `https://jobs.github.com/positions.json?description=${name}&location=${city}`, true);
    xhr.send(null);
    xhr.onload = () => {
        const result = JSON.parse(xhr.responseText);
        console.log(result);
        renderResults(result);
    }
}


function initApp() {
    const btn = document.getElementById('start');
    btn.addEventListener('click', function(){
        const name = document.getElementById('name').value;
        const city = document.getElementById('city').value;
        loadData(name, city);
    })
}