self-conscious-design
clone your own copy | download snapshot

Snapshots | iceberg

No images in this repository’s iceberg at this time

Inside this repository
text1.xhtml
application/xhtml+xml

Download raw (3.3 KB)

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
  <title></title>

  <link href="../Style/style.css" rel="stylesheet" type="text/css"/>
  <script src="../JS/jquery-2.0.3.min.js" type="text/javascript"></script>
  
  <script type="text/javascript">
  //choose words
  var adjectives=new Array ('The living', 'The logical', 'The secondary', 'The absolute', 'The fashion');
  var subjects=new Array ('logic', 'process', 'time', 'solution', 'problem');
  var verbs=new Array ('shall apply to', 'shall remain in', 'shall allow', 'shall escape from', 'shall assign');
  var adjectivesTwo=new Array ('living', 'logical', 'secondary', 'absolute', 'fashion');
  var nouns=new Array ('logic', 'process', 'time', 'solution', 'problem');

  var motCourrant = 1;
  var factor = 40;

  var wordOrder=new Array (
    {'wordList': adjectives, 'elementId': 'adjective'},
    {'wordList': subjects, 'elementId': 'subject'},
    {'wordList': verbs, 'elementId': 'verb'},
    {'wordList': adjectivesTwo, 'elementId': 'adjective_two'},
    {'wordList': nouns, 'elementId': 'noun'}
  );

  document.addEventListener ('DOMContentLoaded', function () {
    setTextSize ();
    blessWord ();
    window.addEventListener('click', blessWord, false)
  }, false);

  $(window).resize(function() {
        setTextSize ();
      });

  var elem = null

  var setTextSize = function () {
    baseSize = $('body').width() / factor;
   
    $('body').css('font-size', baseSize);
    $('body').css('line-height', baseSize + 'px');
  };

  var blessWord = function () {
    if (wordOrder.length > 0) {
      var wordObj = wordOrder.shift ();
      wordOrder.push (wordObj);

      changeColorSize(wordObj);
      motCourrant++;
      if (motCourrant === 6) {
        motCourrant = 1;
      }
      
      elem = document.getElementById (wordObj.elementId);
      console.log (elem);

      // never the same word twice in a row
      var currentWord = elem.innerText;
      var newWord = wordObj.wordList[Math.floor(Math.random()*wordObj.wordList.length)]
      while (newWord === currentWord) {
        newWord = wordObj.wordList[Math.floor(Math.random()*wordObj.wordList.length)];
      }
      elem.innerText = newWord;

    }
  }

    //change color and size
  function changeColorSize(wordObj){
    var minSize=20;
    var maxSize=200;
    //var colorise=true;
    //var colorArray=['red', 'black', 'green', 'blue'];
    var fontArray=['Futura-CondensedExtraBold', 'TimesNewRomanPSMT', 'AmericanTypewriter', 'Palatino-Roman'];

    $('#' + wordObj.elementId).css({
        //'color':colorArray[Math.floor(Math.random()*colorArray.length)],
        'font-family':fontArray[Math.floor(Math.random()*fontArray.length)],
        'font-size': (minSize + (Math.floor(Math.random()*(maxSize-minSize)))) + '%'
    });
  }
  function getRandomInt(min, max){
    return Math.floor(Math.random()*(max-min+1))+min;
  }
  $(document).ready(function(){
    changeColorSize();
  });

  </script>
</head>

<body>
  <p><img src="../Image/LinesPaper.jpg" class="center"/></p>
  <div class="poem">
    <h1 id="adjective" class="center"></h1>
    <h1 id="subject" class="center"></h1>
    <h1 id="verb" class="center"></h1>
    <h1 id="adjective_two" class="center"></h1>
    <h1 id="noun" class="center"></h1>
  </div>
</body>
</html>