노마드 코더 바닐라 JS-2

function onLoginBtnClick(){
  const username = loginInput.value;
  if (username === ""){
    alert("Plz write your name")
  }else if(username.length>15){
    alert("too long!")
  }
 
}

위와 아래 같은 작용

html적용

 <form id="login-form">
  <input required maxlength="15" type="text" placeholder="What is your name?">
  <button>Log In</button>
  </form>

클릭시 자동으로 submit 후 새로고침

<input type="submit" value="Log In"></input>

Log in 이름의 버튼이 생성됨 엔터로도 submit가능

 

const loginForm = document.getElementById("login-form");
const loginInput = loginForm.querySelector("input");



function onLoginSubmit(event){
  event.preventDefault(); //기본동작 submit후 새로고침을 막음
  console.log(loginInput.value);
}

loginForm.addEventListener("submit", onLoginSubmit);

 이코드 설명보면 왠만한 모든 리액트 기작이 들어있음 췤

const toDoForm = document.getElementById("todo-form")
const toDoInput = toDoForm.querySelector("input")
const toDoList = document.getElementById("todo-list")

const TODOS_KEY = "todos"  //여러번 사용할때 틀림 방지를 위해 사용

let toDos = []  //원래 const여쓴데 새로고침할때마다 새로운 배열이 저장되서 let으로 바꿔서 누적되게함

function saveToDos(){
  
  localStorage.setItem(TODOS_KEY, JSON.stringify(toDos))
}

function deleteTodo(event){
  const li = event.target.parentElement //이벤트가 일어난곳의 부모요소를 li로 취급
  li.remove(); //그거지워
  toDos = toDos.filter((todo) => todo.id !== parseInt(li.id))
  //필터함수 저장해놓은 todo값 배열을 가지고 진행 todo의 배열의 id값이 li의 id값과 같지 않다면 false기 때뭉에 삭제 -- 메인에서 x누르면 지워지면 html에서는 삭제된게 되므로 뒤의 조건식을 사용할 수 있음
  saveToDos()
}

function paintToDo(newToDo){
  const li = document.createElement("li") //li라는 요소를만듬
  li.id = newToDo.id
  const span = document.createElement("span")  //span이라는 요소를 만듬
  span.innerText =newToDo.text; //span사이에는 새로적은 newToDo가 들어감
  const button = document.createElement("button") // 버튼요소만듬
  button.innerText = "❌" //버튼에 들어갈 내용
  button.addEventListener("click", deleteTodo) //click을 했을때 이벤트 발생
  li.appendChild(span)  //list에 span을 하위항목으로 어펜드함
  li.appendChild(button) //span 추가후 버튼추가
  toDoList.appendChild(li)  //투두리스트에 하위항목으로 li가 들어감
}

function handleToDoSubmit(event) {
  event.preventDefault();
  const newToDo = toDoInput.value;
  //input의 현재 value를 새로운 변수에 복사 그뒤에 하는 건 newToDo와 관련 없음
  toDoInput.value = ""
  const newTodoObj = {
    text:newToDo,
    id : Date.now()  //id로 리스트 구별하고싶어
  }
  toDos.push(newTodoObj) //toDos에 내가 적은 투두리스트 추가하고
  paintToDo(newTodoObj)  //화면에 표시
  saveToDos()
}

toDoForm.addEventListener("submit",handleToDoSubmit);

const savedToDos = localStorage.getItem(TODOS_KEY)

if(savedToDos !== null){
  const parsedTodos = JSON.parse(savedToDos) //parse하면 배열로 나타남
  toDos = parsedTodos
  parsedTodos.forEach(paintToDo)  //내가 저장한 투두리스트 바로 화면에 띄워줌
  };