반응형
HTML, CSS, JS로 색상 변경 앱을 프로그래밍 해보겠습니다.
https://www.youtube.com/watch?v=_Jrhe_oCJ70
프로젝트 개요
- 프로젝트 이름: Color Changer App
- 프로젝트 설명: 버튼 클릭으로 페이지의 배경 색상을 무작위로 변경할 수 있는 간단한 웹 앱입니다.
- 프로젝트 목표: DOM조작과 사용자 이벤트 처리와 UI변경 학습
- 프로젝트 기능: 무작위 색상 생성, 배경 색상 변경, 현재 색상 코드 표시
프로젝트 구조
Counter-App/
├── index.html
├── style.css
└── app.js
코드
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Change Color</title>
</head>
<body>
<div class="app-container">
<h1 id="color-name">color</h1>
<button id="change-color">change color</button>
</div>
<script src="app.js"></script>
</body>
</html>
CSS
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
text-align: center;
}
h1 {
margin-bottom: 10px;
}
button {
border: none;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
padding: 10px;
border-radius: 5px;
transition: all 0.3s ease;
}
button:hover {
cursor: pointer;
transform: scale(1.025);
}
JS
document.addEventListener('DOMContentLoaded', () => {
const colorName = document.getElementById('color-name');
const changeColor = document.getElementById('change-color');
function getRandomColor() {
let letter = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
let random = Math.floor(Math.random() * 16);
color += letter[random]
}
return color;
}
changeColor.addEventListener('click', () => {
document.body.style.backgroundColor = getRandomColor();
colorName.textContent = getRandomColor();
})
})
https://idocleancode.tistory.com/424
[JavaScript] 학습 로드맵
소개자바스크립트란?자바스크립트 역사자바스크립트 실행 방법변수변수의 선언호이스팅네이밍 규칙스코프데이터 타입string 참고 자료https://roadmap.sh/javascript JavaScript Developer Roadmap: Step by step
idocleancode.tistory.com
반응형
'Tutorials > JavaScript' 카테고리의 다른 글
| [Valilla JS Programming] Counter App (0) | 2024.10.18 |
|---|---|
| [JavaScript] null (1) | 2024.10.18 |
| [JavaScript] undefined (0) | 2024.10.18 |
| [JavaScript] Boolean (0) | 2024.10.18 |
| [JavaScript] Number (0) | 2024.10.06 |
