YouTube Comment Template Using HTML and CSS

Hey learners..! Welcome to our today's blog with Codewithrandom. In this blog, we gonna learn how we can design a YouTube Comment Template Using HTML and CSS.

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.

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.

Let's have a look at our project.

In the starting of our project will look like this as and when your cursor will hit the text area then onwards our project will be as:-

HTML Code For Comment Box:-

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>

We will create a container for our comment structure using the div tag with the class container. Then, using the h2 tag selector, we will add a heading as "Leave Us a Comment." Finally, using the form tag and the textarea inside of it, we will create a textbox for adding the comment. Finally, using the input type submit, we will create a submit button, and using the button tag, we will create a cancel button for our YouTube template.

CSS Code For Comment Box:-

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>

Step1: We will set the padding and margin to "zero" using the universal selector, and we will set the box sizing attribute to "border-box" for the box sizing.

The display will now be made to "flex" using the body tag selector. The items will then be centre-aligned using the align items property, and the height property will be used to set the body's height to 100vh. We have changed the comment box's background colour to "white."

*
{
    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;
}

Step2: Now using the class (.container h2) we will add the styling to the heading we will align it to the center and also using the margin bottom property we will add a bottom margin of 15px

Now using the tag selector textarea we will set the height as 20px and the width is set as 100% also using the border bottom we will add a 2px border at the bottom of our text area and the background color of our textarea is as "transparent"

Now using the input type submit we will add padding of 10px and 15px respectively and using the border -radius property we will add a border radius of 5px to the text area to give a curved edge look

{
    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
}

JavaScript Code For Comment Box:-

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.

JS 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 = '';
}

By this blog... We have learned how we can design a YouTube Comment Template Using HTML, CSS, and JavaScript.

Now I'm looking for your reviews.
So, How was the blog, Learners?

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.

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

Code by Habastil1