YouTube Comment Template Using HTML CSS JAVASCRIPT | YOUTUBE COMMENT SECTION

YouTube Comment Template Using HTML CSS JAVASCRIPT |  YOUTUBE COMMENT SECTION



YouTube Comment Template Using HTML CSS JAVASCRIPT |  YOUTUBE COMMENT SECTION

Learners, 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 tranmendiously 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 Knowldege. Learners let me know what do 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 πŸ˜‰.


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


I hope you must have got an idea about the project.


Let's have a look at our project.

YouTube Comment Template Using HTML CSS JAVASCRIPT |  YOUTUBE COMMENT SECTION

In the staring, our project will look like this as and when your cursor will hit the textarea then onwards our project will be as:-



HTML SECTION 

Here I'm not going to add a structure of 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.


We have the following part in the HTML section.
  • First, we have a container that will enclose all other parts of the comment section.
  • We have one h2 heading previewing Leave Us a Comment.
  • then we have form, In the form we have a textarea having a placeholder "Add Your Comment."
  • In the end, we have two btn one is submitted and cancel.
Go through the below code πŸ‘‡ and run it in your IDE or where you used to design just HTML without CSS styling.
 <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 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.
 
 <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 heading and textarea 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 submit 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 file and enjoy this project and deploy it on Github.
 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 = '';  
 }  
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.


By this blog... 
We have learned how we can design a YouTube Comment Template Using HTML CSS 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.

You can follow me on Instagram 

Written by @Ankit kumar
 
Code by @Habastil1

Post a Comment

Previous Post Next Post