이번에 첫 팀프로젝트로 개별과제로 만들었던 영화 소개하는 웹에서 더 들어가 상세페이지를 만들어보기로 했다.
우리 조는 조 이름이 IN사이드 아웃이라 영화 인사이드 아웃과 연관시켜 '감정에 따른 영화를 추천'해주는 페이지를 만들기로 하였고,
상세페이지에는 영화내용과 함께 채팅기능, 감정버튼을 눌러서 간단하게 이 영화에 대한 후기를 남길 수있고 즐겨찾기를 눌러 내가 좋아하는 영화에 대해 한번에 몰아서 볼 수 있도록 기능을 구현하기로 했다.
그 중 내가 구현해 내야하는 것은, 클릭한 감정 버튼에 따른 배형의 동그라미 크기 변형이다.
위 사항을 들었을 때 우선 내가 실행해야하는게
1. 버튼을 만든다.
2. 원을 만든다.
3. 반지름 값에 버튼을 누른 값을 넣어서 변동이 가능하도록 한다.
4. 클릭 횟수가 누적되어야하기 때문에 api를 연결해 따로 클릭 횟수를 저장할 수 있도록 해야한다.
라고 생각을 했다.
그래서 우선 버튼 제작에 대해 검색을 해보았는데, 그. 중 직관적으로 버튼을 클릭한 횟수를 볼 수 있도록 하여 나중에 api에 저장했을 때도 제대로 저장이 되었는지 확인하기 편하도록 하였다.
<!DOCTYPE html>
<html>
<body>
<span>Total Click: 0</span>
<button id="btn">버튼</button>
</body>
<script>
let cnt = 0; const button = document.getElementById("btn");
const span = document.querySelector("span");
function clickCounter() {
cnt += 1;
span.innerText = `Total Click: ${cnt}`;
console.log(cnt);
}
button.addEventListener("click", clickCounter);
</script>
</html>
//클릭을 하면 수가 누적이 된다. (html에서 받아들여서 저장은 안됨.)
그 후 원을 그려야하는데 자바스크립트 원 그리기를 검색했었을 때 다들 cnavas를 활용하여 원을 그렸었다.
<canvas id="myCanvas">
</canvas>
<script>
// Canvas 요소 가져오기
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// 원 그리기 함수
function drawCircle(x, y, radius) {
ctx.beginPath();
ctx.arc(x, y, radius, 0, 2 * Math.PI);
ctx.stroke(); // 원 그리기
//ctx.fill(); // 원 채우기 }
// 원의 중심 좌표와 반지름 설정
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 50;
// 원 그리기와 채우기
drawCircle(centerX, centerY, radius);
drawCircle(centerX, centerY, 50);
</script>
이제 원의 크기를 정하는 1. raidus값에 버튼의 결과값을 넣어보았으나.. 실행되지않았다.
2. 기본적은 원 크기를 놓고 점점 크게 만들어야하나 싶어 크기를 변화시키는 함수를 사용해보았으나 실행되지않았다.
스크럼시칸에 canvas를 이용하는 방법말고도 간단하게 원을 구현할 수 있는 방법이 있다하여 우선 원 구현을 그 방법으로 바꿔서 다시 한번 시도 해볼 얘정이다..
'스파르타 (React_6기) 본캠프' 카테고리의 다른 글
| 2024. 08. 05(팀 프로젝트 -3) (0) | 2024.08.06 |
|---|---|
| 2024. 08. 02(팀 프로젝트-2) (0) | 2024.08.05 |
| 24. 07. 31(논리연산자) (0) | 2024.07.31 |
| 2024. 07. 30.(Git 기초특강 2) (0) | 2024.07.30 |
| 2024. 07. 29.(배열) (0) | 2024.07.29 |