JSFiddle - React, Tailwind, and code Playground

by samonela

HTML

<header class="main-header " style="background-image: url(/assets/images/cover-medium-min.jpg) ">
    <nav class="main-nav overlay clearfix">
            
        <a class="subscribe-button icon-feed" href="feed.xml">Subscribe</a>
    </nav>
    <div class="vertical">
        <div class="main-header-content inner">
            <h1 class="page-title">bhansa's blog</h1>
            <h2 class="page-description">
                 Thoughts, projects and lot more.... 
                 <a href="about.html"> About me </a> 
            </h2>
        </div>
    </div>
    <a class="scroll-down icon-arrow-left" href="#content" data-offset="-45"><span class="hidden">Scroll Down</span></a>
</header>


<main id="content" class="content" role="main">


    <div class="extra-pagination inner">
        <nav class="pagination" role="pagination">
    
    <span class="page-number"> Page 1 of 1 </span>
     
</nav>
    </div>

    

    <article class="post">
        <header class="post-header">
            <h2 class="post-title"><a href="/testing/2018/08/27/testing-google-dataset-seo.html">testing for google seo dataset</a></h2>
        </header>
        <section class="post-excerpt">
            <script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "Dataset",
        "name": "Test database",
        "description": "SEO test - DATASET",
        "url": "https://bhansa.github.io/test-dataset.csv",
        "keywords":[
            "football scores", 
            "testing dataset",
            "bhansa",
            "bhansa blog dataset"
        ]
    }
</script>

 <a class="read-more" href="/testing/2018/08/27/testing-google-dataset-seo.html">»</a>
        </section>
        <footer class="post-meta">
            
                <img class="author-thumb full-img" src="/assets/images/profile-min.png" alt="Author's profile picture" nopin="nopin">
                Bharat Saraswat
            
             
                on testing 
         ...

JavaScript

var brandColor = [
  "rgb(255, 255, 255)",
  "rgb(0, 0, 0)",
  "rgb(0, 163, 224)",
  "rgb(0, 118, 168)",
  "rgb(1, 33, 105)"
];

var brandFont = ["Open Sans", "Verdana"];
var fontNotMatch;

// generic walkDOM function - iterate DOM
function walkDom(start_element) {
  var arr = []; // we can gather elements here
  var loop = function(element) {
    do {
      // we can do something with element
      if (element.nodeType == 1) {
        // do not include text nodes
        arr.push(element);
      }
      if (element.hasChildNodes()) loop(element.firstChild);
    } while ((element = element.nextSibling));
  };
  loop(start_element);
  //loop(start_elem.firstChild); // do not include siblings of start element
  return arr;
}

var arr = walkDom(document.body);
console.log('arr', arr);
var stylesContainer = {};
var fontChecker = {};
// iterate through DOM array
for (elem in arr) {
  // get all colors - [need better approach for this as well]
  stylesContainer[arr[elem].tagName] = getComputedStyle(
    arr[elem]
  ).getPropertyValue("color");

  // get all fonts
  fontChecker[arr[elem].tagName] = getComputedStyle(arr[elem]).getPropertyValue(
    "font-family"
  );
}

//console.log(stylesContainer);

// iterate styles
Object.keys(stylesContainer).forEach(element => {
  if (brandColor.indexOf(stylesContainer[element]) > -1) {
    //pass
  } else if (document.querySelector(element).childNodes.length == 1) {
    document.getElementsByTagName(element)[0].style.border = "2px solid red";
    var path =
      "https://example.com/icons/favicon.ico";
    var img = document.createElement("img");
    img.setAttribute("src", path);
    img.setAttribute("width", "20");
    document.querySelector(element).appendChild(img);
  }
  // console.log(stylesContainer[element]);
});

// iterate font family
Object.keys(fontChecker).forEach(element => {
  // Loop through each element and check the font family
  // console.log(fontChecker[element]);
  if (fontChecker[element].indexOf("Open...