<!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>IMAGE PREVIEW</title>
</head>
<body>
<input type="text" onkeyup="img()">
<img src="https://source.unsplash.com/1300x600/?earth" alt="">
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: teal;
}
input{
display: block;
height: 80px;
width: 90vw;
margin: 0 auto;
}
img{display: block;margin: auto;}
JAVSCRIPT
/*
IMAGE SEARCH
______________________________________________________________________
*/
const img = () =>{
let name = document.querySelector("input").value;
let url = "https://source.unsplash.com/1300x600/?";
let img = document.querySelector("img");
img.src = url + name;
}
VIDEO TUTORIAL