Learn & Record

Html Css JavaScript (수강신청 프로그램, html, css, 체크리스트 중간, html, css) 본문

Dev/HTML CSS JS

Html Css JavaScript (수강신청 프로그램, html, css, 체크리스트 중간, html, css)

Walker_ 2024. 4. 8. 14:03

1. 수강신청 프로그램

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/get_form.css">
</head>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        const major = document.getElementById("major")
        const subjects = document.querySelectorAll('input[type=radio]')
        const mailings = document.querySelectorAll('input[type=checkbox]')

        major.addEventListener('change', (event) => {
            // 1. 이벤트 사용
            const majors = event.currentTarget.options // option을 배열로 변환
            const index = event.currentTarget.options.selectedIndex; // 선택한 index 추출
            let selectText = majors[index].textContent

            alert(`${selectText}를 선택했습니다.`)

            // 2. event 사용안됨
            // 사용자가 선택한 항목의 인덱스는 major.selectedIndex를 통해 알아냄
            selectText = major.options[major.selectedIndex].textContent;
        })

        subjects.forEach((subject) => {
            subject.addEventListener('change', (event)=> {
                const current = event.currentTarget;
                if(current.checked) {
                    alert(`${current.parentNode.textContent}를 선택했습니다.`);

                    // 값(value)을 들고 오는 경우
                    // alert(`${current.value}를 선택했습니다.`)
                }
            })
        })

        // 3. checkbox에 change 이벤트가 발생했을 때 실행
        mailings.forEach((mailing) => {
            mailing.addEventListener('change', (event)=> {
                const current = event.currentTarget;
                if(current.checked) {
                    alert(`${current.parentNode.textContent}를 선택했습니다.`)
                }
                else {
                    alert(`${current.parentNode.textContent}를 선택해제 했습니다.`)
                }
            })
        })
    })
</script>
<body>
    <div id="container">
        <h1>수강신청</h1>
        <form name="testForm">
            <fieldset>
                <legend>신청인</legend>
                <ul>
                    <li>
                        <label class="reg" for="userName">이름</label>
                        <input type="text" id="userName" name="userName" maxlength="50">
                    </li>
                    <li>
                        <label class="reg" for="major">학과</label>
                        <select name="major" id="major">
                            <option>---- 학과선택 ----</option>
                            <option value="architect">건축공학과</option>
                            <option value="mechanic">기계공학과</option>
                            <option value="industrial">산업공학과</option>
                            <option value="elect">전기전자공학과</option>
                            <option value="computer">컴퓨터공학과</option>
                            <option value="chemical">화학공학과</option>
                        </select>
                    </li>
                </ul>
            </fieldset>
            <fieldset>
                <legend>신청 과목</legend>
                <p>이 달에 신청할 과목을 선택하세요.</p>
                <label><input type="radio" name="subjcet" value="speaking">회화</label>
                <label><input type="radio" name="subjcet" value="grammer">문법</label>
                <label><input type="radio" name="subjcet" value="writing">작문</label>
            </fieldset>
            <fieldset>
                <legend>메일링</legend>
                <p>메일로 받고 싶은 뉴스 주제를 선택해 주세요</p>
                <label><input type="checkbox" name="mailing1" value="news">해외 단신</label>
                <label><input type="checkbox" name="mailing2" value="dialog">5분 회화</label>
                <label><input type="checkbox" name="mailing3" value="pops">모닝팜스</label>
            </fieldset>
        </form>
    </div>
</body>
</html>

 

#container {
    width: 500px;
    margin: 10px auto;
}

form fieldset {
    margin-bottom: 25px;
}

form legend {
    font-size: 15px;
    font-weight: 600;
}

label.reg {
    font-size: 14px;
    width: 110px;
    color: #390;
    font-weight: bold;
    float: left;
    text-align: right;
    margin-right: 10px;
}

form ul li {
    list-style: none;
    margin: 15px 0;
    font-size: 14px;
}

#selectAll {
    cursor: pointer;
}

 

 

2. 체크리스트_삭제 전까지

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/check_list.css">
</head>
    <script>
        /*
        3. 등록시 조건
        1) 글 등록이 된 후 폼 태그가 비워지도록
        2) 할일과 날짜가 입력이 안된 경우 글 등록이 안되도록 (경고문을 발생하도록)
        3) 날짜의 기본값은 오늘로
        4) 이전 날짜는 선택이 안되도록
         */
        document.addEventListener('DOMContentLoaded', function () {
            const title = document.querySelector('.add input[name=title]')
            const dueDate = document.querySelector('.add input[name=dueDate]')
            const btnAdd = document.querySelector('.add input[type=button]')
            const list = document.querySelector('.list ul')

            dueDate.value = new Date().toISOString().slice(0,10)
            dueDate.setAttribute('min', new Date().toISOString().slice(0,10))

            btnAdd.addEventListener('click', function () {
                if (title.value === '') {
                    alert('제목을 입력해주세요')
                    title.focus()
                    return
                } else if (dueDate.value === '') {
                    alert('날짜를 선택해 주세요')
                    dueDate.focus()
                    return;
                }

                let addItem = document.createElement('li')
                addItem .innerHTML = `<ul>\n
                        <li>${title.value}</li>\n\
                        <li>${dueDate.value}</li>\n
                        <li><input type="button" name="delete" value="x"></li>\n
                        </ul>`
                list.appendChild(addItem)

                title.value = ''
                dueDate.value = new Date().toISOString().slice(0,10)
            })
        })
    </script>
<body>
    <section class="list">
        <h2>Todo</h2>
        <ul>
            <li>
                <ul>
                    <li>할일</li>
                    <li>2023-12-31</li>
                    <li><input type="button" name="delete" value="x"></li>
                </ul>
            </li>
        </ul>
    </section>
    <section class="add">
        <h2>Add todo</h2>
        <div class="addTool">
            <input type="text" name="title">
            <input type="date" name="dueDate">
            <input type="button" value="등록">
        </div>
    </section>

</body>
</html>

 

* {
    margin: 0;
    padding: 0;
}

h2 {
    color: #004607;
}

section.list {
    width: 500px;
    margin: 10px auto;
    padding: 15px;
    margin-top: 40px;
    background: #a1f19a;
    border-radius: 10px;
    height: 500px;
    border: #185723 1px dashed;
    box-shadow: 5px 5px 3px #a4a4a4
}
section.add {
    width: 500px;
    margin: 10px auto;
    padding: 15px;
    margin-top: 40px;
    background: #6fe36f;
    border-radius: 10px;
    border: #185723 1px dashed;
    box-shadow: 5px 5px 3px #9d9a9a
}

h2 {
    margin-bottom: 20px;
}

.list ul li ul li {
    display: inline;
    text-align: center;
    margin-left: 30px;
    margin-right: 30px;
    font-weight: bolder;
    font-family: Pretendard;
    font-size: 15px;
    color: #185723;
}

.list ul li ul {
    text-align: center;
    border: #185723 solid 1px;
}

.addTool{
    text-align: center;
}

input[value='x'] {
    background: #ff4848;
    border: solid 1px #808080;
    width: 20px;
    height: 20px;
    color: #000000;
    border-radius: 100px;
    font-family: Pretendard;
}

input[value='등록'] {
    background: #00ff77;
    border: solid 1px black;
    width: 70px;
    height: 25px;
    color: #000000;
    border-radius: 5px;
    font-family: Pretendard;
    font-weight: bolder;
}

.list ul{
    background: #ebfde8;
    height: 25px;
    list-style: none;
    margin-top: 10px;
    border-radius: 5px;
}

input[type='text'] {
    background: #ebfde8;
    border: 1px solid black;
    height: 22px;
    border-radius: 8px;
    font-weight: bolder;
    font-family: Pretendard;
    text-align: center;
}

input[type='date'] {
    background: #ebfde8;
    border: 1px solid black;
    height: 22px;
    border-radius: 8px;
    font-weight: bolder;
    font-family: Pretendard;
    text-align: center;
}

 

공부 과정을 정리한 것이라 내용이 부족할 수 있습니다.

부족한 내용은 추가 자료들로 보충해주시면 좋을 것 같습니다.

읽어주셔서 감사합니다 :)

'Dev > HTML CSS JS' 카테고리의 다른 글

JavaScript (Ajax, JSON, JSON.parse(), Ajax 이용 데이터 임포트, url 인코딩 키 사용)  (2) 2024.04.11
Html Css JavaScript (Todo List, html, css, java script)  (0) 2024.04.09
JavaScript (참가신청 최종, 주문 프로그램, 회원가입)  (2) 2024.04.05
HTML CSS JS (연습문제, select, multiple, checkbox, radio, prevent, 참가신청)  (0) 2024.04.04
HTML CSS JS (이벤트 설정, 이벤트 해제, 키보드 이벤트, 키보드 버튼 이벤트, 별 프로그램, form 태그 이벤트)  (0) 2024.04.03
'Dev/HTML CSS JS' Related Articles more