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>

1 answer

  • answered 2022-05-04 11:17 Ivan_OFF

    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

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum