Meucci Social by @lion-h - Codewith.it

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

Referenze

<address> Definisce una sezione contenente indirizzi, contatti e informazioni
checkedPre-imposta su 'true' il valore di un elemento input checkbox o radio
<label>Mostrare un testo di etichetta per un elemento di input.
<link>Collega il documento corrente con una risorsa esterna
valueValore alfanumerico o booleano contenuto in un elemento
<thead>Definisce un gruppo di intestazione all'interno di una tabella.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

5/10/24 es. 4 - Password

pag. 2 progetto inf

Immagini con didascalia

fibonacci manoel

Esercitazione n. 1

Ricomincio da Zero

INFORMATICA - ESERCIZIO 3

Il mio primo sito(2)

Heads Or Tails Random Tally 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>
  <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;
  });
});