반응형
✅ 오늘의 문제 풀이 인증
📣 과제에 대한 답안 코드는 <소스코드>를 이용해 작성해주세요. (캡쳐만 있을 경우 코드리뷰 불가)
📣 문제를 푼 과정에서 생겼던 오류, 알게된 점이 있다면 함께 정리해주세요 😁
Day8.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./Day8.css">
</head>
<body>
<div class="layout">
<div class="board">
<h1 class="boardText"> </h1>
</div>
<div class="bottom">
<p>입력 : </p>
<input id="prnText" type="text">
<div class="saveBtn" onclick="saveStr()">저장</div>
<div class="prnBtn" onclick="showText()">전광판 버튼</div>
</div>
</div>
<script src="./Day8.js"></script>
</body>
</html>
Day8.js
let count = 0;
var prnStr = ""
var board = document.getElementsByClassName('boardText');
function saveStr() {
prnStr = document.getElementById('prnText').value;
board[0].innerHTML = " ";
count = 0;
}
function showText() {
if (count >= prnStr.length) {
board[0].innerHTML = " ";
count = 0;
} else {
board[0].innerHTML += prnStr[count];
count++;
}
}
Day8.css
.board{
height: 300px;
margin-top: 100px;
line-height: 300px;
background: linear-gradient(45deg, #003458, #ceceb8, #8d192b);
}
.boardText{
display: block;
margin-left: auto; margin-right: auto;
text-align: center;
-webkit-animation: blink 1.5s linear infinite;
}
@-webkit-keyframes blink {
0% { color: red; }
33% { color: orange; }
66% { color: blue; }
100% { color: purple; }
}
.bottom{
margin-top: 20px;
text-align: center;
}
p{
display: inline-block;
}
input[type=text]{
display: inline-block;
border: 3px solid skyblue;
border-radius: 5px;
}
.saveBtn{
display: inline-block;
width: 40px;
height: 20px;
background-color: lightgray;
border: 1px solid black;
cursor: pointer;
text-align: center;
line-height: 20px;
border-radius: 5px;
}
.prnBtn{
display: block;
width: 100px;
height: 40px;
background-color: lightgray;
border: 1px solid black;
cursor: pointer;
text-align: center;
line-height: 40px;
margin-left: auto; margin-right: auto;
border-radius: 5px;
}css에서는 그라데이션, 애니메이션을 배웠습니다.
공란을 입력하는  에 대해 알게되었습니다.
✅ 오늘의 한마디
👉 오늘 실습때문에 학교를 다녀와서 후딱 과제하고 수업듣고 자려고했는데 재밌어서 하다보니 벌써 두시가 넘었네요.. 기존에 했던 것들도 복습할 겸 기능을 추가해 완성도를 높여봤습니다! 전광판답게 깜빡이면 더 좋을 것 같아서 찾아봐서 넣어봤습니다! 역시 코딩은 재밌어요..
반응형
'Front-End > JavaScript' 카테고리의 다른 글
| [코뮤니티] 10일차 - 한 입 웹개발(JS) (0) | 2021.05.12 |
|---|---|
| [코뮤니티] 9일차 - 한 입 웹개발(JS) (0) | 2021.05.12 |
| [코뮤니티] 7일차 - 한 입 웹개발(JS) (0) | 2021.05.08 |
| [코뮤니티] 6일차 - 한 입 웹개발(JS) (0) | 2021.05.06 |
| [코뮤니티] 5일차 - 한 입 웹개발(JS) (0) | 2021.05.04 |