내일배움단 11일메이킹챌린지 6일차

이하나·2021년 7월 25일
11일메이킹챌린지국비지원내일배움단내일배움카드코딩
0

웹개발 종합반

목록 보기
6/14
6일차 ( 4주차 숙제 / 프로젝트 6일차 )

[ 6일차 ] Fiter elements (2)

종합 사항 (FE)

  • 카테고리별 필터 기능 완료
  • 검색 시 레이아웃 완료
  • 상세페이지 레이아웃 완료

나의 작업 사항

대입해서 작업한 Fiter elements의 클래스 이름이나 var 사용등을 개선 하기

완료 내용 :
HTML

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

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

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

    <!-- 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>
    <!-- bootstrap icon -->

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <title>Game Over</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300&family=VT323&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="gameoversty.css">


    <style>

    </style>

    <script>
        $(document).ready(function () {
            load();
            TagSelect("all");
        });

        function load() {
            $('#card-group').empty()
            $.ajax({
                type: "GET",
                url: "https://www.freetogame.com/api/games?platform=pc",
                data: {},
                success: function (response) {
                    let games = response
                    for (let i = 0; i < games.length; i++) {
                        let game_img = games[i]['thumbnail']
                        let game_title = games[i]['title']
                        let game_text = games[i]['short_description']
                        let game_tag = games[i]['genre']

                        if (game_tag == 'MMO') {
                            let temp_html = `<div id="card" class="card-size GameDiv ${game_tag}_">
                                    <div class="card card-height">
                                        <img src="${game_img}" class="card-img-top card-img" alt="...">
                                        <div class="card-body">
                                            <h5 class="card-title title-over">${game_title}</h5>
                                            <p class="card-text text-over">${game_text}</p>
                                        </div>
                                        <div class="card-footer">
                                            <small class="text-muted"><span
                                                    class="badge badge-pill badge-secondary badge-size">${game_tag}</span></small>
                                        </div>
                                    </div>
                                </div>
                                `
                            $('#card-group').append(temp_html);
                        } else {
                            let temp_html = `<div id="card" class="card-size GameDiv ${game_tag}">
                                    <div class="card card-height">
                                        <img src="${game_img}" class="card-img-top card-img" alt="...">
                                        <div class="card-body">
                                            <h5 class="card-title title-over">${game_title}</h5>
                                            <p class="card-text text-over">${game_text}</p>
                                        </div>
                                        <div class="card-footer">
                                            <small class="text-muted"><span
                                                    class="badge badge-pill badge-secondary badge-size">${game_tag}</span></small>
                                        </div>
                                    </div>
                                </div>
                                `
                            $('#card-group').append(temp_html);
                        }

                    }
                }
            })
        }

        // 검색 enterkey 작동 함수
        function enterkey() {
            if (window.event.keyCode == 13) {

                search_complete();
            }
        }

        function search_complete() {
            $('#result').empty();
            go_to_search(search_result)
            let search_result = $('#search').val();
            // alert(search_result);

            let temp_html = `<div>"<span class="searchWord">${search_result}</span>" 에 대한 검색 결과</div>`
            // console.log(temp_html)
            if (search_result == '') {
                alert('검색어를 입력해 주세요');
                $('#search').focus();
                return false
            } else {
                $('#result').append(temp_html);
            }
            $('#search').val(null);
        }

        //filter elements
        function TagSelect(c) {
            $('#result').empty();
            let x, i;
            x = document.getElementsByClassName("GameDiv");
            if (c == "all") c = "";
            // Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
            for (i = 0; i < x.length; i++) {
                RemoveClassShow(x[i], "show");
                if (x[i].className.indexOf(c) > -1) AddClassShow(x[i], "show");
            }
        }

        // Show filtered elements
        function AddClassShow(element, name) {
            let i, arr1, arr2;
            arr1 = element.className.split(" ");
            arr2 = name.split(" ");
            for (i = 0; i < arr2.length; i++) {
                if (arr1.indexOf(arr2[i]) == -1) {
                    element.className += " " + arr2[i];
                }
            }
        }

        // Hide elements that are not selected
        function RemoveClassShow(element, name) {
            let i, arr1, arr2;
            arr1 = element.className.split(" ");
            arr2 = name.split(" ");
            for (i = 0; i < arr2.length; i++) {
                while (arr1.indexOf(arr2[i]) > -1) {
                    arr1.splice(arr1.indexOf(arr2[i]), 1);
                }
            }
            element.className = arr1.join(" ");
        }
    </script>


</head>

<body>
<div class="wrap">
    <div class="header">
        <div class="img"></div>
        <div class="search">
            <input placeholder='search' class=search-bar id='search' type='text' onkeyup="enterkey();"/>
            <button class='search-icon' onclick="search_complete()">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="yellow" class="bi bi-search"
                     viewBox="0 0 16 16" href="https://www.google.com/ ">
                    <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
                </svg>
            </button>
        </div>

    </div>
    <!--    hashtag-->
    <div id="TagGroup" class="hashtag">

        <button class="btnAll tag active" onclick="TagSelect('all')" aria-pressed="true">ALL</button>
        <button class="btnMmorpg tag" onclick="TagSelect('MMORPG')">MMORPG</button>
        <button class="btnShooter tag" onclick="TagSelect('Shooter')">Shooter</button>
        <button class="btnBattleroyale tag" onclick="TagSelect('Battle Royale')">Battle Royale</button>
        <button class="btnMoba tag" onclick="TagSelect('MOBA')">MOBA</button>
        <button class="btnSports tag" onclick="TagSelect('Sports')">Sports</button>
        <button class="btnRacing tag" onclick="TagSelect('Racing')">Racing</button>
        <button class="btnStrategy tag" onclick="TagSelect('Strategy')">Strategy</button>
        <button class="btnFighting tag" onclick="TagSelect('Fighting')">Fighting</button>
        <button class="btnCardGame tag" onclick="TagSelect('Card Game')">Card Game</button>
        <button class="btnMmo tag" onclick="TagSelect('MMO_')">MMO</button>


    </div>

    <!--  검색 후 보이게 되는 창-->

    <div id='result'>

    </div>


    <!--  카드 -->
    <div id="card-group" class="card-group">
        <div id="card" class="card-size GameDiv MMORPG">
            <div class="card card-height">
                <img src="https://www.freetogame.com/g/1/thumbnail.jpg" class="card-img-top card-img" alt="...">
                <div class="card-body">
                    <h5 class="card-title title-over">Dauntless</h5>
                    <p class="card-text text-over">A free-to-play, co-op action RPG with gameplay similar to Monster
                        Hunter.</p>
                </div>
                <div class="card-footer">
                    <small class="text-muted"><span
                            class="badge badge-pill badge-secondary badge-size badge-genre1">MMORPG</span></small>
                </div>
            </div>
        </div>
        <div id="card" class="card-size GameDiv Shooter">
            <div class="card card-height">
                <img src="https://www.freetogame.com/g/2/thumbnail.jpg" class="card-img-top card-img" alt="...">
                <div class="card-body">
                    <h5 class="card-title title-over">World of Tanks</h5>
                    <p class="card-text text-over">If you like blowing up tanks, with a quick and intense game style you
                        will love this game!</p>
                </div>
                <div class="card-footer">
                    <small class="text-muted"><span
                            class="badge badge-pill badge-secondary badge-size">Shooter</span></small>
                </div>
            </div>
        </div>
        <div id="card" class="card-size GameDiv Shooter">
            <div class="card card-height">
                <img src="https://www.freetogame.com/g/3/thumbnail.jpg" class="card-img-top card-img" alt="...">
                <div class="card-body">
                    <h5 class="card-title title-over">Warframe</h5>
                    <p class="card-text text-over">A cooperative free-to-play third person online action shooter set in
                        an stunning sci-fi world.</p>
                </div>
                <div class="card-footer">
                    <small class="text-muted"><span
                            class="badge badge-pill badge-secondary badge-size">Shooter</span></small>
                </div>
            </div>
        </div>
    </div>


    <nav aria-label="Page navigation example">
        <ul class="pagination">
            <li class="page-item"><a class="page-link" href="#">Previous</a></li>
            <li class="page-item"><a class="page-link" href="#">1</a></li>
            <li class="page-item"><a class="page-link" href="#">2</a></li>
            <li class="page-item"><a class="page-link" href="#">3</a></li>
            <li class="page-item"><a class="page-link" href="#">Next</a></li>
        </ul>
    </nav>

    <footer>
        <p>참여한 사람들: 남혜민, 이민호, 이하나, 장정인, 조소영, 조원행 </p>
    </footer>

</div>
</body>

</html>

CSS (Filter Elements 부분만) 


        /*fiter elements*/

        .GameDiv {
            display: none; /* Hidden by default */
        }

        .show {
            display: block;
        }

[1] 4주차 숙제 - 이전 숙제에서 만든 페이지를 API 연결

App.py - POST

@app.route('/order', methods=['POST'])
def save_order():
    first_receive = request.form['first_give']
    last_receive = request.form['last_give']
    email_receive = request.form['email_give']
    domain_receive = request.form['domain_give']
    birth_receive = request.form['birth_give']
    day_receive = request.form['day_give']

    doc = {
        'first': first_receive,
        'last': last_receive,
        'email': email_receive,
        'domain': domain_receive,
        'birth': birth_receive,
        'day': day_receive
    }
    db.mypage.insert_one(doc)
    return jsonify({'msg': '저장이 완료되었습니다!'})

index.html - POST

function order() {
            let first = $('#firstname').val();
            let last = $('#lastname').val();
            let email = $('#inlineFormInputName').val();
            let domain = $('#inlineFormInputGroupUsername').val();
            let birth = $('#inputCity').val();
            let day = $('#day').val();

            $.ajax({
                type: "POST",
                url: "/order",
                data: {
                    first_give: first,
                    last_give: last,
                    email_give: email,
                    domain_give: domain,
                    birth_give: birth,
                    day_give: day
                },
                success: function (response) { // 성공하면
                    alert(response["msg"]);
                    window.location.reload();
                }
            })
        }

App.py - GET

@app.route('/order', methods=['GET'])
def view_orders():

    customers = list(db.mypage.find({}, {'_id': False}))

    return jsonify({'all_customers':customers})

index.html - GET

function order_listing() {
            // 주문목록 보기 API 연결
            $('#list').empty()
            $.ajax({
                type: "GET",
                url: "/order",
                data: {},
                success: function (response) {
                    let cutomers = response['all_customers']
                    for (let i = 0; i < cutomers.length; i++) {
                        let firstname = cutomers[i]['first']
                        let lastname = cutomers[i]['last']
                        let email = cutomers[i]['email']
                        let domain = cutomers[i]['domain']
                        let birth = cutomers[i]['birth']
                        let day = cutomers[i]['day']

                        let temp_html =`<tr>
                                            <td>${firstname} ${lastname}</td>
                                            <td>${email}@${domain}</td>
                                            <td>${birth}</td>
                                            <td>${day}</td>
                                        </tr>`
                        $('#list').append(temp_html)
                    }
                }
            })
        }

결과:
POST

GET

후기_

	: 오늘 드디어 벼르고 벼르던 4주차를 끝냈다!
	세상 힘들었다... 중간중간에 오류내고 한참 찾고 또 고치고...
    	그래도 이렇게 끝내고 나니 뭔가 속이 후련한 느낌이다.
        회의도 이제 절반을 넘어서 6회차에 이르렀다.
        뭔가 하나하나 조각을 찾아 맞추어가는 느낌이라서 신기했다.
        혼자서는 못할 것들을 한사람한사람 힘을 합쳐 해내가는게, 진짜
        내가 이 메이킹 챌린지를 신청하지 않았으면 경험하지 못했을 것
        들 이기에 다행이라고 느꼈다.
        Filter elements를 써보기는 했지만 아직 어떤 요소들이 어떻
        게 작동해나가는지는 잘 감이 안잡힌다.
        그래서 그런지 로딩후 전체 목록 뜨게 만드는게 너무 어렵게만 
        느껴진다.
        어떻게 해결책을 찾아야할까....
profile
이하나
코딩을 배우는 비전공자 코린이!
이전 포스트

내일배움단 11일메이킹챌린지 5일차

다음 포스트

내일배움단 11일메이킹챌린지 7일차

0개의 댓글