[JS프로젝트] 3. 리뷰 사이트 만들기

[나의 코드]

- app.js

// local reviews data
const reviews = [
    {
      id: 1,
      name: 'susan smith',
      job: 'web developer',
      img: 'https://images2.imgbox.com/e0/57/qI5bbwvg_o.jpeg',
      text: "I'm baby meggings twee health goth +1. Bicycle rights tumeric chartreuse before they sold out chambray pop-up. Shaman humblebrag pickled coloring book salvia hoodie, cold-pressed four dollar toast everyday carry",
    },
    {
      id: 2,
      name: 'anna johnson',
      job: 'web designer',
      img: 'https://images2.imgbox.com/2e/6e/JAMvTZ56_o.jpeg',
      text: 'Helvetica artisan kinfolk thundercats lumbersexual blue bottle. Disrupt glossier gastropub deep v vice franzen hell of brooklyn twee enamel pin fashion axe.photo booth jean shorts artisan narwhal.',
    },
    {
      id: 3,
      name: 'peter jones',
      job: 'intern',
      img: 'https://images2.imgbox.com/56/88/oJvFN3l5_o.jpeg',
      text: 'Sriracha literally flexitarian irony, vape marfa unicorn. Glossier tattooed 8-bit, fixie waistcoat offal activated charcoal slow-carb marfa hell of pabst raclette post-ironic jianbing swag.',
    },
    {
      id: 4,
      name: 'bill anderson',
      job: 'the boss',
      img: 'https://images2.imgbox.com/8b/1c/vwWNTsCd_o.jpeg',
      text: 'Edison bulb put a bird on it humblebrag, marfa pok pok heirloom fashion axe cray stumptown venmo actually seitan. VHS farm-to-table schlitz, edison bulb pop-up 3 wolf moon tote bag street art shabby chic. ',
    },
  ];
// btn-container
const random_btn = document.querySelector('.random-btn');
const prev_btn = document.querySelector('.prev-btn');
const next_btn = document.querySelector('.next-btn');

// person
let currentItem = 0;
const img = document.getElementById('person-img');
const author = document.getElementById('author');
const job = document.getElementById('job');
const info = document.getElementById('info');

random_btn.addEventListener('click',(btn)=>{
    console.log('random-btn clicked');
    currentItem = getRandomcurrentItem();
    changePerson(currentItem);
});

prev_btn.addEventListener('click',(btn)=>{
    console.log('prev-btn clicked');
    if(currentItem>0) currentItem--;
    else currentItem = reviews.length-1;
    changePerson(currentItem);
});

next_btn.addEventListener('click',(btn)=>{
    console.log('next-btn clicked');
    if(currentItem<reviews.length-1) currentItem++;
    else currentItem = 0;
    changePerson(currentItem);
});

function changePerson(currentItem){
    author.textContent = reviews[currentItem].name;
    job.textContent = reviews[currentItem].job;
    info.textContent = reviews[currentItem].text;
    img.src = reviews[currentItem].img;
}

function getRandomcurrentItem(){
    return Math.floor(Math.random()*reviews.length);
}

-> 데이터가 많아지면, 동작이 느려짐

 

[더 좋은 코드]

//이 코드를 추가
window.addEventListener('DOMContentLoaded',()=>{
    const item = reviews[currentItem];
    img.src = item.img;
    author.textContent = item.name;
    job.textContent = item.job;
    info.textContent = item.text;
});

-> 'DOMContentLoaded' 로 실행 속도를 높임

(참고) https://itnote-for-me.tistory.com/22

---

 

<새로 알게 된 사실>

- text 객체의 경우, (객체).textContent로 내용을 변경하고,

  image의 경우, (객체).src로 내용을 변경함

//index.html
<h4 id="name">Name</h4>
<img src="example.jpeg" id="image" alt="error"/>

//app.js
/*==============
    text 객체
==============*/
const name = document.getElementById('name');
name.textContent = "New Name";

/*==============
    img 객체
==============*/
const img = document.getElementById('image');
img.srct = "NewImage.jpeg";

- img 태그에서

  alt : 이미지 업로드 실패할 경우 띄울 메시지

 

---

프로젝트 참고

https://www.freecodecamp.org/news/javascript-projects-for-beginners/

40 JavaScript Projects for Beginners – Easy Ideas to Get Started Coding JS