I need to know if this is actually possible

** I have tried a lot of coding solutions for this project, and none seem to do what i want even though some aspects work. I need to know if it is possible and if anyone is willing to collaborate to make it work :pray::pray:

Ok so this is what i am trying to do….

So… the user opens the web page for the first time…. There is a single message that reads ‘please set up your first grid of boxes by pressing here’ … there is a button that they can press. When they press this, a box grid line appears splitting the page horizontally. This line sets the page as two boxes that are both like mini html pages (so further coding can be added later) The line has a button at one end. In the lower box a message appears that says ‘ you can move and line using this button’. When the user presses and holds on the button that is on the line, and moves up and down the line moves with it, changing the size of the boxes Once the user has moved the line say 25% of the current page hight, the message changes to ‘now set up your vertical lines by pressing here’ another button appears. When they press this a vertical line appears in the middle of the the top box. The message moves to the lower left box and changes to ‘press and hold here to move the line’ a button appears at the bottom end of the vertical line. When the user presses on and holds the button they can move the line left and right. Once they move the line say 25% of the the message changes to ‘You can set up as many boxes as you choose and delete them by pressing and holding on the line for 3 seconds and then selecting delete, please experiment ’. Each box should now have the option to add a new line. The user can then add lines to make more boxes or delete lines to merge boxes. If they hold on a line for 3seconds a button appears saying delete next to where they were pressing (holding). When they press delete the line they have selected will be deleted but only in between the nearest intersecting lines. This way they can set up a grid on the screen any way they want . If they do not do anything for 10 seconds, or once they have added, deleted or moved any lines say 15 times a new message appears… ‘you can set your workspace to whatever size you want by dragging either the lines top, bottom, left or right on the edges of your workspace off of the screen. the user can now select the edges of their screen using one of four buttons that appear on these edges but slightly indented from the edge. If the press and hold say the top button the screen if free to scroll upwards and stretches any boxes with it. The same would happen for the bottom, left or right edges of the ‘workspace’

No need to ask for my code as nothing seems to be close. I really just want to be able to make the boxes by adding lines to prove concept for now.
:**

Repl link:

code snippet

I think an easy way to say it is a what i want, what i really really want, is a user friendly web designing platform imbedded in to the page.

This is the closest i have gotten. It creates boxes side by side and has options for each box to be used for different utilities (Notes, Draw, 3D, Browser) i cant seem to get new boxes to be created below (or vertically)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Customizable Home Page</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      height: 100vh;
      font-family: Arial, sans-serif;
      box-sizing: border-box;
    }

    header {
      background-color: #444;
      color: #fff;
      padding: 10px;
      text-align: center;
    }

    nav {
      display: flex;
      justify-content: space-around;
      background-color: #444;
      padding: 10px;
    }

    nav a {
      color: #fff;
      text-decoration: none;
    }

    .grid-box {
      flex: 1;
      display: flex;
      height: calc(100vh - 2 * 10px);
      position: relative;
      align-items: flex-start;
    }

    .vertical-line {
      border-left: 2px solid black;
      height: 100%;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      margin: 0;
      padding: 0;
    }

    .box {
      flex: 1;
      width: 50%;
      border: 1px solid #ccc;
      overflow: auto;
      box-sizing: border-box;
      margin-top: 10px;
      position: relative;
    }

    button {
      position: absolute;
      top: 10px;
      right: 10px;
      padding: 10px;
      cursor: pointer;
    }

    select {
      padding: 10px;
      margin: 5px;
    }
  </style>
</head>

<body>

  <header>
    <h1>Your Customizable Home Page</h1>
  </header>

  <nav>
    <a href="/index.html">Home</a>
    <a href="#">Option 1</a>
    <a href="#">Option 2</a>
  </nav>

  <div class="grid-box" id="gridBox">
    <!-- Initial single box with the "Split box" button -->
    <div class="box">
      <button onclick="splitBox()">Split Box</button>
      <!-- Your content for the initial box goes here -->
      <select>
        <option value="home">Home</option>
        <option value="textNotes">Text Notes</option>
        <option value="drawing">Drawing</option>
        <option value="3d">3D</option>
        <option value="webBrowser">Web Browser</option>
      </select>
    </div>
  </div>

  <script>
    // Function to split the box
    function splitBox() {
      const gridBox = document.getElementById('gridBox');

      // Create a new box with a dropdown menu
      const newBox = document.createElement('div');
      newBox.className = 'box';

      const splitButton = document.createElement('button');
      splitButton.textContent = 'Split Box';
      splitButton.onclick = splitBox;

      const dropdown = document.createElement('select');
      dropdown.innerHTML = '<option value="home">Home</option>' +
                           '<option value="textNotes">Text Notes</option>' +
                           '<option value="drawing">Drawing</option>' +
                           '<option value="3d">3D</option>' +
                           '<option value="webBrowser">Web Browser</option>';

      newBox.appendChild(splitButton);
      newBox.appendChild(dropdown);

      gridBox.appendChild(newBox);
    }
  </script>

</body>

</html>

Any help would be appreciated

Well, it is possible. The thing is, your job will be a lot easier if you use a js framework (like react, angular, vue, etc).

About resize and draggable elements the interact.js library seems doable. You are using Flexbox which is good too and the rest of the things you can use js event listeners (like holding a line for 3 seconds to delete).

Also, I’d suggest breaking down your project in smaller sessions and tackle them one at a time

3 Likes