Html Practice by @ejeme365 - Codewith.it

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

Referenze

<audio>Il tag <audio> HTML permette di inserire contenuti musicali e suoni nel documento
<h4>Titolo di intestazione di quarto livello
controlsL'attributo controls si usa per visualizzare gli strumenti per la riproduzione dei file audio e video
<link>Collega il documento corrente con una risorsa esterna
<br>Inserisce uno spazio vuoto tra due elementi HTML.
getDefinisce un metodo di invio di dati al server

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Elenchi numerati con HTML

Keep Your Emails on Target with Ma

Esercizi 05/03/2024 es8

Dashboard v1(2)

primo esercizio 26 gennaio

scheda pg scheletro

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>
<!--Intro to CSS -->
<html lang="en">

<head>
  <title> Html Practice </title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <header>
    <h1> Yayy Celebration Time </h1>
    <div>
      <p> This is a demo relating to CSS element selectors and colors

        So i will be demonstrating this in form of a birthday celebration </p>

      <!-- nav links -->
      <nav>
        <ul>
          <li><a href="#"> Home </a></li>
          <li><a href="#"> Contact </a></li>
          <li><a href="#"> Service </a></li>
        </ul>
      </nav>
    </div>
  </header>
  <!--main page -->
  <main>
    <section>
      <header>
        <h3> Happy Birthday John </h3>
      </header>
      <p>
        Thank you all for the birthday wishes I pray may God bless and <br>
guide each of you in jesus name amen
      </p>

      <div class="thanks">
        Wishing you a wonderful birthday filled with love, laughter, and many happy returns! May this special day be
        just the start of an incredible year ahead,
        brimming with opportunities for growth, adventure, and cherished memories. You deserve all the happiness in the
        world, and I hope your birthday is a true celebration of the amazing person you are.
        Surround yourself with loved ones, indulge in your favorite treats, and soak up every moment of joy that comes
      </div>
            
    </section>

    <!-- another section-->
    <section>
      <h3 id="ttb"> Things to bring as a present </h3>
      <ol>
        <li> Any iphone of your choice from <a href="#"> Amazon </a></li>
        <li> Money</li>
        <li> Chocolates </li>
        <li>canon <a href="#"> camera</a> anyone you like </li>
      </ol>
      <p> Thank you hoping to see my gifts </p>
    </section>
    <div>
      <form>
        <label for="fname"> First Name </label> <br><br>
        <input type="text" id="fname" placeholder="First Name" required>
        <br><br>
        <label for="lname"> Last Name </label> <br><br>
        <input type="text" id="lname" placeholder="Last Name" required>

        <br><br>
        <label for="email"> Email </label><br><br>
        <input type="email" id="email" placeholder="Email">
        <p>
          <input type="submit">
          <input type="reset">
        </p>
      </form>
    </div>
  </main>

  <footer>
    <p> &COPY; 2024 Ejeme Ebudonihian </p>
  </footer>
</body>

</html>

body{
  width: 100vw; 
  height: 200vh;
  margin:30px;
}
/* descendant selector */
body header h1{  
  color: gray;
  text-align: center;
  background-color: black;
  padding: 15px;
}

h1:hover{
  color: lightgray; 
}

/* child selectors */
div > p {
  color:red;
  line-height: 2;
  font-size: 20px;
}

nav li > a{
  color:purple;
}

/* id selector */
.thanks{
  background-color: #e9bf80;
  line-height: 2; 
}

h3{
  color:gray;
  text-decoration: underline blue;
}

form input{
 background-color: lightgray;
} 

a{
  text-decoration: none;
}

#ttb{
  background-color: antiquewhite;
}

// Array Method [reduce()]

const numbers = [1, 3, 5, 7, 8, 9];

let result = numbers.reduce((acc, currentValue) => (acc + currentValue));

// console.log(result);

/* find the highest value using the reduce array method*/

// to find the lowest value change sign to '<'

const num = [1, 7, 8, 9, 5, 20];

let answer = num.reduce(function (acc, value) {
  if (value > acc) {
    return value;
  }
  return acc;
});

// console.log(answer); // 20

/* The reduce() method can be used in object */

const person = [
  { name: 'John Doe', age: 32 },
  { name: 'Emma Smith', age: 45 },
  { name: 'Sam Willis', age: 24 },
  { name: 'Ejeme James', age: 21 },
]

const oldestPerson = person.reduce((acc, current) => current.age > acc.age ? current : acc)
console.log(oldestPerson) 

// const print = person.reduce(function(acc, value) {
//   if(value.age > acc.age){
//     return value;
//   }
//   return acc;
// }) 

// console.log(print); 

// with value added to it

const arrNum = [1,2,3,4,10];
const printNum = arrNum.reduce((acc, value) => acc + value, 100);
console.log(printNum); 

/* names.reduce(acc, value) => (acc + value)*/