※ 어플들을 추가로 비치하여 기능을 쭉 추가 예정
※ 2023.06.29 수정1 : ToDoList에서 키패드 enter 입력으로 추가되도록 수정
↓실제 기능 구경
↓ 다운로드
프론트 엔드 프로젝트(MyPhone).zip
0.26MB
※ 주요기능
Date() → 날짜 , 요일 , 시간표시(시간은 인터벌로 실시간갱신으로 정확한 시간 맞춤)
hide() , show() → 상단메뉴 및 어플 클릭시 화면이동을 hide와 show로 구현
전화와 계산기의 숫자표시 → 입력되는 문자를 기존 문자에 합쳐 (+=) 표시
ToDoList → createElement 및 append , appendChlid 활용
→ .checked로 checkbox 선택 확인 및 제거
→ $(".ABC").prop("checked",true/false) 로 일괄 체크 및 해제
Quiz → JSON형태로 질문,보기,정답 미리 저장(질문이 많아진다면 다른방법 생각해야할듯함)
→ 아래처럼 answer값을 abcd로 주고 선택지의 value도 abcd로 줘서 value가 같다면 정답처리
var quizList = [
{question : '1+1',
answer : {
a : "1" ,
b : "2" ,
c : "3" ,
d : "4"
},
correct : 'b'
},
{question : '2+2' ,
answer : {
a : "4" ,
b : "7" ,
c : "11" ,
d : "31"
},
correct : 'a'
}
]
<button id="answer1" value="a" class="quiz_answerList"></button>
<button id="answer2" value="b" class="quiz_answerList"></button>
<button id="answer3" value="c" class="quiz_answerList"></button>
<button id="answer4" value="d" class="quiz_answerList"></button>
Calculator → 키패드입력기능 사용
document.addEventListener('keydown', function (event){ //키패드 입력을 통한 출력
var keypadClick = event.key;
if ((keypadClick >= '0' && keypadClick <= '9' || keypadClick === '/' ||
keypadClick === '+' || keypadClick === '-' || keypadClick === '*' ||
keypadClick === '(' || keypadClick === ')' || keypadClick === '.') &&
(event.code.startsWith('Numpad') || event.code.startsWith('Digit'))) {
displayedNum += keypadClick;
$("#calc_firstScreen").text(displayedNum);
}
if (event.key === 'Escape') { //esc -> 모두지우기
displayedNum = "";
parentheses = 1;
$("#calc_firstScreen").text("");
$("#calc_secondScreen").text("");
}
if (event.key === 'Enter' || event.code === 'NumpadEnter') { // enter -> 결과보기
var result = eval(displayedNum);
$("#calc_secondScreen").text(result);
}
if (event.key === 'Backspace') { // 백스페이스 -> 지우기
displayedNum = displayedNum.slice(0,-1);
$("#calc_firstScreen").text(displayedNum)
}
})
기타 배운것 :
1. 배경색 투명하게 : background-color:transparent;
2. 텍스트 줄바꿈 : word-wrap: break-word;
3. 일정시간 후 작동 : setTimeOut
4. eval() = 괄호안에 계산식을 처리해줌 ex) console.log(eval("1+3")) 결과값 4
5. toFixed() = 괄호안의 숫자까지 소수점 표시
수정1 : 할일 추가 기능을 따로 함수로 뺴고 버튼클릭과 enter키로 모두 작동하도록 수정
function ToDoList(){
$("#addToDoThing").click(function(){ // 할일 추가
addToDoThing()
})
document.addEventListener('keydown', function (event){ //키패드 입력을 통한 출력
if (event.key === 'Enter' || event.code === 'NumpadEnter') { // enter -> 할일추가
addToDoThing()
}
})
}
function addToDoThing(){
var toDoThing = $("#toDoThing").val();
var newToDoThing = document.createElement('div');
newToDoThing.setAttribute('class','toDoListThing')
var newCheck = document.createElement('div');
newCheck.setAttribute('class','toDoList_check')
newCheck.innerHTML='<input type="checkbox" class="toDoList_checkBox">'
var newText = document.createElement('div');
newText.setAttribute('class','toDoList_text');
newText.innerText = toDoThing;
newToDoThing.appendChild(newCheck);
newToDoThing.appendChild(newText);
list_list.append(newToDoThing);
$("#toDoThing").val("");
}