예제로 택한 이유
- 자바스크립트를 익힐 겸 예제 정보를 찾던 중 Pos기기를 구현 하면 어떨까 라는 생각을 하였다 모델은 전에 알바했던 곳의 Pos기를 참고했다.
생각했던 기능
-
메인화면에서 각 table를 선택하면 menu.html로 이동해 메뉴를 선택하여 주문완료를 누르면
메인 화면 각 tableArea에 선택한 메뉴들의 이름만 보이게 한다(구현완료) -
결제 버튼을 만든다.(구현 중)
Main.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>공덕 닭발왕 메뉴판</title>
<style>
#title{
}
button{
background-color: rgb(197, 197, 197);
border: solid 2px grey;
border-radius: 12px;
color: white;
height: 50px;
width: 235px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 10px;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>
<center>
<h1 id="title">Table Select</h1>
<table >
<th> <button type="button" id="Table1" onclick="go_menu(this.id)">Table1</button></th>
<th> <button type="button" id="Table2" onclick="go_menu(this.id)">Table2</button> </th>
<th> <button type="button" id="Table3" onclick="go_menu(this.id)">Table3</button></th>
<tr> <!-- textarea 영역 -->
<td><textarea name="" id="Table1List" cols="30" rows="10" readonly ></textarea></td>
<td><textarea name="" id="Table2List" cols="30" rows="10" readonly ></textarea></td>
<td><textarea name="" id="Table3List" cols="30" rows="10" readonly ></textarea></td>
</tr>
</table>
<table >
<th> <button type="button" id="Table4" onclick="go_menu(this.id)">Table4</button></th>
<th> <button type="button" id="Table5" onclick="go_menu(this.id)">Table5</button> </th>
<th> <button type="button" id="Table6" onclick="go_menu(this.id)">Table6</button></th>
<tr> <!-- textarea 영역 -->
<td><textarea name="" id="Table4List" cols="30" rows="10" readonly ></textarea></td>
<td><textarea name="" id="Table5List" cols="30" rows="10" readonly ></textarea></td>
<td><textarea name="" id="Table6List" cols="30" rows="10" readonly ></textarea></td>
</tr>
</table>
<table >
<th> <button type="button" id="Table7" onclick="go_menu(this.id)">Table7</button></th>
<th> <button type="button" id="Table8" onclick="go_menu(this.id)">Table8</button> </th>
<th> <button type="button" id="Table9" onclick="go_menu(this.id)" >Table9</button></th>
<tr> <!-- textarea 영역 -->
<td><textarea name="" id="Table7List" cols="30" rows="10" readonly ></textarea></td>
<td><textarea name="" id="Table8List" cols="30" rows="10" readonly ></textarea></td>
<td><textarea name="" id="Table9List" cols="30" rows="10" readonly ></textarea></td>
</tr>
</table>
</center>
<script src="Main.js"></script>
</body>
</html>Main.js
// 메뉴를 표시할 textarea 아이디 값을 Menu로 부터 가져온다
const temp = decodeURI(location.href).split("?"); //temp : "Main.html?"+1+"?"+table_area_name+"?"+table_name;
// Menu에서 저장한 list 값을 불러온다.
// temp에 저장된 테이블 이름 가져오기 Table번호_list
const tableAreaId = temp[2];
print_menu();
//menu.html으로 이동한다.
function go_menu(tableId){
const content =document.getElementById(tableId).innerText;
location.href="Menu.html?"+ content;
}
//메뉴 리스트에 있는 내용을 textarea에 저장한다.
function print_menu(){
for(let a = 1; a<=9 ; a++){
let tableArea = document.getElementById("Table"+a+"List");
const outPut = localStorage.getItem("Table"+a);
const menuList = JSON.parse(outPut);
if(menuList !=null){
for (let i=0 ;i<menuList.length ; i++){
console.log("menu name :"+menuList[i].menuName);
tableArea.textContent += (menuList[i].menuName +'\n');
}
}
}
}Menu.html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
textarea{
size: 10px;
}
button{
background-color: rgb(197, 197, 197);
border: solid 2px grey;
border-radius: 12px;
color: white;
height: 50px;
width: 200px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 10px;
margin: 4px 2px;
cursor: pointer;
}
div.view{
border: 1px solid #003458;
height: 700px;
}
div.menu_list {
position: relative;
height: 50px;
width: 30%;
float: left;
box-sizing: border-box;
background: #8977ad;
}
div.right {
height: 500px;
width: 70%;
float: right;
box-sizing: border-box;
background: #ece6cc;
}
h1{
padding: 10px;
}
// 주문완료와 초기화 버튼이 주문 테이블 맨 밑에 고정되게 하였다.
div.footer {
position :absolute;
bottom:0;
padding: 10px;
width:95%;
border: 2px solid #000000;
height: 50px;
}
</style>
<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>메뉴 고르기 판</title>
</head>
<body>
<h1 name="tableName" id="tableName" cols="10" rows="10"> 테이블 이름 </h1>
<div class = "view">
<div class="menu_list" style=" height :100%">
<div class="menuTable" style="overflow:scroll; max-height : 625px; border: 2px solid #000000 ">
<table border="1" width =100% >
<!-- 테이블의 헤더 즉 열의 제목 -->
<th>순번</th>
<th>메뉴</th>
<th>수량</th>
<th>가격</th>
<tbody id="menuTable" >
</tbody>
</table>
</div>
<div class="footer">
<input type="text" id="sum"> 총 가격</input>
<button id="btn_com" style="width: 100px;" onclick="complete()">주문 완료</button>
<button id="btn_reset" style="width: 100px;" onclick="reset()">주문 초기화</button>
</div>
</div>
<div class="Right" >
//버튼 textContext에 이름과가격을 넣음으로서 두개의 정보를 다 사용할 수 있게했다.
<button id="cms" onclick="menu_click(this.id)"> 치즈 무뼈 닭발 셋트,25000</button>
<button id="gms" onclick="menu_click(this.id)"> 직화 무뼈 닭발 셋트,23000</button>
<button id="kds" onclick="menu_click(this.id)"> 국물 닭발 셋트,24000</button>
<button id="gts" onclick="menu_click(this.id)"> 직화 통닭발 셋트,21000</button>
<button id="gos" onclick="menu_click(this.id)"> 직화 오돌뼈 셋트,16000</button>
<button id="cm" onclick="menu_click(this.id)"> 치즈 무뼈 닭발,19000</button>
<button id="gm" onclick="menu_click(this.id)"> 직화 무뼈 닭발,16000</button>
<button id="kd" onclick="menu_click(this.id)"> 국물 닭발,18000</button>
<button id="gt" onclick="menu_click(this.id)"> 직화 통닭발,14000</button>
<button id ="go" onclick="menu_click(this.id)"> 직화 오돌뼈,14000</button>
</div>
</div>
<script src="Menu.js"></script>
</body>
</html>
Menu.js
// table를 id 값으로 불러와준다
const table = document.getElementById("menuTable");
// main에서 클릭한 테이블의 이름을 가져와서 변수에 저장한다.
const temp = location.href.split("?");
const tableName = temp[1];
//누른 테이블의 이름을 적는다
const tableTitle = document.getElementById('tableName');
tableTitle.textContent = tableName;
// 순번을 정하기 위한 order과 총 가격을 저장할 sum , 이 모든 정보를 저장한 객체 menu_list를 만든다.
let order =1;
let sum =0;
const menuList = [];
const totalPriceview = document.getElementById("sum");
// localStorage에 있는 값을 가져와서 안에 값이 있는지 확인
let outPut = localStorage.getItem(tableName); //Table1_menu_list
console.log("db이름 : "+tableName);
if(outPut!=null){
write();
}
function menu_click(menuName){
// (요리 이름, 요리 가격)에서 , 기준으로 나누기
let menu = document.getElementById(menuName).textContent.split(",")
// sum에 가격을 number형으로 만들어서 더하기
sum += Number(menu[1]);
// tabel menu의 table에 열 값 추가
let row = `<tr align="center">
<td>${order}</td>
<td>${menu[0]}</td>
<td>1</td>
<td>${menu[1]}원</td>
</tr>`
table.innerHTML += row;
//menu_list에 값 저장
menuList.push({'order' : order , 'menuName' : menu[0], 'count' : '1', 'price' : menu[1]})
//menu_list 값을 localStorage에 저장
order ++;
totalPriceview.value=sum;
localStorage.setItem(tableName,JSON.stringify(menuList));
}
//주문 초기화 누를시 내용 초기화
function reset(){
let table = document.getElementById("menuTable");
table.innerHTML ="";
totalPriceview.value =0;
sum =0;
localStorage.removeItem(tableName);
}
//주문 완료 버튼 누를 시 안에 내용과 초기화
function complete(){
let tableAreaName =tableName+"List";
console.log("컴플리트 버튼 활성화 됨");
url =encodeURI ="Main.html?"+1+"?"+tableAreaName+"?"+tableName;
location.href=url;
console.log(url);
}
// localStorege에 있는 정보를 메뉴테이블에 쓴다.
function write(){
let outPutList = JSON.parse(outPut);
for(let i=0 ; i<outPutList.length ; i++){
let row = `<tr align="center">
<td>${outPutList[i].order}</td>
<td>${outPutList[i].menuName}</td>
<td>1</td>
<td>${outPutList[i].price}원</td>
</tr>`
table.innerHTML += row;
}
}
자바 공부중
코드 잘보고가요 혹시 공덕 닭발왕 사장님이신가요?? 저 정말단골인데... 만나서반갑네요!