Html Practice by @ejeme365 - Codewith.it

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

References

minImposta il valore numerico o temporale minimo per un elemento input
nameDetermina il nome degli elementi HTML o fornisce dati su un attributo associato.
<embed>Tag per l'incorporamento di contenuti multimediali
<u> Utilizzato definire una parte del contenuto come annotazione non testuale, con una sottolineatura.
postDefinisce un metodo di invio di dati al server
getDefinisce un metodo di invio di dati al server

Users

Log in to search for users

Explore

Find inspiration

benvenuti nella mia scuola

Test Gaming HTML MEME

Un Giorno a Napoli: Itinerario Det

DEMO: Hi-Lo Game

VERIFICA RANZI LEONARDO

Il mio primo sito(2)

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