I am making calculator where someone can add and remove input fields using JavaScript. I’ve implemented a flexbox layout for the section that contains the input fields and buttons. The current CSS structure places all elements (input fields and buttons) in a column because the parent container is set to flex-direction: column;. The problem is that this makes my buttons to be in a column as well and I want it to be horizontally aligned. I cant wrap the buttons in a div since it will interfere with my javascript.
HTML:
<div class="semester-calc">
<div class="inputfield" id="input-field-1">
<input class="class-name" type="text" placeholder="Class 1">
<input class="grade-val" type="text" placeholder="Grade">
<input class="credit-val" type="text" placeholder="Credits">
</div>
<!-- Additional input fields -->
<button id="add-btn" onclick="add()">Add Class</button>
<button id="remove-btn" onclick="remove()">Remove Class</button>
<button id="clear-btn" onclick="clearClass()">Clear Classes</button>
<button id="calculate-gpa" onclick="calculate()">Calculate!</button>
</div>
CSS:
.semester-calc {
display: flex;
align-items: center;
flex-direction: column;
}
Javascript:
function addClass(){
let container = document.getElementById("input-field-1").parentNode;
let fieldLength = container.getElementsByClassName("inputfield").length;
let inputField = document.getElementById("input-field-1");
let clone = inputField.cloneNode(true);
clone.id = "input-field-" + (fieldLength + 1);
let classNumber = fieldLength + 1;
let inputs = clone.getElementsByTagName("input");
inputs[0].placeholder = "Class "+ classNumber;
inputs[0].value = "";
inputs[1].value = "";
inputs[2].value = "";
let addButton = document.getElementById("add-btn");
container.insertBefore(clone, addButton);
}
Problem: I want the buttons to align horizontally below the input fields but the flexbox makes them align in a column. Putting it in a div seems to interfere with my javascript parent container setup so I dont want to do this. Is there a way I can align the buttons horizontally without altering my javascript or do I have to just redo my addClass function?