Karan
38 lines
1.4 KiB
Plaintext
38 lines
1.4 KiB
Plaintext
<!doctype html>
|
||
<html>
|
||
<head>
|
||
<title>JS Tester</title>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
Size: <select id="iSize">
|
||
<option value="">Select</option>
|
||
<option value="150x150">Small</option>
|
||
<option value="350x150" selected>Medium</option>
|
||
<option value="750x150">Large</option>
|
||
</select>
|
||
<br>Add Text: <input id="iText" type="text" value="Hello World">
|
||
<br>Select Color: <input id="iColor" type="color" value="222">
|
||
<br>Preview:<br><img src="" id="myImage">
|
||
|
||
</div>
|
||
<script>
|
||
const base = "http://via.placeholder.com/";
|
||
const myImage = document.querySelector("#myImage");
|
||
const myArr = { iColor: "222", iText: "Hello World", iSize: "350x150" };
|
||
const container = document.querySelector(".container");
|
||
const eles = container.querySelectorAll("select,input");
|
||
eles.forEach(el => {
|
||
el.addEventListener("change", (e) => {
|
||
console.log(el);
|
||
let val = el.value.replace("#", "");
|
||
myArr[el.id] = val;
|
||
let temp = base + myArr.iSize + "/" + myArr.iColor + "/fff?text=" + myArr.iText;
|
||
console.log(temp);
|
||
myImage.src = temp;
|
||
})
|
||
})
|
||
</script>
|
||
</body>
|
||
</html>
|