Interactive_rating_component 구현

문제

문제링크

result

github code 링크
완성본 링크

새로 배운 것

css

• constant var css

  :root {
      --mobile-width: 375px;
      --desctop-width: 1440px;
  
      --very-dark-blue: hsl(216, 12%, 8%);
      --dark-blue: hsl(213, 19%, 18%);
      --medium-grey: hsl(216, 12%, 40%);
      --light-gray: hsl(217, 12%, 63%);
      --white: hsl(0, 0%, 100%);
      --primary: hsl(25, 97%, 53%);
  
      --font-size: 15px;
  
      --font-family: Overpass;
      --font-weight-small: 400;
      --font-weight-big: 700;
    }

  • css를 변수로 저장하여 재사용할 수 있음을 알았다.

• css 분리(interface 분리 원칙과 비슷)

  • css의 기능을 잘게 쪼개서 재사용 할 수 있다.
  • ex) hidden, flex-center,hoverable 등

• :before 을 이용하여 content를 직접 삽입할 수 있다.

• input style을 label과 함께 이용하여 커스텀 할 수 있다.

  input[type='radio'] {
         display: none;
       }
  input[type='radio']:checked + label {
   color: var(--white);
   background-color: var(--light-gray);
  }

html

• fieldset을 이용하여 radio input을 관리할 수 있다.
• img tag를 감쌀때 figure 태그를 container로 이용할 수 있다.

js

• formData객체를 이용하여 form객체의 데이터를 쉽게 뽑아낼 수 있다.

고민해야할 부분

• css를 더 효율적으로 관리할 순 없을까?
• scss에서 쓸 수 있는 mixIn기능이 순수 css에는 없는걸까?
• 간단한 FormData지만 observer pattern을 쓰는게 좋을까?