vanderleipinto / react-restart

Curso de React Js no B7Web
0 stars 0 forks source link

Exercício: Greetin condicional 1 #23

Closed vanderleipinto closed 7 months ago

vanderleipinto commented 7 months ago

Exercício: Greetin condicional 1

import { peopleList } from '@/data/peopleList'

function Page(){

  const fullTime = new Intl.DateTimeFormat('pt-BR', {
    timeStyle: 'short',
    hour12: false
  }).format(); 

  const now  = new Date();
  let part:string = ''
    if (now.getHours() < 12 ){
      part = 'Bom Dia'
    }else if(now.getHours() >=12 && now.getHours()<= 18){
      part = "Boa Tarde";
    }else{
      part = 'Boa noite';
    }

  return(
    <div className='w-screen h-screen flex flex-col justify-center items-center text-white
    bg-gradient-to-r from-sky-500 to-indigo-500'>
      <div className='text-9xl'></div>
      <div className="text-5xl font-bold"></div>

      {/* <p>{fullTime}</p> */}
      <p>{String(now.getHours()).padStart(2, '0')}:{String(now.getMinutes()).padStart(2, '0')}</p>

      <p>{part}</p>

    </div> 
  )
}

export default Page; 

Exercício: Greetin condicional 2

import { peopleList } from '@/data/peopleList'

function Page(){

  const fullTime = new Intl.DateTimeFormat('pt-BR', {
    timeStyle: 'short',
    hour12: false
  }).format(); 

  const hour  = new Date().getHours();  

  return(
    <div className='w-screen h-screen flex flex-col justify-center items-center text-white
    bg-gradient-to-r from-sky-500 to-indigo-500'>
      <div className='text-9xl'></div>
      <div className="text-5xl font-bold"></div>

      <div className='text-9xl'>{fullTime}</div>
      <div className='text-5xl font-bold'>
        {hour >= 0 &&  hour < 12 && 'Bom dia 😃'}  
        {hour >= 12 && hour < 18 && 'Boa tarde 🤓'}  
        {hour >= 23 && hour <= 23 && 'Boa noite 😴'}  

      </div>      
    </div> 
  )
}
export default Page;