Issue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Youtube Card</title>
<style>
.container {
display: flex;
align-items: center;
justify-content: space-around;
width: 900px;
height: 198px;
border: 2px solid black;
background-color: black;
}
.box {
height: 190px;
margin: 4px;
/* border: 2px solid grey; */
border-radius: 15px;
}
.photo {
width: 180px;
overflow: hidden;
}
.textbox {
width: 681px;
color: azure;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#img {
position: absolute;
overflow: hidden;
}
.numberbox {
height: 17px;
width: 43px;
border: 2px solid black;
border-radius: 7px;
background-color: black;
color: white;
display: flex;
align-items: center;
justify-content: center;
z-index: 5;
position: relative;
top: 163px;
left: 129px;
font-family: "Roboto", "Arial", sans-serif;
font-weight: 500;
}
.boxtitle {
height: 49px;
width: 702px;
/* border: 2px solid gray; */
display: flex;
align-items: center;
justify-content: left;
color: white;
bottom: 12px;
position: relative;
text-overflow: ellipsis;
line-height: 2.2rem;
max-height: 4.4rem;
font-size: 1.6rem;
font-weight: 500;
font-family: "Roboto", "Arial", sans-serif;
}
.boxdescription {
height: 99px;
width: 702px;
/* border: 2px solid grey; */
display: flex;
align-items: center;
justify-content: left;
color: rgb(152, 147, 147);
position: relative;
top: 3px;
}
.innerbox {
display: flex;
align-items: center;
justify-content: center;
font-weight: 500;
font-family: "Roboto", "Arial", sans-serif;
}
.innerboxdot {
font-weight: 400;
display: flex;
align-items: center;
justify-content: center;
position: relative;
bottom: 3px;
font-family: "Roboto", "Arial", sans-serif;
}
</style>
</head>
<body>
<div class="container">
<div class="photo box">
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRj_nNfaS6PjY5sGzdvEyn4wrFFrrPl_WSoLQ&usqp=CAU"
height="190px"
width="180px"
id="img"
/>
<div class="numberbox">Video Time</div>
</div>
<div class="textbox box">
<div class="boxtitle">Title Here</div>
<div class="boxdescription">
<div class="innerbox">Channel Name</div>
<div class="innerboxdot">.</div>
<div class="innerbox">views</div>
<div class="innerboxdot">.</div>
<div class="innerbox">upload time</div>
</div>
</div>
</div>
<script>
console.log("Running Script");
let photo=document.body.children[0].children[0].children[0]
let video_time=document.body.children[0].children[0].children[1].innerText
let title=document.body.children[0].lastElementChild.children[0].innerText
let channel_name=document.body.children[0].children[1].lastElementChild.children[0].innerText
let views=document.body.children[0].children[1].lastElementChild.children[2].innerText
let upload_time=document.body.children[0].children[1].lastElementChild.children[4].innerText
console.log("Running Photo");
let user_photo=prompt("Enter The URL Of Image You Want As Thumbnail : \n(If Not Type \"no\")")
if (user_photo=="no" || user_photo=="No" || user_photo=="NO") {
document.body.children[0].children[0].children[0].setAttribute("src","https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRj_nNfaS6PjY5sGzdvEyn4wrFFrrPl_WSoLQ&usqp=CAU")
}
else{
document.body.children[0].children[0].children[0].setAttribute("src",user_photo)
}
console.log(user_photo);
console.log("Running Video Timing");
let user_video_time=prompt("Enter Your Video Timing : \n(Type In The Format hour:minute:second or minute:second")
video_time=user_video_time
console.log(user_video_time, typeof user_video_time);
console.log("Running Title");
let user_title=prompt("Enter Title OF Your Video : ")
title=user_title
console.log(user_title);
console.log("Running Channel Name");
let user_channel_name=prompt("Enter Your Channel Name : ")
channel_name=user_channel_name
console.log(user_channel_name);
console.log("Running Views");
// let user_views=prompt("Enter Views :\n(Enter In Pure Number)")
// if (user_views.length=4 || user_views.length=5 || user_views.length=6) {
// views=String(Math.ceil.((Number)user_views/1000))+"K views ";
// }
// else if (user_views.length=7 || user_views.length=8 || user_views.length=9) {
// views=String(Math.ceil.((Number)user_views/1000000))+"M views "
// }
// else if (user_views.length=10 || user_views.length=11 || user_views.length=12) {
// views=String(Math.ceil.((Number)user_views/1000000000))+"B views "
// }
// else{
// views=user_views
// }
// console.log(user_views);
console.log("Running Upload Time");
let user_upload_time=prompt("Enter Upload Time : \n(Enter In The Format {Number Month} Or {Number Year})")
upload_time=user_upload_time+" ago "
console.log(user_upload_time);
console.log("End");
</script>
</body>
</html>
I made this code for custom youtube card. All console.log functions are running but inputs are not getting added like this video_time=user_video_time
. Also please fix the code in comments (its showing error I dont know why). To run this code, save the given code as html file.
I had tried to change code by using querySelector() but not working. All codes are working in browser console if typed separately.
I made this code for custom youtube card. All console.log functions are running but inputs are not getting added like this video_time=user_video_time
. Also please fix the code in comments (its showing error I dont know why). To run this code, save the given code as html file.
I had tried to change code by using querySelector() but not working. All codes are working in browser console if typed seperately.
Solution
In the Script tag, when ever wanted a change to the HTML tags then, get that full element(tags). But here "title" or "channel_name" variables, You are fetching data inside the tags. so,
title = "Title Here" initially.
Now, you are just assigning your prompt data to that "title" variable. but actually you need to fetch the entire tag.
eg:
let title = document.body.children[0].lastElementChild.children[0]
now, assign the prompt value to title using
title.innerText = user_title
Answered By - anitha
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.