Seasons of the Year by @AnthonyK - Codewith.it

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

References

<i>Formatta il testo in corsivo/italico non enfatizzato
<caption>Definisce didascalie all'interno di una tabella
crossoriginGestisce richieste tra documenti provenienti da origini differenti.
downloadConsente di scaricare file al click di collegamento ipertestuale.
<datalist>Crea una lista di opzioni pre-definite ed editabili per elementi di input
animation-directionProprietà CSS per definire la direzione di esecuzione di un'animazione

Users

Log in to search for users

Explore

Find inspiration

5/10/24 es. 6 - letterainform

esercizio 1.1-1.6

CheatBlox | PayBack HUB

Le meraviglie d\\\\

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!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;