Блог

Я работаю над проектом, в котором студент или школа могут добавлять проекты для поиска сотрудников. Я сделал страницу, на которой пользователь может заполнить подробную информацию, а рядом с полями есть квадрат предварительного просмотра, где пользователь может увидеть, как это будет выглядеть.
После того, как пользователь нажмет на кнопку загрузить, квадрат должен быть виден на главной странице (лента). Все эти квадраты должны быть расположены в виде сетки с 3 или 4 квадратами в строке.

Есть ли способ, которым я могу перенести эти квадраты с заполненными деталями в сетку?
Эти квадраты также необходимо отправить в базу данных, но сейчас в этом нет необходимости.

Страница, на которой пользователь заполняет данные

Домашняя страница, где должна быть сетка(?) и где можно увидеть квадрат

Код для квадрата предварительного просмотра

 <div class="preview">
        <div class="content">
            <h1 id="previewDate"></h1>
            <h1 id="previewTitle"></h1>
            <p id="previewDescription"></p>
        </div>
        <div class="bottom">
            <button>See more</button>
            <p>Quick look</p>
        </div>
        <div class="aside">
            <div class="status">
                <img src="img/green.png" alt="status">
                <p>Open</p>
            </div>
            <div class="persons">
                <img src="img/Icon ionic-md-person.png" alt="persons">
                <p id="previewPersons"></p>
                <p>/</p>
                <p id="previewPersons2"></p>
            </div>
            <div class="hours">
                <img src="img/Icon awesome-clock.png" alt="time">
                <p id="previewHours"></p>
            </div>
        </div>
    </div>
 

Вы говорите: «Эти квадраты также нужно отправить в базу данных, но сейчас в этом нет необходимости»., но это так.

Нормальный поток был бы:

• пользователь делает что-то, чтобы создать «вещь»
• «вещь» загружается на сервер
• на другой странице «вещь» извлекается с сервера и отображается

Теперь, если вы создаете SPA (одностраничное приложение), вы можете сохранить «вещь» в памяти и показать ее на другой странице при переключении. Перечисленные вами теги не указывают на то, что вы используете СПА-центр (распространенными фреймворками СПА могут быть такие вещи, как React, Vue, Angular или Lit/Polymer, хотя это не строго СПА-центры, и вам также не нужна структура для СПА-салона).

Аналогично, вы также можете хранить «вещь» в localStorage, IndexedDB или файле cookie.

Хотя все это будет доступно только для просмотра на компьютере пользователя, и, вероятно, не совсем то, что вы хотите, и, вероятно, даже сложнее, чем просто загрузить его на сервер.

Скорее всего, вы поставите телегу впереди лошади на этом, и то, что она будет загружена на сервер первой, сделает вашу жизнь менее сложной.