Untitled

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div class="container-container">
    <div class="">
        <div class="button up">up</div>
    </div>
    <div class="container">
        <div class="button left">left</div>
        <div class="button down">down</div>
        <div class="button right">right</div>
    </div>
</div>

<h1 class="target">TEXT</h1>

<style>
    .button {
        border: 1px solid black;
        width: 45px;
        height: 45px;
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: center;
        border-radius: 10px;
        transition: 0.3s all ease;
        cursor: pointer;
        user-select: none;
    }
    .container-container{
        display: flex;
        flex-direction: column;
        align-items: center;
        row-gap: 5px;
    }
    .container{
        display: flex;
        column-gap: 5px;
    }
    .button:hover{
        background-color: orange;
    }
    .button:active{
        background-color: #b98f34;
    }
    .target{
        margin-left: 10px;
        margin-top: 10px;
    }
</style>
<script>
    const target = document.querySelector('.target')
    const up = document.querySelector('.up')
    const left = document.querySelector('.left')
    const right = document.querySelector('.right')
    const down = document.querySelector('.down')

    let marginTop = 0;
    let marginLeft = 0;
    up.addEventListener('click', () => {
        marginTop+=-10;
        target.style.marginTop=marginTop+'px'
    });
    down.addEventListener('click', () => {
        marginTop+=10;
        target.style.marginTop=marginTop+'px'
    });
    right.addEventListener('click', () => {
        marginLeft+=10;
        target.style.marginLeft=marginLeft+'px'
    });
    left.addEventListener('click', () => {
        marginLeft+=-10;
        target.style.marginLeft=marginLeft+'px'
    });

</script>
</body>
</html>`
Editor is loading...