Bootstrap List Grid by @AnthonyK - Codewith.it

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

Referenze

text/plainDefinisce un metodo di non codifica dei valori di un form
sizeDetermina le dimensioni dell'elemento in base al valore contenuto
crossoriginGestisce richieste tra documenti provenienti da origini differenti.
forSpecifica a quale id è associato l'elemento in cui è dichiarato.
heightDetermina l'altezza di un elemento HTML in pixel
<datalist>Crea una lista di opzioni pre-definite ed editabili per elementi di input

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Esercitazione 3

Bootstrap List Grid

prototipo di form tag

esercizio:sito web

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 artistNames;
var artistLength;

// 1
function displayArtistLength() {
  var artists =["Dj Pelzer ", "PrinceFlacco ", "Pl Da P ", "Icejjfish "," Playboi Carti"]; 
  context[0].innerText = artists;
  context[0].innerText = artists.length;

}
displayArtistLength();

// 2
function displayArtistForLoop() {
   
  let text = "";
  for (let i = 0; i < artist.length; i++) {
    text += artists[i] + "<br>";
  }

  }
  displayArtistForLoop();





// 3
function displayArtistForEach() {


}
displayArtistForEach();


// 4
function displayArtistForIn() {


}
displayArtistForIn();


// 5
function displayArtistConcat() {


}
displayArtistConcat();



// 6
function displayArtistJoin() {




}
displayArtistJoin();