[코드스테이츠 FE 45기] _2023.04.21

[코드스테이츠 FE 45기] _2023.04.21 _ Day 9

프론트앤드 부트캠프/Day

by 코린’s 2023. 4. 21. 20:38

728x90

오늘은 Day 9

2023년 04월 21일

갑자기 감기가 너무 심해져서 ㅠㅠ 학원 공가를 내고 병원을 갔다.

그래도 과제는 해야지.... 오늘 새로운 페어분과 첫 번째 페어날이었는데

병원으로 인해 페어를 진행하지 못했다 ㅠㅠ

어제 까지는 이정도는 아니었는데 목이랑 콧물이 난장판 ㅠㅠ 이럴 수가

앞으로는 더욱 건강 관리 컨디션 관리에 힘써야지!!

오늘 완성한 과제!!

HTML

<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="style.css">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div class="calculator">

        <!-- 값 확인 디스플레이 영역 -->
        <div class="display">
            <input type="text" id="result" readonly />
        </div>


         <!-- 숫자키 패드 영역 -->
        <div class="button">
            <div class="b1">
                <button onclick="clearResult()" class="ac">AC</button>
                <button onclick="calculate()">=</button>

            </div>

            <!-- 숫자 키 패드 영역 / 각 범위 지정 하단으로 배열 -->

            <div class="b2">
                <button onclick="addToResult(7)">7</button>
                <button onclick="addToResult(8)">8</button>
                <button onclick="addToResult(9)">9</button>
                <button onclick="addToResult('+')">+</button>
            </div>

            <div class="b3">
                <button onclick="addToResult(4)">4</button>
                <button onclick="addToResult(5)">5</button>
                <button onclick="addToResult(6)">6</button>
                <button onclick="addToResult('-')">-</button>
            </div>

            <div class="b4">
                <button onclick="addToResult(1)">1</button>
                <button onclick="addToResult(2)">2</button>
                <button onclick="addToResult(3)">3</button>
                <button onclick="addToResult('*')">&times;</button>
            </div>

            <div class="b5">
                <button onclick="addToResult(0)"class="zero">0</button>
                <button onclick="addToResult('.')">.</button>
                <button onclick="addToResult('/')">&divide;</button>

            </div>

        </div>
    </div>
    <script src="/Users/bagdahae/Desktop/프론트엔드/코드스테이츠/2023.04/계산기/확정/계산기 목업/index.js"></script>
</body>

</html>

CSS

* {
  margin: auto;
  padding: 0px;
}

/* 뒷 배경화면 */

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: url('/Users/bagdahae/Desktop/프론트엔드/코드스테이츠/2023.04/계산기/확정/계산기 목업/이미지/IMG_1920.jpg') no-repeat center fixed;
  background-size: cover;
}


/* 계산기 몸통 */
.calculator {
  width: 400px;
  height: 590px;
  border: 2px solid #ffffff;
  border-radius: 30px;
  background: url('/Users/bagdahae/Desktop/프론트엔드/코드스테이츠/2023.04/계산기/확정/계산기 목업/이미지/IMG_1920.jpg') no-repeat center fixed;
  background-size: cover;
  box-shadow: 
    0 0 20px #fff,
    0 0 30px #fff,
    0 0 40px #fff,
    0 0 60px #ff9,
    0 0 80px #ff9,
    0 0 100px #ff9,
    0 0 150px #ff9;
}

/* 계산기 화면 */

.display {
  border: 2px solid rgb(255, 255, 255);
  text-align: right;
  margin: 20px 20px;
  background-color: rgb(255, 255, 255);
  padding-top: 20%;
  padding-right: 1%;
  font-size: xx-large;
  border-radius: 20px 20px 0px 0px;
}


/* 계산기 숫자패드 연산패드  */

/* 전체 버튼 설정 값 */

button {
  width: 70px;
  height: 70px;
  border-radius: 20px;
  border: 1px solid rgb(255, 253, 253);
  align-items: center;
  box-shadow: 0px 5px 0px 0px #007144;
  color: #fff;
  font-size: x-large;
  background: #00AE68;
  text-align: center;
  margin: 0px 10px;

}


button:hover {
  box-shadow: 0px 0px 0px 0px #007144;
}



/* Class 버튼 설정 값 */

.button {

  padding-bottom: 20px;
  padding-top: 0px;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 0px 0px 20px 20px;
  border: 1px solid rgb(255, 255, 255);
  text-align: center;

}



/* 숫자 패드 버튼 영역 설정 값  */

.b1 {
  display: flex;
  padding-top: 10px;
  

}

.b2 {
  display: flex;
  padding-top: 10px;
}

.b3 {
  display: flex;
  padding-top: 10px;
}

.b4 {
  display: flex;
  padding-top: 10px;
}

.b5 {
  display: flex;
  padding-top: 10px;
}


/* 버튼 각각 class 별 설정값 */

.ac {
  flex-grow: 1;
  /* height: 70px;
  width: 160px; */
  background-color:orange;
  margin: 0px 10px;
  
}

.Enter {
  flex-grow: 1;
  /* height: 70px;
  width: 160px; */
  background-color:orange;
  margin: 0px 10px;
}

.zero {
  /* height: 70px;
  width: 160px; */
  background-color:orange;
  flex-grow: 1;
  margin: 0px 10px;
}



input {
  font-size: xx-large;
  outline: none;
  border: none;
  text-align: right;

}

JS

let result = document.getElementById("result");

function addToResult(value) {
	result.value += value;
}

function clearResult() {
	result.value = "";
}

function backspace() {
	result.value = result.value.slice(0, -1);
}

function calculate() {
	result.value = eval(result.value);
}

728x90

'프론트앤드 부트캠프 > Day' 카테고리의 다른 글

[코드스테이츠 FE 45기] _2023.04.25 _ Day 11 (0)	2023.04.25
[코드스테이츠 FE 45기] _2023.04.24 _ Day 10 (0)	2023.04.24
[코드스테이츠 FE 45기] _2023.04.20 _ Day 8 (0)	2023.04.20
[코드스테이츠 FE 45기] _2023.04.19 _ Day 7 (0)	2023.04.19
[코드스테이츠 FE 45기] _2023.04.18 _ Day 6 (0)	2023.04.18