<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.scss">
<title>Film Finder</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<h1>Film Finder</h1>
<form action="" id="searchForm">
<input type="text" placeholder="Find your film..." name="query">
<button id="searchBtn">Search</button>
</form>
<ul class="film-list"></ul>
<script src="script.js"></script>
</body>
JAVASCRIPT
const form = document.querySelector('#searchForm');
form.addEventListener('submit', async function (e) {
e.preventDefault();
const userInput = form.elements.query.value;
const res = await axios.get(`https://swapi.dev/api/${userInput}`);
const list = document.createElement('LI');
list.src = res.data.results;
document.body.append(list);
});
I keep getting this error in the console: script.js:9 Uncaught (in promise) o {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}
So the user input is actually being grabbed fine here. If you add the following log and submit the form you'll see the input in the console:
...
const userInput = form.elements.query.value;
console.log(userInput);
The key problem is how you're building the API query. If you read the SWAPI docs (scroll to the section called searching) you'll see how to build the query URL if you are looking for people for example. Essentially you've got the URL is built in the following way rootUrl + resource + your search query.
So you just need to tweak your API request to the following (if you were searching for people):
...
const res = await axios.get(`https://swapi.dev/api/people/?search=${userInput}`);
Everything else is spot on. API docs are not always super clear so best advice is to just call some endpoints away from the HTML first and see what you get back. Just hardcode a search string and log the result. If you get an error or data you didn't expect go back to the docs and then rinse & repeat.