Creación de Pantalla "Mis Órdenes" en HTML y CSS

Realizaremos la pantalla “my orders”. Esta le permitirá al usuario ver todas las órdenes de pedidos que efectuó. Como puedes ver en la imagen, es similar a la vista “my order”, por lo que reutilizaremos código.

HTML para mostrar las órdenes de compra

La sección de órdenes contiene la fecha, cantidad total de artículos y monto total de dinero de cada orden solicitada por el usuario. Recuerda que en este momento solo estamos maquetando, luego con JavaScript conseguiremos que los datos sean dinámicos.

La estructura es la siguiente:

<div class="my-order">
    <div class="my-order-container">
      <h1 class="title">My orders</h1>

      <div class="my-order-content">
      
        <div class="order">
          <p>
            <span>03.25.21</span>
            <span>6 articles</span>
          </p>
          <p>$560.00</p>
          <img src="./icons/flechita.svg" alt="arrow">
        </div> 
        
      </div>
    </div>
  </div>

Estilos CSS para crear listas de órdenes pedidas

Como la vista de órdenes es muy similar a la sección “mi orden”, implementaremos los mismos estilos.

Nuestro CSS final se ve así:

.my-order {
      width: 100%;
      height: 100vh;
      display: grid;
      place-items: center;
    }
    .title {
      font-size: var(--lg);
      margin-bottom: 40px;
    }
    .my-order-container {
      display: grid;
      grid-template-rows: auto 1fr auto;
      width: 300px;
    }
    .my-order-content {
      display: flex;
      flex-direction: column;
    }
    .order {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 16px;
      align-items: center;
      margin-bottom: 12px;
    }
    .order p:nth-child(1) {
      display: flex;
      flex-direction: column;
    }
    .order p span:nth-child(1) {
      font-size: var(--md);
      font-weight: bold;
    }
    .order p span:nth-child(2) {
      font-size: var(--sm);
      color: var(--very-light-pink);
    }
    .order p:nth-child(2) {
      text-align: end;
      font-weight: bold;
    }

¿Estoy realmente aprendiendo?

Para responder a la pregunta debemos tener en claro que aprendemos cuando creamos.

Esto es así, ya que construir nos permite:

• Entender de forma más profunda
• Descubrir nuevas ideas
• Imaginar nuevas formas de aplicar lo aprendido
• Desarrollar y fortalecer habilidades
• Entrar en un estado de flujo.

Entonces, ¿buscas maneras diferentes de hacer el código propuesto por la profesora? ¿Trabajas en proyectos propios que te apasionen? Si las respuestas fueron afirmativas, felicidades. ¡Estás realmente aprendiendo!

En caso de que busques mejorar en algún aspecto, o descubrir más sugerencias para impulsar tu aprendizaje; repasa esta clase del curso de estrategias para aprender en línea

---

Contribución creada por: Guadalupe Monge Barale con los aportes de Andres Sanchez