https://github.com/hjinn0813/mbti_test

2023.11.25 내일배움카드 K-디지털 기초역량훈련 실습
https://github.com/hjinn0813/mbti_test

css html javascript

Last synced: about 2 months ago
JSON representation

2023.11.25 내일배움카드 K-디지털 기초역량훈련 실습

• Host: GitHub
• URL: https://github.com/hjinn0813/mbti_test
• Owner: hjinn0813
• Created: 2024-01-30T01:32:11.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2024-07-24T13:01:14.000Z (5 months ago)
• Last Synced: 2024-07-24T14:54:43.917Z (5 months ago)
• Topics: css, html, javascript
• Language: JavaScript
• Homepage: https://mbti-test-hjcho.netlify.app
• Size: 1.31 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# MBTI 테스트 페이지 만들기

2023년 11월 08일~12월 23일까지 내일배움카드를 이용해 온라인으로 수강했던 K-디지털 기초역량훈련 강의 실습과제







## 프로젝트 소개

- **배포주소**: https://mbti-test-hjcho.netlify.app

- **제작기간**: 2023.11.23(목) ~ 11.25(토)

- **사용기술**

	![HTML](https://img.shields.io/badge/HTML-E34F26?style=for-the-badge&logo=html5&logoColor=white)

	![CSS](https://img.shields.io/badge/CSS-1572B6?style=for-the-badge&logo=css3&logoColor=white)

	![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black)

	![Netlify](https://img.shields.io/badge/Netlify-00C7B7?style=for-the-badge&logo=netlify&logoColor=white)

- **제작내용**

	- 10개의 질문에 답변하면 최종결과가 나오는 심리테스트 페이지

   

	- 반응형 웹페이지

   

	- css로 모든 btn에 실제로 눌려지는 느낌의 효과 구현 (transition, transform)

   

	- 질문을 해결할 때마다 progress value가 10%씩 증가

- **비고** : 2개의 favicon과 data.js 파일, images 파일은 실습을 위해 학습처에서 다운로드했고 나머지는 수업을 들으며 직접 작성

## 예시 사진

#### 메인 페이지

![main](https://github.com/hjinn0813/mbti_test/blob/main/mbti-examples/main.png)

#### 질문 페이지

![question](https://github.com/hjinn0813/mbti_test/blob/main/mbti-examples/question.png)

#### 결과 페이지

![result](https://github.com/hjinn0813/mbti_test/blob/main/mbti-examples/result.png)