I'd highly appreciate it if you can:
- Spot flaws, especially bad practices and suggest a possible alternative method.
- Spot inefficiencies and suggest how to perform that task efficiently.
- You may review my HTML/CSS as well.
var addRecordFormVisibility = false;
var addRecordForm = document.getElementById('addRecord');
var addRecordFormButton = document.getElementById('submit');
var errors = document.getElementById('errors');
var addRecordFormTrigger = document.getElementById('addRecordFormTrigger');
function prepare() {
addRecordForm.style.display="none";
}
function triggerAddRecordForm() {
if(addRecordFormVisibility === false) {
addRecordForm.style.display="block";
addRecordFormVisibility = true;
} else {
addRecordForm.style.display="none";
addRecordFormVisibility = false;
}
}
function submit(event) {
var userInput = document.getElementById('description').value;
errors.innerHTML = '';
if(userInput.length === 0) {
errors.innerHTML = "Please fill in the form!";
} else {
var listItem = document.createElement('li');
listItem.innerHTML = userInput;
document.getElementById('todoList').appendChild(listItem);
}
event.preventDefault();
}
document.addEventListener("DOMContentLoaded", prepare, false);
addRecordFormButton.addEventListener("click", submit, false);
addRecordFormTrigger.addEventListener("click", triggerAddRecordForm, false);#todoApplication {
width: 800px;
height: 100%;
margin: 0 auto;
background: #EEEEEE;
border: 1px solid #DDDDDD;
border-radius: 5px;
padding: 10px;
}
#errors {
color: red;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<link rel="stylesheet" href="src/style.css">
</head>
<body>
<div id="todoApplication">
<button id="addRecordFormTrigger">Trigger Add Record Form</button>
<div id="errors">
</div>
<form id="addRecord" method="POST">
<input id="description" type="text" name="description" placeholder="Enter the task here">
<button id="submit">Submit</button>
</form>
<ul id="todoList"></ul>
</div>
<script src="src/TodoApp.js"></script>
</body>
</html>
