Bootstrap List Grid by @AnthonyK - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

<p>Serve a definire paragrafi di testo
formSpecifica a quale form appartiene un elemento.
valueValore alfanumerico o booleano contenuto in un elemento
getDefinisce un metodo di invio di dati al server
<abbr>Inserisce abbreviazioni e acronimi
animation-directionProprietà CSS per definire la direzione di esecuzione di un'animazione

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

pagina_personale

esercitazione 1

esercizio gatto

GUIDA GALATTICA PER AUTOSTOPPISTI

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap List Grid</title>
  <!-- Include Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

  <div class="container mt-5">
    <div class="row">
      <!-- List Item 1 -->
      <div class="col-md-4 mb-4">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Array: Length</h5>
            <p class="card-text">This is the description for item 1. You can add more details here.</p>
          </div>
        </div>
      </div>

      <!-- List Item 2 -->
      <div class="col-md-4 mb-4">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Array: For-Loop</h5>
            <p class="card-text">This is the description for item 2. Add more information as needed.</p>
          </div>
        </div>
      </div>

      <!-- List Item 3 -->
      <div class="col-md-4 mb-4">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Array: For-Each</h5>
            <p class="card-text">Here is the description for item 3. You can modify this as required.</p>
          </div>
        </div>
      </div>

      <!-- List Item 4 -->
      <div class="col-md-4 mb-4">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Array: For-In</h5>
            <p class="card-text">Here is the description for item 5. You can add more text here.</p>
          </div>
        </div>
      </div>


      <!-- List Item 5 -->
      <div class="col-md-4 mb-4">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Array: Concat</h5>
            <p class="card-text">
              <p class="card-text">Here is the description for item 5. You can add more text here.</p>
            </p>
          </div>
        </div>
      </div>

      <!-- List Item 6 -->
      <div class="col-md-4 mb-4">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Array: Join</h5>
            <p class="card-text">
              <p class="card-text">Here is the description for item 6. You can add more text here.</p>
            </p>
          </div>
        </div>
      </div>


  <!-- Include Bootstrap JS (optional) -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

html {
  height: 100%;
  width: 100%;
}

var context = document.querySelectorAll("p.card-text");
var artists =["Dj Pelzer ", "PrinceFlacco ", "Pl Da P ", "Icejjfish "," Playboi Carti"]; 
var artistNames;
var artistLength;
var genre =["Drill","Hip-pop","Metal","Rap","R&B"];
// 1
function displayArtistLength() {

  context[0].innerText = artists;
  context[0].innerText = artists.length;

}
displayArtistLength();

// 2
function displayArtistForLoop() {
 text="";

  for (let i = 0; i < artists.length; i++) {
    text += artists[i] + "<br>";
  }
  context[1].innerHTML = text;
}
displayArtistForLoop();


// 3
function displayArtistForEach() {
  let text = "";
  artists.forEach(function(value) {
    text += value + "<br>";
  });
  context[2].innerHTML = text;
}
displayArtistForEach();

// 4
function displayArtistForIn() {
  let text2 = "";
  for (let index in artists) {
    text2 += artists[index] + "<br>";
  }
  context[3].innerHTML = text2;
}
displayArtistForIn();

// 5
function displayArtistConcat() {
  let art = artists.concat(genre);
  context[4].innerHTML = art.join(", ");
}
displayArtistConcat();

// 6
function displayArtistJoin() {
  let artistsJoined = artists.join(", ");
  let genreJoined = genre.join(" - ");
  context[6].innerHTML = artistsJoined + "<br>" + genreJoined;
}
displayArtistJoin();