이봐! 동료 Techie's✌, 저는 열정적인 풀스택 웹 개발자인 Manish Raghavan입니다. 그는 동료 Ranjith 및 Rabia와 함께 Masai School 👈 프로젝트 주간을 위해 3일 만에 웹사이트 클론을 만든 방법에 대한 이야기를 공유하는 것을 좋아합니다.

다음 몇 분 동안 저희 팀과 함께 개발한 클론을 안내해 드리겠습니다.

Sparkpeople.com offers nutrition advice, health-and-fitness tools, a highly engaged and supportive community. It also has some pages for tracking the food calories we eat and the weight we need to reduce. In simple words, it's a daily tracker for our personal use.

문제 설명✍

Sparkpeople.com의 완벽한 픽셀 클론 개발

기술 스택

HTML ✔

CSS ✔

자바스크립트 ✔

웹 사이트의 UI 및 개발에 충분할 정도로 멋집니다.

코딩👨‍💻

파일 트리는 index.html, style.css 및 index.js와 같은 일반적인 프런트엔드 구성 요소로 구성됩니다.

root/
├── index.html
├── style.css
└── index.js

설명 💻

첫 번째 단계로 우리 팀에 할당된 웹 사이트를 시각화하여 작업을 분할했습니다. 다음은 코드에서 사용되는 기능입니다.

** LocalStorage** -
웹사이트가 많은 사용자 날짜를 사용하기 때문에 우리는 백엔드와 관련이 있었습니다. 지금은 백엔드로 생각하지 않았습니다. LocalStorage를 사용하여 데이터를 저장하고 로컬 스토리지에서 데이터를 검색할 계획이었습니다.

가치의 사용 -
또한 사용자가 섭취하는 일일 음식 칼로리인 bmi와 같은 필요한 출력을 계산하고 사용자에게 제공하기 위해 사용자가 입력할 데이터가 너무 많이 필요했습니다.
그래서 우리는 로컬 저장소에 저장하는 많은 입력 필드를 만들고 거기에서 데이터를 가져와 출력을 제공합니다.

회전 휠 기능 - 차트 기능을 사용한 회전 휠이 필요한 페이지 중 하나

또한 호버, 모델 블록 등과 같은 일부 css 속성을 사용하여 정적 페이지를 보기 좋게 만들었습니다.

내 코드 기술의 스냅샷 🎞

마무리

이 기사를 즐겼기를 바랍니다. 야심 찬 개발자로서 저는 웹 사이트를 만드는 과정에서 배우고 즐겼습니다. 블로그에 더 많은 글을 계속 게시할 수 있기를 바랍니다. 🙂