'How to move <div> contents down when list is expanding through JavaScript commands

I am building a todo list website and I have written JS code to add todo items. I want the div containing the input field and buttons to move down when there are so many todo items that they will overlap with those elements. So when there are many items I still want to allow adding even more items (unlimited) while keeping the site clean and avoiding the todo list items overlapping the other elements on the page. How do I style that?

function addListItem() {
    let todolist = document.getElementById("todolist");
    let input = document.querySelector("input[type=text]").value;
    let li = document.createElement("li");
    let node = document.createTextNode(input);
    li.appendChild(node);
    todolist.appendChild(li);

    let btn = document.getElementById("btn");
    btn.addEventListener("click", function handleClick(event) {
        event.preventDefault();
        document.getElementById("item-enter").value = '';
    });

}

document.getElementById("item-enter").onkeydown = function(event) {
    if (event.key === "Enter") {
        addListItem();
        event.preventDefault();
        document.getElementById("item-enter").value = '';
    }
}
h1 {
    font-family: Arial;
    text-align: center;
    font-weight: bold;
}

button, input {
    font-family: Arial;
    font-weight: bold;
    border-width: 3px;
    border-style: solid;
    border-radius: 5px;
    border-color: black;
    padding: 5px;
    margin-left: 8px;
    margin-right: 8px;
    text-align: center;
    margin-top: 10px;
}

p, li {
    font-family: Arial;
    text-align: center;
}

.center {
    margin: 0;
    margin-top: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

#clear-div {
    margin-top: 100px;
}

div input {
    width: 100%;
    height: 100%;
    margin-top: 10px;
}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todo App</title>
    <link rel="stylesheet" href="style.css"></link>
</head>
<body>
    <h1>Todo List</h1>
    <div class="center">
        <input type="text" id="item-enter">
        <button onclick="addListItem()" id="btn">Add item</button>
        <p>Press "Add item" or press the enter key to add the item to your todo list</p>
    </div>
    <div>
        <ul id="todolist">

        </ul>

    </div>
    <div class="center" id="clear-div">
        <button>Clear list</button>
    </div>




    <script src="index.js"></script>
</body>
</html>
javascripthtmlcss


Solution 1:[1]

The method getBoundingClientRect() returns a DOMRect object providing information about the size of an element and its position relative to the viewport.

with this method we can understand if two elements are overlapping!

function elementsOverlap(el1, el2) {
  const domRect1 = el1.getBoundingClientRect();
  const domRect2 = el2.getBoundingClientRect();

  return !(
    domRect1.top > domRect2.bottom ||
    domRect1.right < domRect2.left ||
    domRect1.bottom < domRect2.top ||
    domRect1.left > domRect2.right
  );
}

Here is the working code https://codepen.io/ivanOff_is_dead/pen/GRQJNLm

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ivan_OFF

Related Questions