휴먼교육센터 개발자과정 68일차

조하영·2022년 11월 10일
0

휴먼교육센터 코딩공부

목록 보기
55/66

추가문제

<!DOCTYPE html>
<html lang="en">

<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>

  <input type="text" id="id" name="uid">
  <input type="button" id="duplextChkid" value="검색">
  <input type="button" id="idsave" value="입력"><br>
  <span id="idinfo"></span>

  <script>
    //      추가문제 ----------------------------------------------------------------------------------
    // 8. 단어를 입력받는 요소, 검색버튼, 입력버튼이 있다.
    //    입력버튼을 누르면 배열에 저장, 검색버튼을 누르면 배열에서 찾아서
    //    html문서 아래에 출력, 검색어가 없으면 찾을 수 없음이라고 출력
    var list = new Array();
    document.getElementById('idsave').onclick = () => {
      var a = document.getElementById('id').value;
      var flag = true;
      const regExp = /^(?=.*[a-zA-z])(?=.*[$`~!@$!%*#^.?&\\(\\)\-_=+]).{2,16}$/;
      if (regExp.test(a)) {
        if (list.length == 0) {
          document.getElementById('idinfo').innerHTML = a + '사용가능/저장완료';
          list.push(a);
        } else {
          for (let i = 0; i < list.length; i++) {
            if (list[i] == a) {
              document.getElementById('idinfo').innerHTML = a + '는 중복된 아이디입니다.';
              flag = false;
            }
          }
          if (flag) {
            document.getElementById('idinfo').innerHTML = a + '사용가능/저장완료';
            list.push(a);
          }
        }
      } else {
        document.getElementById('idinfo').innerHTML = '사용불가능';
      }
    }

    document.getElementById('duplextChkid').onclick = () => {
      var a = document.getElementById('id').value;
      for (let i = 0; i < list.length; i++) {
        if (a.indexOf(list[i]) != -1) {
          document.getElementById('idinfo').innerHTML = list[i];
          break;
        } else {
          document.getElementById('idinfo').innerHTML = a + '(을/를) 찾을 수 없습니다.';
        }
      }
    }
  </script>
</body>

</html>





<!DOCTYPE html>
<html lang="en">

<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>
  <style>
    .delform {
      display: inline;
    }
  </style>
</head>

<body>

  <input type="text" id="id" name="uid">
  <input type="button" id="duplextChkid" value="검색">
  <input type="button" id="idsave" value="입력"><br>
  <span id="idinfo"></span>

  <script>
    //      추가문제 ----------------------------------------------------------------------------------
    // 8. 단어를 입력받는 요소, 검색버튼, 입력버튼이 있다.
    //    입력버튼을 누르면 배열에 저장, 검색버튼을 누르면 배열에서 찾아서
    //    html문서 아래에 출력, 검색어가 없으면 찾을 수 없음이라고 출력
    var list = new Array();

    document.getElementById('idsave').onclick = () => {
      var a = document.getElementById('id').value;
      var flag = true;
      const regExp = /^(?=.*[a-zA-z])(?=.*[$`~!@$!%*#^.?&\\(\\)\-_=+]).{2,16}$/;
      if (regExp.test(a)) {
        if (list.length == 0) {
          document.getElementById('idinfo').innerHTML = a + '사용가능/저장완료';
          list.push(a);
        } else {
          for (let i = 0; i < list.length; i++) {
            if (list[i] == a) {
              document.getElementById('idinfo').innerHTML = a + '는 중복된 아이디입니다.';
              flag = false;
            }
          }
          if (flag) {
            document.getElementById('idinfo').innerHTML = a + '사용가능/저장완료';
            list.push(a);
          }
        }
      } else {
        document.getElementById('idinfo').innerHTML = '사용불가능';
      }
    }

    document.getElementById('duplextChkid').onclick = () => {
      var a = document.getElementById('id').value;
      for (let i = 0; i < list.length; i++) {
        if (a.indexOf(list[i]) != -1) {
          document.getElementById('idinfo').innerHTML = list[i] + "<form class='delform'>" +
            "<input type='hidden' value=" + (i + 1) + " id='no'>" +
            "<input type='button' onclick='delList(no.value)' value='delete'>" +
            " </form>";
          break;
        } else {
          document.getElementById('idinfo').innerHTML = a + '(을/를) 찾을 수 없습니다.';
        }
      }
    }

    function delList(index) {
      alert(list[index - 1] + '(을/를) 삭제하였습니다.');
      list.splice(index - 1, 1);
      idinfo.innerHTML = ''
    }
  </script>
</body>

</html>






<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=,, initial-scale=1.0">
  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <title>Document</title>
</head>

<body>
  <h1 id="h1main">자바스크립트에서 제어하기 </h1>
  <hr>
  <ul>
    <li class="li1"> 첫번재 </li>
    <li class="li1"> 두번재 </li>
    <li class="li1"> 세번재 </li>
  </ul>
  <div>
    <ul>
      <li> 첫번재 -나</li>
      <li> 두번재 -나</li>
      <li> 세번재 -나</li>
    </ul>
  </div>
  - 가 -
  <input type="button" id="gBtn" value="green">
  <input type="button" id="rBtn" value="red">

  <script>
    //   jquery과제  ----------------------------------------------
    // 0. 위 소스에서 가부분에 버튼을 2개 만든다.
    // 1개의 버튼의 value="green"  다른 한개는 value="red" 
    // 해당 되는 버튼을 누르면 나 부분이 버튼의  값으로 설정된 값의 색상으로 변경된다. 
    $('#gBtn').click(() => {
      $('div ul').css('color', 'green');
    })
    $('#rBtn').click(() => {
      $('div ul').css('color', 'red');
    }) 
  </script>

</body>

</html>







<!DOCTYPE html>
<html lang="en">

<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">
  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <title>Document</title>
</head>

<body>

  아이디<input type="text" id="id" name="uid">
  <input type="button" id="duplextChkid" value="검색"><br>
  입력하신 아이디는 <span id="idinfo"></span> 입니다.

  <script>
    //      공통 응용 문제 ----------------------------------------------------------------------------------
    // 1. 
    //  입력하는 단어 위에서 지정한  span 태그에 출력하기..  입력될때 마다 갱신되어 출력된다.
    // 파일명 : t01.html
    $('#duplextChkid').click(() => {
      var a = $('#id').val();
      $('#idinfo').html(a);
    })

  </script>
</body>

</html>








<!DOCTYPE html>
<html lang="en">

<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">
  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <title>Document</title>
</head>

<body>

  아이디<input type="text" id="id" name="uid">
  <input type="button" id="duplextChkid" value="검색"><br>
  입력하신 아이디는 <span id="idinfo"></span> 입니다.

  <script>
    //      공통 응용 문제 ----------------------------------------------------------------------------------

    var badword = ['apple', 'banana'];
    // 2.   입력하는 내용(문장 포함)이  badword단어가 포함되어 있으면 금지어가 포함되었다고 표시, 사용 가능하면 입력된 글이 나오게 한다.
    // 파일명 : t02.html
    var badword = ['apple', 'banana'];
    $('#duplextChkid').click(() => {
      var a = $('#id').val();
      for (let i = 0; i < badword.length; i++) {
        if (a.indexOf(badword[i]) != -1) {
          alert('금지어가 포함되어 있습니다.');
        } else {
          $('#idinfo').html(a);
        }
      }
    }) 

  </script>
</body>

</html>


<!DOCTYPE html>
<html lang="en">

<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">
  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <title>Document</title>
</head>

<body>

  아이디<input type="text" id="id" name="uid">
  <input type="button" id="duplextChkid" value="검색"><br>
  <span id="idinfo"></span>

  <script>
    //      공통 응용 문제 ----------------------------------------------------------------------------------

    // 3. 텍스트에 글자를 입력하고 버튼을 누른다. 버튼은 텍스트가 입력이 되어 있지 않다면 입력하시오라고 알림창을 뜨운다.
    //    입력이 되어 있다면 사용가능이라고 표시한다.
    // 파일명 : t03.html
    $('#duplextChkid').click(() => {
      var a = $('#id').val();
      if (a == '') {
        alert('아이디를 입력하세요')
      } else {
        $('#idinfo').html('사용가능');
      }
    })
  </script>
</body>

</html>







<!DOCTYPE html>
<html lang="en">

<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">
  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <title>Document</title>
</head>

<body>

  아이디<input type="text" id="id" name="uid">
  <input type="button" id="duplextChkid" value="검색"><br>
  <span id="idinfo"></span>

  <script>
    //      공통 응용 문제 ----------------------------------------------------------------------------------
    // 4. 위 3번 문제에서 특수문자 1개 이상 문자 1개 이상을 체크한다... 
    //    위 조건에 맞으면 사용가능 맞지 않으면 사용 불가능이라고 표시한다. <기본 for 사용 가능, 정규화 공부해서 사용가능
    //    현업은 정규화를 사용>
    $('#duplextChkid').click(() => {
      var a = $('#id').val();
      const regExp = /^(?=.*[a-zA-z])(?=.*[$`~!@$!%*#^.?&\\(\\)\-_=+]).{2,16}$/;
      if (regExp.test(a)) {
        $('#idinfo').html('사용가능');
      } else {
        $('#idinfo').html('사용불가능');
      }
    })
  </script>
</body>

</html>

장바구니 구현

<!DOCTYPE html>
<html lang="en">

<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>
  <style>
    body {
      margin: 0;
    }

    * {
      box-sizing: border-box;
    }

    p,
    span {
      margin: 0;
    }

    a {
      color: black;
    }

    img {
      display: block;
      width: 80%;
      height: 80px;
      margin: auto;
    }

    .cart {
      width: 80%;
      margin: auto;
      padding: 30px;
    }

    .cart ul {
      background-color: whitesmoke;
      padding: 30px;
      margin-bottom: 50px;
      border: whitesmoke solid 1px;
      border-radius: 5px;
      font-size: 13px;
      font-weight: 300;
    }

    .cart ul :first-child {
      color: limegreen;
    }

    table {
      border-top: solid 1.5px black;
      border-collapse: collapse;
      width: 100%;
      font-size: 14px;
    }

    thead {
      text-align: center;
      font-weight: bold;
    }

    tbody {
      font-size: 12px;
      text-align: center;
    }

    td {
      padding: 15px 0px;
      border-bottom: 1px solid lightgrey;
    }

    .cart__list__detail :nth-child(3) {
      vertical-align: top;
    }

    .cart__list__detail :nth-child(3) a {
      font-size: 12px;
    }

    .cart__list__detail :nth-child(3) p {
      margin-top: 6px;
      font-weight: bold;
    }

    .cart__list__smartstore {
      font-size: 12px;
      color: gray;
    }

    .cart__list__option {
      vertical-align: top;
      padding: 20px;
    }

    .cart__list__option p {
      margin-bottom: 25px;
      position: relative;
    }

    .cart__list__option p::after {
      content: "";
      width: 90%;
      height: 1px;
      background-color: lightgrey;
      left: 0px;
      top: 25px;
      position: absolute;
    }

    .cart__list__optionbtn {
      background-color: white;
      font-size: 10px;
      border: lightgrey solid 1px;
      padding: 7px;
    }

    .cart__list__detail :nth-child(4),
    .cart__list__detail :nth-child(5),
    .cart__list__detail :nth-child(6) {
      border-left: 2px solid whitesmoke;
    }

    .cart__list__detail :nth-child(5),
    .cart__list__detail :nth-child(6) {
      text-align: center;
    }

    .cart__list__detail :nth-child(5) button {
      background-color: limegreen;
      color: white;
      border: none;
      border-radius: 5px;
      padding: 4px 8px;
      font-size: 12px;
      margin-top: 5px;
    }

    .price {
      font-weight: bold;
    }

    .cart__mainbtns {
      width: 420px;
      height: 200px;
      padding-top: 40px;
      display: block;
      margin: auto;
    }

    .cart__bigorderbtn {
      width: 200px;
      height: 50px;
      font-size: 16px;
      margin: auto;
      border-radius: 5px;
    }

    .cart__bigorderbtn.left {
      background-color: white;
      border: 1px lightgray solid;
    }

    .cart__bigorderbtn.right {
      background-color: limegreen;
      color: white;
      border: none;
    }

    input[type=number]::-webkit-inner-spin-button {
      opacity: 1
    }
  </style>
</head>

<body>
  <section class="cart">
    <div class="cart__information">
      <ul>
        <li>장바구니 상품은 최대 30일간 저장됩니다.</li>
        <li>가격, 옵션 등 정보가 변경된 경우 주문이 불가할 수 있습니다.</li>
        <li>오늘출발 상품은 판매자 설정 시점에 따라 오늘출발 여부가 변경될 수 있으니 주문 시 꼭 다시 확인해 주시기 바랍니다.</li>
      </ul>
    </div>
    <table class="cart__list">
      <form>
        <thead>
          <tr>
            <td><input type="checkbox" id="allChk" onchange="allChk1()"></td>
            <td>상품정보</td>
            <td>옵션</td>
            <td>상품금액</td>
            <td>배송비</td>
          </tr>
          <tr id="hidden">
            <td colspan="5"> 장바구니가 비어있습니다. 물건을 주문해주세요.</td>
          </tr>
        </thead>
        <tbody id="cart__list">
          <!-- <tr class="cart__list__detail">
            <td><input type="checkbox"></td>
            <td> </td>
            <td class="cart__list__option">

            </td>
            <td><span class="price"></span><br>

            </td>
            <td></td>
          </tr>
          <tr class="cart__list__detail">
            <td style="width: 2%;"><input type="checkbox"></td>

            <td style="width: 40%;">
            </td>
            <td class="cart__list__option" style="width: 27%;">

            </td>
            <td style="width: 15%;"><span class="price"></span><br>

            </td>
            <td style="width: 15%;"></td>
          </tr>-->
        </tbody>
        <tfoot>
          <tr>
            <td colspan="2"><input type="checkbox"> <input type="button" class="cart__list__optionbtn"
                onclick="delRow()" value="선택상품삭제">
              <button class="cart__list__optionbtn">선택상품 찜</button>
            </td>
            <td></td>
            <td style="text-align: center;"> 선택상품금액   <span id="allGoods"></span> + 총 배송비   <span id="allDlv"></span></td>
            <td style="text-align: center; color: limegreen; border-left: 1px lightgray solid;"> 주문금액 <span id="allPri"></span></td>
          </tr>
        </tfoot>
      </form>
    </table>

    <table class="buyGoods">
      <form>
        <thead>
          <tr>

            <td>상품정보</td>
            <td>옵션</td>
            <td>상품금액</td>
            <td>배송비</td>
          </tr>

        </thead>
        <tbody>
          <tr class="cart__list__detail">
            <td style="width: 40%;"><input type="text" id="goodsInfo" size="40"></td>
            <td class="cart__list__option" style="width: 27%;">
              상품 주문 수량<input type="number" id="goodsCnt" min="1" value="1" style="width: 40px;">개
            </td>
            <td style="width: 15%;"><span class="price"><input type="text" id="goodsPrice" size="10">원</span>
            </td>
            <td style="width: 15%;"><input type="text" id="goodsDlv" size="10"></td>
          </tr>
        </tbody>
      </form>
    </table>
    <div class="cart__mainbtns">
      <button class="cart__bigorderbtn left">쇼핑 계속하기</button>
      <button class="cart__bigorderbtn right" onclick="addRow()">주문하기</button>
    </div>
  </section>
</body>

<script>

  addRow = () => {
    document.getElementById('hidden').style.display = 'none';
    const table = document.getElementById('cart__list');
    const newRow = table.insertRow(0);
    const newCell0 = newRow.insertCell(0);
    const newCell1 = newRow.insertCell(1);
    const newCell2 = newRow.insertCell(2);
    const newCell3 = newRow.insertCell(3);
    const newCell4 = newRow.insertCell(4);

    newCell0.innerHTML = "<input type='checkbox' onchange = 'showPri()' checked>"
    newCell1.innerText = document.getElementById("goodsInfo").value;
    newCell2.innerHTML = '상품 주문 수량' + '<input type="number" id = "cnt" min="1" value=' + document.getElementById("goodsCnt").value + ' style="width: 40px;">개'
    newCell3.innerText = document.getElementById("goodsPrice").value * document.getElementById("goodsCnt").value;
    newCell4.innerText = document.getElementById("goodsDlv").value;
    document.getElementById('allChk').checked = true;
    showPri();
  }

  delRow = () => {
    const table = document.getElementById('cart__list');
    for (let i = 0; i < table.rows.length; i++) {
      var chkBox = table.rows[i].cells[0].childNodes[0].checked;
      if (chkBox) {
        table.deleteRow(i);
        i--;
      }
    }
    if(table.rows.length == 0){
      document.getElementById('hidden').style.display = '';
    }
    showPri();
  }

  showPri = () => {
    const table = document.getElementById('cart__list');
    var allGoods = 0;
    var allDlv = 0;
    for (let i = 0; i < table.rows.length; i++) {
      var chkBox = table.rows[i].cells[0].childNodes[0].checked;
      if(chkBox){
        var goodsPri = table.rows[i].cells[3].innerText;
      // var goodsCnt = document.getElementById('cnt').value;
      // console.log(goodsCnt);
      allGoods += parseInt(goodsPri, 10)
      // *parseInt(goodsCnt,10)
      }
    }

    for (let i = 0; i < table.rows.length; i++) {
      var chkBox = table.rows[i].cells[0].childNodes[0].checked;
      var dlvPri = table.rows[i].cells[4].innerText;
      if(chkBox){
        if(dlvPri == '무료'){
          dlvPri = 0;
        }
        allDlv += parseInt(dlvPri, 10);
      }
    }

    document.getElementById('allGoods').innerText = allGoods;
    document.getElementById('allDlv').innerText = allDlv;
    document.getElementById('allPri').innerText = allGoods + allDlv;
  }

  allChk1 = () => {
    const table = document.getElementById('cart__list');
    for (let i = 0; i < table.rows.length; i++) {
      if(document.getElementById('allChk').checked){
        table.rows[i].cells[0].childNodes[0].checked = true;
      }else{
        table.rows[i].cells[0].childNodes[0].checked = false;
      }
    }
    showPri();
  }
</script>

</html>
profile
조하영
공부하는 개발자
이전 포스트

휴먼교육센터 개발자과정 69일차

다음 포스트

휴먼교육센터 개발자과정 70일차

0개의 댓글