Seasons of the Year by @AnthonyK - Codewith.it

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

Referenze

<thead>Definisce un gruppo di intestazione all'interno di una tabella.
<h2>Titolo di intestazione di secondo livello
<nav>Definisce un menu di navigazione
<link>Collega il documento corrente con una risorsa esterna
_topApre collegamenti ipertestuali nell'elemento parent assoluto
<tbody>Definisce il contenuto principale di una tabella.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Template prodotti Meguiar

console elements(2)

HTML Schwabisch

esercizio pag. 335

UFFICIALE SITO REGIONI

Esercitazione 2

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>Seasons of the Year</title>

  <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 my-5">

    <!-- Spring Season -->
    <div class="season-container">
      <h3 class="text-center">Spring</h3>
      <div id ="sp" class="row spring">

        <!-- JavaScript Target -->

      </div>
    </div>

    <!-- Summer Season -->
    <div class="season-container">
      <h3 class="text-center">Summer</h3>
      <div class="row summer">

        <!-- JavaScript Target -->

      </div>
    </div>

    <!-- Fall Season -->
    <div class="season-container">
      <h3 class="text-center">Fall</h3>
      <div class="row fall">

        <!-- JavaScript Target -->

      </div>
    </div>

    <!-- Winter Season -->
    <div class="season-container">
      <h3 class="text-center">Winter</h3>
      <div class="row winter">

        <!-- JavaScript Target -->

      </div>
    </div>

  </div>


  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
  <script src="script.js"></script>
</body>

</html>

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

.season-container {
	margin-bottom: 30px;
}

.month-card {
	border: 1px solid #ddd;
	border-radius: 5px;
	overflow: hidden;
	margin-bottom: 15px;
}

.month-card img {
	width: 100%;
	height: 150px;
	object-fit: cover;
}

.month-card-body {
	padding: 15px;
	text-align: center;
}

var winter = ["December","January","Feburary"];
var spring =["March","April","May"];
var summer =["June","July","August"];
var fall =["September","October","November"];


var winterImages = ["https://offbeatescapades.com/wp-content/uploads/2021/01/the-best-time-of-the-year-to-visit-new-york-december-in-new-york-4-1024x683.jpg","https://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Sneeuw1.jpg/220px-Sneeuw1.jpg","https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ1G5ZO8Vb-deeQ9sFd4xarX1EkxPZd8YiHug&s"];
var springImages = ["https://s7d2.scene7.com/is/image/TWCNews/NYC_Sunny_Roosevelt_Island_Spring_Erick","https://wherearethosemorgans.com/wp-content/uploads/2022/11/New-York-City-In-April-Weather-Rainy.jpg.optimal.jpg","https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQE5KY6mOKWRTaoAhDRIVSNcIQLp9OKzcPa_w&s"];
var summerImages = ["https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTR7hzHiXllxiPfB-hOrJ60tF362vW_-2JxrA&s","https://media.9news.com/assets/KUSA/images/db3efa77-f44a-48a4-bea4-1622db2e67db/db3efa77-f44a-48a4-bea4-1622db2e67db_1920x1080.jpg","https://www.weather2travel.com/images_blog/weather-in-august-in-mediterranean-sea.jpg"];
var fallImages = ["https://cdn.kimkim.com/files/a/images/9388432bd389bce9ecb148f4e610dee89f73dc00/original-87d4d59096156f96769e056813648fad.jpg","https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ8qx4mXxIa-_yTkL5ZTyqRvr5iAq3gnifPQA&s","https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ-UCEcs0oZyYDSHM9i5WiwNPdoZ-ZfHo1_og&s"];




function displayWinter() {
 const winterSection = document.querySelector('.winter');
  winter.forEach((month, index) => {
    const html = `
      <div class="col-md-4">
        <div class="month-card">
          <img src="${winterImages[index]}" alt="${month}">
          <div class="month-card-body">
            <h5>${month}</h5>
          </div>
        </div>
      </div>
    `;
    winterSection.insertAdjacentHTML('beforeend', html);
  });
}


function displaySpring() {
 const springImg = document.querySelector('.spring');
  spring.forEach((month, index) => {
    const html = `
      <div class="col-md-4">
        <div class="month-card">
          <img src="${springImages[index]}" alt="${month}">
          <div class="month-card-body">
            <h5>${month}</h5>
          </div>
        </div>
      </div>
    `;
    springImg.insertAdjacentHTML('beforeend', html);
  });
}

function displaySummer() {
 const summersec = document.querySelector('.summer');
  summer.forEach((month, index) => {
    const html = `
      <div class="col-md-4">
        <div class="month-card">
          <img src="${summerImages[index]}" alt="${month}">
          <div class="month-card-body">
            <h5>${month}</h5>
          </div>
        </div>
      </div>
    `;
    summersec.insertAdjacentHTML('beforeend', html);
  });
}

function displayFall() {
 const fallball = document.querySelector('.fall');
  fall.forEach((month, index) => {
    const html = `
      <div class="col-md-4">
        <div class="month-card">
          <img src="${fallImages[index]}" alt="${month}">
          <div class="month-card-body">
            <h5>${month}</h5>
          </div>
        </div>
      </div>
    `;
    fallball.insertAdjacentHTML('beforeend', html);
  });
}


function displayAllSeasons() {
	displayWinter();
	 displaySpring();
	 displaySummer();
	displayFall();

}

window.onload = displayAllSeasons;