From ba1adb2c1d7b1f81cc3d9248ac08c4f325a1c8d8 Mon Sep 17 00:00:00 2001 From: Kimhyunmook Date: Fri, 27 Sep 2024 08:58:19 +0900 Subject: [PATCH] fix khm --- khm/index.html | 24 ++++++++++++++- khm/index.js | 80 +++++++++++++++++++++++++++++++++++++++++++++----- khm/style.css | 73 +++++++++++++++++++++++++++++++-------------- 3 files changed, 146 insertions(+), 31 deletions(-) diff --git a/khm/index.html b/khm/index.html index 1d5b77c..035614a 100644 --- a/khm/index.html +++ b/khm/index.html @@ -8,14 +8,20 @@
+
+ ☺️ +

자기소개

* 클릭

+

+ list를 눌렀을 때 li 태그에 on이라는 클래스를 toggle 하며. 해당 children의 clientHeight의 높이 값을 조절함 +

diff --git a/khm/index.js b/khm/index.js index c26e515..b8bdb1f 100644 --- a/khm/index.js +++ b/khm/index.js @@ -1,16 +1,20 @@ const label = document.querySelectorAll(".label"); -const content = document.querySelectorAll(".content"); +// const content = document.querySelectorAll(".content"); +let triger = true; -label.forEach((el, i) => { +label.forEach(async (el, i) => { const p_h = el.parentNode.clientHeight + "px"; el.parentNode.style.height = el.clientHeight + "px"; + const target = el.parentNode; if (i !== 0) { - const h = el.parentNode.children[1].clientHeight + "px"; - el.parentNode.children[1].style.height = 0; - el.addEventListener("click", (e) => { - const target = el.parentNode; - console.log(target.children[1].clientHeight); - if (target.classList[0] === "on") { + const h = target.children[1].clientHeight + "px"; + target.children[1].style.height = 0; + el.addEventListener("click", async (e) => { + if (!triger) { + alert("글자가 전부 출력 되기 전엔 클릭이 안되요!"); + return; + } + if (target.classList.value.includes("on")) { target.classList.remove("on"); el.parentNode.children[1].style.height = 0; el.parentNode.style.height = el.clientHeight + "px"; @@ -18,7 +22,67 @@ label.forEach((el, i) => { target.classList.add("on"); el.parentNode.style.height = p_h; el.parentNode.children[1].style.height = h; + // stream + if (target.classList.value.includes("stream")) { + const stremTarget = target.children[1]; + const streamText = stremTarget.textContent.trim(); + stremTarget.innerHTML = ""; + let result = ""; + const stream = (text) => + new Promise((resolve, reject) => { + try { + setTimeout(() => { + result += text; + stremTarget.innerHTML = result; + resolve(); + }, 50); + } catch (err) { + console.log(err); + } + }); + for (let i = 0; i < streamText.length; i++) { + triger = false; + await stream(streamText[i]); + if (i === streamText.length - 1) triger = true; + } + } } }); } + + if (target.classList.value.includes("myName")) { + target.addEventListener("click", () => { + target.children[0].classList.toggle("skyblue"); + }); + } +}); + +const inputs = document.querySelectorAll("input"); + +[...inputs].map((el) => { + // console.log(el); + el.addEventListener("keyup", (e) => { + console.log(e.target.value.length); + if (e.target.value.length > 10) el.style.backgroundColor = "skyblue"; + else el.style.backgroundColor = "#fff"; + }); +}); + +const myMind = document.querySelector(".myMind"); +myMind.addEventListener("mouseover", () => { + myMind.style.backgroundColor = "red"; + myMind.innerHTML = "😠"; +}); +myMind.addEventListener("mouseout", () => { + myMind.style.backgroundColor = "blue"; + myMind.innerHTML = "😭"; +}); + +const el = document.createElement("div"); +el.innerHTML = "New Div"; +window.addEventListener("scroll", (e) => { + if (window.scrollY > 30) { + el.classList.add("newDiv"); + document.body.append(el); + } }); diff --git a/khm/style.css b/khm/style.css index 38591d6..47bfb8f 100644 --- a/khm/style.css +++ b/khm/style.css @@ -4,6 +4,12 @@ box-sizing: border-box; list-style: none; } +*::-webkit-scrollbar { + display: none; +} +:root { + --mainGray: #282936; +} main { width: 62rem; @@ -11,14 +17,13 @@ main { margin: auto; } h1 { - margin-bottom: 1rem; + margin-bottom: 10px; font-size: 2.5rem; } h3 { font-weight: 500; color: rgb(255, 73, 73); - font-size: 1rem; - margin-bottom: 1rem; + font-size: 16px; } ul { border-radius: 5px; @@ -39,8 +44,9 @@ ul li div { padding: 1rem; font-weight: 500; } + .label { - background: #282936; + background: var(--mainGray); color: #fff; cursor: pointer; z-index: 99; @@ -53,8 +59,6 @@ ul li:first-child .label::before { color: rgb(255, 73, 73); } .content { - /* border-left: 2px solid #777; - border-right: 2px solid #777; */ } .content a { color: #000; @@ -69,20 +73,45 @@ ul li:first-child .label::before { .content.on { animation: anis 1s forwards; } -/* @keyframes anis { - 0% { - padding: 0; - height: 0; - opacity: 0; - } - 50% { - height: auto; - display: block; - } - 100% { - opacity: 1; - padding: 1rem; - height: auto; - } -} */ +.skyblue { + color: #000; + background: #206eff; +} +.description { + font-size: 20px; + font-weight: 600; + margin-bottom: 10px; +} +.insert { + width: 100%; + height: 100%; + border: 2px solid var(--mainGray); + font-weight: 600; + font-size: 20px; + outline: none; + border-radius: 5px; + padding: 5px; +} + +.myMind { + font-size: 50px; + background: var(--mainGray); + width: 5rem; + text-align: center; + line-height: 150%; + border-radius: 10%; + position: fixed; + top: 10%; + right: 3%; + transition: 0.5s; +} +.newDiv { + background: var(--mainGray); + width: 100%; + padding: 10px; + text-align: center; + font-size: 30px; + color: #fff; + bottom: 0; +}