[Project1~3/정예원] Colors, Hex colors gradient, Random quote generator

[Yeewon]

1. [project1] Colors 과제 설명

Colors

👩‍💻 요구 사항과 구현 내용

1. 버튼 정 가운데 배치

.container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

2. 버튼 클릭하면 배경색이 랜덤으로 변경

document.querySelector('.btn').addEventListener('click', () => {
    const colorCode = '#' + Math.round(Math.random() * 0xffffff).toString(16)
    document.querySelector('.container').style = `background-color: ${colorCode}`
})

랜덤으로 colorCode 를 생성해 background-color 를 바꿔준다.

2. [project2] Hex colors gradient 과제 설명

Hex colors gradient

👩‍💻 요구 사항과 구현 내용

1. 배경 그라데이션
랜덤으로 두가지 색상을 뽑아서 그라데이션을 표현한다.
selectRandomColor : 랜덤으로 색상을 뽑아주는 함수

   const selectRandomColor = () => {
       return '#' + Math.round(Math.random() * 0xffffff).toString(16);
   };

linear-gradient를 사용하여 그라데이션을 표현

    this.render = () => {
        document.querySelector('main').style = `background: linear-gradient(to right, ${hexcode1} , ${hexcode2}`;
    };

2. 글자 색상 변경 애니메이션

h1,
h2 {
    ...
    animation: change 5s infinite alternate;
}

@keyframes change {
    0% {
        color: #ffffff;
    }
    20% {
        color: #cccccc;
    }

    40% {
        color: #999999;
    }
    60% {
        color: #666666;
    }
    80% {
        color: #333333;
    }
    100% {
        color: #ffffff;
    }
}

3. [project3] Random quote generator 과제 설명

Random quote generator

👩‍💻 요구 사항과 구현 내용

1. 배경 그라데이션

background: radial-gradient(circle, #5181b0 200px, #605ea6, #6649a0);

2. 명언 랜덤으로 보여주기
명언 API 사용

[datalater]

예원님~ 코드 잘 보고 갑니다! 되게 깔끔하네요ㅎㅎ

그리구 PR 올려주신 브랜치가 main으로 되어 있어서 개인 브랜치로 바꿔주셔야 할 것 같아요 :)