So basically I developed this form with HTML, JS and Bootstrap to add contacts to a backend. It simply shows a form so a user can input some data and it's submitted to an API.
The thing is it doesn't look very neat to me... but then at the same time, I don't really know how to start tackling the refactor, so any tips and reviews are super welcome! :)
The functionality is very straightforward, so I don't think it needs much introduction. And it should be copy-paste-it-works.
<html>
<meta charset="UTF-8">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
</head>
<body>
<div id="error-message" style="position:fixed; z-index:9999; width: 100%; visibility: hidden;">
<div style="padding: 5px;">
<div id="error-alert" class="alert alert-danger">
<button type="button" class="close" data-dismiss="alert" onclick="hideAlert('error-alert');">×</button>
Error: Could not add contact to the addressbook.
</div>
</div>
</div>
<div id="success-message" style="position:fixed; z-index:9999; width: 100%; visibility: hidden;">
<div style="padding: 5px;">
<div id="success-alert" class="alert alert-success">
<button type="button" class="close" data-dismiss="success-alert" onclick="hideAlert('success-alert');">×</button>
Contact created successfully!
</div>
</div>
</div>
<div class="jumbotron">
<h1 class="display-4">Contacts.To</h1>
<p class="lead">A simple addressbook without butterflies or clouds.</p>
</div>
<div class="container">
<div class="row">
<div class="col-md-4 mx-auto">
<div class="card">
<img class="card-img-top">
<div class="card-body">
<h5 class="card-title">Add a contact</h5>
<form onsubmit="return createContact();">
<div class="form-group">
<label for="username">Username:</label>
<input type="username" class="form-control" id="username">
</div>
<div class="form-group">
<label for="name">Name:</label>
<input type="name" class="form-control" id="name">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="navbar navbar-fixed-bottom">Made at night :-) </div>
</body>
<script>
function createContact() {
var opts = {
method: 'POST',
body: JSON.stringify(getContactDTO()),
headers: {
"Content-Type": "application/json"
}
};
fetch('/api/contacts', opts)
.then(function (response) {
showAlert('success-alert');
})
.catch(function () {
showAlert('error-alert');
});
return false;
}
function getContactDTO() {
return {
username: document.getElementById("username").value,
name: document.getElementById("name").value,
email: document.getElementById("email").value
};
}
function hideAlert(id) {
document.getElementById(id).style.visibility = 'hidden';
}
function showAlert(id) {
document.getElementById(id).style.visibility = 'visible';
}
</script>
</html>
