Telegram Group Join Now
YouTube Comment Template Using HTML, CSS, & JavaScript
Hey learners..!
Welcome to our today’s blog with code with random. In this blog, we gonna learn how we can design a YouTube Comment Template Using HTML CSS, and JavaScript.
In this article, we are going to clone some parts of a real-time website this is nothing but our Youtube. We all know it very well and we can’t be untouched by this site. We all know how it tremendously increases among the people from lockdown.
ADVERTISEMENT
.png "YouTube Comment Template Using HTML CSS JAVASCRIPT | YOUTUBE COMMENT SECTION")
People are accepting it because they get benefits from every aspect. From gaining knowledge to earning money. Today Youtube is globally accepted. Well people I’m not going to explain youtube in brief.
Actually, I’m trying to bring you to focus on the project with this bit of theoretical knowledge. Learners let me know what you do after watching any YT video when you like it most and when it requires asking any doubt, we just comment it isn’t.
Similarly, we are going to clone the Youtube comment template in this article. If you don’t know How we can design so just join me on this blog and make sure your finger is free for scrolling down.
I hope you must have got an idea about the project.
HTML Section
Here I’m not going to add a structure to the HTML file from scratch, I will just paste the body part, it is so because the body is the main part of our designing a browser.
1. We have the following part in the HTML section.
2. First, we have a container that will enclose all other parts of the comment section.
3. We have one h2 heading previewing Leave Us a Comment.
4. then we have form, In the form, we have a text area with a placeholder “Add Your Comment.”
5. In the end, we have two buttons one is submitted, and canceled.
Go through the below code and run it in your IDE or where you used to design just HTML without CSS styling.
HTML Code For YouTube Comment Template
<div class="container"> <h2>Leave Us a Comment</h2> <form> <textarea placeholder='Add Your Comment'></textarea> <div class="btn"> <input type="submit" value='Comment'> <button id='clear' href='#'>Cancel</button> </div> </form> </div>
CSS Section
By CSS we will design our container and will bring in the center and then we will set the width of the text area and will bring it after the heading and we will design both buttons and initial it will be on hiding mode.
The Below code will analyze you more. So just add in your HTML half-complete file and wait to watch some magic.
CSS Code For YouTube Comment Template
<div class="container">
<h2>Leave Us a Comment</h2>
<form>
<textarea placeholder='Add Your Comment'></textarea>
<div class="btn">
<input type="su*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body
{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f5f6f6;
font-family: arial;
}
.container
{
width: 600px;
border: 2px solid #333;
padding: 15px 10px;
}
.container h2
{
text-align: center;
margin-bottom: 15px
}
textarea
{
height: 20px;
width: 100%;
border: none;
border-bottom: 2px solid #aaa;
background-color: transparent;
margin-bottom: 10px;
resize: none;
outline: none;
transition: .5s
}
input[type="submit"], button
{
padding: 10px 15px;
border: none;
outline: none;
border-radius: 5px;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
}
input[type="submit"]
{
color: #fff;
background-color: #273c75
}
button
{
color: #333;
background-color: transparent
}
.btn
{
display: none
}bmit" value='Comment'>
<button id='clear' href='#'>Cancel</button>
</div>
</form>
</div>
Javascript section
In the Javascript part, we will add magic logic as initially only the heading and text area will be previewed and whenever you will hit the cursor on Textarea then both buttons will be pop-out.
And as we know there are two buttons we have added through HTML one is submitted and the second one is canceled.
Whenever You will click on the cancel buttons then again both buttons will be hidden and the layout will turn into the previous one.
For observing this magic for this project then you should add the js file with the rest of the HTML and CSS files and enjoy this project and deploy it on Github.
CSS Code For YouTube Comment Template
var feild = document.querySelector('textarea');
var backUp = feild.getAttribute('placeholder');
var btn = document.querySelector('.btn');
var clear = document.getElementById('clear')
feild.onfocus = function(){
this.setAttribute('placeholder', '');
this.style.borderColor = '#333';
btn.style.display = 'block'
}
feild.onblur = function(){
this.setAttribute('placeholder',backUp);
this.style.borderColor = '#aaa'
}
clear.onclick = function(){
btn.style.display = 'none';
feild.value = '';
}
50+ Html ,Css &Javascript Projects With Source Code
A live preview of our project is attached below refer to this codepen.
See the Pen Comment Box As On Youtube by Salaheddine (@habastil1) on CodePen.
ADVERTISEMENT
ADVERTISEMENT
By this blog… We have learned how we can design a YouTube Comment Template Using HTML, CSS, and JavaScript.
ADVERTISEMENT
Now I’m looking for your reviews.
So, How was the blog, Learners?
ADVERTISEMENT
If you want a more crisp blog like this then please check our Blogs sites CodewithRandom. keep tuned with us because every day you will learn something new here.
ADVERTISEMENT
I hope that I’m able to make you understand this topic and that you have learned something new from this blog. If you faced any difficulty feel free to drop a comment down your problems and if you liked it, please show your love in the comment section. This fills bloggers’ hearts with enthusiasm for writing more new blogs.
Thank You And Keep Learning!!!
You can follow me on Instagram
Written by @Ankit Kumar
