제곱 피트에서 제곱미터로 변환하는 프로그램이다.
처음에 결과 화면을 보고 단순하게 생각하고 결과만 던져주는것은 어렵지 않았으나
추후 단위를 변경하는것에서 어려움을 느꼈다
라디오 버튼으로 해보려 하다가 셀렉트 박스로 바꾸고
이벤트로 단위변경시 결과값을 변경하려 했다가
다시 입력되는 값부터 단위대로 변경하는 삽질을 연속으로 했다..
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
// 직사각형의 방의 면적을 구하라 공식 m의 제곱 = f의 제곱 * 0.09290304 제곱 피트에서 제곱 미터로 변환
$(document).ready(function(){
//출력문
var res=[];
var value = 1;
var num1,num2, feet,meter,str,metric;
isMeter = false;
const TRANSNUM = 0.09290304;
//피트로 계산할경우 num1,num2 을 그대로 사용
//미터로 계산할경우 num1,num2를 변환하고 계산
//숫자가 입력 될때까지 진행되지 않도록한다.
// 텍스트 입력창에 값이 들어왔을때
// 숫자가 아닐경우 상단에 메시지를 표시하여 준다.
// 숫자일 경우에만 처리를 하도록 한다.
//숫자인지 아닌지 확인하는 함수
$('#bt1').click(() => {
if(isNum()){
num1 = parseInt($('#t1').val());
num2 = parseInt($('#t2').val());
// console.log(num1,num2);
res = [num1,num2];
isMeter = $("select[name=isMeter]").val();
//값이 입력되지 않았을경우
if(isMeter == "") alert('단위를 선택하여 주세요');
if(isMeter ==='feet'){
res[3] = 'feet';
showOnScreen(calc(res));
}else{
res[3] = 'meter';
changeFeetToMeter(res);
showOnScreen(calc(res));
}
}
})
})
function changeFeetToMeter(res){
res[0] = res[0] * 0.3048;
res[1] = res[1] * 0.3048;
return res;
}
function calc(res){
res[2] = res[0] * res[1]; // getFeet(meter, TRANSNUM);
console.log(res);
return res;
}
function showOnScreen(res){
//처리
str = "<h4>";
str += "What is the length of the room in " + res[3] + "? " + res[0] + "<br>" ;
str += "What is the width of the room in " + res[3] + "?" + res[1] + "<br>" ;
str += "You entered dimensions of "+ res[0] + " "+ res[3] + " "+ res[1] + " "+ res[3] + " "+"<br>" ;
str += "The area is " + "<br>";
str += res[2] + " square "+ res[3] + " <br>" ;
// console.log(feet,meter);
//출력
$('#foo').prepend(str);
}
function isNum(){
if(isNaN($('#t1').val()) || isNaN($('#t2').val())){
$('#flash').append('<div>숫자가 아닙니다.</div>')
}else if( $('#t1').val()=="" || $('#t2').val()==""){
$('#flash').append('<div>빈값이 있습니다.</div>')
}else{
$('#flash').empty();
return true;
}
}
// 플래시 메시지
| cs |
보여지는 결과가 매우 만족스럽진 못하지만 우선 원하는대로 동작하는것에 초점을 맞추었다.
기분이 좋지 아니하다.
댓글 없음:
댓글 쓰기