[css/javascript] tourist-spots-review-site

- 클릭하면 숨긴 리스트가 보이게

  <button id="region-button" class="btn btn-secondary">지역<i id="arrow" class="bi bi-arrow-down-short"></i></button>
<ul id="region-list" class="mb-3 hidden">
    <div class="">
      <a href="{% url 'posts:region' '서울' %}"><li class="btn bg-body-secondary">서울</li></a>
      <a href="{% url 'posts:region' '인천' %}"><li class="btn bg-body-secondary">인천</li></a>
      <a href="{% url 'posts:region' '경기' %}"><li class="btn bg-body-secondary">경기</li></a>
      <a href="{% url 'posts:region' '강원' %}"><li class="btn bg-body-secondary">강원</li></a>
      <a href="{% url 'posts:region' '충남' %}"><li class="btn bg-body-secondary">충남</li></a>
      <a href="{% url 'posts:region' '세종' %}"><li class="btn bg-body-secondary">세종</li></a>
      <a href="{% url 'posts:region' '대전' %}"><li class="btn bg-body-secondary">대전</li></a>
      <a href="{% url 'posts:region' '충북' %}"><li class="btn bg-body-secondary">충북</li></a>
      <a href="{% url 'posts:region' '전북' %}"><li class="btn bg-body-secondary">전북</li></a>
      <a href="{% url 'posts:region' '전남' %}"><li class="btn bg-body-secondary">전남</li></a>
      <a href="{% url 'posts:region' '광주' %}"><li class="btn bg-body-secondary">광주</li></a>
      <a href="{% url 'posts:region' '경북' %}"><li class="btn bg-body-secondary">경북</li></a>
      <a href="{% url 'posts:region' '경남' %}"><li class="btn bg-body-secondary">경남</li></a>
      <a href="{% url 'posts:region' '대구' %}"><li class="btn bg-body-secondary">대구</li></a>
      <a href="{% url 'posts:region' '울산' %}"><li class="btn bg-body-secondary">울산</li></a>
      <a href="{% url 'posts:region' '부산' %}"><li class="btn bg-body-secondary">부산</li></a>
      <a href="{% url 'posts:region' '제주특별자치도' %}"><li class="btn bg-body-secondary">제주</li></a>

    </div>
  </ul>

const regionButton = document.querySelector('#region-button')
const regionList = document.querySelector('#region-list')
const regions = regionList.querySelectorAll('li')
const arrow = document.querySelector('#arrow')

regionButton.addEventListener('click', () => {
  regionList.classList.toggle('hidden')
  if (regionList.classList.length === 2) {
    arrow.classList.remove('bi-arrow-up-short')
    arrow.classList.add('bi-arrow-down-short')
  } else {
    arrow.classList.remove('bi-arrow-down-short')
    arrow.classList.add('bi-arrow-up-short')
  }
})

 

- 마우스 올리면 나타나기

   <div class="d-flex card-bottom-info card-bottom-hidden">
      <i class="bi bi-star-fill"><span class="mark-text">{{ post.rating }}</span>
      </i>
      <i class="bi bi-chat-dots-fill"><span class="mark-text">{{ post.postcomment_set.count }}</span></i>
    </div>

.card-bottom-hidden{
  visibility: hidden
}

.card-bottom-info{
  position: absolute;
  width: 100%;
  bottom: 0;
  
  background: none;
  border: none;
  justify-content: flex-end;
  background-color: rgba(0, 0, 0, 0.363);
}

const postImgs = document.querySelectorAll('.card-img-top')


postImgs.forEach((postImg) => {
  postImg.addEventListener("mouseenter", () => {
    const postBottom = postImg.nextElementSibling
    postBottom.classList.remove('card-bottom-hidden')
    });

  postImg.addEventListener("mouseleave", () => {
    const postBottom = postImg.nextElementSibling
    postBottom.classList.add('card-bottom-hidden')
    });

})

 

- 댓글 글자수, 댓글 창 사이즈 조정

  <!-- 삭제 버튼 -->
  <div class="text-secondary">
    {% if comment.user == request.user %}
    <form action="{% url 'posts:comment_delete' post.pk comment.pk %}" method="POST">
      {% csrf_token %}
      <button  class="bg-transparent border-0 text-danger comment-delete" type="submit">
        <div id="comment_delete" class="hidden"><i class="bi bi-x"></i></div>
      </button>
    </form>
    {% endif %}
  </div>

<form id="comment-form" action="{% url 'posts:comment_create' post.pk  %}" method="POST">
    {% csrf_token %}
    <div id="comment-area" class="border rounded-3 p-3">
      <div class="d-flex justify-content-between">
        <span class="mb-2">{{ user.username }}</span>
        <div class="text-body-tertiary">
          <span id="comment-count"></span>
        </div>
      </div>
      {% for field in comment_form %}
        {{ field }}
      {% endfor %}
      <div class="text-end text-body-tertiary">
        <button id="comment-submit" type="submit" class="border-0 bg-transparent text-body-tertiary">등록</button>
      </div>
    </div>
  </form>

.hidden {
  display: none;
}

const comments = document.querySelectorAll('#comments')
const commentSubmit = document.getElementById('comment-submit')
const commentField = document.getElementById('comment-field')
const commentCount = document.getElementById('comment-count')
const commentArea = document.getElementById('comment-area')
const max = commentField.dataset.maxLength

comments.forEach(comment => {
  const deleteBtn = comment.querySelector('#comment_delete')

  comment.addEventListener('mouseover', () => {
    deleteBtn.classList.remove('hidden')
  })

  comment.addEventListener('mouseout', () => {
    deleteBtn.classList.add('hidden')
  })
})

if (commentField.value.length === 0) {
  commentCount.textContent = ''
}

commentField.addEventListener('input', (e) => {
  const count = commentField.value.length
  commentCount.textContent = `${count} / ${max}`
  if (count >= max) {
    commentCount.textContent = `${max} / ${max}`
  }
})

commentArea.addEventListener('click', () => {
  commentField.focus()
})

function resize(obj) {
  obj.style.height = ( obj.scrollHeight) + 'px';
}

 

- 삭제 시 확인창 띄우기

<span class="content-fun"><a onclick="return confirm('게시글을 삭제하시겠습니까?')" href="{% url 'posts:delete' post.pk %}">삭제</a></span>

 

- 버튼을 누르면 모달창

  <div class="position-relative rounded-3 mt-3 shadow">
    <div id="map" class="map rounded-3"></div>
    <button id="modal-button" type="button" class="position-absolute bottom-0 end-0 z-1 hidden" data-bs-toggle="modal" data-bs-target="#mapModal">
      <i class="bi bi-arrows-angle-expand"></i>
    </button>
  </div>

const place_field2 = document.getElementById('place-field')
const modalContent = document.querySelector('#modal-content')
// 모달 버튼 요소를 가져옵니다.
const modalButton2 = document.getElementById("modal-button");

// 모달 요소를 가져옵니다.
const mymodal = document.getElementById("my-modal");

// 모달에서 닫기 버튼 요소를 가져옵니다.
const close = mymodal.querySelector(".close");

let kakaoMap;
let coordsModal;
let maps

// 모달 버튼에 클릭 이벤트 핸들러를 추가합니다.
modalButton2.addEventListener("click", function() {
  mymodal.style.display = "block";

  kakaoMap = document.createElement('div')
  kakaoMap.setAttribute('id', 'map-modal-select')
  kakaoMap.classList.add('map-select')

  modalContent.appendChild(kakaoMap)

  // 지도 생성
  const mapModalContainer = document.getElementById('map-modal-select')
  
  const mapModalOption = {
    center: new kakao.maps.LatLng(33.450701, 126.570667),
    level: 3
  }
  maps = new kakao.maps.Map(mapModalContainer, mapModalOption)
  
  const geocoderModal = new kakao.maps.services.Geocoder()
  geocoderModal.addressSearch(place_field2.value, function(result, status) {
    if (status === kakao.maps.services.Status.OK) {
      coordsModal = new kakao.maps.LatLng(result[0].y, result[0].x)
      const markerModal = new kakao.maps.Marker({
        map: maps,
        position: coordsModal
      })
      maps.setCenter(coordsModal)
    }
  })
});

// 모달에서 닫기 버튼에 클릭 이벤트 핸들러를 추가합니다.
close.addEventListener("click", function() {
  // modalContent.removeChild(kakaoMap)
  kakaoMap.remove()
  mymodal.style.display = "none";
});

// 모달 이외의 영역을 클릭하면 모달이 닫힙니다.
window.addEventListener("click", function(event) {
  if (event.target == mymodal) {
    // modalContent.removeChild(kakaoMap)
    kakaoMap.remove()
    mymodal.style.display = "none";
  }
});

function panTo() {
  maps.panTo(coordsModal);
}

bootstrap

          <input id="place-field" type="text" value="{{ post.place }}" name="place" aria-label="First name" class="form-control mb-3" placeholder="주소" readonly data-bs-toggle="modal" data-bs-target="#addressList" autocomplete="off">
          
            <div class="modal fade" id="addressList" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="exampleModalLabel">주소 검색</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <input class="form-control border rounded-0" type="text" list="address-list" id="place_input" autocomplete="off">
        <div class="map-modal-wrap">
          <div id="map-modal"></div>
        </div>
        <div class="modal-body">
          <ol class="list-group list-group-numbered"></ol>
        </div>
      </div>
    </div>
  </div>

  <div id="my-modal" class="Modal">
    <div class="Modal-content rounded-3">
      <div class="d-flex justify-content-between align-items-center">
        <div>
          <span id="modal-place" class="fw-bold"></span>
          <span id="modal-address"></span>
        </div>
        <div class="close">&times;</div>
      </div>
      <div id="modal-content" class="position-relative">
        <button onclick="panTo()" class="position-absolute top-0 end-0 border-0 z-3 fs-3">
          <i class="bi bi-geo-alt"></i>
        </button>
      </div>
    </div>
  </div>

 

- readonly

 <input id="region-field" type="text" value="{{ post.region }}" name="region" aria-label="Last name" class="form-control mb-3" placeholder="지역" readonly autocomplete="off">

 

- 마우스부분에 색이바뀌는 hover

<table class="article--table table table-hover">

  .comment--create:hover {
    box-shadow: 0px 0px 3px 5px rgba(40,167,69, .9);
  }
  
    .comment--user:hover {
    {% comment %} color: #28a745;
     {% endcomment %}
     text-decoration: green wavy underline;
  }