23/11/27 til 모달과 투두
2023. 11. 28. 00:50ㆍ카테고리 없음
<!DOCTYPE html> // html 에서 모달을 해봤다. 모달을 해본적이 없거든여 //마침 베이직반수업
<html lang="en"> //에 모달이 있음 ㅋ
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.modal {
position: fixed; // 모달 자체를 위치를 고정
top: 0;
left: 0; // 고정될 위치 탑에서 0 왼쪽에서 0
width: 100vw; //너비가 화면크기
height: 100vh; //요거는 높이가 화면크기래여
background-color: gray;
opacity: 0.8; //오파시티가 뭐지? 불투명도 이라고함 오홍
display: none; //화면에 안보인다. 일단 안보이게 해둠
padding-top: 100px; //화면에 안보일때 클릭자체가 안됨 흐음..
}
.modal-content {
width: 200px;
height: 200px;
background-color: white;
padding: 20px;
margin: auto;
}
.경고메세지 {
color: red;
display: none;
}
.show {
display: block; //이제 요걸 addclasslist로 일정 태그 안에 넣어서 안보이게끔 함
} //화면에 보이게끔 하는 block이 class show에 이미 설정되있기
</style> //때문에 그걸 클래스에 추가함으로서 보이게 로직을짬
</head>
<body>
<div>본문</div>
<button class="modal-btn">모달열기</button>
<div class="modal">
<div class="modal-content">
<input class="아이디" type="text" />
<input class="비밀번호" type="password" />
<div class="경고메세지">
아이디, 비번 채워넣으세요~~~!! <button class="경고창닫기">X</button>
</div>
<button>로그인하기</button>
<button class="close-btn">닫기</button>
</div>
</div>
<script>
document
.querySelector(".modal-btn")
.addEventListener("click", function () {
document.querySelector(".modal").classList.toggle("show");
}); // 다큐먼트 쿼리 셀렉터로 클래스가 모달인거 가져와서
// 클레스 리스트 토글 매서드를 쓴다. 토글 안에 인자의 값을
//클래스에 추가 add( "show" )하면 추가만 remove ("show") 하면 삭제만
document.querySelector(".login").addEventListener("click", function () {
if (
document.querySelector(".아이디").value === "" ||
document.querySelector(".비밀번호").value === ""
) { //if문 아이디 비밀번호가 클래스명인
경고메세지열닫("block"); //두 인풋에 쓰여지는 벨류값이 빈태그이면
} else { // 클래스명이 로그인인 버튼을 클릭하는 이벤트가 발생하면
// 로그인 진행하기 // 경고메세지 열닫 함수가 작동하면서 파라미터로 준 "block"
} //이 발생함
});
</script>
</body>
베이직반 유즈스테이트 마스터 해보기
import { useState } from "react";
import { nanoid } from "nanoid"; // nanoid import
function App() {
// 각 데이터에 고유한 id 부여
const [todos, setTodos] = useState([
{ id: nanoid(), content: "리액트 공부하기1", count: 0 }, //일단 객체가 카운트 추가
{ id: nanoid(), content: "리액트 공부하기2", count: 0 },
{ id: nanoid(), content: "리액트 공부하기3", count: 0 },
{ id: nanoid(), content: "리액트 공부하기4", count: 0 },
]);
return (
<>
{todos.map((todo, i) => { //map의 콜백함수로 첫번째 파라미터는 요소 두번쨰는 인덱스
return (
// key에 nanoid 적용
<div key={todo.id}>
<span>{todo.content}</span>
<button
onClick={() => {
setTodos(todos.filter((td) => td.id !== todo.id)); //위에 투두스 맵핑의 투두의
}} //아이디와 안의 필터의 td 아이디가 일치하지 않는거 배제
>
삭제
</button>
<button
onClick={function () {
const 숫자야 = todos.map(function (item) {
if (item.id === todo.id) {
return {
...item, //스프레드 오퍼레이션 다른 키와 벨류는 그냥 씀
count: item.count + 1, //이거 생각이 안남 item.count 기억해라
};
} else {
return item;
}
});
setTodos(숫자야);
}}
>
좋아요
</button>
<p>숫자 {todo.count}</p>
</div>
);
})}
</>
);
}
export default App;
유즈 스테이트 연습2
import { useState } from "react";
import { nanoid } from "nanoid"; // nanoid import
function App() {
const [fafa, setfafa] = useState(""); //
const [isdone, setIsdone] = useState(true); //요거 다크모드할때 쓸 isdone
return (
<>
<div>
<select
onChange={(e) => {
setfafa(e.target.value); //온체인지 에 이벤트를 파라미터로 받고
}} // 이벤트 타겟 좀 밸류
>
<option>zzzzzz</option>
<option>szdddd</option>
<option>dddddd</option>
<option>ffffff</option>
</select>
</div>
<p>{fafa}</p> //자바스크립트로 fafa를 나타냄
<div>
{!isdone ? (
<div style={{ backgroundColor: "black", color: "white" }}>
{" "}
다크모드 //삼항연사자로 isdone이 트루냐 폴스냐에 따라
</div> //토글 하면서 다크모드와 화이트모드가 바뀐다.
) : (
<div>화이트모드</div>
)}
</div>
<button
onClick={() => {
setIsdone(!isdone); // isdone상태를 계속 바꾼다.
}}
>
다크다크
</button>
</>
);
}
export default App;