01. vanilla js로 배경이미지 랜덤 변경
: 카리나 & img의 주소를 가져와서 출력
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.slider {
width: 720px;
display: flex;
flex-direction: row;
justify-content: center;
}
.btn {
flex: 1;
background-color: transparent;
border: 1px solid gray;
}
#image {
border: 1px solid gray;
width: 400px;
}
</style>
</head>
<body>
<div class="slider">
<button class="btn left">👈</button>
<img src="" alt="팀원의 이미지" id="image" />
<button class="btn right">👉</button>
</div>
<script>
const slider_btns = document.getElementsByClassName("btn");
const img = document.getElementById("image");
let idx = 0;
const IMAGE_LIST = [
"https://file.mk.co.kr/meet/neds/2022/12/image_readtop_2022_1133219_16711975225279750.jpg",
"https://a-static.besthdwallpaper.com/karina-from-aespa-life-s-too-short-mv-photoshoot-girls-album-wallpaper-2560x1600-100931_7.jpg",
"https://i1.korea-iphone.com/files/608ad938e5c0716eab95190495148e47.jpg",
"https://img.girldir.com/upload/2022/06/08/liuzhimin1393761476954.jpg.wpcon.mw_1000,qt_80.9c3e75.jpg",
"https://i1.korea-iphone.com/files/a6bfc202ac62e4674f6dd173040f69d1.jpg",
"https://i.ytimg.com/vi/JIkML0Z9bUY/maxresdefault.jpg",
"https://cdn.bhdw.net/im/karina-from-aespa-life-s-too-short-mv-photoshoot-girls-album-wallpaper-100897_w635.webp",
"https://a-static.besthdwallpaper.com/karina-from-aespa-life-s-too-short-mv-photoshoot-girls-album-wallpaper-2560x1600-100931_7.jpg",
];
for (let slider_btn of slider_btns) {
slider_btn.addEventListener("click", function () {
if (this.classList[1] == "left") {
idx = idx - 1 == -1 ? 0 : idx - 1;
}
if (this.classList[1] == "right") {
idx =
idx + 1 == IMAGE_LIST.length ? IMAGE_LIST.length - 1 : idx + 1;
}
img.setAttribute("src", IMAGE_LIST[idx]);
});
}
</script>
</body>
</html>
02. vanilla js로 인사 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>인사</title>
<style>
.main_div {
background-image: url(./sea.jpg);
background-repeat: repeat;
background-position: 100%;
height: 100%;
width: 100%;
opacity: 0.8;
/* background-position: bottom right, left; */
}
h1 {
color: #f2f2f2;
font-size: 4rem;
text-align: center;
position: relative;
font-weight: 800;
font-family: sans-serif;
padding: 17rem;
/* border-bottom: 1px solid white; */
z-index: 2;
}
.logo {
color: whitesmoke;
font-size: medium;
position: relative;
font-family: Arial, Helvetica, sans-serif;
}
.img-cover {
position: absolute;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.4);
z-index: 1;
}
</style>
</head>
<body>
<div class="main_div">
<div class="img-cover"></div>
<!-- <div class="logo">L</div> -->
<h1>Hello, What's your Name?</h1>
</div>
</body>
</html>
03. vanilla js로 시계 만들기 (실시간)
참고
Momentum
Replace new tab page with a personal dashboard to help you get focused, stay organized, and keep motivated to achieve your goals.
chrome.google.com
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>실시간 시계-team</title>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function now() {
const date = new Date();
let hh = date.getHours();
let mm = date.getMinutes();
let ss = date.getSeconds();
let session = "AM";
if (hh == 0) {
hh = 12;
}
if (hh > 12) {
hh = hh - 12;
session = "PM";
}
hh = hh < 10 ? "0" + hh : hh;
mm = mm < 10 ? "0" + mm : mm;
ss = ss < 10 ? "0" + ss : ss;
const time = hh + ":" + mm + ":" + ss + " " + session;
return time;
}
function CurrentTime() {
const [nowTime, setNowTime] = React.useState(() => now());
setInterval(() => setNowTime(() => now()), 1000);
const [cnt, setCnt] = React.useState(0);
return (
<div>
<h1>{nowTime}</h1>
<p>{cnt}</p>
<button onClick={() => setCnt(cnt + 1)}>+1</button>
<button onClick={() => setCnt(cnt - 1)}>-1</button>
</div>
);
}
ReactDOM.render(<CurrentTime />, root);
</script>
</body>
</html>
✍️TIL 후기
적절한 이미지를 찾고, 화면 배치를 신경 쓰는 것은 오히려 즐겁고 재미있다.
다만 돌아가는 구성 원리에 대해 더욱 잘 파악하고 알아야 진짜 개발자이기에 이 부분을 더 보완하면 좋을 것 같다.
———————————————————————————————————————————————————————
본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
'[부트캠프] IT 코딩 부트캠프 후기 > [웅진씽크빅X유데미] 스나이퍼 팩토리 🤹' 카테고리의 다른 글
| [유데미x스나이퍼팩토리] 리액트 Hook 복습 & 에러해결 (0) | 2023.07.05 |
|---|---|
| [유데미x스나이퍼팩토리] Vanilla JS를 이용한 서비스 만들기 (2) (0) | 2023.06.25 |
| [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 - 프론트엔드 : React 기초 & 간단한 실습 (0) | 2023.06.23 |
| [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 - 프론트엔드 : JS 기초 (0) | 2023.06.16 |
| [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 - 프론트엔드 : HTML 기초 & 과제 (0) | 2023.06.14 |
