본문 바로가기
반응형

Project/mini

[바닐라JS] Todo List 만들기 - DOM 자바스크립트 예제
Project/mini 2023. 8. 14. [바닐라JS] Todo List 만들기 - DOM 자바스크립트 예제 JS 코드 To-Do 항목 배열 및 다음 항목 번호 설정 const itemList = [ { no: 1, todo: "두부", done: false }, { no: 2, todo: "계란", done: false }, { no: 3, todo: "라면", done: false }, ]; let nextNo = itemList.length + 1; itemList To-Do 항목들을 객체 형태로 가진 배열. no (고유 번호), todo (할 일 내용), done (완료 여부) 속성. nextNo 새로운 To-Do 항목을 추가할 때 사용될 다음 항목 번호. To-Do 항목 렌더링 함수 function renderTodoItem({ no, todo, done = false }) { // 새로운 요소 생성 ..
[typescript/타입스크립트] ToDo List 미니 프로젝트 - FullList 코드리뷰
Project/mini 2023. 7. 31. [typescript/타입스크립트] ToDo List 미니 프로젝트 - FullList 코드리뷰 HTML 삽입 미리보기할 수 없는 소스 List 인터페이스 import ListItem from './ListItem' interface List { list: ListItem[], load(): void, save(): void, clearList(): void, addItem(itemObj: ListItem): void, removeItem(id: string): void, } 1. list: ListItem[] - list는 Todo 항목들을 저장하는 ListItem객체들로 이루어진 배열이다. Todo 리스트의 모든 항목들은 이 배열에 담겨 관리된다. 2. load() - load() 메서드는 이전에 저장된 Todo 항목들을 로드해서 _list에 추가하는 기능을 수행한다. 보통 Todo 리스트 애플..
[Spotify] 스포티파이 프리미엄 클론코딩 (미완성본) Box레이아웃
Project/mini 2023. 6. 11. [Spotify] 스포티파이 프리미엄 클론코딩 (미완성본) Box레이아웃 보기에만 번지르르한 무에서 유를 창조한 나의 첫 결과물이다ㅎㅎ 처음에는 술술 잘풀리기에 너무 기분이 좋았는데 몇가지 문제점 때문에 그냥 새로운 웹사이트를 클론코딩해보려고 한다ㅎㅎ... 내가 이 작업을 시작할때 박스레이아웃과 플렉스 레이아웃 살짝 만을 안채로 시작했는데 그리드레이아웃에 대해 새롭게 순간,, 아 이건 크게 잘못되었구나 라고 인지하게 되었다.. 문제점 .section2 .text2-1{ font-size: var(--font-l); text-align: center; font-weight: bolder; margin-bottom: 40px; padding-top: 120px; } .section2 .text2-2{ font-size: var(--font-m); margin-bottom: 40p..
[McDonald] 맥도날드 홈페이지 클론코딩 | 그리드 레이아웃 반응형 웹
Project/mini 2023. 6. 11. [McDonald] 맥도날드 홈페이지 클론코딩 | 그리드 레이아웃 반응형 웹 이번 맥도날드 크론코딩에서 핵심은 ' 그리드레이아웃을 이용한 반응형 웹 ' 을 구현하는 것이다. 주요코드 설명 #conteiner { width: 100vw; height: 100vh; display: grid; grid-template-rows: 0.5fr 1fr; grid-template-columns: 1fr; grid-template-areas: "header" "content"; } 웹의 전체 넓이와 높이를 각각 100vw, 100vh로 설정하여 전체를 사용하게했고 헤더와 컨텐츠를 그리드레이아웃을 이용해여 구획하였다. header #nav { display: flex; justify-content: center; align-items: center; position: fixed; backgrou..
[Youtube] 유튜브 클론코딩, 처음으로 막힘없이 따라했다! !! (유튜브 드림코딩)
Project/mini 2023. 6. 6. [Youtube] 유튜브 클론코딩, 처음으로 막힘없이 따라했다! !! (유튜브 드림코딩) 위의 드림코딩님의 영상을 보고 따라해보았다. 클론코딩을 하지마라, 부정적인 시선들이 많지만 초보자 입장에서 공부용으로 최고인것같다 ..! 일단 코드를 많이 치는 환경에 익숙해지고 시니어 개발자들은 어떻게 작업하는지 알 수 있게 되기 때문이다. 내가만든 유튜브~! 흑 뿌듯하다 !! Up next 부분에는 네이버블로그에서 썼던 썸네일과 제목을 빌려왔다ㅎㅎ 드림코딩님과 함께한 완성작에서 변화시킨 점은 1. hover로 액션아이콘 파랑색으로 만들기 2. 구독버튼을 현재 유튜브처럼 3. 댓글창을 추가했다! 난생 처음으로 혼자서 무에서 유를 창조해본 시간이었다. 고작 웹에서 표현되는건 3줄? 정도지만 정말 많이 시간이 소요되었다. 나중에 이 일이 익숙해지면 나도 후루룩 뚝딱 만들 수 있겠지? 이번 클론코딩으로 배운..
[계산기] 계산기만들기 예제 따라하기 (유튜브 수코딩)
Project/mini 2023. 6. 3. [계산기] 계산기만들기 예제 따라하기 (유튜브 수코딩) CSS *{ margin: 0; padding: 0; box-sizing:border-box; } body{ background-color: #1f1f1f; display: flex; justify-content: center; align-items: center; height: 100vh; } .calculator{ width: 287px; border: 1px solid #333; background-color: #ccc; padding: 5px; } .calculator form{ display: grid; grid-template-columns: repeat(4, 65px); grid-auto-rows: 65px; grid-gap: 5px; } .calculator form input{ borde..
반응형

티스토리툴바