Tutorial del proyecto JavaScript de la sección de preguntas y respuestas

Archivos completos del proyecto

Créalo a partir del código fuente

Crea los archivos del proyecto, copia el código y abre el archivo HTML en tu navegador.

1Crea 3 archivos
→
2Copia el código
→
3Ejecuta index.html

Antes de ejecutarlo

Mantén todos los archivos del proyecto juntos en la misma carpeta.

Estructura del proyecto

q-and-a-section/

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Q & A</title>
    <!-- font-awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />

    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
      <section class="questions">
        <!-- questions -->
        <div class="section-center">
          <!-- single question -->
          <article class="question">
            <!-- question title -->
            <div class="question-title">
              <p>do you accept all major credit cards?</p>
              <button type="button" class="question-btn">
                <span class="plus-icon">
                  <i class="far fa-plus-square"></i>
                </span>
                <span class="minus-icon">
                  <i class="far fa-minus-square"></i>
                </span>
              </button>
            </div>
            <!-- question text -->
            <div class="question-text">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est
                dolore illo dolores quia nemo doloribus quaerat, magni numquam
                repellat reprehenderit.
              </p>
            </div>
          </article>
          <!-- end of single question -->
          <!-- single question -->
          <article class="question">
            <!-- question title -->
            <div class="question-title">
              <p>do you suppport local farmers?</p>
              <button type="button" class="question-btn">
                <span class="plus-icon">
                  <i class="far fa-plus-square"></i>
                </span>
                <span class="minus-icon">
                  <i class="far fa-minus-square"></i>
                </span>
              </button>
            </div>
            <!-- question text -->
            <div class="question-text">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est
                dolore illo dolores quia nemo doloribus quaerat, magni numquam
                repellat reprehenderit.
              </p>
            </div>
          </article>
          <!-- end of single question -->
          <!-- single question -->
          <article class="question">
            <!-- question title -->
            <div class="question-title">
              <p>do you use organic ingredients?</p>
              <!-- button -->
              <button type="button" class="question-btn">
                <span class="plus-icon">
                  <i class="far fa-plus-square"></i>
                </span>
                <span class="minus-icon">
                  <i class="far fa-minus-square"></i>
                </span>
              </button>
            </div>
            <!-- question text -->
            <div class="question-text">
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe, obcaecati. Esse maxime doloremque, libero, repellat quae debitis quis illo ab odio vero iste molestias accusantium expedita dolorum ipsam officia nesciunt?.
              </p>
            </div>
          </article>
          <!-- end of single question -->
      </section>
    </main>
    <!-- javascript -->
    <script src="app.js"></script>
  </body>
</html>

Sección de preguntas y respuestas

Sección de preguntas y respuestas

Créalo a partir del código fuente

Practica con proyectos relacionados

Clasificación de emojis

Menú selector de redes sociales

Sección de pestañas

Clasificación de emojis

Menú selector de redes sociales

Sección de pestañas