나만의 단어장 index

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous">
<link href='{{ url_for("static", filename="mystyle.css") }}' rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"/>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
<style>

    .search-box {
        width: 70%;
        margin: 50px auto;
        max-width: 700px;
    }

    .table {
        width: 80%;
        max-width: 800px;
        margin: auto;
        table-layout: fixed;
    }

    .table th {
        border-top-style: none;
    }

    td {
        background-color: white;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    td > a, a:visited, a:hover, a:active {
        color: black;
    }

    thead:first-child tr:first-child th:first-child {
        border-radius: 10px 0 0 0;
    }

    thead:first-child tr:first-child th:last-child {
        border-radius: 0 10px 0 0;
    }

    tbody:last-child tr:last-child td:first-child {
        border-radius: 0 0 0 10px;
    }

    tbody:last-child tr:last-child td:last-child {
        border-radius: 0 0 10px 0;
    }

    tr.highlight > td {
        background-color: #e8344e;
        color: white;
    }

    tr.highlight > td > a {
        color: white;
    }
</style>
<script>
    //console.log('{{ msg }}')
    {% if msg %}
        alert('{{ msg }}')
    {% endif %}
    let words ={{ words|tojson }};
    let word_list = [];
    for (let i = 0; i < words.length; i++) {
        word_list.push(words[i]['word']);
    }
    console.log(word_list)

    function find_word() {
        let word = $('#input-word').val().toLowerCase()
        if (word == "") {
            alert('값을 입력해 주세요!!')
            return
        }
        console.log(word)
        if (word_list.includes(word)) {
            // 리스트에 있으면 하이라이트
            console.log(word_list)
            $(`#word-${word}`).addClass('highlight')
            $(`#word-${word}`).siblings().removeClass('highlight')  // 형제 테크를 찾아서 하이라이트 없새기
            $(`#word-${word}`)[0].scrollIntoView()

        } else {
            // 리스트에 없으면 새 단어를 위한 상세페이지로
            window.location.href = `/detail/${word}?status_give=new`
        }
    }
</script>

<div class="search-box d-flex justify-content-center">
    <input id="input-word" class="form-control" style="margin-right: 0.5rem">
    <button class="btn btn-light" onclick="find_word()"><i class="fa fa-search"></i></button>
</div>
<table class="table">
    <thead class="thead-light">
    <tr>
        <th scope="col" style="width:30%">WORD</th>
        <th scope="col">MEANING</th>

    </tr>
    </thead>
    <tbody id="tbody-box">
    {% for word in words %}
        <tr id="word-{{ word.word }}">
            <td><a href="/detail/{{ word.word }}?status_give=old">{{ word.word }}</a></td>
            <td>
                {{ word.definition }}
            </td>
        </tr>
    {% endfor %}
    </tbody>
</table>