I'm quite new to Javascript and mock APIs but I have a JSON DB which I'm trying to PATCH from the frontend. In short, I'm creating a 2023 Rugby World Cup sweepstake and I want a user to enter their name and then click submit. Once submitted, the user will be randomly assigned a team. Ideally too I want to make sure there are no duplicates and that if a user tries to enter after all of the 20 teams are allocated, an error will appear on screen.
index.html
<!DOCTYPE html>
<html lang="en">
<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">
<title>2023 Rugby World Cup Sweepstake</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="container mx-auto">
<h1 class="text-center text-4xl text-indigo-400 py-12">2023 Rugby World Cup Sweepstake</h1>
<form class="w-full max-w-sm">
<div class="flex items-center border-b border-teal-500 py-2">
<input class="appearance-none bg-transparent border-none w-full text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none" type="text" placeholder="Jane Doe" aria-label="Full name" required>
<button onclick="addName()" type="submit" class="flex-shrink-0 bg-teal-500 hover:bg-teal-700 border-teal-500 hover:border-teal-700 text-sm border-4 text-white py-1 px-2 rounded" type="button">
Sign Up
</button>
</div>
</form>
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Team</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200" id="tbody">
</tbody>
</table>
</div>
<script src="./index.js"></script>
</body>
</html>
index.js
let tbody = document.getElementById("tbody")
// fetch function
fetch("http://localhost:3000/user")
.then(res => res.json())
.then(json => {
json.map(data => {
console.log(data)
tbody.append(td_fun(data));
})
})
function getRandomNumber(min, max) {
// Generate a random number between min (inclusive) and max (inclusive)
return Math.floor(Math.random() (max - min + 1) + min);
}
function addName(){
var randomNumber = getRandomNumber(1, 20);
fetch("http://localhost:3000/user/"+randomNumber+"", {
method: 'PATCH',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/\njsson'
},
body: JSON.stringify({
'id': randomNumber,
'name': '',
'profile': '',
'team': ''
})
});
}
// create td
function td_fun({ profile, team, name}){
let td = document.createElement('tr');
td.innerHTML = `
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img src="${profile}" class="h-10 w-10 rounded-full" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">
${team}
</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="text-sm text-gray-500">${name}</span>
</td>
`;
return td;
}
db.json
{
"user": [
{
"id": 1,
"name": "",
"profile": "[Unsplash URL placeholder]",
"team": "Ireland"
},
{
"id": 2,
"name": "",
"profile": "[Unsplash URL placeholder]",
"team": "England"
},
{
"id": 3,
"name": "",
"profile": "[Unsplash URL placeholder]",
"team": "Wales"
},
{
"id": 4,
"name": "",
"profile": "[Unsplash URL placeholder]",
"team": "Scotland"
},
{
"id": 5,
"name": "",
"profile": "[Unsplash URL placeholder]",
"team": "France"
},
{
"id": 6,
"name": "",
"profile": "[Unsplash URL placeholder]",
"team": "Italy"
},
{
"id": 7,
"name": "",
"profile": "[Unsplash URL placeholder]",
"team": "USA"
},
{
"id": 8,
"name": "",
"profile": "[Unsplash URL placeholder]",
"team": "New Zealand"
},
{
"id": 9,
"name": "",
"profile": "[Unsplash URL placeholder]",
"team": "Australia"
},
{
"id": 10,
"name": "",
"profile": "[Unsplash URL placeholder]",
"team": "South Africa"
},
{
"id": 11,
"name": "",
"profile": "[Unsplash URL placeholder]",
"team": "Fiji"
},
{
"id": 12,
"name": "",
"profile": "[Unsplash URL placeholder]",
"team": "Chile"
},
{
"id": 13,
"name": "",
"profile": "[Unsplash URL placeholder]": "Japan"
},
{
"id": 14,
"name": "",
"profile": "[Unsplash URL placeholder]",
"team": "Namibia"
},
{
"id": 15,
"name": "",
"profile": "[Unsplash URL placeholder]",
"team": "Argentina"
},
{
"id": 16,
"name": "",
"profile": "[Unsplash URL placeholder]",
"team": "Portugal"
},
{
"id": 17,
"name": "",
"profile": "[Unsplash URL placeholder]",
"team": "Uruguay"
},
{
"id": 18,
"name": "",
"profile": "[Unsplash URL placeholder]",
"team": "Tonga"
},
{
"id": 19,
"name": "",
"profile": "[Unsplash URL placeholder]",
"team": "Georgia"
},
{
"id": 20,
"name": "",
"profile": "[Unsplash URL placeholder]",
"team": "Samoa"
}
]
}
As you can see, I have an addName() function which contains a PATCH request to the endpoint (http://localhost:3000/user/) but when I enter a name and click submit, nothing happens.
The above is a continuation of this tutorial: https://www.youtube.com/watch?v=NM4gB8J1uF4.
Any help would be greatly appreciated.
