그들은 당신의 소셜에서 좋아요를 어떻게 계산합니까? 알아보기 위해 JavaScript 함수를 만들어 봅시다

하루에 몇 번이나 인터넷 어딘가에서 좋아요 수를 확인합니까? 셀 수 없이 많죠?.

좋아요 수를 조작할 수 있는 나만의 좋아요 버튼이 있다면 어떨까요?

기본 HTML 및 CSS를 알고 있으면 나만의 LIKE 버튼을 만들 수 있습니다.

또한 다음 기본 JavaScript 개념을 알고 있으면 좋아요 수를 조작할 수 있습니다.

데이터 유형

배열 방법

자바스크립트 DOM

스위치 케이스

오브젝트

정규식

화살표 기능

스프레드 연산자

삼항 연산자

1. HTML 만들기

<h2>Let's Manipulate Your Likes-Count</h2>

<h3>Follower List</h3>

<div id="follower-list">

  <input type="checkbox" id="friend" value="My Best Friend">
  <label for="friend">My Best Friend</label> <br>

  <input type="checkbox" id="pet" value="My Pet">
  <label for="pet">My Pet</label> <br>

  <input type="checkbox" id="neighbour" value="My Neighbour">
  <label for="neighbour">My Neighbour</label> <br>

  <input type="checkbox" id="teacher" value="My Teacher">
  <label for="teacher">My Teacher</label> <br>

  <input type="checkbox" id="parents" value="My Parents">
  <label for="parent">My Parents</label> <br>

  <input type="checkbox" id="boss" value="My Boss">
  <label for="boss">My Boss</label> <br>

  <input type="checkbox" id="alien" value="An Alien From The Mars">
  <label for="alien">An Alien From The Mars</label> <br>
</div>

<h3>Let's Check Who Likes This...?</h3>

<h4>Please Click The Like Button If You Like This...</h4>

<button id="like-btn">Like</button>

<p id="show-likes"></p>

CSS를 사용하여 약간의 맛을 추가하십시오. 그것은 모두 당신에게 달려 있습니다.

2. JavaScript로 생명을 불어넣다

let likeBtn = document.querySelector("#like-btn");
let showLikes = document.querySelector("#show-likes");
let followerList = document
  .querySelector("#follower-list")
  .querySelectorAll("input[type=checkbox]");
let likes = [];

followerList.forEach((follower) => {
  follower.addEventListener("change", function (e) {
    likes = Array.from(followerList)
      .filter((e) => e.checked)
      .map((e) => e.value);
  });
});

likeBtn.addEventListener("click", (e) => {
  showLikes.innerHTML = countLikes(likes);
  console.log(countLikes(likes));
});

function countLikes(likes) {
  switch (likes.length) {
    case 1:
      return `${likes[0]} likes this.`;
    case 2:
      return `${likes[0]} and ${likes[1]} like this.`;
    case 3:
      return `${likes[0]}, ${likes[1]} and ${likes[2]} like this.`;
    default:
      return likes.length > 3
        ? `${likes[0]}, ${likes[1]} and ${likes.length - 2} others like this.`
        : `No one, but only I like this.`;
  }
}

3. 좋아요를 계산하는 다른 방법

이제 끝났습니다! 원하는 만큼 가지고 놀 수 있습니다.

하지만 기다려!

여기서는 switch-case 문을 사용하여 좋아요 수를 계산했습니다. 그러나 function countLikes() {} 를 만드는 방법은 수천 가지가 있습니다.

좋아요 수를 세는 멋진 방법을 시도해 봅시다.

방법 1:

사용한 개념: 객체, 화살표 함수 및 삼항 연산자

const countLikes = (likes) => {
  let format = {
    1: `${likes[0]}`,
    2: `${likes[0]} and ${likes[1]}`,
    3: `${likes[0]}, ${likes[1]} and ${likes[2]}`,
    4: `${likes[0]}, ${likes[1]} and ${likes.length - 2} others`
  };

  let who =
    likes.length > 0 ? format[Math.min(likes.length, 4)] : `No one, but only I`;
  let likeThis = likes.length === 1 ? ` likes this.` : ` like this.`;

  return who + likeThis;
};

방법 2:

사용된 개념: 정규식, String.replace() 및 Array.shift()

function countLikes(likes) {
  let format = [
    "No one, but only I like this.",
    "{name} likes this.",
    "{name} and {name} like this.",
    "{name}, {name} and {name} like this.",
    "{name}, {name} and {n} others like this."
  ];

  let index = Math.min(likes.length, 4);
  return format[index].replace(/{name}|{n}/g, function (val) {
    return val === "{name}" ? likes.shift() : likes.length;
  });
}

방법 3:

사용된 개념: 삼항 연산자 및 Array.shift()

function countLikes(likes) {
  let len = likes.length;

  if (len <= 1) {
    return len === 0
      ? "No one, but I like this."
      : likes.shift() + " likes this.";
  } else {
    return (
      (len < 4
        ? (len < 3 ? "" : `${likes.shift()}, `) +
          `${likes.shift()} and ${likes.shift()}`
        : `${likes.shift()}, ${likes.shift()} and ${likes.length} others`) +
      " like this."
    );
  }
}

방법 4:

사용된 개념: 스프레드 연산자 및 정의되지 않음

function countLikes([first, second, ...others]) {
  let whoLikesThis;
  if (others.length <= 0) {
    if (second === undefined) {
      if (first === undefined) {
        whoLikesThis = `No one, but only I like this.`;
      } else {
        whoLikesThis = `${first} likes this.`;
      }
    } else {
      whoLikesThis = `${first} and ${second} like this.`;
    }
  } else {
    if (others.length === 1) {
      whoLikesThis = `${first}, ${second} and ${others[0]} like this.`;
    } else
      whoLikesThis = `${first}, ${second} and ${others.length} others like this.`;
  }
  return whoLikesThis;
}

이제 좋아하는 사람에게서 받은(또는 받고 싶은) 좋아요 수를 알려주세요.



메모:
이 게시물은 Who likes it?이라는 코드워 문제에서 영감을 받았습니다. 그리고 이 문제를 놀랍게 해결한 모든 전사들에게 감사를 전하고 싶습니다.

ko-fi에서 저를 지원할 수 있습니다. 나는 항상 당신의 지원에 감사하며 계속 나아가도록 격려합니다.

행복한 코딩!

이미지 크레디트: Unsplash의 Daria Nepriakhina