onlyforbopi
9/26/2018 - 8:19 AM

JS.Objects.Classes.Print Text App.v1

JS.Objects.Classes.Print Text App.v1

style.scss
content_copyfile_download
$default-font: 'Raleway', sans-serif;
$default-font-size: 1rem;
$default-pad: 1em;
$default-mar: 1em;
$bold: 700;
$normal: 400;
$default-color: rgb(60, 150, 252);
$default-r: 2px;

@mixin defaultInput($width: 150px, $bg-color: #fff ) {
  border: 1px solid rgba($default-color, .5);
  border-radius: $default-r;
  color: gray;
  width: $width;
  background-color: $bg-color;
  padding: .2em .1em;
}

* {
  padding: 0;
  margin: 0;
  list-style: none;
  box-sizing: border-box;
}

body {
  padding: $default-pad;
  font-family: $default-font;
  font-size: $default-font-size;
  
  h2 {
    margin-bottom: $default-mar;
    font-size: 1.6rem;
    font-weight: $bold;
    color: $default-color;
    
    small {
      font-size: .7rem;
      font-weight: $normal;
      color: #000;
    }
  }
  label {
    color: $default-color;
    
    div {
      display: inline-block;
      position: relative;
    }
    select {
      -webkit-appearance: none; 
      -moz-appearance: none;
      appearance: none;
      @include defaultInput();
    }
    span {
      position: absolute;
      top: 65%;
      right: 8px;
      transform: translateY(-50%);
      z-index: -1;
      border-width: 10px;
      border-style: solid;
      border-color: red;
      z-index: 100;
      border-width: 6px;
      border-style: solid;
      border-color: gray transparent transparent transparent;
    }
    input {
      @include defaultInput($width: 300px);
      padding: .33em .5em;
    }
  }
}
script.js
content_copyfile_download
'use strict';

let select = document.querySelector('#select'),
    input = document.querySelector('#input'),
    output = document.querySelector('.output'),
    optionData,
    h1;
 
class Print {
  constructor(tag, text) {
    this.tag = tag;
    this.text = text;
  }
  
  printVal() {
    return '<' + this.tag + '>' + this.text + '</' + this.tag + '>';
  }
}

// Print what you typed in input into "output"
input.addEventListener('input', _ => {
  output.innerHTML = input.value;
  
  if (select.dataset.type === 'h1') {
    h1 = new Print('h1', input.value);
    output.innerHTML = h1.printVal();
  }
}, false);

// When you select tag
select.addEventListener('change', _ => {
  
  optionData = document.querySelector('#select option:checked').dataset.type;
  
  // Set new attr to select tag
  select.setAttribute('data-type', optionData);
  
  // Check the value of new attr "data-type"
  switch (select.dataset.type) {
    case ('h1'):
      h1 = new Print('h1', input.value);
      output.innerHTML = h1.printVal();
      break;
    case ('prag'):
      let p = new Print('p', input.value);
      output.innerHTML = p.printVal();
      break;
    case ('link'):
      let link = new Print('a', input.value);
      output.innerHTML = link.printVal();
      let a = document.querySelector('.output a:first-child');
      if (a) {
        a.setAttribute('href', '#');
      }
      break;
    default: alert('something wrong!!');
      break;
  }
}, false);
js-objects-classes-print-text-app-v1.markdown
content_copyfile_download
  • Rendered
  • Source

JS.Objects.Classes.Print Text App.v1

A Pen by Pan Doul on CodePen.

License.

index.html
content_copyfile_download
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet">
</head>
<body>
  <h2>Print App <small>feel free to edit or add more features</small></h2>
  <label>
    Tag: 
    <div>
      <span></span>
      <select name="select" id="select" data-type="h1">
      <option value="heading" data-type="h1">&lt;h1&gt;</option>
      <option value="prag" data-type="prag">&lt;prag&gt;</option>
      <option value="anchro" data-type="link">&lt;anchro&gt;</option>
    </select>
    </div>
  </label>
  <label style="margin-left:1em">
    Text: 
    <input type="text" name="input" id="input" placeholder="Write Something.." style="width:300px">  
  </label>
  <br><br>
  <div class="output"></div>
</body>
</html>