設計
ボタンを押したらランダムに犬の写真が表示されるサイト。必要なのはボタンと写真が表示されるスペースのみです。
HTMLファイルの作成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dog Image Creater</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<img src="" alt="" id="dog_image">
<button onclick="create_image()">Create</button>
<script src="./index.js"></script>
</body>
</html>
CSSファイルを作成
今回はただ写真のサイズがバラバラだった為、サイズだけcssで編集します。
#dog_image{
width: 900px;
height: 600px;
}
JSファイルを作成
jsファイルで初めてのfetchメソッドを使っていきます。
今回は下記サイトの無料で利用できるapiを使用します。犬の種類も指定できるそうですが今回はランダムに表示させます。
function create_image(){
fetch('https://dog.ceo/api/breeds/image/random')
.then(response=>{
return response.json();
})
.then(data=>{
console.log(data)
const image_url = data.message
const img = document.getElementById('dog_image');
img.setAttribute('src', image_url);
console.log(image_url)
})
.catch(error=>{
console.log(error);
});
}
結果
かなり写真を表示させるまでに時間がかかってしまいましたが、最終的には可愛い犬たちの写真を表示できました！response.json();の部分で（）をつけ忘れている凡ミスで時間が溶けました。
みなさんのこのコードに関するご意見もぜひ聞きたいのでぜひコメントをお願いいたします！
拙い文章ですが、最後まで読んでいただきありがとうございました。