---
# System prepended metadata

title: 2022/11/8 社課共筆
tags: [社課]

---

---
title: 2022/11/8 社課共筆
tags: 社課
---


:::warning
- 社課資源: 
    - [簡報](https://hackmd.io/@c4t0212/SJDUng8Bo)
    - [IDE 環境](https://jsfiddle.net/2cyerqhn/)
- [slido](https://app.sli.do/event/uWJdDXqoHGh2VzKN2b5noq)
- [回饋表單](https://forms.gle/PhJjzgAUiHcNTWz39)


<!-- 記得弄直播 -->
:::


https://developer.mozilla.org/zh-TW/docs/Web

透過輸入框改變圖片的顯示大小
```html
<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <span class="A"> A! </span>
        <input id="size"><button onclick="getImg()">Enter</button>
        <br>
    </body>
</html>
```

```js
function getImg(){
	let size =  document.querySelector('#size');
	let url = `https://picsum.photos/${size.value}`;	
	fetch(url, {})
	.then((response) => {
		console.log(response);
		return response.blob();
	})
	.then((data) => {
		let img = new Image();
    	img.src = URL.createObjectURL(data);
    	document.body.appendChild(img);
	})
	.catch(error => {console.error(error)} );	
}
```