Meucci Social by @lion-h - Codewith.it

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

Referenze

_blankApre i collegamenti ipertestuali in una nuova scheda del browser
<address> Definisce una sezione contenente indirizzi, contatti e informazioni
<i>Formatta il testo in corsivo/italico non enfatizzato
<hr>Inserisce una linea orizzontale
<video>Integra e controlla video in una pagina HTML
text/plainDefinisce un metodo di non codifica dei valori di un form

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Costruzione tabella base

La magica storia di Peter Pan_Laura

5/10/24 es.1 - palindromi

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>
  <head>
    <meta charset="UTF-8">
    <title>Meucci Social</title>
  </head>

  <body>
    <div class="container">
      <header>
        <h1>Meucci Social</h1>
      </header>
      <nav>
        <ul>
          <li>Home</li>
          <li>Login</li>
          <li>Register</li>
        </ul>
      </nav>

      <h3>Benvenuto nel mio profilo</h3>

      <div class="profilo">
        <img src="https://lh3.googleusercontent.com/a/ACg8ocJy96qTUQ2A0x6o4MjSZT8nsQaXj4zoPjDz300qyRpX_juGbjU=s288-c-no">
        <br>
        <div class="nome-cognome">Salvatore Crapanzano</div>

        <div class="like-dislike-container">
            <button id="like-button" class="like">Like</button>
            <span id="like-count">0</span>
            <button id="dislike-button" class="dislike">Dislike</button>
            <span id="dislike-count">0</span>
        </div>

      </div>

      <div class="descrizione">
          <p>Questa è la mia prima pagina personale</p>
          <p>Qui potrai trovare informazioni su di me e sulle mie attività</p>
          <p>Se vuoi saperne di più, visita la mia pagine <a href="https://www.google.it" >personale</a></p>
      </div>
    </div>
  </body>
</html>

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: rgb(203, 230, 254);
  padding: 30px;
}

header {
  background-color: rgb(89, 89, 255);
  color: white;
  text-align: center;
  margin: 20px;
  padding: 15px;
  border-radius: 20px;
  box-shadow: 5px 10px 10px rgb(151, 152, 152);
}

nav, ul, li {
  display: inline;
  padding: 0px;
  margin: 15px;
  color: rgb(62, 62, 255);
}

.profilo {
  background-color: white;
  border-radius: 15px;
  margin: auto;
  padding: 20px 20px;
  max-width: 600px;
  text-align: center;
  box-shadow: 5px 10px 10px rgb(151, 152, 152);
}

img {
  border-radius: 50%;
  width: 200px;
  height: 200px;
}

.like {
  background-color: green;
}

.dislike {
  background-color: red;
}

button {
  color: white;
  border-radius: 5px;
  padding: 10px;
  cursor: pointer;
}

.nome-cognome {
  color: blue;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  font-style: bold;
}

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

.descrizione {
  background-color: white;
  border-radius: 10px;
  padding: 15px;
  margin: 30px;
}

a {
  color: blue;
}

document.addEventListener("DOMContentLoaded", function () {
  const likeButton = document.getElementById("like-button");
  const dislikeButton = document.getElementById("dislike-button");
  const likeCount = document.getElementById("like-count");
  const dislikeCount = document.getElementById("dislike-count");

  let likes = 0;
  let dislikes = 0;

  likeButton.addEventListener("click", function () {
    likes++;
    likeCount.textContent = likes;
  });

  dislikeButton.addEventListener("click", function () {
    dislikes++;
    dislikeCount.textContent = dislikes;
  });
});