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.

Ecommerce Website Using HTML, CSS, and JavaScript (Source Code)

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.

<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.

Restaurant Website Using HTML And CSS With Source Code

HTML Code Output:

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.

Create Resume/CV Website Using HTML and CSS (Source Code)

<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

Create Portfolio Website Using HTML and CSS (Source Code)

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
}

CSS Output:

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

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