view: Use HTML template to add recipe steps

This makes the JS function way simpler and removes a duplication of the
step HTML code.

1 files changed, 4 insertions, 7 deletions

diff --git a/view/static/ceres.js b/view/static/ceres.js
index abd5f30..43b8290 100644
--- a/view/static/ceres.js
+++ b/view/static/ceres.js
@@ -87,12 +87,9 @@ function updateRecipe(event) {
 }
 
 function addNewStep() {
-	var newStep = document.createElement("section");
-	newStep.innerHTML = `
-		<textarea rows="4" cols="50" placeholder="Step description"></textarea>
-		<button type="button" onclick="parentNode.remove();">remove</button>
-	`;
+	let template = document.getElementById("recipe-step-template");
+	let steps = document.getElementById("steps");
 
-	var steps = document.querySelector("#steps");
-	steps.appendChild(newStep);
+	let step = template.content.cloneNode(true);
+	steps.appendChild(step);
 }