Html Practice by @ejeme365 - Codewith.it

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

References

formSpecifica a quale form appartiene un elemento.
<abbr>Inserisce abbreviazioni e acronimi
animationDefinisce i parametri dell'animazione di un elemento o selettore
mutedL'attributo muted viene utilizzato impostare risorse HTML audio e video con volume muto
titleIndica informazioni aggiuntive riguardo un elemento HTML
<div>Crea contenitori generici o sezioni in una pagina

Users

Log in to search for users

Explore

Find inspiration

landing il colibri\\

Orologio Digitale

inserimento immagini in un testo

Test Gaming HTML MEME

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

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