Social by @lion-h - Codewith.it

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

Referenze

<caption>Definisce didascalie all'interno di una tabella
<q>Indica una parte di testo come citazione breve
classDefinisce una o più classi per elemento
<h5>Titolo di intestazione di quinto livello
<canvas>Tag per disegnare grafica dinamica su pagine web.
heightDetermina l'altezza di un elemento HTML in pixel

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Ximena\'s hamburger

esercitazione 1

Esercizio (02/02/2024)

codice theo fatto na merda

Basketball Legends

Weather Forecast

Piano Distruzione pianeta terra

Review of Functions I

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.

<html>
  <body>
    <div class="container">
      <h1>Mario Rossi</h1>
      <div id="picture">
        <img src="https://www.giulianofroio.com/wp-content/uploads/2021/05/book-fotografico-uomo-IMG_7813.jpg">
      </div>
      <div class="counter">
        <p id="counterLike">0</p>
        <p id="counterDislike">0</p>
      </div>
      <button id="like">Like</button>
      <button id="dislike">Dislike</button>
    </div>
  </body>
</html>

body {
  text-align: center;
  background-color: lightskyblue;
 background: radial-gradient(circle, #85d8ce, #085078);


#like {
  width: 100px;
  height: 40px;
  border-radius: 20px;
  border: none;
  background-color: rgb(51, 51, 181);
  color: white;
}

#dislike {
  width: 100px;
  height: 40px;
  border-radius: 20px;
  border: none;
  background-color: rgb(180, 0, 0);
  color: white;
}

button:hover {
  background-color: rgb(193, 49, 49);
}

img {
  width: 200px; /* Larghezza dell'immagine */
  height: 200px; /* Altezza dell'immagine */
  object-fit: cover; /* Adatta l'immagine al quadrato mantenendo il contenuto */
  border-radius: 50%; /* Optional: aggiunge bordi arrotondati */
  box-shadow: 10px 10px 10px rgb(83, 82, 82);
  transition: transform 0.3s ease; /* Effetto graduale */
}

img:hover {
  transform: scale(1.1); /* Ingrandisce l'immagine del 20% */
}

.container {
  background-color: rgb(134, 134, 134);
  padding: 20px;
  width: 400px;
  margin: auto;
  border-radius: 40px;
  box-shadow: 20px 20px 20px rgb(103, 102, 102);
}

p {
  display: inline-block;
}

.counter {
  display: flex;
  gap: 80px;
  justify-content: center;
  font-size: 40px;
  font-weight: 700;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  color: aliceblue;
}

#counterLike {
  color: rgb(51, 51, 181);
}

#counterDislike {
  color: rgb(193, 49, 49);
}

#like:hover {
  background-color: rgb(33, 33, 158);
  transform: scale(1.05); /* Ingrandisce l'immagine del 20% */
}

#dislike:hover {
  background-color: rgb(162, 31, 31);
  transform: scale(1.05); /* Ingrandisce l'immagine del 20% */
}

h1 {
  color: white;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  border: 2px solid rgb(86, 86, 86);
  background-color: rgb(101, 101, 101);
  border-radius: 10px;
}

const counterLikeDisplay = document.getElementById('counterLike');
const counterDislikeDisplay = document.getElementById('counterDislike');
const likeButton = document.getElementById('like');
const dislikeButton = document.getElementById('dislike');

let countLike = 0;
let countDislike = 0;

likeButton.onclick = function () {
  countLike++;
  counterLikeDisplay.textContent = countLike;
};

dislikeButton.onclick = function () {
  countDislike++;
  counterDislikeDisplay.textContent = countDislike;
}
/*
dislikeButton.addEventListener('click', () => {
  if (count > 0) {
    count--;
  }
  counterDisplay.textContent = count;
});
*/