1
\$\begingroup\$

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');">&times;</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');">&times;</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>
|improve this question
\$\endgroup\$
  • \$\begingroup\$ Put the Meta tag in the head. It is invalid as per HTML4.01. META tags are only allowed within HEAD (just like, say, TITLE). Browser's will likely never reflect that, but it's technically invalid html. w3.org/TR/REC-html40/sgml/dtd.html#head.misc \$\endgroup\$ – Joshua Klein Aug 13 '18 at 14:35
  • 1
    \$\begingroup\$ This is actually very clean and can't be improved much. As @joshua-klein mentions your HTML is invalid. This is the basic shape it should have: gist.github.com/taniarascia/d0308ff82a1d4344a904 Other than that, style tags are not very maintainable and can be improved by using classes, then changing the classes instead of a style property. (add and remove .hidden class) That way you can also re-use the class elsewhere. \$\endgroup\$ – shotor Aug 16 '18 at 13:00
  • \$\begingroup\$ @shotor So how do people manage modularity when not using frameworks, just plain old HTML and JS? Do they just have super-big documents? \$\endgroup\$ – Javier García Manzano Aug 16 '18 at 13:07
  • \$\begingroup\$ You'll eventually end up with some form of templating. Either by having functions that return html strings, create Dom elements in js, or use something like handlebars. Check out "custom elements" for the modern vanilla js way to do it. Another thing you can do to reduce the amount of code and have more reusablity is to separate your API functions into their own module/file. \$\endgroup\$ – shotor Aug 24 '18 at 16:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.