+ 이걸 안보시면 진정한 드라마 킬러가 아니십니다. 지창욱 이 사람은
+ 상처받은 저런 눈빛으로 매달리는 연기를 너무 잘해여..보는 내가
+ 미안하고..속상하구..안아주고 싶고..제가 진짜 드라마 광인데
+ 그래서 별의별 다정하구 착하구 설레는 남주들 다 봤지만 ㄹㅇ 이
+ 드라마 남주가 그냥 원탑임. 어떻게 설레는 연기를 자연스럽게 할 수
+ 있고 한 사람 하나만 바라보고 매달리고 집착하는 순정남 연기를
+ 어떻게 저렇게 잘함. 진짜 사랑해요. 아 암튼 이 드라마가 무슨
+ 내용이냐면요. 휴가를 갈려고 양양을 찾은 남주가 거기서 여주를
+ 만나 처음부터 서로한테 반해가지구 사랑에 빠지게 되는데요 .그렇게
+ 두 달동안 행복하게 나날을 보내고 있던 도중에 남주가 서울로 먼저
+ 올라가게 되면서 잠깐 헤어지게 됐는데 여주가 그 이후로 자취를
+ 감춰요. 그 이후에 미친듯이 남주는 여주를 찾아다니다가 1년 뒤에
+ 만나게 됐는데, 근데!! 알고보니까 여주가 양양에서는 다른 이름을
+ 가지구 다른 사람으로 살아갔다는 걸 알게 되고...그렇게 남주가
+ 배신감 느끼고 여주랑 사이가 나빠졌다가 여주 사연듣구 막 다시
+ 몽글몽글해지는 사이가 되는 암튼 그런 내용인데 글만 읽으면 그런
+ 감정이 1도 안느껴지니까 당장 보러가시길..
+
-
+
-
TIL
+
Today I Learned
오늘 새롭게 배운 것들을 기록합니다.
-
+
-
+
-
HTML 시멘틱 태그
-
header, nav, main, section, article, footer 등 시멘틱 태그의 역할과 사용법을 배웠다.
+
+ header, nav, main, section, article, footer 등 시멘틱 태그의
+ 역할과 사용법을 배웠다. 웹 접근성과 SEO 향상에 큰 도움이 된다.
+
+
+
+
+
실행 컨텍스트 (Execution Context)
+
+ 자바스크립트 엔진이 코드를 실행하기 위해 필요한 환경 정보를
+ 모아놓은 객체의 생성 과정을 깊이 있게 학습했다.
+
-
diff --git a/js/index.js b/js/index.js
index da9ea6a..8167e16 100644
--- a/js/index.js
+++ b/js/index.js
@@ -1,12 +1,45 @@
-// TODO: TIL 폼 등록 기능을 구현하세요
-// 1. 폼 요소와 목록 요소를 querySelector로 선택합니다.
-// 2. 폼의 submit 이벤트를 감지하여 새 TIL 항목을 목록에 추가합니다.
-
+// TIL List registration functionality
const tilForm = document.querySelector("#til-form");
const tilList = document.querySelector("#til-list");
-tilForm.addEventListener("submit", function (event) {
- event.preventDefault();
+if (tilForm && tilList) {
+ tilForm.addEventListener("submit", function (event) {
+ event.preventDefault();
+
+ // 1. Get input values
+ const dateInput = document.querySelector("#til-date");
+ const titleInput = document.querySelector("#til-title");
+ const contentInput = document.querySelector("#til-content");
+
+ const date = dateInput.value;
+ const title = titleInput.value;
+ const content = contentInput.value;
+
+ // 2. Create new TIL item structure
+ const article = document.createElement("article");
+ article.classList.add("til-item");
+
+ const time = document.createElement("time");
+ time.textContent = date;
+
+ const h3 = document.createElement("h3");
+ h3.textContent = title;
+
+ const p = document.createElement("p");
+ p.textContent = content;
+
+ // 3. Assemble and add to list
+ article.appendChild(time);
+ article.appendChild(h3);
+ article.appendChild(p);
+
+ // Add to the top of the list
+ tilList.prepend(article);
- // TODO: 입력값을 가져와서 새 TIL 항목을 만들어 목록에 추가하세요
-});
+ // 4. Reset form
+ tilForm.reset();
+
+ // Optional: Scroll to the new item
+ article.scrollIntoView({ behavior: 'smooth', block: 'center' });
+ });
+}
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 