1

introducir la descripción de la imagen aquíBuenas tardes, les comento: Estoy haciendo una pagina con angular en la cual se ofrecen distintos servicios, estos servicios se muestran en un elemento card cada uno, van a hacer 3 servicios predeterminados pero la idea es que si el usuario quiere agregar mas posteriormente lo pueda hacer, entonces para esto quiero hacer un botón de agregar y que cuando sea clickeado salga un formulario para agregar los datos que se van a mostrar en la tarjeta y posterior a esto dicha tarjeta se agregue al lado de las que ya estaban, pero bueno, por ahora lo del formulario no me interesa. lo que quiero es saber como agregar la tarjeta a partir del boton, la verdad no tengo ni la menor idea de como podria hacer esto ni como buscar documentación acerca de ello. no tengo mucha experiencia en desarrollo web.

Mi codigo html es asi:

<div class="container">

    <div class="box-container">




        <div class="box">
          <div class="icons">
      <i class="fa-solid fa-gear"></i>
          </div>
            <img src="assets\img\balon.png" alt="">
            <h3>Cancha Sintetica</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, commodi?</p>
            <a href="#" class="btn" routerLink="/table">Ver Reservas</a>
        </div>


        <div class="box">
          <div class="icons">
      <i class="fa-solid fa-gear"></i>
          </div>
            <img src="assets\img\balon.png" alt="">
            <h3>Cancha Grama natural</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, commodi?</p>
              <a href="#" class="btn">Ver Reservas</a>
        </div>

        <div class="box">
          <div class="icons">
      <i class="fa-solid fa-gear"></i>
          </div>
            <img src="assets\img\balon.png" alt="">
            <h3>Cancha Multiple</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, commodi?</p>
            <a href="#" class="btn">Ver Reservas</a>



        </div>

        <div class="butAdd">
               <a href="butAgregar" class="btn">Agregar Servicio</a>
         </div>

Css:

.container .box-container{
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap:45px;
    top:-1400px;
}

.container .box-container .box{
    box-shadow: 0 5px 10px rgba(1,0,0,.2);
    border-radius: 15px;
    border: 2px solid #114177;
    background: #fff;
    text-align: center;
    padding:20px 5px;

}

.container .box-container .box img{
    height: 80px;
}

.container .box-container .box h3{
    color:#114177;
    font-size: 22px;
    padding:10px 0;
}

.container .box-container .box p{
    color:#777;
    font-size: 15px;
    line-height: 1.8;
}

.container .box-container .box .btn{
    margin-top: 10px;
    display: inline-block;
    background:#FAB400;
    color:#114177;
    font-size: 17px;
    border-radius: 5px;
    padding: 8px 25px;
}

.container .box-container .box .btn:hover{
    letter-spacing: 1px;
}

.container .box-container .box:hover{
    box-shadow: 0 10px 15px rgba(0,0,0,.3);
    transform: scale(1.03);
}

la idea es que se vayan agregando tarjetas tal cual como las de la imagen, pero pues al debajo de estas y pues con la respectiva información. Muchas gracias de antemano.

2
  • hola podes agregar el css? Commented el 17 sept. 2022 a las 21:59
  • Hola, listo ya lo puse
    – Juanse 97
    Commented el 17 sept. 2022 a las 22:08

1 respuesta 1

1

Lo primero movi el enlace para agregar arriba de todo para que no quede en el medio al agregar una card, y en vez de usar una etiqueta (que sirve para enlaces) uso una de tipo button:

<!DOCTYPE html>
<html lang="es">
<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">
    <link rel="stylesheet" href="normalize.css">
    <script defer src="scripts.js" type="text/javascript"></script>
    <link rel="stylesheet" href="estilos.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="butAdd">
            <button type="button" clbutton type="button"ss="btn">Agregar Servicio</button>
      </div>
        <div class="box-container">
            <div class="box">
              <div class="icons">
          <i class="fa-solid fa-gear"></i>
              </div>
                <img src="balon.png" alt="">
                <h3>Cancha Sintetica</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, commodi?</p>
                <a href="#" class="btn" routerLink="/table">Ver Reservas</a>
            </div>
            <div class="box">
              <div class="icons">
          <i class="fa-solid fa-gear"></i>
              </div>
                <img src="balon.png" alt="">
                <h3>Cancha Grama natural</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, commodi?</p>
                  <a href="#" class="btn">Ver Reservas</a>
            </div>
            <div class="box">
              <div class="icons">
          <i class="fa-solid fa-gear"></i>
              </div>
                <img src="balon.png" alt="">
                <h3>Cancha Multiple</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, commodi?</p>
                <a href="#" class="btn">Ver Reservas</a>
            </div>
        </div>
    </div>
</body>
</html>

y despues usando JS:

const boxcontainer = document.querySelector(".box-container"); // contenedor principal
const addbutton = document.querySelector(".butAdd"); // boton de agregar

function addService(){ // funcion que agrega la card al html usando plantillas literales
    boxcontainer.insertAdjacentHTML(`beforeend`,`
    <div class="box">
        <div class="icons">
        <i class="fa-solid fa-gear"></i>
        </div>
      <img src="balon.png" alt="">
      <h3>click to edit</h3>
      <p>click to edit</p>
      <a href="#" class="btn" routerLink="/table">Ver Reservas</a>
    </div>
    `)
}

function addEditables(){ // funcion que modifica la propiedad "editable" a true a todos los titulos y la descripciones, lo que nos permite modificarlas
    var alltitles = document.querySelectorAll("p") // todos los titulos
    var alldesc = document.querySelectorAll("h3") // todas las descripciones
    alltitles.forEach(title => {
        title.contentEditable = true;
    })
    alldesc.forEach(title => {
        title.contentEditable = true;
    })
}

addEditables(); // agregamos los editables apenas cargar la pagina

addbutton.addEventListener("click",(e) => { // al hacer click en el boton de agregar:
    addService() // agregamos una card  
    addEditables(); // volvemos a setear la propiedad editable a true para que incluya a la nueva card tambien
})

Basicamente es manipulacion del arbol del DOM y uso de eventos, podria hacerse mucho mejor pero es lo basico.

3
  • Funcionaaa!! pero tengo un problema, el css se desaparece completamente, es decir que me pone el card si ningún estilo, no se si se podría arreglar. Y otra preguntica, aunque pues ya estoy abusando mucho de ti, como hago para que eso quede guardado y pues cuando recargue la pagina no se pierda?. Oye, muchas muchas gracias por tomarte el tiempo de escribir todo ese código y además ponerme los comentarios respectivo para entenderlo, enserio gracias!!!!
    – Juanse 97
    Commented el 18 sept. 2022 a las 0:31
  • Ahi puse todo el html para que veas como lo tengo yo. El css es el mismo que pasaste vos no le cambie nada y funciona. En cuanto a tu pregunta si hay muchas formas de que los datos perduren, podes guardarlo en una Base de Datos, en el Almacenamiento Local (Una memoria local de la pagina) o en un archivo de texto plano JSON que es una notacion para los objetos y estructuras de datos de Javascript. Pero en las bases de datos y los archivos JSON ya se trabaja con programacion asincrona, fetch y peticiones, por eso para comenzar lo mas facil es hacerlo con el Local Storage. Commented el 18 sept. 2022 a las 1:41
  • De este modo al cargarse la pagina se llama al almacenamiento local, se cargan los datos y se crea su representacion visual en el DOM con las etiquetas estilos etc. Entonces la pagina seria una interfaz de ese almacenamiento local, reflejando los datos que contiene e idealmente permitie crear, eliminar y modificar las cards y actualizandose el DOM cada vez que hay cambios en el Local Storage. Y si te sirvio la respuesta de arriba la marcas como "util" asi motivas a la gente a resolver dudas como la tuya. Saludos Commented el 18 sept. 2022 a las 1:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.