# Saving the User Name

## 이름 입력받고 저장하기

#### html

```markup

<section class="center">
    <div class="js-clock clock">
        <h3 class="clock__text">00:00</h3>
    </div>
    <div class="js-name name"></div>
    <div>
        <form class="js-to-do to-do">
            <input class="js-add-to-do to-do__add-to-do" placeholder="Write a To Do here" type="text" />
        </form>
        <ul class="js-list list"></ul>
    </div>
</section>

<div class="js-location location">
    <span class="location__text"></span>
</div>

<div class="js-weather weather">
    <span class="weather__text"></span>
</div>

<script src="js/clock.js"></script>
<script src="js/greeting.js"></script>
<script src="js/todo.js"></script>

```

#### javascript

```javascript
const nameContainer = document.querySelector(".js-name"); // 이름이 나올 부분

function paintName(name) {
  nameContainer.innerHTML = ""; // .js-name html을 쓸것을 선언
  const title = document.createElement("span"); // .js-name 하위에 span 생성
  title.className = "name__text"; //js-name 하위에 span에 name__text 클래스명 추가
  title.innerHTML = `Hello ${name}`; // span 안에 Hello 입력될 이름이 입력되게한다.
  nameContainer.appendChild(title); // nameContainer에 요소 추가한다.
}

function handleSubmit(event) {
  event.preventDefault();
  const form = event.target;
  const input = form.querySelector("input"); // form -> input
  const value = input.value; // input의 value값 저장 
  localStorage.setItem("username", value); 
  paintName(value);// 입력한값을 value 값으로 저장
}

function paintInput() {
  const input = document.createElement("input");
  input.placeholder = "Type your name here";
  input.type = "text";
  input.className = "name__input";
  const form = document.createElement("form");
  form.addEventListener("submit", handleSubmit);
  form.appendChild(input);
  nameContainer.appendChild(form);
}

function loadName() {
  const name = localStorage.getItem("username");
  if (name === null) {
    paintInput();
  } else {
    paintName(name);// 이름을 입력받을때 출력
  }
}

function init() {
  loadName();
}

init();
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://leeboa.gitbook.io/study/undefined/saving-the-user-name.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.