Project 14

In this example below you will see how to do a Project 14 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by EmilyK, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright EmilyK ©
  • HTML
  • CSS
  • JavaScript
    
<head>
  <meta charset="utf-8">
  <title>Project 14</title>
  <style>
    html {margin:1em; font-family:Helvetica, Arial, sans-serif;}
    h2 {clear:both;}
    .box {width:200px; height:200px; border:1px solid #000; background-color:#ddd;}
  </style>
</head>
<body>
  <header><h1>Project 14</h1></header>

  <h2>Source and Target</h2>
  <h3>Source</h3>
  <input type="text" id="text1" placeholder="Type here">
  <h3>Target</h3>
  <input type="text" id="text2" readonly="true" placeholder="Echo the result here">
  <script>

  </script>

  <hr>

  <h2>Image Swap</h2>
  <img id="kitten" src="http://placekitten.com/g/300/200" title="A kitten" alt="A kitten"><br>
  <input type="text" id="get-img" placeholder="Enter image url here"><button id="update-img">Update</button>
  <script>

  </script>

  <hr>

  <h2>Font Sizer</h2>
  <p id="to-style">This is my paragraph of stuff.</p><br>
  <input type="text" id="font-size" placeholder="Enter a font size"><button id="font-button">Make it so</button>
  <script>

  </script>

  <hr>

  <h2>Attribute Reporter</h2>
  <img id="kitten2" src="http://placekitten.com/g/300/200" title="A kitten" alt="A kitten"><br>
  <button id="get-attr">Log Attributes</button>
  <script>

  </script>

  <hr>

  <h2>Element Counter</h2>
  <input type="text" id="element-type" placeholder="Which element?"><br>
  <button id="count">Count the Elements</button>
  <input type="text" id="element-count" placeholder="Results here" readonly="true">
  <script>

  </script>


</body>



/*Downloaded from https://www.codeseek.co/EmilyK/project-14-zwpbG */
    


/*Downloaded from https://www.codeseek.co/EmilyK/project-14-zwpbG */
    document.getElementById('text1').addEventListener("keyup", function(){
    var newText = document.getElementById('text1').value;

    document.getElementById('text2').value = newText;

  });

document.getElementById('update-img').addEventListener("click", function(){
    var dog = document.getElementById('get-img').value;
    console.log(dog);

document.getElementById('kitten');
    kitten.setAttribute('src', dog);
    kitten.setAttribute('alt', 'Img');
    kitten.setAttribute('title', 'New Image');
  });

var paragraph = document.getElementById('to-style');
  document.getElementById('font-button').addEventListener("click", function(){
        var newsize = document.getElementById('font-size').value;

    paragraph.style.fontSize = newsize;
  });
    
 document.getElementById('get-attr').addEventListener("click", function(){
    var input = document.getElementById('kitten2');
    console.log(input.getAttribute('src'));
    console.log(input.getAttribute('alt'));
  });

document.getElementById('count').addEventListener("click", function(){
            var headersByAll = document.querySelectorAll(document.getElementById('element-type').value);
   
document.getElementById('element-count').value = headersByAll.length;
    
        var textcount = document.getElementById('element-count');
console.log(headersByAll.length);
for(i = 0; i < headersByAll.length; i++){
      console.log(headersByAll[i]);
    }
  });

Comments