Build a React.js Birthday Reminder or Notification Web App in Browser Using HTML5 & Javascript Full Project For Beginners

 

 

 

index.html

 

 

<div id="root"></div>

 

 

style.css

 

 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Menlo, monospace;
}

#root {
  background: lavender;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  background: #fff;
  padding: 32px;
  border-radius: 8px;
  width: 400px;
}

.title {
  margin-bottom: 12px;
}

button {
  background: pink;
  border: none;
  padding: 16px 20px;
  width: 100%;
  margin-top: 16px;
  
  &:focus {
    outline: none;
    cursor: pointer;
  }
}

.person {
  display: flex;
  align-items: center;
  
  & + .person {
    margin-top: 20px;
  }
 
  img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 8px;
  }
  
  p {
    margin-top: 8px;
    color: #777;
  }
}

 

 

script.js

 

 

const data = [
  {
    id: 1,
    name: 'Bertie Yates',
    age: 29,
    image:
      'https://res.cloudinary.com/diqqf3eq2/image/upload/v1595959131/person-2_ipcjws.jpg',
  },
  {
    id: 2,
    name: 'Hester Hogan',
    age: 32,
    image:
      'https://res.cloudinary.com/diqqf3eq2/image/upload/v1595959131/person-3_rxtqvi.jpg',
  },
  {
    id: 3,
    name: 'Larry Little',
    age: 36,
    image:
      'https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883423/person-4_t9nxjt.jpg',
  },
  {
    id: 4,
    name: 'Sean Walsh',
    age: 34,
    image:
      'https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883417/person-3_ipa0mj.jpg',
  },
  {
    id: 5,
    name: 'Lola Gardner',
    age: 29,
    image:
      'https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883334/person-1_rfzshl.jpg',
  },
]

function List({people}) {
  return (
    <>
      {people.map(person => {
        const {id, name, age, image} = person
        return <article key={id} className="person">
          <img src={image} alt={name} />
          <div>
            <h4>{name}</h4>
            <p>{age} years</p>
          </div>
        </article>
      })}
    </>
  )
}

function App() {
  const [people, setPeople] = React.useState(data)
  
  return (
    <main>
      <section className="container">
        <h2 className="title">{people.length} birthdays today</h2>
        <List people={people} />
        
        <button onClick={() => setPeople([])}>
          Clear All
        </button>
      </section>
    </main>
  )
}

ReactDOM.render(<App/>, document.querySelector('#root'))

Leave a Reply