63 lines
1.5 KiB
Plaintext
63 lines
1.5 KiB
Plaintext
<playlist-form>
|
|
<form onsubmit={handleSubmit}>
|
|
<label for="playlist-name">Nom de la playlist</label>
|
|
<input type="text" id="playlist-name" name="playlist-name"/>
|
|
|
|
<button>Créer la playlist</button>
|
|
</form>
|
|
|
|
<script>
|
|
this.handleSubmit = async (event) => {
|
|
event.preventDefault();
|
|
|
|
const formData = new FormData(event.target);
|
|
const playlistName = formData.get('playlist-name');
|
|
|
|
try {
|
|
const response = await fetch('https://dwarves.iut-fbleau.fr/~fauvet/api/playlists', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({name: playlistName})
|
|
});
|
|
|
|
if(!response.ok) {
|
|
throw new Error('Erreur lors de la création de la playlist');
|
|
}
|
|
|
|
event.target.reset();
|
|
alert('Playlist créée avec succès !');
|
|
} catch(error) {
|
|
console.error('Erreur : ', error);
|
|
alert('Une erreur est survenue lors de la création de la playlist');
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-width: 300px;
|
|
margin: 20px auto;
|
|
z-index: 15;
|
|
}
|
|
|
|
label, input {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
button {
|
|
padding: 10px;
|
|
background-color: #6EE7B7;
|
|
border: none;
|
|
color: white;
|
|
cursor: pointer;
|
|
}
|
|
|
|
button:hover {
|
|
background-color: #059669;
|
|
}
|
|
</style>
|
|
</playlist-form> |