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

조하영·2022년 11월 10일
0

휴먼교육센터 코딩공부

목록 보기
54/66


















UI 테스트 시험

메인페이지

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

<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">
  <link rel="stylesheet" href="./css/all.css">

  <title>온누리한방병원</title>
</head>

<body>
  <div id="main">
    <header>
      <div id="logo">
        <h1><span style="color: #702378; font-size: 38px;">온누리병원</span> 관리시스템</h1>
      </div>
      <form action="search" method="get">
        <div id="search">
          <input type="text" name="inputSch">
          <input class="btn" type="submit" value="검색">
        </div>
      </form>
    </header>
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="#">환자현황</a></li>
        <li><a href="#">오늘의 식단</a></li>
        <li><a href="#">자유게시판</a></li>
      </ul>
    </nav>

    <section>
      <div id="shead">
        <div class="container">
          <div class="rollingbanner">
              <div class="title">공지사항 > </div>
              <div class="wrap">
                  <ul>
                      <li><a href="#">11/02 14시 4층에서 전체 회의 있습니다.</a></li>
                      <li class="next"><a href="#">12/14 18시 송년회있습니다.</a></li>
                      <li class="current"><a href="#">11/05 19시 병동 회식있습니다.</a></li>
                      <li><a href="#">12월 부터 5층 병동 폐쇄합니다.</a></li>
                      <li class="prev"><a href="#">12/16 이정재 과장 결혼식있습니다.</a></li>
                  </ul>
              </div>
          </div>
      </div>
        <!-- <span><b>공지사항 > </b></span><span id="headline"></span> -->
      </div>
      <div id="lineChart">
        <div class="chartHead">
          주간 재원환자
        </div>
        <canvas id="myChart"></canvas>
      </div>
      <div id="pieChart">
        <div class="chartHead">
          재원 환자 비율
        </div>
        <canvas id="myChart2"></canvas>
      </div>
      <form action="loginChk" method="post">
        <div id="login">
          <table>
            <tr>
              <th>아이디</th>
              <td><input type="text" name="id" size="10"></td>
            </tr>
            <tr>
              <th>비밀번호</th>
              <td><input type="password" name="pwd" size="10"></td>
            </tr>
            <tr>
              <td colspan="2">
                <input class="btn" type="submit" name="btnLogin" value="로그인">
                <input class="btn" type="button" onclick="location.href='join.html'" 
                name="memberJoin" value="회원가입">
              </td>
            </tr>
          </table>
        </div>
      </form>
      <div id="in_out">
        <div id="head">
          <b>오늘의 입/퇴원 현황</b>
          <a href="#" style="text-decoration:none ; color: rgb(68, 68, 68);">더보기</a>
        </div>
        <ul>
          <li>입원 김미영 45/여 한방1과</li>
          <li>입원 박민철 34/남 한방1과</li>
          <li>입원 너도나 23/여 한방2과</li>
          <li>퇴원 우지니 42/여 양방과</li>
          <li>퇴원 조철재 45/남 한방1과</li>
          <li>입원 이인재 57/남 양방과</li>
          <li>퇴원 김시습 66/남 한방1과</li>
          <li>퇴원 장경숙 64/여 한방2과</li>
        </ul>
      </div>
    </section>

    <footer>
      대표전화 : 032-OOO-OOOO
      팩스 : 032-OOO-OOOO
      주소 : 인천광역시 부평구 OOO OOO (부평동)
      사업자번호 : OOO-OO-OOOOO 대표 : OOO<br>
      COPYRIGHT(c) 2022 - CNR KOREAN MEDICINE HOSPITAL - ALL RIGHTS RESERVED. HOSTING BY INTERC
    </footer>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js"
    integrity="sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"
    integrity="sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0FXfOWRRJOnQtpZun8ha"
    crossorigin="anonymous"></script>
  <script src="./js/myChart.js"></script>


</body>

</html>

회원가입 페이지

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

<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">
  <link rel="stylesheet" href="./css/all.css">
  <title>온누리한방병원</title>
  <style>
    #join {
      padding-left: 12px;
      border-radius: 10px;
      margin: 0 auto;
      width: 330px;
      height: 420px;
      background-color: rgba(255, 255, 255, 0.7);
      box-sizing: border-box;
      color: rgb(68, 68, 68);
    }

    #join table {

      color: rgb(68, 68, 68);
    }

    #join td {
      height: 41px;

    }

    #idchk, #telchk{
      padding-left: 30px;

    }
  </style>
</head>

<body>
  <div id="main">
    <header>
      <div id="logo">
        <h1><span style="color: #702378; font-size: 38px;">온누리병원</span> 관리시스템</h1>
      </div>
      <form action="search" method="get">
        <div id="search">
          <input type="text" name="inputSch">
          <input class="btn" type="submit" value="검색">
        </div>
      </form>
    </header>
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="#">환자현황</a></li>
        <li><a href="#">오늘의 식단</a></li>
        <li><a href="#">자유게시판</a></li>
      </ul>
    </nav>
    <section>
      <div id="join">
        <form action="loginPass" method="post">
          <table style="width: 310px;">
            <tr>
              <td style="text-align: center; "><b>회원가입</b></td>
            </tr>
            <tr>
              <td>아이디<span id="idchk" style="padding-left: 30px; "></span></td>
            </tr>
            <tr>
              <td style="display: inline;">
                <input type="text" id="idchkInput" name="joinid" style="width: 230px; height: 40px">
                <input class="btn" id="idchkBtn" type="button" value="ID체크">
              </td>

            </tr>

            <tr>
              <td>성 명</td>
            </tr>
            <tr>
              <td><input type="text" name="name" style="width: 290px; height: 40px"></td>
            </tr>

            <tr>
              <td>전화번호<span id="telchk"></span></td>
            </tr>
            <tr>
              <td>
                <input type="tel" id="telchkInput" name="tel" style="width: 290px; height: 40px">
              </td>
            </tr>

            <tr>
              <td style="text-align: center; padding-top: 35px;">
                <input class="btn" type="submit" value="회원가입" style="width: 100%; height: 100%;">
              </td>
            </tr>
          </table>
        </form>
      </div>
    </section>
    <footer>
      대표전화 : 032-OOO-OOOO
      팩스 : 032-OOO-OOOO
      주소 : 인천광역시 부평구 OOO OOO (부평동)
      사업자번호 : OOO-OO-OOOOO 대표 : OOO<br>
      COPYRIGHT(c) 2022 - CNR KOREAN MEDICINE HOSPITAL - ALL RIGHTS RESERVED. HOSTING BY INTERC
    </footer>
  </div>
</body>
<script>
  document.getElementById('idchkBtn').onclick = () => {
    var a = document.getElementById('idchkInput').value;
    const regExp = /^(?=.*[0-9]).{8,10}$/;
    if (regExp.test(a)) {
      document.getElementById('idchk').innerHTML = '*사용가능한 id 입니다.';
      document.getElementById('idchk').style.color = 'green';
      document.getElementById('idchk').style.fontSize = '10px';
    } else {
      document.getElementById('idchk').innerHTML = '*숫자 포함, 8~10글자 사이로 입력해주세요';
      document.getElementById('idchk').style.color = 'red';
      document.getElementById('idchk').style.fontSize = '10px';
    }
  }

  document.getElementById('telchkInput').onchange = () => {
    var a = document.getElementById('telchkInput').value;
    const regExp = /^010-\d{4}-\d{4}$/;
    if (regExp.test(a)) {
      document.getElementById('telchk').innerHTML = '*올바른 형식의 번호 입니다.';
      document.getElementById('telchk').style.color = 'green';
      document.getElementById('telchk').style.fontSize = '10px';
    } else {
      document.getElementById('telchk').innerHTML = '*010-0000-0000 형식으로 입력하세요.';
      document.getElementById('telchk').style.color = 'red';
      document.getElementById('telchk').style.fontSize = '10px';
    }
  }

</script>

</html>

자바스크립트 페이지

/* globals Chart:false, feather:false */

(() => {
  'use strict'

  feather.replace({ 'aria-hidden': 'true' })
  // const Plugin = {};

  // Graphs
  const ctx = document.getElementById('myChart');
  // eslint-disable-next-line no-unused-vars
  const myChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: ['일', '월', '화', '수', '목', '금', '토'],
      datasets: [{
        label: '환자수',
        data: [42, 45, 45, 43, 48, 53, 52],
        lineTension: 0,
        backgroundColor: 'transparent',
        borderColor: '#905E96',
        borderWidth: 3,
        pointBackgroundColor: '#905E96'
      }]},
    options: {
      responsive: false,
      scales: {
        yAxes: [{
          stacked: false,
          ticks: {
            beginAtZero: false,
            max: 60, min: 30,
            padding: 5, stepSize: 5
          }
        }]},
      legend: {display: true}
    }
  })

  const ctx1 = document.getElementById('myChart2');
  // eslint-disable-next-line no-unused-vars
  const myChart2 = new Chart(ctx1, {
    type: 'pie',
    data: {
      labels: ['한방1과', '한방2과', '양방과'],
      datasets: [{
        label: '# of Votes',
        data: [ 20, 10, 8],
        backgroundColor: ['#905E96', '#D58BDD', '#FF99D7'],
        lineTension: 0,
        borderColor: 'black',
        borderWidth: 1,
      }]
    },
    options: {
      responsive: false,      
      legend: {display: true}
    }
  })
})()

// var arr = ['11/02 14시 4층에서 전체 회의 있습니다.', '12/14 18시 송년회있습니다.'
//   , '11/05 19시 병동 회식있습니다.'];

//   document.getElementById('headline').innerText =arr[0]
//   let count = 1;
//   setInterval(()=>{
//   if(count<3){
//     document.getElementById('headline').innerText =arr[count++]
//   }else{
//     count=0;
//   }},3000);

  document.addEventListener('DOMContentLoaded', ()=>{
    var interval = window.setInterval(rollingCallback, 3000);
})

function rollingCallback(){
    //.prev 클래스 삭제
    document.querySelector('.rollingbanner .prev').classList.remove('prev');

    //.current -> .prev
    let current = document.querySelector('.rollingbanner .current');
    current.classList.remove('current');
    current.classList.add('prev');

    //.next -> .current
    let next = document.querySelector('.rollingbanner .next');
    //다음 목록 요소가 널인지 체크
    if(next.nextElementSibling == null){
        document.querySelector('.rollingbanner ul li:first-child').classList.add('next');
    }else{
        //목록 처음 요소를 다음 요소로 선택
        next.nextElementSibling.classList.add('next');
    }
    next.classList.remove('next');
    next.classList.add('current');
}

CSS 페이지

body{
  font-style: 'Malgun Gothic';
}

#main {
  width: 1024px;
  height: 700px;
  margin: 0 auto;
  /* background-color: black; */
}

p{
  font: italic;
}

header {
  padding-left: 20px;
  width: 100%;
  height: 100px;
  float: left;
  background-color: #D58BDD;
  box-sizing: border-box;
}

nav {
  width: 100%;
  height: 50px;
  float: left;
  background-color: #905E96;
}

section {
  padding-top: 15px;
  padding-left: 15px;
  width: 100%;
  height: 450px;
  float: left;
  background-color: #FFD372;
  box-sizing: border-box;
}

footer {
  width: 100%;
  height: 80px;
  float: left;
  background-color: #905E96;
  font-size: small;
  padding-top: 20px;
  padding-left: 20px;
  box-sizing: border-box;
  color: rgb(250, 206, 255);
}
#shead{
  border-radius: 5px;
  width: 992px;
  height: 40px;
  background-color: rgba(255, 255, 255,0.7);
  margin-bottom: 15px;
  text-align: center;
  box-sizing: border-box;
}

#lineChart {
  border-radius: 10px;
  width: 355px;
  height: 368px;
  float: left;
  background-color: rgba(255, 255, 255,0.7);
  color: rgb(68, 68, 68);

}

#pieChart {
  border-radius: 10px;
  margin-left: 15px;
  width: 355px;
  height: 368px;
  float: left;
  background-color: rgba(255, 255, 255,0.7);

}

#login {
  border-radius: 10px;
  margin-left: 15px;
  width: 25%;
  height: 105px;
  float: left;
  background-color: rgba(255, 255, 255,0.7);
  box-sizing: border-box;
  color: rgb(68, 68, 68);

}

#in_out {
  border-radius: 10px;
  margin-top: 13px;
  margin-left: 15px;
  width: 25%;
  height: 250px;
  float: left;
  background-color: rgba(255, 255, 255,0.7);
}

#search {
  margin-top: 40px;
  float: left;
  margin-left: 300px;
}

#logo {
  width: 400px;
  float: left;
}

#head{
  padding-top: 7px;
  padding-left: 9px;
  padding-bottom: 10px;
  border-bottom: 2px #FFD372 solid;
  color: rgb(68, 68, 68);
}

#head a{
  margin-left: 50px;
  font-size: x-small;
  color:rgb(68, 68, 68);
}

nav li {
  border-right: 1px rgb(231, 231, 231) solid;
  list-style: none;
  display: inline;

}

nav a {
  text-decoration: none;
  margin-right: 40px;
  margin-left: 40px;
  color: rgb(250, 206, 255);

}

nav a:hover {
  color: #D58BDD;
}

#login table {
  margin: 0 auto;
  text-align: center;
}

#login table td{
  height: 30px;
}

.chartHead{
  font-weight: bold;
  font-size: x-large;
  color: rgb(68, 68, 68);
  padding-top: 20px;
  text-align: center;
  padding-bottom: 20px;
  border-bottom: 2px #FFD372 solid;
}

canvas{
  margin-top: 30px;
  height: 250px;
  width: 350px;
}

.btn{
  background-color: #905E96;
  border: 2px #905E96 solid;
  color: rgb(250, 206, 255);
  border-radius: 2px;
}

input:focus{
  outline: none;
  border: 1px #8a3194 solid;
}

input{
  border: 1px rgb(158, 158, 158) solid;
}

/* 롤링배너관련 */
.container{
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
}
.rollingbanner{
  position: relative;
  width: 380px;
  height: 32px;
  font-size: .875rem;
  letter-spacing: -1px;
  padding: 7px 15px;
  box-sizing: border-box;
  /* background-color: #f0f0f0; */
  border-radius: 16px;
}
/* 타이틀 */
.rollingbanner > .title{
  font-weight: bold;
  float: left;
  padding-right: 10px;
}
/* 롤링 배너 */
.rollingbanner > .wrap{
  position: relative;
  width: auto;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}        
.rollingbanner ul{
  list-style: none;
}
.rollingbanner li{
  position: absolute;
  top: -36px;
  left: 0;
}
/* 이전, 현재, 다음 롤링 배너 표시 */
.rollingbanner li.prev{
  top: 36px;
  transition: top 0.5s ease;
}
.rollingbanner li.current{
  top: 0;
  transition: top 0.5s ease;
}
.rollingbanner li.next{
  top: -36px;
}
.rollingbanner a{
  display: block;
  display: -webkit-box;
  text-decoration: none;
  -webkit-line-clamp: 1;
  -webkit-box-orient:vertical;
  overflow: hidden;
  color: #000;
}
/* 반대 방향으로 진행 */
.rollingbanner li.prev{
  top: -36px;
  transition: top 0.5s ease;
}
.rollingbanner li.next{
  top: 36px;
}

자리 랜덤배정 프로그램

<!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">
  <style>
    table {
      text-align: center;
      width: 500px;
      height: 400px;

    }
  </style>
  <title>Document</title>
</head>

<body>
  <table id="tbl" border="1">
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>

    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>

    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>

    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>

    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>

    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>

    </tr>
  </table>
  <input type="button" id="random" onclick = 'random()' value="조추첨">

</body>
<script>
  const table = document.getElementById('tbl');

  var list = ['조하영', '김은혜', '정원무', '조현우', '권준석', '김다솜', '홍나영', '박지담', '김진호', '김하영','홍가현','최예슬','정상현','배대호','김하얀','배승규','문상연','권병국','박영신','김성빈','정찬호','홍은지','이단비','위성권'];

  function shuffle(array) {
    array.sort(() => Math.random() - 0.5);
  }


random = () =>{
  shuffle(list);
  var cnt = 0;
  for(let i = 0 ; i<6; i++){
    for(let j = 0 ; j<4 ; j++){
      table.rows[i].cells[j].innerText = list[cnt]; 
      cnt++;
    }
  }
}

</script>

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

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

다음 포스트

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

0개의 댓글