728x90
오늘은 dad joke를 만들어보겠습니다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dad Jokes</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<div class="container">
<button class="btn">random dad jokes</button>
<p class="result">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Exercitationem
unde quibusdam quia ex asperiores consectetur quis maxime corporis
suscipit expedita.
</p>
</div>
<script src="./app.js"></script>
</body>
</html>
styles.css
*,
::after,
::before {
box-sizing: border-box;
}
:root {
--primary-100: hsl(21, 94%, 87%);
--primary-200: hsl(21, 80%, 74%);
--primary-300: hsl(21, 65%, 59%);
--primary-400: hsl(21, 57%, 50%);
/* primary/main color */
--primary-500: hsl(21, 62%, 45%);
--primary-600: hsl(21, 77%, 34%);
--primary-700: hsl(21, 81%, 29%);
--primary-800: hsl(21, 84%, 25%);
--primary-900: hsl(21, 91%, 17%);
/* grey */
--grey-50: #f8fafc;
--grey-100: #f1f5f9;
--grey-200: #e2e8f0;
--grey-300: #cbd5e1;
--grey-400: #94a3b8;
--grey-500: #64748b;
--grey-600: #475569;
--grey-700: #334155;
--grey-800: #1e293b;
--grey-900: #0f172a;
/* rest of the colors */
--black: #222;
--white: #fff;
--red-light: #f8d7da;
--red-dark: #842029;
--green-light: #d1e7dd;
--green-dark: #0f5132;
--smallText: 0.7em;
/* rest of the vars */
--backgroundColor: var(--grey-50);
--textColor: var(--grey-900);
--borderRadius: 0.25rem;
--letterSpacing: 1px;
--transition: 0.3s ease-in-out all;
--max-width: 1120px;
--fixed-width: 600px;
--fluid-width: 90vw;
/* box shadow*/
--shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
--shadow-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
body {
background: var(--backgroundColor);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-weight: 400;
line-height: 1.75;
color: var(--textColor);
}
p {
margin-bottom: 1.5rem;
max-width: 40em;
}
h1,
h2,
h3,
h4,
h5 {
margin: 0;
margin-bottom: 1.38rem;
font-family: var(--headingFont);
font-weight: 400;
line-height: 1.3;
text-transform: capitalize;
letter-spacing: var(--letterSpacing);
}
h1 {
margin-top: 0;
font-size: 3.052rem;
}
h2 {
font-size: 2.441rem;
}
h3 {
font-size: 1.953rem;
}
h4 {
font-size: 1.563rem;
}
h5 {
font-size: 1.25rem;
}
small,
.text-small {
font-size: var(--smallText);
}
a {
text-decoration: none;
}
ul {
list-style-type: none;
padding: 0;
}
.img {
width: 100%;
display: block;
object-fit: cover;
}
.btn {
cursor: pointer;
color: var(--white);
background: var(--primary-500);
border: transparent;
border-radius: var(--borderRadius);
letter-spacing: var(--letterSpacing);
padding: 0.375rem 0.75rem;
box-shadow: var(--shadow-1);
transition: var(--transition);
text-transform: capitalize;
display: inline-block;
}
.btn:hover {
background: var(--primary-700);
box-shadow: var(--shadow-3);
}
/*
===============
Jokes
===============
*/
.container {
width: 90vw;
max-width: 700px;
margin: 0 auto;
padding-top: 5rem;
}
.result {
font-size: 1.5rem;
}
app.js
const url = 'https://icanhazdadjoke.com/';
const btn = document.querySelector('.btn');
const result = document.querySelector('.result');
btn.addEventListener('click', () => {
fetchDadJoke();
});
const fetchDadJoke = async () => {
result.textContent = 'Loading...';
try {
const response = await fetch(url, {
headers: {
Accept: 'application/json',
'User-Agent': 'learning app',
},
});
if (!response.ok) {
throw new Error(' error');
}
const data = await response.json();
result.textContent = data.joke;
} catch (error) {
console.log(error.message);
result.textContent = 'There was an error...';
}
};
fetchDadJoke();
'JavaScript' 카테고리의 다른 글
| [JavaScript] 마우스 드래그로 캔버스에 네모와 동그라미 그리기 (0) | 2024.08.06 |
|---|---|
| [JavaScript] 다크 모드 토글 기능 구현 (0) | 2024.07.02 |
| [Javascript] stripe만들기 (0) | 2024.06.23 |
| [Javascript] wikipedia 데이터 가져오기 (2) | 2024.06.19 |
| [Javascript] 화면내에 공 키보드로 이동 시키기 (0) | 2024.06.17 |
