JSFiddle - React, Tailwind, and code Playground

by fullyslick

HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Employees</title>
</head>
<body>
<form action="" method="post" class="js-employee-form">
    <label for="first-name">Name</label>
    <br>
    <input type="text" id="first-name" class="js-employee-form-first-name" placeholder="First Name" required>
    <br>
    <br>
    <label for="surname">Surname</label>
    <br>
    <input type="text" id="surname" class="js-employee-form-surname" placeholder="Surname Name" required>
    <br>
    <br>
    <label for="age">Age</label>
    <br>
    <input type="number" id="age" class="js-employee-form-age" min="0" step="1" required>
    <br>
    <br>
    <label for="position">Position</label>
    <br>
    <input type="text" id="position" class="js-employee-form-position" placeholder="position" required>
    <input type="submit" value="Add Employee">
</form>
<p class="js-employee-display"></p>
<script src="app.js"></script>
</body>
</html>

JavaScript

/**
 * Lesson 5: Functions
 * Task 1
 * URL: https://confluence.ontrq.com/pages/viewpage.action?spaceKey=KB&title=_DRAFT_Basic+level#id-_DRAFT_Basiclevel-Lesson5(Objects)
 *
 * JS Fiddle URL:
 *
 * Create an object with information about employees:
 * Ask a user to enter a data about an employee (Name, Surname, Age, Position)
 * Allow a user to add as many employees as he wants.
 * Print the data about an employee on the screen after each adding.
 */
document.addEventListener('DOMContentLoaded', function() {
    'use strict';

    var form = document.querySelector('.js-employee-form'),
        nameInput = document.querySelector('.js-employee-form-first-name'),
        surnameInput = document.querySelector('.js-employee-form-surname'),
        ageInput = document.querySelector('.js-employee-form-age'),
        positionInput = document.querySelector('.js-employee-form-position'),
        display = document.querySelector('.js-employee-display'),
        formInputs = document.querySelectorAll('input'),
        employeeId = 1,
        employees = {};

    /**
     * Employee constructor
     */
    function Employee(name, surname, age, position) {
        this.name = name;
        this.surname = surname;
        this.age = age;
        this.position = position;
    }

    form.addEventListener('submit', function(event) {
        event.preventDefault();

        employees[employeeId] = new Employee(nameInput.value, surnameInput.value, ageInput.value, positionInput.value);

        employeeId++;

        /**
         * Clear all inputs on submission
         */
        for (var i = 0; i < formInputs.length; i++) {
            if (formInputs[i].type !== 'submit') {
                formInputs[i].value = '';
            }
        }

        displayEmployees();
    });

    function displayEmployees() {

        var displayString = '';

        for (var employee in employees) {
            displayString += employees[employee].name + '\n' +
               ...