HTML, CSS, JavaScript 프로젝트 컬렉션에 오신 것을 환영합니다! 이 블로그 게시물은 제가 만든 다양한 프로젝트에 대한 포괄적인 개요를 제공하고 웹 개발의 다양한 측면을 보여줍니다. 각 프로젝트는 탐색하고 배워야 하는 모든 코드가 포함된 자체 저장소에서 사용할 수 있습니다.

목차

• 소개
• 프로젝트 개요
• 시작하기
• 기여
• 작가

소개

웹 개발자로서 저는 HTML, CSS, JavaScript 기술을 연마하는 데 도움이 되는 다양한 프로젝트에 참여하는 것을 좋아합니다. 간단한 계산기부터 보다 복잡한 애플리케이션에 이르기까지 이러한 프로젝트는 웹 개발의 다양한 기술과 모범 사례를 보여줍니다. 아래에서 선별된 프로젝트 목록을 확인할 수 있으며 각 프로젝트에는 해당 GitHub 저장소에 대한 링크가 포함되어 있습니다.

프로젝트 개요

다음은 제가 작업한 프로젝트의 요약입니다:

1. 아비 기 뉴스

   • 최신 헤드라인을 집계하고 표시하는 뉴스 애플리케이션입니다.
   • 코드 보기

2. 조언 생성기

   • 사용자에게 유용한 팁을 제공하기 위해 무작위 조언을 생성합니다.
   • 코드 보기

3. 나이 계산기

   • 생년월일 입력을 기준으로 나이를 계산하는 도구입니다.
   • 코드 보기

4. 아날로그 시계

   • JavaScript를 사용하여 기능적인 아날로그 시계를 표시합니다.
   • 코드 보기

5. 기사 카드

   • 기사를 보여주기 위한 양식화된 카드 구성 요소입니다.
   • 코드 보기

6. BMI 계산기

   • 사용자 입력을 기반으로 체질량 지수를 계산합니다.
   • 코드 보기

7. 카운트다운 타이머

   • 지정된 날짜와 시간까지 카운트다운하는 타이머입니다.
   • 코드 보기

8. 주사위 굴리기 시뮬레이터

   • 난수 생성기로 주사위 굴리기를 시뮬레이션합니다.
   • 코드 보기

9. 드럼 키트

   • 사용자가 다양한 드럼 사운드를 연주할 수 있는 가상 드럼 키트입니다.
   • 코드 보기

10. FAQ 아코디언

    • 아코디언 스타일의 웹사이트 FAQ 섹션입니다.
    • 코드 보기

11. 플립코인

    • 간단한 동전 뒤집기 시뮬레이션.
    • 코드 보기

12. 요일에 집중

    • 집중적인 UI로 사용자가 일상 업무에 집중할 수 있도록 도와줍니다.
    • 코드 보기

13. 푸디 햄버거

    • 음식 관련 웹사이트를 위한 세련된 햄버거 메뉴입니다.
    • 코드 보기

14. 대출 계산기

    • 사용자 입력을 기준으로 대출 상환액을 계산합니다.
    • 코드 보기

15. 로그인 양식

    • 양식 유효성 검사가 포함된 기본 로그인 양식입니다.
    • 코드 보기

16. 월 달력

    • 특정 달의 달력을 표시합니다.
    • 코드 보기

17. 모기지 계산기

    • 다양한 입력을 기반으로 모기지 지불금을 계산합니다.
    • 코드 보기

18. 뉴스 홈페이지

    • 뉴스 웹사이트의 홈페이지 레이아웃입니다.
    • 코드 보기

19. 뉴스레터 가입 양식

    • 사용자가 뉴스레터를 구독하기 위한 양식입니다.
    • 코드 보기

20. 비밀번호 생성기

    • 사용자 정의 가능한 옵션으로 안전한 비밀번호를 생성합니다.
    • 코드 보기

21. 포모도로 타이머

    • 포모도로 기법을 활용하여 생산성을 높이는 타이머입니다.
    • 코드 보기

22. 프로필 카드

    • 사용자 프로필을 표시하는 카드 구성 요소입니다.
    • 코드 보기

23. QR 코드 생성기

    • 사용자 입력을 기반으로 QR 코드를 생성합니다.
    • 코드 보기

24. 가위바위보

    • 자바스크립트로 구현된 가위바위보 게임입니다.
    • 코드 보기

25. 간단한 계산기

    • 산술 연산을 수행하기 위한 기본 계산기입니다.
    • 코드 보기

26. 스니커즈 전자상거래

    • 제품 목록이 포함된 운동화 전자상거래 페이지입니다.
    • 코드 보기

27. 온도 변환기

    • 섭씨, 화씨, 켈빈 사이의 온도를 변환합니다.
    • 코드 보기

28. 사용후기 슬라이더

    • 사용자 평가를 표시하기 위한 슬라이더 구성요소입니다.
    • 코드 보기

29. 텍스트 음성 변환 생성기

    • Web Speech API를 사용하여 텍스트 입력을 음성 단어로 변환합니다.
    • 코드 보기

30. 틱택토

    • JavaScript로 구현된 고전적인 Tic-Tac-Toe 게임입니다.
    • 코드 보기

31. 팁 계산기

    • 청구서 및 팁 비율을 기준으로 팁 금액을 계산합니다.
    • 코드 보기

32

. 할 일 목록
- 작업 관리를 위한 간단한 할 일 목록 애플리케이션입니다.
- 코드 보기

1. 무게 변환기
   • 다른 단위 사이의 무게를 변환합니다.
   • 코드 보기

시작하기

이러한 프로젝트를 로컬에서 복제하고 실행하려면 다음 단계를 따르세요.

1. 저장소 복제:

   git clone https://github.com/abhishekgurjar-in/html-css-javascript-projects.git

1. 프로젝트 디렉토리로 이동:

   cd 

1. 브라우저에서 프로젝트 열기: 브라우저에서 index.html 파일을 열어 실제 프로젝트를 확인하세요.

기여

이러한 프로젝트에 기여하고 싶다면 다음 지침을 따르세요.

1. 저장소를 포크합니다.
2. 변경 사항에 대한 새 분기를 만듭니다.
3. 변경 사항을 커밋하고 포크된 저장소에 푸시합니다.
4. 변경 사항에 대한 설명이 포함된 풀 요청을 생성하세요.

작가

아비셰크 구자르