DAY #15
- 문제
👉 문제 바로가기
Upload: Yes, you can actually drag and drop a file in there. But don't worry, the upload process is faked.
이번 문제는 업로드 폼을 만드는 문제! (가짜)
근데이제 ✨DropDown✨ 기능을 갖추고 있어야 한다.
저 네모 박스 안으로 파일을 드래그 하거나, 클릭해서 (input[type="file"]) 파일을 가져오거나.
둘중 하나의 방법으로 파일명을 끌어와야 한다.
끌어온 후 파일명을 출력해 주어야 하는데! 이제 이건 JS로 만들어야 됨!
- 내가 만든 JS Code
일단 네모 박스에 drop 이벤트가 생겼을 때
const file = event.dataTransfer.files[0];dataTransfer 를 사용하여 파일에 접근한다.
그리고 접근한 파일의 이름을 가져와서 <span id="filename"></span> 에 뿌려준다.
filenameSpan.textContent = file.name;
input[type="file"] 에 change 이벤트가 생겼을 때도 마찬가지로
파일에 접근해서 이름을 가져오면 되는데, 여기서는 target 를 사용했다.
const file = event.target.files[0];
그런데, 둘 다 target 을 사용해서 파일에 접근해도 되지 않나??
해서 chatGPT에 물어 보았다.
그렇다고 합니다. 편의기능은 모든 브라우저에서 항상 제공하는 것이 아니기 때문에
가능한 각 이벤트의 목적에 맞는 속성을 사용하는 것이 좋다고~
이렇게 파일명을 받아 오기 전에!
버튼을 누르면 동작하지 않아야 한다. 그래서 일단 버튼에 disabled 를 걸어주고!
저 두가지 이벤트가 실행 되면? (파일명을 받아 오면) disabled 를 없애주면 된다.
그럼 이제 버튼을 누른 후의 이벤트를 만들어 보자.
- 로딩바가 나와야 함
- 사이클링 이미지가 360도 회전해야함
- 3초 뒤에 이미지가 체크모양✔ 으로 변해야 함
- 동시에 버튼 내용도 'Done' 으로 변해야 함
⭐로딩바!
로딩바는 간단하다.
바를 하나 만들어 놓고 왼쪽으로 100% 이동 시켜놓은 다음, 버튼을 누르면 3초동안 제자리로 이동하게 만들면 로딩바 완성이다.
⭐사이클링 이미지 360도 회전
이것도 간단하다. 버튼을 클릭하면 이미지를 upload.svg 에서 syncing.svg 로 바꾼 다음 .syncing 클래스를 추가하고, 이 클래스에 애니메이션을 주었다.
아, 그리고 버튼 내용도 'Uploading...' 으로 변경.
.syncing {
animation: syncing 3s ease-out;
}
@keyframes syncing {
0% {
transform: translate(-50%,-50%) rotate(0); //translate는 위치조정
opacity: 1;
}
85% {
opacity: 1;
}
100% {
transform: translate(-50%,-50%) rotate(360deg); //translate는 위치조정
opacity: 0;
}
}마지막에 스윽 사라져야 해서 opacity 도 추가함.
3초 동안 빙글 돌고 스윽 사라지는 이미지 완성~
⭐3초 뒤!
3초 뒤에 일어날 이벤트를 만들어 보자!
앞서 3초 동안 로딩바가 채워지고 이미지가 빙글 돈다.
이 이후엔 이미지를 checkmark.svg 로 다시한번 변경하고, 버튼 내용도 'Done' 으로 변경하면 된다.
변경 후 이미지 클래스를 .checkmark 로 변경하고 여기에 다시 애니메이션을 줌.
.checkmark {
opacity: 0;
animation: checkmark 3s ease-out both;
}
@keyframes checkmark {
0% {
opacity: 0;
}
15%, 100% {
opacity: 1;
}
}체크이미지 스윽 하고 나옴 <- 이것을 위해서 opacity 넣어주었다.
.checkmark 에도 넣어준 이유는, 이미지가 변경되면서 한번 뿅! 떳다가 사라지고 다시 스윽 나오길래, 처음부터 0 을 주어서 없애놓았다.
사실 여기까지만 하면 다된것이다😊👏
- 결과물
이번 문제는 CSS 보다는 JS를 사용해서 구현하는 부분이 더 컸던 문제였던 것 같다.
(근데 CSS 챌린지라며! 😭)
아 그리고 문제와 너무 똑같이 디자인 할 필요가 없는 듯 하다..!
너무 똑같게만 만드니 재미도 없고 이런 문제는 색깔? 디자인? 뭐... 내 스타일대로 꾸며봐도 좋겠다는 생각이 들었다.
끝
