Html Practice by @ejeme365 - Codewith.it

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

Referenze

application-x-www-form-urlencodedCodifica dei caratteri di un form
animation-delayDetermina il tempo prima dell'avvio di una animazione in secondi (es. 1s) o millisecondi (ms)
<tfoot>Definisce il footer o sezione inferiore di una tabella.
<title>Definisce il titolo della pagina web.
<th>Definisce una cella di intestazione di una tabella HTML.
requiredRende obbligatorio un campo di input

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

alt from filename 2

console elements(2)

Ethical hacking

basi html e tag

Review of Functions

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)*/