나만의 앨범 Javascript 적용하기

이전 블로그 글 : https://ballqs.tistory.com/2

부트스트랩을 이용한 나만의 앨범 간단 구현

 

html 소스 수정

input tag의 type 변경 및 id 속성값 고유값으로 변경!

기록하기에 onclick 속성 추가

<div class="mypostingbox">
    <div class="form-floating mb-3">
        <input type="text" class="form-control" id="input_image" placeholder="앨범 이미지">
        <label for="floatingInput">앨범 이미지</label>
    </div>
    <div class="form-floating mb-3">
        <input type="text" class="form-control" id="input_title" placeholder="앨범 제목">
        <label for="floatingInput">앨범 제목</label>
    </div>
    <div class="form-floating mb-3">
        <input type="text" class="form-control" id="input_content" placeholder="앨범 내용">
        <label for="floatingInput">앨범 내용</label>
    </div>
    <div class="form-floating mb-3">
        <input type="text" class="form-control" id="input_date" placeholder="앨범 이미지">
        <label for="floatingInput">앨범 날짜</label>
    </div>
    <div class="mybtn">
        <button type="button" class="btn btn-dark" onclick="addCard()">기록하기</button>
        <button type="button" class="btn btn-outline-dark">닫기</button>
    </div>
</div>

 

 

javascript 작성

Jquery를 사용할수 있도록 불러오며 아래와 같이 작성

※순수 javascript으로 작성하려다 잘안되었다. 이부분은 추가적인 공부가 필요할 듯 하다.

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
    function addCard(){
    	//Jquery에서는 아래와 같이 사용합니다.
        //$(id , class , tag_name) 로 불러오며 뒤에 온갖 함수가 붙는 형식
        //val는 해당 tag에 입력된 값을 가져올수 있습니다.
        let image = $('#input_image').val();
        let title = $('#input_title').val();
        let content = $('#input_content').val();
        let date = $('#input_date').val();

        let str = `<div class="col">
                        <div class="card h-100">
                            <img src="${image}"
                                class="card-img-top" alt="...">
                            <div class="card-body">
                                <h5 class="card-title">${title}</h5>
                                <p class="card-text">${content}</p>
                            </div>
                            <div class="card-footer">
                                <small class="text-body-secondary">${date}</small>
                            </div>
                        </div>
                    </div>`;

        $('.mycards > div').append(str);
    }
</script>

 

결과물