[Web]간단한 랜덤 타이핑 페이지

HTML, CSS, Javascript를 이용한 간단한 랜덤 타이핑 페이지 제작

---

Random Typing Page

 

코드 설명

---

HTML

  <div class="wrap">
    <h1>
      <span class="material-icons">language</span>
    </h1>

    <p id="dynamic" class="lg-text">
    </p>

    <p class="sm-text">
      SUCODING | 100 Subscribe
    </p>
  </div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: darkslateblue; 
}

.wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
}

.material-icons {
  font-size: 10rem;
}

.lg-text {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 5px;
}

.sm-text {
  font-size: 1.5rem;
}

#dynamic {
  position: relative;
  display: inline-block;
}

#dynamic::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: -10px;
  width: 4px;
  height: 100%;
  background-color: white;
}

#dynamic.active::after {
  display: none;
}

JavaScript

let target = document.querySelector("#dynamic");

function randomString() {
  let srtingArr = ["Learn to HTML", "Learn to CSS", "Learn to Javascript", "Learn to Python"];
  let selectString = srtingArr[Math.floor(Math.random() * srtingArr.length)];
  
  // 문자열을 배열로 저장
  let selectStringArr = selectString.split("");

  return selectStringArr;
}

function resetTyping() {
  target.textContent = "";
  dynamci(randomString());
}

function dynamci(randomArr) {
// 재귀함수
  if(randomArr.length > 0) {
    target.textContent += randomArr.shift();
    setTimeout(function(){
      dynamci(randomArr);
    }, 80);
  }else {
    setTimeout(resetTyping, 3000);
  }
}

dynamci(randomString());

// 커서 깜빡임 효과
function blink() {
  target.classList.toggle("active");
}

setInterval(blink, 500);

코딩을 하며 느낀점

• ::after의 다양한 활용법 및 사용법
• 재귀함수의 복습

 

 

깃허브 링크 바로가기