HTML5 Interview Questions and Answers for 7 years experience

HTML5 Interview Questions & Answers (7 Years Experience)
  1. What is the difference between HTML and HTML5?

    • Answer: HTML5 is a significant update to HTML, introducing new semantic elements (like `
      `, `
  2. Explain the use of semantic HTML5 elements. Give examples.

    • Answer: Semantic HTML5 elements provide meaning to the content they contain, improving accessibility and SEO. Examples include `
      `, `
      `, `
  3. How do you handle cross-browser compatibility issues in HTML5?

    • Answer: Cross-browser compatibility is addressed through several strategies: using CSS resets or normalizers to standardize styling, employing feature detection (checking if the browser supports a feature before using it), using polyfills (providing a fallback for unsupported features), and thorough testing across major browsers and devices.
  4. Describe the role of the `` element.

    • Answer: The `` element provides a drawing surface on which you can dynamically create graphics using JavaScript. It's widely used for games, charts, image manipulation, and other visual effects. It doesn't inherently support any specific graphics; you need to programmatically render them.
  5. What are the different input types available in HTML5?

    • Answer: HTML5 introduces many new input types beyond the basic text input, including `email`, `url`, `tel`, `number`, `range`, `date`, `time`, `color`, `search`, `password`, `checkbox`, `radio`, `file`, etc. These provide improved user experience and server-side validation capabilities.
  6. Explain the use of the `

    • Answer: The `
  7. How do you implement form validation in HTML5?

    • Answer: HTML5 provides built-in form validation using attributes like `required`, `pattern`, `min`, `max`, `email`, etc. These attributes can enforce constraints on the input fields and provide immediate feedback to users. JavaScript can be used for more complex validation scenarios.
  8. What is the purpose of the `placeholder` attribute?

    • Answer: The `placeholder` attribute provides a hint to the user about what kind of information should be entered into a form field. The hint disappears when the user begins typing.
  9. Explain the use of the `data-*` attributes.

    • Answer: `data-*` attributes allow you to store custom data private to the page or application. This data can be accessed using JavaScript to enhance functionality without cluttering the HTML with more elements or classes.
  10. How do you use the Geolocation API?

    • Answer: The Geolocation API provides access to the user's geographical location. Using JavaScript, you can request the latitude and longitude coordinates. However, you must handle the situation where the user denies permission to access their location.
  11. What are Web Workers and how are they used?

    • Answer: Web Workers allow you to run JavaScript code in the background, separately from the main thread of the page. This prevents blocking the UI and improves responsiveness, especially with long-running calculations or tasks. They cannot directly manipulate the DOM.
  12. Explain the difference between GET and POST requests.

    • Answer: GET requests append data to the URL, while POST requests send data in the body of the HTTP request. GET requests are typically used for retrieving data, while POST requests are used for submitting data, often creating or updating resources on the server. GET requests are cacheable, while POST requests are not.
  13. What is the role of the `DOCTYPE` declaration?

    • Answer: The `DOCTYPE` declaration tells the browser which version of HTML the page is written in, enabling it to render the page correctly using the appropriate rendering mode (Standards mode or Quirks mode). It's crucial for consistent rendering across browsers.
  14. How do you optimize HTML for SEO?

    • Answer: SEO optimization involves using semantic HTML, adding relevant metadata (like ``, `<meta description>`, etc.), structuring content logically with headers (`<h1>` to `<h6>`), using alt text for images, creating sitemaps, and ensuring the site is mobile-friendly.</li> </ul> </li> <li> <p><strong>What is the difference between inline, internal, and external CSS?</strong></p> <ul> <li><strong>Answer:</strong> Inline CSS is applied directly within HTML elements using the `style` attribute. Internal CSS is defined within the `<style>` tag in the `<head>` section of the HTML document. External CSS is defined in separate .css files linked to the HTML document using the `<link>` tag. External CSS is best for maintainability and reusability.</li> </ul> </li> <li> <p><strong>Explain the concept of responsive web design.</strong></p> <ul> <li><strong>Answer:</strong> Responsive web design involves creating websites that adapt to different screen sizes and devices (desktops, tablets, mobile phones). This is typically achieved using CSS media queries and flexible layouts.</li> </ul> </li> <li> <p><strong>What are some common HTML5 APIs you've used?</strong></p> <ul> <li><strong>Answer:</strong> (This answer will vary based on experience but should include at least a few examples, such as) Geolocation API, Web Storage API (localStorage, sessionStorage), Web Workers API, Drag and Drop API, File API, etc.</li> </ul> </li> <li> <p><strong>Describe your experience with HTML5 accessibility best practices.</strong></p> <ul> <li><strong>Answer:</strong> (This should detail practical experience ensuring accessibility, such as) Using ARIA attributes for enhanced accessibility, providing alt text for all images, ensuring proper heading structure, using semantic HTML, and following WCAG guidelines.</li> </ul> </li> <li> <p><strong>How do you handle different screen resolutions and devices in your HTML5 projects?</strong></p> <ul> <li><strong>Answer:</strong> Using responsive design principles – fluid grids, flexible images, media queries – to ensure optimal display across diverse screen sizes and devices. Thorough testing on different devices is also crucial.</li> </ul> </li> <li> <p><strong>What are some common performance optimization techniques for HTML5 websites?</strong></p> <ul> <li><strong>Answer:</strong> Minifying CSS and JavaScript files, using efficient image formats, minimizing HTTP requests, using browser caching, optimizing images, lazy loading images, and using content delivery networks (CDNs).</li> </ul> </li> <li> <p><strong>What are your preferred methods for debugging HTML5 code?</strong></p> <ul> <li><strong>Answer:</strong> Using the browser's developer tools (inspect element, console, network tab), linting tools (like JSHint, ESLint), and browser debugging extensions.</li> </ul> </li> <li> <p><strong>How do you ensure the security of your HTML5 applications?</strong></p> <ul> <li><strong>Answer:</strong> Using HTTPS to encrypt communication, input validation to prevent XSS attacks, proper sanitization of user-supplied data, using Content Security Policy (CSP) headers, and regularly updating dependencies.</li> </ul> </li> <li> <p><strong>Explain your experience with using HTML5 for single-page applications (SPAs).</strong></p> <ul> <li><strong>Answer:</strong> (This will be experience-based but should describe familiarity with) Using JavaScript frameworks (like React, Angular, Vue) to create dynamic SPAs with HTML5 as the foundation. Understanding routing mechanisms, managing application state, and using APIs for data handling.</li> </ul> </li> <li> <p><strong>What version control systems are you familiar with and how do you use them in your workflow?</strong></p> <ul> <li><strong>Answer:</strong> (Should mention systems like Git) Detailed explanation of branching strategies, pull requests, code reviews, and merging changes. Understanding of version control best practices.</li> </ul> </li> <li> <p><strong>Describe your experience working with different JavaScript frameworks or libraries within an HTML5 context.</strong></p> <ul> <li><strong>Answer:</strong> (This should list specific frameworks used, like React, Angular, Vue.js, jQuery etc. and detail the experience) Description of projects where these were utilized, outlining specific roles and contributions.</li> </ul> </li> <li> <p><strong>How do you approach testing your HTML5 code and ensuring its quality?</strong></p> <ul> <li><strong>Answer:</strong> Employing various testing strategies, including unit testing, integration testing, end-to-end testing, and user acceptance testing. Mentioning specific testing frameworks or tools used.</li> </ul> </li> <li> <p><strong>How do you stay up-to-date with the latest advancements in HTML5 and related technologies?</strong></p> <ul> <li><strong>Answer:</strong> Following relevant blogs, participating in online communities, attending conferences, reading technical articles and documentation, and engaging in continuous learning.</li> </ul> </li> <li> <p><strong>Describe a challenging HTML5 project you worked on and how you overcame the difficulties.</strong></p> <ul> <li><strong>Answer:</strong> (This is a crucial question requiring a specific, detailed project description with challenges and solutions.) Should highlight problem-solving skills and technical expertise.</li> </ul> </li> <li> <p><strong>How do you handle legacy codebases that use older HTML versions when integrating new HTML5 features?</strong></p> <ul> <li><strong>Answer:</strong> Carefully assess the impact of new features on the legacy code, employ progressive enhancement strategies, and use feature detection to avoid breaking compatibility. Consider refactoring parts of the codebase incrementally.</li> </ul> </li> <li> <p><strong>What are your thoughts on using HTML5 for building mobile applications?</strong></p> <ul> <li><strong>Answer:</strong> Discussion of the advantages and disadvantages, mentioning frameworks like React Native or Ionic that bridge the gap between web technologies and native mobile development.</li> </ul> </li> <li> <p><strong>Explain your understanding of web components and their benefits.</strong></p> <ul> <li><strong>Answer:</strong> Describing custom elements, shadow DOM, and how they enable reusable UI components across different projects and frameworks.</li> </ul> </li> <li> <p><strong>What are some common security vulnerabilities related to HTML5 and how can they be mitigated?</strong></p> <ul> <li><strong>Answer:</strong> Discussion of XSS, CSRF, and other relevant vulnerabilities and how to address them through secure coding practices, input validation, and appropriate security headers.</li> </ul> </li> <li> <p><strong>How do you manage large and complex HTML5 projects?</strong></p> <ul> <li><strong>Answer:</strong> Using modular design, version control, proper documentation, teamwork, and a well-defined development process.</li> </ul> </li> <li> <p><strong>What are your preferred tools and technologies for developing and deploying HTML5 applications?</strong></p> <ul> <li><strong>Answer:</strong> Listing specific IDEs (like VS Code, Sublime Text), build tools (Webpack, Parcel), testing frameworks, and deployment platforms used.</li> </ul> </li> <li> <p><strong>How do you collaborate effectively with designers and other developers on HTML5 projects?</strong></p> <ul> <li><strong>Answer:</strong> Using version control, communication tools (Slack, Jira), and adhering to established workflows and design specifications.</li> </ul> </li> <li> <p><strong>What are your salary expectations?</strong></p> <ul> <li><strong>Answer:</strong> (This requires a thoughtful and researched response based on experience, location, and market rates.) Should be stated clearly and confidently.</li> </ul> </li> <li> <p><strong>Why are you interested in this position?</strong></p> <ul> <li><strong>Answer:</strong> (This requires a genuine and well-considered response aligning personal goals with the company's mission and the specific role.) Should show enthusiasm and a deep understanding of the opportunity.</li> </ul> </li> <li> <p><strong>What are your strengths and weaknesses?</strong></p> <ul> <li><strong>Answer:</strong> (Should be honest and self-aware, offering concrete examples. Frame weaknesses as areas for growth.) Show self-reflection and a commitment to continuous improvement.</li> </ul> </li> <li> <p><strong>Tell me about a time you failed. What did you learn?</strong></p> <ul> <li><strong>Answer:</strong> (This should be a specific example illustrating the ability to learn from mistakes.) Focus on the learning and growth, not just the failure itself.</li> </ul> </li> <li> <p><strong>Tell me about a time you had to work under pressure. How did you handle it?</strong></p> <ul> <li><strong>Answer:</strong> (This requires a concrete example demonstrating effective time management and stress management skills.) Show ability to prioritize and deliver under pressure.</li> </ul> </li> <li> <p><strong>Describe your experience working in an Agile environment.</strong></p> <ul> <li><strong>Answer:</strong> (Should detail familiarity with Agile methodologies like Scrum or Kanban.) Show understanding of sprints, daily stand-ups, and iterative development.</li> </ul> </li> <li> <p><strong>What is your preferred development environment?</strong></p> <ul> <li><strong>Answer:</strong> (List preferred IDE, operating system, and any other relevant development tools.)</li> </ul> </li> </ol><br><p>Thank you for reading our blog post on 'HTML5 Interview Questions and Answers for 7 years experience'.We hope you found it informative and useful.Stay tuned for more insightful content!</p> </div> <!--Optional Url Button --> <!--Optional Url Button --> <div class="post-tags"> </div> </div> <!--include next previous post --> <div class="col-sm-12 post-next-prev"> <div class="row"> <div class="col-sm-6 col-xs-12 left"> <p> <span><i class="icon-angle-left" aria-hidden="true"></i>Previous Article</span> </p> <h3 class="title"> <a href="https://ngt-internship.com/html5-interview-questions-and-answers-for-5-years-experience-2531"> HTML5 Interview Questions and Answers for 5 years experience </a> </h3> </div> <div class="col-sm-6 col-xs-12 right"> <p> <span>Next Article<i class="icon-angle-right" aria-hidden="true"></i></span> </p> <h3 class="title"> <a href="https://ngt-internship.com/html5-interview-questions-and-answers-for-10-years-experience-73974"> HTML5 Interview Questions and Answers for 10 years experience </a> </h3> </div> </div> </div> <!--Include banner--> <!--include about author --> <section class="section section-related-posts"> <div class="section-head"> <h4 class="title">Related Posts</h4> </div> <div class="section-content"> <div class="row"> <!--include post item--> <div class="col-sm-4 col-xs-12"> <!--Post item small--> <div class="post-item-mid post-item-no-image"> <h3 class="title"> <a href="https://ngt-internship.com/lua-interview-questions-and-answers-for-internship-36394"> Lua Interview Questions and Answers for internship </a> </h3> <p class="post-meta"> <span><i class="icon-comment"></i>0</span> </p> </div> </div> <!--include post item--> <div class="col-sm-4 col-xs-12"> <!--Post item small--> <div class="post-item-mid post-item-no-image"> <h3 class="title"> <a href="https://ngt-internship.com/racket-interview-questions-and-answers-for-internship-98392"> Racket Interview Questions and Answers for internship </a> </h3> <p class="post-meta"> <span><i class="icon-comment"></i>0</span> </p> </div> </div> <!--include post item--> <div class="col-sm-4 col-xs-12"> <!--Post item small--> <div class="post-item-mid post-item-no-image"> <h3 class="title"> <a href="https://ngt-internship.com/constructor-in-java-interview-questions-and-answers-for-internship-91935"> Constructor in Java Interview Questions and Answers for... </a> </h3> <p class="post-meta"> <span><i class="icon-comment"></i>0</span> </p> </div> </div> <div class="col-sm-12"></div> <!--include post item--> <div class="col-sm-4 col-xs-12"> <!--Post item small--> <div class="post-item-mid post-item-no-image"> <h3 class="title"> <a href="https://ngt-internship.com/ruby-interview-questions-and-answers-for-5-years-experience-36529"> Ruby Interview Questions and Answers for 5 years experience </a> </h3> <p class="post-meta"> <span><i class="icon-comment"></i>0</span> </p> </div> </div> <!--include post item--> <div class="col-sm-4 col-xs-12"> <!--Post item small--> <div class="post-item-mid post-item-no-image"> <h3 class="title"> <a href="https://ngt-internship.com/java-rest-api-interview-questions-and-answers-for-2-years-experience-71033"> Java REST API Interview Questions and Answers for 2 years... </a> </h3> <p class="post-meta"> <span><i class="icon-comment"></i>0</span> </p> </div> </div> <!--include post item--> <div class="col-sm-4 col-xs-12"> <!--Post item small--> <div class="post-item-mid post-item-no-image"> <h3 class="title"> <a href="https://ngt-internship.com/xslt-interview-questions-and-answers-for-freshers-42760"> XSLT Interview Questions and Answers for freshers </a> </h3> <p class="post-meta"> <span><i class="icon-comment"></i>0</span> </p> </div> </div> </div> </div> </section> <section id="comments" class="section"> <div class="col-sm-12 col-xs-12"> <div class="row"> <div class="comment-section"> <ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#site_comments">Comments</a></li> </ul> <div class="tab-content"> <div id="site_comments" class="tab-pane fade in active"> <!-- include comments --> <form id="make_comment"> <input type="hidden" name="parent_id" value="0"> <input type="hidden" name="post_id" value="2826"> <div class="form-row"> <div class="row"> <div class="form-group col-md-6"> <label>Name</label> <input type="text" name="name" class="form-control form-input" maxlength="40" placeholder="Name"> </div> <div class="form-group col-md-6"> <label>Email</label> <input type="email" name="email" class="form-control form-input" maxlength="100" placeholder="Email"> </div> </div> </div> <div class="form-group"> <label>Comment</label> <textarea name="comment" class="form-control form-input form-textarea" maxlength="4999" placeholder="Comment"></textarea> </div> <button type="submit" class="btn btn-md btn-custom">Post Comment</button> </form> <div id="message-comment-result" class="message-comment-result"></div> <div id="comment-result"> <input type="hidden" value="5" id="post_comment_limit"> <div class="row"> <div class="col-sm-12"> <div class="comments"> <ul class="comment-list"> </ul> </div> </div> </div> </div> </div> </div> </div> </div> </div> </section> </div> <div id="sidebar" class="col-sm-4 col-xs-12"> <!--include sidebar --> <!--Include banner--> </div> </div> </div> </div> <!-- /.Section: wrapper --> <script> $(function () { $('.post-text iframe').wrap('<div class="embed-responsive embed-responsive-16by9"></div>'); $('.post-text iframe').addClass('embed-responsive-item'); }); $(".fb-comments").attr("data-href", window.location.href); </script> <!-- Start Footer Section --> <footer id="footer"> <div class="container"> <div class="row footer-widgets"> <!-- footer widget about--> <div class="col-sm-4 col-xs-12"> <div class="footer-widget f-widget-about"> <div class="col-sm-12"> <div class="row"> <p class="footer-logo"> <img src="https://ngt-internship.com/uploads/logo/logo_66d3d001c65481.png" alt="logo" class="logo"> </p> <p> </p> </div> </div> </div> </div><!-- /.col-sm-4 --> <!-- footer widget random posts--> <div class="col-sm-4 col-xs-12"> <!--Include footer random posts partial--> <!--Partial: Footer Random Posts--> <div class="footer-widget f-widget-random"> <div class="col-sm-12"> <div class="row"> <h4 class="title">Random Posts</h4> <div class="title-line"></div> <ul class="f-random-list"> <!--List random posts--> <li class=" post-item-no-image"> <div class="list-right"> <h5 class="title"> <a href="https://ngt-internship.com/blending-kettle-tender-interview-questions-and-answers-80143"> blending kettle tender Interview Questions and Answers </a> </h5> </div> </li> <li class=" post-item-no-image"> <div class="list-right"> <h5 class="title"> <a href="https://ngt-internship.com/agility-instructor-interview-questions-and-answers-83849"> agility instructor Interview Questions and Answers </a> </h5> </div> </li> <li class=" post-item-no-image"> <div class="list-right"> <h5 class="title"> <a href="https://ngt-internship.com/adjunct-professor-of-us-history-interview-questions-and-answers-99847"> adjunct professor of u.s. history Interview Questions and... </a> </h5> </div> </li> </ul> </div> </div> </div> </div><!-- /.col-sm-4 --> <!-- footer widget follow us--> <div class="col-sm-4 col-xs-12"> <div class="col-sm-12 footer-widget f-widget-follow"> <div class="row"> <h4 class="title">Social Media</h4> <ul> <!--Include social media links--> <!--if facebook url exists--> <!--if twitter url exists--> <!--if pinterest url exists--> <!--if instagram url exists--> <!--if linkedin url exists--> <!--if vk url exists--> <!--if telegram url exists--> <!--if youtube url exists--> <!--if rss active--> </ul> </div> </div> </div> <!-- .col-md-3 --> </div> <!-- .row --> <!-- Copyright --> <div class="footer-bottom"> <div class="row"> <div class="col-md-12"> <div class="footer-bottom-left"> <p>Copyright © 2024 ngt-internship.com - All Rights Reserved.</p> </div> <div class="footer-bottom-right"> <ul class="nav-footer"> <li> <a href="https://ngt-internship.com/terms-conditions">Terms & Conditions </a> </li> </ul> </div> </div> </div> <!-- .row --> </div> </div> </footer> <!-- Scroll Up Link --> <a href="#" class="scrollup"><i class="icon-arrow-up"></i></a> <!-- End Footer Section --> <script> var base_url = 'https://ngt-internship.com/';var fb_app_id = '';var csfr_token_name = 'varient_csrf_token';var csfr_cookie_name = 'varient_csrf_cookie';var lang_folder = 'default';var is_recaptcha_enabled = false;var sweetalert_ok = 'OK';var sweetalert_cancel = 'Cancel';</script> <!-- Plugins--> <script src="https://ngt-internship.com/assets/js/plugins-1.7.js"></script> <script> $(document).ready(function(){$("#featured-slider").slick({autoplay:true,autoplaySpeed:4900,slidesToShow:1,slidesToScroll:1,infinite:true,speed:200,rtl:rtl,swipeToSlide:true,cssEase:"linear",lazyLoad:"progressive",prevArrow:$("#featured-slider-nav .prev"),nextArrow:$("#featured-slider-nav .next"),});$("#random-slider").slick({autoplay:true,autoplaySpeed:4900,slidesToShow:1,slidesToScroll:1,infinite:true,speed:200,rtl:rtl,lazyLoad:"progressive",prevArrow:$("#random-slider-nav .prev"),nextArrow:$("#random-slider-nav .next"),});$("#post-detail-slider").slick({autoplay:false,autoplaySpeed:4900,slidesToShow:1,slidesToScroll:1,infinite:false,speed:200,rtl:rtl,adaptiveHeight:true,lazyLoad:"progressive",prevArrow:$("#post-detail-slider-nav .prev"),nextArrow:$("#post-detail-slider-nav .next"),});$(".main-menu .dropdown").hover(function(){$(".li-sub-category").removeClass("active");$(".sub-menu-inner").removeClass("active");$(".sub-menu-right .filter-all").addClass("active")},function(){});$(".main-menu .navbar-nav .dropdown-menu").hover(function(){var b=$(this).attr("data-mega-ul");if(b!=undefined){$(".main-menu .navbar-nav .dropdown").removeClass("active");$(".mega-li-"+b).addClass("active")}},function(){$(".main-menu .navbar-nav .dropdown").removeClass("active")});$(".li-sub-category").hover(function(){var b=$(this).attr("data-category-filter");$(".li-sub-category").removeClass("active");$(this).addClass("active");$(".sub-menu-right .sub-menu-inner").removeClass("active");$(".sub-menu-right .filter-"+b).addClass("active")},function(){});$(".news-ticker ul li").delay(500).fadeIn(500);$(".news-ticker").easyTicker({direction:"up",easing:"swing",speed:"fast",interval:4000,height:"30",visible:0,mousePause:1,controls:{up:".news-next",down:".news-prev",}});$(window).scroll(function(){if($(this).scrollTop()>100){$(".scrollup").fadeIn()}else{$(".scrollup").fadeOut()}});$(".scrollup").click(function(){$("html, body").animate({scrollTop:0},700);return false});$("form").submit(function(){$("input[name='"+csfr_token_name+"']").val($.cookie(csfr_cookie_name))});$(document).ready(function(){$('[data-toggle-tool="tooltip"]').tooltip()})});$("#form_validate").validate();$("#search_validate").validate();$(document).on("click",".btn-open-mobile-nav",function(){if($("#navMobile").hasClass("nav-mobile-open")){$("#navMobile").removeClass("nav-mobile-open");$("#overlay_bg").hide()}else{$("#navMobile").addClass("nav-mobile-open");$("#overlay_bg").show()}});$(document).on("click","#overlay_bg",function(){$("#navMobile").removeClass("nav-mobile-open");$("#overlay_bg").hide()});$(".close-menu-click").click(function(){$("#navMobile").removeClass("nav-mobile-open");$("#overlay_bg").hide()});$(window).on("load",function(){$(".show-on-page-load").css("visibility","visible")});$(document).ready(function(){$("iframe").attr("allowfullscreen","")});var custom_scrollbar=$(".custom-scrollbar");if(custom_scrollbar.length){var ps=new PerfectScrollbar(".custom-scrollbar",{wheelPropagation:true,suppressScrollX:true})}var custom_scrollbar=$(".custom-scrollbar-followers");if(custom_scrollbar.length){var ps=new PerfectScrollbar(".custom-scrollbar-followers",{wheelPropagation:true,suppressScrollX:true})}$(".search-icon").click(function(){if($(".search-form").hasClass("open")){$(".search-form").removeClass("open");$(".search-icon i").removeClass("icon-times");$(".search-icon i").addClass("icon-search")}else{$(".search-form").addClass("open");$(".search-icon i").removeClass("icon-search");$(".search-icon i").addClass("icon-times")}});$(document).ready(function(){$("#form-login").submit(function(a){a.preventDefault();var b=$(this);var c=b.serializeArray();c.push({name:csfr_token_name,value:$.cookie(csfr_cookie_name)});$.ajax({url:base_url+"auth_controller/login_post",type:"post",data:c,success:function(e){var d=JSON.parse(e);if(d.result==1){location.reload()}else{if(d.result==0){document.getElementById("result-login").innerHTML=d.error_message}}}})})});function make_reaction(c,d,b){var a={post_id:c,reaction:d,lang:b};a[csfr_token_name]=$.cookie(csfr_cookie_name);$.ajax({method:"POST",url:base_url+"home_controller/save_reaction",data:a}).done(function(e){document.getElementById("reactions_result").innerHTML=e})}$(document).ready(function(){$("#make_comment_registered").submit(function(b){b.preventDefault();var c=$(this).serializeArray();var a={};var d=true;$(c).each(function(f,e){if($.trim(e.value).length<1){$("#make_comment_registered [name='"+e.name+"']").addClass("is-invalid");d=false}else{$("#make_comment_registered [name='"+e.name+"']").removeClass("is-invalid");a[e.name]=e.value}});a.limit=$("#post_comment_limit").val();a.lang_folder=lang_folder;a[csfr_token_name]=$.cookie(csfr_cookie_name);if(d==true){$.ajax({type:"POST",url:base_url+"home_controller/add_comment_post",data:a,success:function(f){var e=JSON.parse(f);if(e.type=="message"){document.getElementById("message-comment-result").innerHTML=e.message}else{document.getElementById("comment-result").innerHTML=e.message}$("#make_comment_registered")[0].reset()}})}});$("#make_comment").submit(function(b){b.preventDefault();var c=$(this).serializeArray();var a={};var d=true;$(c).each(function(f,e){if($.trim(e.value).length<1){$("#make_comment [name='"+e.name+"']").addClass("is-invalid");d=false}else{$("#make_comment [name='"+e.name+"']").removeClass("is-invalid");a[e.name]=e.value}});a.limit=$("#post_comment_limit").val();a.lang_folder=lang_folder;a[csfr_token_name]=$.cookie(csfr_cookie_name);if(is_recaptcha_enabled==true){if(typeof a["g-recaptcha-response"]==="undefined"){$(".g-recaptcha").addClass("is-recaptcha-invalid");d=false}else{$(".g-recaptcha").removeClass("is-recaptcha-invalid")}}if(d==true){$(".g-recaptcha").removeClass("is-recaptcha-invalid");$.ajax({type:"POST",url:base_url+"home_controller/add_comment_post",data:a,success:function(f){var e=JSON.parse(f);if(e.type=="message"){document.getElementById("message-comment-result").innerHTML=e.message}else{document.getElementById("comment-result").innerHTML=e.message}if(is_recaptcha_enabled==true){grecaptcha.reset()}$("#make_comment")[0].reset()}})}})});$(document).on("click",".btn-subcomment-registered",function(){var a=$(this).attr("data-comment-id");var b={};b.lang_folder=lang_folder;b[csfr_token_name]=$.cookie(csfr_cookie_name);$("#make_subcomment_registered_"+a).ajaxSubmit({beforeSubmit:function(){var d=$("#make_subcomment_registered_"+a).serializeArray();var c=$.trim(d[0].value);if(c.length<1){$(".form-comment-text").addClass("is-invalid");return false}else{$(".form-comment-text").removeClass("is-invalid")}},type:"POST",url:base_url+"home_controller/add_comment_post",data:b,success:function(d){var c=JSON.parse(d);if(c.type=="message"){document.getElementById("message-subcomment-result-"+a).innerHTML=c.message}else{document.getElementById("comment-result").innerHTML=c.message}$(".visible-sub-comment form").empty()}})});$(document).on("click",".btn-subcomment",function(){var a=$(this).attr("data-comment-id");var b={};b.lang_folder=lang_folder;b[csfr_token_name]=$.cookie(csfr_cookie_name);b.limit=$("#post_comment_limit").val();var c="#make_subcomment_"+a;$(c).ajaxSubmit({beforeSubmit:function(){var d=$("#make_subcomment_"+a).serializeArray();var e=true;$(d).each(function(g,f){if($.trim(f.value).length<1){$(c+" [name='"+f.name+"']").addClass("is-invalid");e=false}else{$(c+" [name='"+f.name+"']").removeClass("is-invalid");b[f.name]=f.value}});if(is_recaptcha_enabled==true){if(typeof b["g-recaptcha-response"]==="undefined"){$(c+" .g-recaptcha").addClass("is-recaptcha-invalid");e=false}else{$(c+" .g-recaptcha").removeClass("is-recaptcha-invalid")}}if(e==false){return false}},type:"POST",url:base_url+"home_controller/add_comment_post",data:b,success:function(e){if(is_recaptcha_enabled==true){grecaptcha.reset()}var d=JSON.parse(e);if(d.type=="message"){document.getElementById("message-subcomment-result-"+a).innerHTML=d.message}else{document.getElementById("comment-result").innerHTML=d.message}$(".visible-sub-comment form").empty()}})});function load_more_comment(c){var b=parseInt($("#post_comment_limit").val());var a={post_id:c,limit:b};a.lang_folder=lang_folder;a[csfr_token_name]=$.cookie(csfr_cookie_name);$("#load_comment_spinner").show();$.ajax({type:"POST",url:base_url+"home_controller/load_more_comment",data:a,success:function(d){setTimeout(function(){$("#load_comment_spinner").hide();var e=JSON.parse(d);if(e.result==1){document.getElementById("comment-result").innerHTML=e.html_content}},1000)}})}function delete_comment(a,c,b){swal({text:b,icon:"warning",buttons:[sweetalert_cancel,sweetalert_ok],dangerMode:true,}).then(function(f){if(f){var e=parseInt($("#post_comment_limit").val());var d={id:a,post_id:c,limit:e};d.lang_folder=lang_folder;d[csfr_token_name]=$.cookie(csfr_cookie_name);$.ajax({type:"POST",url:base_url+"home_controller/delete_comment_post",data:d,success:function(h){var g=JSON.parse(h);if(g.result==1){document.getElementById("comment-result").innerHTML=g.html_content}}})}})}function show_comment_box(a){if($("#sub_comment_form_"+a).html().length>0){$("#sub_comment_form_"+a).empty()}else{$(".visible-sub-comment").empty();var c=parseInt($("#post_comment_limit").val());var b={comment_id:a,limit:c};b.lang_folder=lang_folder;b[csfr_token_name]=$.cookie(csfr_cookie_name);$.ajax({type:"POST",url:base_url+"home_controller/load_subcomment_box",data:b,success:function(d){$("#sub_comment_form_"+a).append(d)}})}}function like_comment(b){var c=parseInt($("#post_comment_limit").val());var a={id:b,limit:c};a[csfr_token_name]=$.cookie(csfr_cookie_name);$.ajax({type:"POST",url:base_url+"home_controller/like_comment_post",data:a,success:function(e){var d=JSON.parse(e);if(d.result==1){document.getElementById("lbl_comment_like_count_"+b).innerHTML=d.like_count}}})}function dislike_comment(b){var c=parseInt($("#post_comment_limit").val());var a={id:b,limit:c};a[csfr_token_name]=$.cookie(csfr_cookie_name);$.ajax({type:"POST",url:base_url+"home_controller/dislike_comment_post",data:a,success:function(e){var d=JSON.parse(e);if(d.result==1){document.getElementById("lbl_comment_like_count_"+b).innerHTML=d.like_count}}})}function view_poll_results(b){$("#poll_"+b+" .question").hide();$("#poll_"+b+" .result").show()}function view_poll_options(b){$("#poll_"+b+" .result").hide();$("#poll_"+b+" .question").show()}$(document).ready(function(){var b;$(".poll-form").submit(function(h){h.preventDefault();if(b){b.abort()}var a=$(this);var g=a.find("input, select, button, textarea");var j=a.serializeArray();j.push({name:csfr_token_name,value:$.cookie(csfr_cookie_name)});var i=$(this).attr("data-form-id");b=$.ajax({url:base_url+"home_controller/add_vote",type:"post",data:j,});b.done(function(c){g.prop("disabled",false);if(c=="required"){$("#poll-required-message-"+i).show();$("#poll-error-message-"+i).hide()}else{if(c=="voted"){$("#poll-required-message-"+i).hide();$("#poll-error-message-"+i).show()}else{document.getElementById("poll-results-"+i).innerHTML=c;$("#poll_"+i+" .result").show();$("#poll_"+i+" .question").hide()}}})})});function add_delete_from_reading_list(b){$(".tooltip").hide();var a={post_id:b,};a[csfr_token_name]=$.cookie(csfr_cookie_name);$.ajax({type:"POST",url:base_url+"ajax_controller/add_delete_reading_list_post",data:a,success:function(c){location.reload()}})}function load_more_posts(){$(".btn-load-more").prop("disabled",true);$("#load_posts_spinner").show();var c=parseInt($("#load_more_posts_last_id").val());var b=parseInt($("#load_more_posts_lang_id").val());var a={load_more_posts_last_id:c,load_more_posts_lang_id:b};a[csfr_token_name]=$.cookie(csfr_cookie_name);$.ajax({type:"POST",url:base_url+"home_controller/load_more_posts",data:a,success:function(e){var d=JSON.parse(e);if(d.result==1){setTimeout(function(){$("#last_posts_content").append(d.html_content);$("#load_more_posts_last_id").val(d.last_id);$("#load_posts_spinner").hide();$(".btn-load-more").prop("disabled",false);if(d.hide_button){$(".btn-load-more").hide()}},300)}else{setTimeout(function(){$("#load_more_posts_last_id").val(d.last_id);$("#load_posts_spinner").hide();$(".btn-load-more").hide()},300)}}})}function load_more_comments(f){var e=parseInt($("#vr_comment_limit").val());var d={post_id:f,limit:e,};d[csfr_token_name]=$.cookie(csfr_cookie_name);$("#load_comments_spinner").show();$.ajax({method:"POST",url:base_url+"home_controller/load_more_comments",data:d}).done(function(a){setTimeout(function(){$("#load_comments_spinner").hide();$("#vr_comment_limit").val(e+5);document.getElementById("comment-result").innerHTML=a},500)})}$(document).on("click",".widget-popular-posts .btn-nav-tab",function(){$(".widget-popular-posts .loader-popular-posts").show();var b=$(this).attr("data-date-type");var c=$(this).attr("data-lang-id");var a={date_type:b,lang_id:c};a[csfr_token_name]=$.cookie(csfr_cookie_name);$.ajax({type:"POST",url:base_url+"ajax_controller/get_popular_posts",data:a,success:function(e){var d=JSON.parse(e);if(d.result==1){setTimeout(function(){document.getElementById("tab_popular_posts_response").innerHTML=d.html_content;$(".widget-popular-posts .loader-popular-posts").hide()},500)}$(".widget-popular-posts .loader-popular-posts").hide()}})});$(document).on("click",".visual-color-box",function(){var a=$(this).attr("data-color");$(".visual-color-box").empty();$(this).html('<i class="icon-check"></i>');$("#input_user_site_color").val(a)});function hide_cookies_warning(){$(".cookies-warning").hide();var a={};a[csfr_token_name]=$.cookie(csfr_cookie_name);$.ajax({type:"POST",url:base_url+"home_controller/cookies_warning",data:a,success:function(b){}})}$("#print_post").on("click",function(){$(".post-content .title, .post-content .post-meta, .post-content .post-image, .post-content .post-text").printThis({importCSS:true,})});$(document).ajaxStop(function(){function d(a){$("#poll_"+a+" .question").hide();$("#poll_"+a+" .result").show()}function c(a){$("#poll_"+a+" .result").hide();$("#poll_"+a+" .question").show()}});$(document).ready(function(){$(".validate_terms").submit(function(a){if(!$(".checkbox_terms_conditions").is(":checked")){a.preventDefault();$(".custom-checkbox .checkbox-icon").addClass("is-invalid")}else{$(".custom-checkbox .checkbox-icon").removeClass("is-invalid")}})});$(document).ready(function(){$(".post-content .post-text table").each(function(){table=$(this);tableRow=table.find("tr");table.find("td").each(function(){tdIndex=$(this).index();if($(tableRow).find("th").eq(tdIndex).attr("data-label")){thText=$(tableRow).find("th").eq(tdIndex).data("label")}else{thText=$(tableRow).find("th").eq(tdIndex).text()}$(this).attr("data-label",thText)})})});$(document).ready(function(){$(".gallery-post-buttons a").css("opacity","1")});$(document).ready(function(b){b(".image-popup-single").magnificPopup({type:"image",titleSrc:function(a){return a.el.attr("title")+"<small></small>"},image:{verticalFit:true,},gallery:{enabled:false,navigateByImgClick:true,preload:[0,1]},removalDelay:100,fixedContentPos:true,})});$(document).on("click","#btn_subscribe_footer",function(){var a=$("#newsletter_email_footer").val();$("#newsletter_email_modal").val(a);$("#modal_newsletter").modal("show")}); </script> </body> </html>