Review: Arrays by @SoranyiL - Codewith.it

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

Referenze

<nav>Definisce un menu di navigazione
checkedPre-imposta su 'true' il valore di un elemento input checkbox o radio
<body>Tag primario di un documento HTML
<video>Integra e controlla video in una pagina HTML
formenctypeDefinisce il tipo di codifica dei dati di un elemento input
animationDefinisce i parametri dell'animazione di un elemento o selettore

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Esercizio 2 JS Bootstrap e jQuery

FORM iscrizione

textarea select and replace

Page not found - Codewith.it

Countdown fine anno

Aurora Flux — Concept Design

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>Review: Arrays</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">1. Social: Array</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">2. Social: Push</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">3. Social: Unshift</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">4. Social: Pop</h5>
            <p class="card-text">This is the description for item 4. Customize the content to your needs.</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">5. Social: Shift</h5>
            <p class="card-text">Here is the description for item 5. You can add more text here.</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">6. Social: Sort</h5>
            <p class="card-text">This is the description for item 6. Customize as needed.</p>
          </div>
        </div>
      </div>

      <!-- List Item 7 -->
      <div class="col-md-4 mb-4">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">7. Social: Reverse</h5>
            <p class="card-text">This is the description for item 7. Customize as needed.</p>
          </div>
        </div>
      </div>


      <!-- List Item 8 -->
      <div class="col-md-4 mb-4">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">8. Social: Length</h5>
            <p class="card-text">This is the description for item 8. Customize as needed.</p>
          </div>
        </div>
      </div>

      <!-- List Item 9 -->
      <div class="col-md-4 mb-4">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">9. Social: Challenge</h5>
            <p class="card-text">This is the description for item 9. Customize as needed.</p>
          </div>
        </div>
      </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 content = document.querySelectorAll("p.card-text");

var social = ["Instagram", "Facebook", "WhatsApp", "Chrome", "Youtube", "Camera"];

content[0].innerText = "Initial Array: " + social.join(", ");

social.push("Snapchat", "Twitter", "TikTok");
content[1].innerText = "Array after Push: " + social.join(", ");

social.unshift("LinkedIn", "Pinterest", "Reddit");
content[2].innerText = "Array after Unshift: " + social.join(", ");

var lastRemoved = social.pop();
var secondLastRemoved = social.pop();
content[3].innerText = "Array after Pop: " + social.join(", ") + ". The last item removed was: " + secondLastRemoved + " and " + lastRemoved;

var firstRemoved = social.shift();
var secondFirstRemoved = social.shift();
content[4].innerText = "Array after Shift: " + social.join(", ") + ". The first item removed was: " + secondFirstRemoved + " and " + firstRemoved;

social.sort();
content[5].innerText = "Array after Sort: " + social.join(", ");

social.reverse();
content[6].innerText = "Array after Reverse: " + social.join(", ");

content[7].innerText = "Array Length: " + social.length;