🍰 [Project] 쇼핑 목록앱 만들기 (완성)

🌊 쇼핑 목록앱 만들기

 

구현 요소

완료

• HTML/CSS
• + 버튼을 누르면 리스트 추가하기
• input을 입력후 엔터를 누르면 리스트 추가하기
• 휴지통 버튼을 누르면 해당 리스트 삭제되기

느낀점

• 이렇게 금방 끝낼 줄 알았으면 저번에 완료할 걸..

 

 

구현 방법

 

HTML

  <section id="shopping">
      <header
        id="header"
        class="gradient-bar"
      >
        Shopping List
      </header>
      <div class="basket-container">
        <ul class="basket-list"></ul>
        <input
          type="text"
          class="input"
        />
      </div>
      <footer
        id="footer"
        class="gradient-bar"
      >
        <button id="list-add_btn">
          <div class="horizontal"></div>
          <div class="vertical"></div>
        </button>
      </footer>
    </section>

고민했던 부분

1. 클래스명 짓기
   조금 더 직관적으로, 남들이 알아 볼 수 있게 정하고자 했다. 
2. 버튼 안에 div 태그
   사실 가상요소 선택자인 before, after로 하는 것이 더 좋은 방법일 거라고 늘 생각해서 선호하지 않는 방식이나 이렇게 한 번 구현해봤다. 

 

CSS

@font-face {
  font-family: 'Pretendard-Regular';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff')
    format('woff');
  font-weight: 400;
  font-style: normal;
}

* {
  margin: 0;
  padding: 0;
  font-family: 'Pretendard-Regular';
  box-sizing: border-box;
}

li {
  list-style: none;
}

#shopping {
  width: 480px;
  height: 80vh;
  border-radius: 1rem;
  margin: 10vh auto;
  display: flex;
  flex-direction: column;
  border-radius: 1rem;
  overflow: hidden;
}

.gradient-bar {
  padding: 1rem;
  background: linear-gradient(45deg, #e6bfd6, #8dbbef);
  text-align: center;
  color: #fff;
  font-size: 1.5rem;
}

.basket-container {
  flex: 1;
  background: #eee;
  display: flex;
  flex-direction: column;
}
.basket-list {
  flex: 1;
}
.basket-list li {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  padding: 0.5rem 1rem;
}
.list-remove_btn {
  width: 30px;
  height: 30px;
  background: url('trash.png');
  background-size: contain;
  border: none;
  cursor: pointer;
}
.input {
  border: none;
  width: 100%;
  line-height: 1.6;
  height: 30px;
}

#list-add_btn {
  background: #fff;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  border: none;
  cursor: pointer;
  position: relative;
}
#list-add_btn:focus {
  background: #000;
}

#list-add_btn div {
  position: absolute;
  background: #333;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#list-add_btn:focus div {
  background: #fff;
}
.horizontal {
  width: calc(100% - 10px);
  height: 3px;
}
.vertical {
  width: 3px;
  height: calc(100% - 10px);
}

 

 

JS

// dom 요소 불러오기.
const input = document.querySelector('.input');
const addBtn = document.querySelector('#list-add_btn');
const ul = document.querySelector('.basket-list');

// 리스트 추가 함수
const addList = () => {
  const text = input.value;
  if (text === '') {
    input.foucs();
    return;
  }
  const li = document.createElement('li');
  const span = document.createElement('span');
  const button = document.createElement('button');
  button.classList.add('list-remove_btn');
  button.addEventListener('click', removeItem);
  span.textContent = text;
  li.append(span, button);
  ul.append(li);
  input.value = '';
};

// 리스트 삭제 함수
const removeItem = (e) => {
  e.target.parentElement.remove();
};

// 리스트 추가 이벤트, addList() 함수를 실행시켰다.
addBtn.addEventListener('click', function (e) {
  addList();
});

input.addEventListener('keypress', function (key) {
  if (key.key === 'Enter') {
    addList();
  }
});

 

 

 

 

 

그 외

 

드림코더 엘리님의 브라우저101 중 쇼핑 목록앱 만들기입니다.

저작권 문제로 풀이 과정은 올리지 않습니다. 

프론트엔드 필수 브라우저 101