일본인들을 위한 계산기... 뉴머피즘...

"4"를 표시하지 않는 계산기를 만들어 보았다.
"4"단추가 없고 계산 결과도 "4"를 표시하지 않습니다.

Neumorphism

Neumorphism(신인류주의)은 귀엽고 좋아합니다.
DailyUI에서 계산기라는 제목이 나오자 네오모피스m(신인류주의)을 의식적으로 제작한 것이다.
모처럼의 기회라 계산을 시도했다.
https://webdesign-trends.net/entry/11155
세상에는 많은 계산기가 있다.
일본에서 싫어지기 쉬운 '4' 를 표시하지 않는 계산기를 만들어 보았다.

계산기 퍼레이드

https://huzitatuguharu.github.io/japanesecal/

포함 여부 확인 4

배열 제작

계산 결과를 문자열로 변환

2의 문자열을 한 문자로 분할

"4"가 포함된 경우 계산 결과의 표시줄에 오류 표시

AC 버튼 이외의 버튼을 누르지 않음

function fourchek() {

//新しい配列をつくる
  let array = new Array;

//計算結果を文字列に変換
  let num = String(answer);
  
//文字列を1文字ずつ分割
  array = (num).split('');
  
  
  if (array.includes('4')) {
  
    $("#answer").val("");
    answer = "";
    
    $("#answer").val("error!");
    errorflag = true;
    console.log('4 が見つかりました');
    
    $("#clear").val("AC");
    clear();
    return false;
  }
}

// ACボタン以外無効にする
function clear() {
  $(".number").prop("disabled", true);
  $(".kigou").prop("disabled", true);
}

CSS

다음 코드로 새로운 주의를 시도했다.

버튼을 유지할 때 파란색으로 변경

버튼을 눌렀더니 움푹 들어간 느낌

 /* 計算結果表示エリア */
#answer{
  color: #5A88FF;
  font-weight: bold;
  font-size: 36px;
  width: 330px;
  height: 120px;
  text-align: right;
  padding: 16px;
  border-radius:5px;
  margin:  24px 16px;
}

.button {
  width: 60px;
  height: 60px;
  text-align: center;
  cursor: pointer;
  margin: 16px;
  background: linear-gradient(134.17deg, #EEF0F5 4.98%, #E6E9EF 94.88%);
  box-shadow: -12px -12px 20px rgba(255, 255, 255, 0.8),
    10px 10px 20px rgba(166, 180, 200, 0.7);
  border-radius: 40px;
}

 /* ボタンホバー */
.button:hover {
  background: #def1ff;
}

 /* ボタン押したら */
.button:active {
  background: #def1ff;
  box-shadow: inset 11px 11px 22px #d6dadd,
    inset -11px -11px 22px #fcffff;
}

편리한 도구

대단히 고맙다
https://neumorphic.design/

총결산

보기 힘들지만 그래도 귀여워요.
나는 색깔 수를 조절하는 것을 좋아한다.
확실히 새로운 모델은 유행하는 디자인이지만 사용성을 고려한 디자인인지 여부는 아직 의논할 필요가 있는 것 같다.