아고라 스테이츠

아고라 스테이츠 (미완)

사이버 펑크 느낌으로 만들어 보고 싶어서 꾸며보았다.. 근데 아직 디테일한 디자인이 많이 부족한 것 같다.

 

submit버튼을 만들 때 기존에 있던 함수를 활용하지 않고 작성을 했다가 코드가 굉장히 지저분해서

다시 지우고 새로 작성을해주었다.

 

// SUBMIT BTN

const inputName = document.querySelector("#name");
const inputTitle = document.querySelector("#title");
const textInput = document.querySelector("#story");
const inputForm = document.querySelector(".form");
const now = new Date();

// Img Random
const imagePaths = [
  (src = "/fe-sprint-my-agora-states/img/ava1.png"),
  (src = "/fe-sprint-my-agora-states/img/ava2.png"),
  (src = "/fe-sprint-my-agora-states/img/ava3.jpg"),
  (src = "/fe-sprint-my-agora-states/img/ava4.png"),
];
function showRandomImage() {
  let randomIndex = Math.floor(Math.random() * imagePaths.length); // 랜덤한 인덱스 선택
  let randomImagePath = imagePaths[randomIndex]; // 선택한 인덱스에 해당하는 이미지 파일의 경로
  let img = new Image();
  img.src = randomImagePath;
  return img.src;
}

showRandomImage();
inputForm.addEventListener("submit", event => {
  event.preventDefault();
  const newObj = {};

  newObj.id = null;
  newObj.createdAt = now.toISOString();
  newObj.title = inputTitle.value;
  newObj.url = null;
  newObj.author = inputName.value;
  newObj.answer = null;
  newObj.bodyHTML = textInput.value;
  newObj.avatarUrl = showRandomImage();

  agoraStatesDiscussions.unshift(newObj);
  ul.prepend(convertToDiscussion(newObj));

  inputName.value = ""; // 초기화
  inputTitle.value = "";
  textInput.value = "";
});

이미지를 랜덤 하게 주고 싶어서 Math.random()을 사용했다. 서브밋을 눌렀을 때 입력값이 남아있어서 초기화를 추가해 주었다.

 

 

---

const liEls = document.querySelectorAll(".discussion__container");

for (let i = 0; i < liEls.length; i++) {
  const showMessage = document.querySelector("#showMessage");
  let pTagText = document.querySelector(".showMessage_content p");
  let closeBtn = document.querySelector(".showMessage_content .closeBtn");
  liEls[i].addEventListener("click", function () {
    // console.log(`li ${i + 1} was clicked`);
    pTagText.textContent = "TEXT";
    closeBtn.textContent = "❌";
    // agoraStatesDiscussions[i].bodyHTML;
    showMessage.style.display = "block";
  });

  closeBtn.addEventListener("click", function () {
    showMessage.style.display = "none";
  });
}

이 코드는 li요소를 클릭했을 때 내용: agora의 body.HTML을 가져와서 팝업메시지처럼 보여주는 코드인데,

아직 구현이 안 됐다. +정상적으로 작동하지 않아서 뜯어고쳐야 한다.

 

 

.form__submit input:hover {
  animation: glitch 1s infinite;
}

@keyframes glitch {
  0% {
    text-shadow: -3px 0px rgb(0, 217, 33), 3px 0px #ffc600;
    opacity: 60%;
  }

  50% {
    text-shadow: -3px 0px #e900ff, 3px 0px rgb(255, 49, 49);
    opacity: 35%;
  }

  100% {
    text-shadow: -3px 0px #ffc600, 3px 0px rgb(0, 217, 33);
    opacity: 87%;
  }
}

글리치 효과를 주고 싶어서 애니메이션을 넣어주었다. 참고한 코드는 굉장히 복잡해서 실현하지 못했지만...

비슷하게나마 구현했다. submit버튼을 hover 하면 동작한다.

 

 

---

과제를 만드느라 다른 공부는 하나도 못했다.. 코드가 길어지니까 굉장히 헷갈리고.. 가독성에 신경을 써줘야 할 것 같고.. 열심히.. 해야겠다..