Html Practice by @ejeme365 - Codewith.it

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

References

<ul>Usato per la creazione di liste non ordinate.
acceptDefinisce e filtra il formato dei file per il tag <input type=file>
srcIndica la provenienza di una risorsa esterna (tramite URL).
mediaSpecifica a quale dispositivo/display/documento è ottimizzata una risorsa.
classDefinisce una o più classi per elemento
relServe a definire la relazione tra il documento e una risorsa.

Users

Log in to search for users

Explore

Find inspiration

esercitazione n. 1

programma di x,y,z

Template prodotti generici

spotify dashboard

JS Oggetti ed eventi es2

JS Istruzioni condizionali es1

JS class value to input

locandiera murgia

console elements

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