Code Monkey home page Code Monkey logo

js-lotto's Introduction

자바스크립트 로또앱를 만들어보자

🙃 미션

마킹된 표시를 긁어 같은 금액이 3개 나오면 해당 금액이 당첨되는 로또 앱을 만들어 보자

1. 사전 정보

  • 복권에는 마킹이 총 6개 되어있다.
  • 복권의 개수는 제한되어 있지 않다.
  • 하나의 복권 안에 같은 금액이 3개를 초과해서 존재할 수 없다.
  • 한 번에 두 개의 금액이 당첨될 수 없다.
  • 복권의 당첨 확률은 다음과 같다.
당첨금 당첨 확률
1억 5%
천만원 10%
백만원 10%
백원 25%
50%

2. UI 작업

  • 메인 화면에는 복권 받기 버튼, 복권 확인, 당첨금 수령 버튼이 있다.
  • 복권 확인 팝업에는 복권 이미지, 한 번에 긁기 버튼이 표시된다.
  • 복권 이미지의 마킹에 hover시 해당 마킹에 강조 효과가 들어간다.
  • 마킹 제거 시 표시되는 금액은 위 테이블에 있는 당첨금 중 하나이다.

2. 기능

  • 복권 받기 버튼 클릭 시 복권 사진이 다운로드된다.
  • 복권 확인 버튼 클릭 시 파일 선택 창이 표시되고, 파일 선택 후에 복권 확인 팝업이 띄워진다.
  • 복권의 마킹 클릭 시 마킹이 지워지고 금액이 표시된다.
  • 한 번에 긁기 클릭 시 복권의 모든 마킹이 지워지고 금액이 표시된다.
  • 당첨금 수령 버튼 클릭 시 파일 선택 창이 표시된다. 복권 이미지 업로드 후에 당첨 여부를 판별한 후, alert로 당첨 여부와 당첨금을 표시한다.

3. 파일 변경

복권의 마킹을 지우면 해당 이미지 파일에도 지워진 마킹이 반영되어 금액이 표시된다.

ex.mp4

(File System Access API 참고)

js-lotto's People

Contributors

pyjun01 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.