Homenagem de dia das mães Encode Web

Homenagem-de-dia-das-mães-Encode-Web.markdown

Homenagem de dia das mães Encode Web

Um simples script para homenagear as mães de todos os programadores.

A Pen by John Murowaniecki on CodePen.

License.

index.html

<person name="Amélia">
  <person name="Joaquim"></person>
  <person name="Ana Maria">
    <person name="Nicholas"></person>
    <person name="Stefanie"></person>
    <person name="Andrew"></person>
  </person>
  <person name="Jacinto"></person>
  <person name="Regina">
    <person name="John"></person>
  </person>
</person>

<person name="Zara">
  <person name="Ana"></person>
  <person name="Lucas"></person>
  <person name="Duda"></person>
</person>

script.js

function mãe_só_tem_uma(filho_programador) {

  var mãe = filho_programador.parentNode;

  return [(mãe.de(filho_programador)
      ? ("Feliz dia das mães, %mamãe%!!"
        .troca("%mamãe%")
        .por(mãe.attributes.name.value)) : ''),

    ("Obrigado por todos aqueles \"bla-bla-bla\"."
      .troca("bla-bla-bla")
      .por(
        (function tudo_aquilo_que(as_mães) {
          return as_mães.sempre_dizem();
        }([
          "bota um casaquinho",
          "leva o guarda-chuva!",
          "já tomou o remédio?"
          ])
        )))
    ].join(" ");
}

var persons = document.querySelectorAll("person"),
    look_for_mamma = function (e) {
      e.preventDefault();
      e.stopPropagation();

      alert(mãe_só_tem_uma(this));
    };

for (var person in persons) {
  if (persons.hasOwnProperty(person)) {
    persons[person].onclick = look_for_mamma;
  }
}

String.prototype.troca = function(t) {
  this.replace_string = t;
  return this;
}

String.prototype.por = function(t) {
  return this.replace(this.replace_string, t);
}

Array.prototype.sempre_dizem = function() {
  return this[parseInt(Math.random() * this.length)];
}

Node.prototype.de = function(f) {
  return this.nodeName === f.nodeName;
}

style.css

person {
  display: block;
  min-height: 30px;
  min-width: 20px;
  margin: 3px;
  padding: 5px;
  background: #FFF;
  border: 1px solid white;
}

person:not(:empty) {
  background: #FEE;
}

person:not(:empty):before {
  background: url("data:image/gif;base64,R0lGODlhEwATAOcAAP////P58PL57//w8P/v7/vu6/vt6v3r6/3q6v//APvn5/vm5v/i4vni4v/g4P/2AP/f39nsz/ng4Nns0Pjd2PzY2Mzlv//Q0P/Pz/jOzsDfsL/fr/TMxP/FxfrExPPFxf/AwLPZoP+/v7LZn//PAPC8sabTkPO2tvixsf+wsP+/AJnMgJnMf/+oqO2oqP+wAJPJUf+fn/+vAI3GcIzFb9arjPCgoOifjoPBZIC/YL+oeP+QkP+Pj86fevSOjnO5UOSRfeePj7OdZGazQMeSaPJ9faaTUf9/AFmsMOh6ev+AAP9wcNqDAFOpAE2mIP9kZORoaP9hYf9gYP9oAECfENlqTtlqTa13OttkZO5oAICDJNtoADOZAKVxLXOCGZF7AP9RUcZoAGeCEO1OTu1NTUyGAJ1qIdVRUV94AGN1AP9AQH9gAIJeAP8wMNg6Otk5OZpMAP8kJMY2C/8jI/8gIP8gAP8fAMEvAcEuAMwmAMMkJMMjI9kdAP8QEP8PAP8QAOUTAOQLC/8BAf8AAKYWAOIAAOIBAcUGBsIAAKUBAZ8AAP///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////yH5BAEHAP8ALAAAAAATABMAAAiyAP8JHDhQzSA1BBMSbDMoxqCHMfrQIaBQ4IWHGDOCqChQyqA6LxK8qDOoDcd/BgepSMBSxUOECiFgZEkTI4SKKVe2fMlxgEM7MhLIsDNIykmZGTX27FMU45JBfRycHHBhQJ6DVKVWREKFRYEbXMrcoHDyHxUuXJAIQGvk3wYnSCquQMvlB1oTI9A64YiELtoIdDVwDGCXbuEQZSdo6MuFyo8JZf9NCJBD74oZkf9RtqwwIAA7") no-repeat;
  /* Nós queremos um buquê.. Um buquê bem bonito de flores.. Para mamãe! Para mamãe!! Mas não tendo encontrado um buquê a rigor a mamãe vai ganhar uma flor! */
  color: red;
  padding-left: 20px;
}

person:before {
  content: attr(name);
}