Node.js Express HTML IFrame Tag Generator in Javascript Full Project For Beginners 2020

Node.js Express HTML IFrame Tag Generator in Javascript Full Project For Beginners 2020

 

 

Welcome folks today in this blog post we will be building a iframe tag generator in javascript full project for beginners. All the source code of the application is given below.

 

 

Get Started

 

 

In order to get started you need to create this index.html file and copy paste the following code

 

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- when using the mode "code", it's important to specify charset utf-8 -->
    <meta charset="utf-8" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    />

    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/9.1.2/jsoneditor.css"
      rel="stylesheet"
      type="text/css"
    />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/9.1.2/jsoneditor.min.js"></script>
  </head>
  <body>
    <div class="container">
      <br>
      <h1 class="text-center">IFrame Generator Online</h1>
      <div class="form-group">
        <label for="iframename">IFrame Name:</label>
        <input
          name=""
          type="text"
          id="name"
          value="myIframe"
          placeholder="Enter Iframe Name"
          required
          class="form-control"
        >
      </div>
      <div class="form-group">
        <label for="iframewidth">IFrame Width:</label>
        <input
          name=""
          type="number"
          id="width"
          placeholder="Enter Iframe Width"
          value="600"
          required
          class="form-control"
        >
      </div>
      <div class="form-group">
        <label for="iframeheight">IFrame Height:</label>
        <input
          name=""
          type="number"
          id="height"
          placeholder="Enter Iframe Height"
          value="400"
          required
          class="form-control"
        >
      </div>

      <div class="form-group">
        <label for="scrollbar">Scrollbar:</label>
        <label class="radio-inline"
          ><input type="radio" name="scrollbar" value="no" checked /> No</label
        >
        <label class="radio-inline"
          ><input type="radio" name="scrollbar" value="yes" /> Yes</label
        >
      </div>

      <div class="form-group">
        <label for="marginwidth">Margin Width:</label>
        <input
          name=""
          type="number"
          id="marginwidth"
          placeholder="Enter Margin Width"
          value="0"
          required
          class="form-control"
        >
      </div>

      <div class="form-group">
        <label for="marginheight">Margin Height:</label>
        <input
          name=""
          type="number"
          id="marginheight"
          placeholder="Enter Margin Height"
          value="0"
          required
          class="form-control"
        >
      </div>

      <div class="form-group">
        <label for="border">Border:</label>
        <label class="radio-inline"
          ><input type="radio" name="border" value="yes" checked /> Yes</label
        >
        <label class="radio-inline"
          ><input type="radio" name="border" value="no" /> No</label
        >
      </div>

      <div class="form-group">
        <label for="bordertype">Border Type:</label>
        <label class="radio-inline"
          ><input type="radio" name="bordertype" value="none" checked /> None</label
        >
        <label class="radio-inline"
          ><input type="radio" name="bordertype" value="hidden" /> Hidden</label
        >
        <label class="radio-inline"
          ><input type="radio" name="bordertype" value="solid" /> Solid</label
        >
        <label class="radio-inline"
          ><input type="radio" name="bordertype" value="dashed" /> Dashed</label
        >
        <label class="radio-inline"
          ><input type="radio" name="bordertype" value="dotted" /> Dotted</label
        >
      </div>

      <div class="form-group">
        <label for="bordersize">Border Size:</label>
        <input
          name=""
          type="number"
          id="bordersize"
          placeholder="Enter Border Size"
          value="0"
          required
          class="form-control"
        >
      </div>

      <div class="form-group">
        <label for="bordercolor">Border Color:</label>
        <input
          name=""
          type="text"
          id="bordercolor"
          placeholder="Enter Border Size"
          value="ffffff"
          required
          class="form-control"
        >
      </div>

      <div class="form-group">
        <label for="iframeurl">Iframe URL:</label>
        <input
          name=""
          type="text"
          id="iframeurl"
          placeholder="Enter Iframe URL"
          required
          class="form-control"
        >
      </div>


      <div class="form-group">
        <button id="preview" class="btn btn-danger btn-block">
          Generate Preview and HTML Code
        </button>
      </div>

      <div id="result"></div>

      <div class="form-group">
        <label for="output">HTML Code:</label>
        <textarea
          class="form-control"
          name=""
          id="code"
          cols="30"
          rows="10"
          placeholder="HTML Code"
        ></textarea>
      </div>
      <div class="form-group">
        <button onclick="copytoclipboard()" class="btn btn-primary btn-block">
          Copy to Clipboard
        </button>
      </div>
    </div>
  </body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script>
    var result = ""
    $("#preview").click(function () {

      var name = $("#name").val()
      var width = $("#width").val()
      var height = $("#height").val()

      var scrollbar = $("input[name='scrollbar']:checked").val();

      var marginwidth = $("#marginwidth").val()
      var marginheight = $("#marginheight").val()

      var border = $("input[name='border']:checked").val();
      console.log(border)

      var bordertype = $("input[name='bordertype']:checked").val();
      console.log(bordertype)

      var bordersize = $("#bordersize").val()


      var bordercolor = $("#bordercolor").val()

      var iframeurl = $("#iframeurl").val()

      console.log(name + width + height + marginwidth + marginheight + border + bordertype + bordersize + bordercolor + iframeurl)

      generateIframe(name,width,height,scrollbar,marginwidth,marginheight,border,bordertype,bordersize,bordercolor,iframeurl)

      
    })

    function generateIframe(name,width,height,scrollbar,marginwidth,marginheight,border,bordertype,bordersize,bordercolor,iframeurl)
    {
      console.log(iframeurl)
      if(border == "yes"){
        result = `<iframe src="${iframeurl}" style="border:${bordersize}px #${bordercolor} ${bordertype};" name="${name}" scrolling="${scrollbar}" frameborder="1" marginheight="${marginheight}px" marginwidth="${marginwidth}px" height="${height}px" width="${width}px" allowfullscreen></iframe>`
        $("#result").html(result)
        $("#code").html(result)
      }else{
      result = `<iframe src="${iframeurl}" style="border:${bordersize}px #${bordercolor} ${bordertype};" name="${name}" scrolling="${scrollbar}" frameborder="0" marginheight="${marginheight}px" marginwidth="${marginwidth}px" height="${height}px" width="${width}px" allowfullscreen></iframe>`
      $("#result").html(result)
      $("#code").html(result)
      }
    }
    function copytoclipboard() {
      /* Get the text field */
      var copyText = document.getElementById("code");

      /* Select the text field */
      copyText.select();
      copyText.setSelectionRange(0, 99999); /*For mobile devices*/

      /* Copy the text inside the text field */
      document.execCommand("copy");

    }
  </script>
</html>

 

See also  Build Node.js Express File Downloader Web App in Browser Using EJS & Javascript Full Project For Beginners

 

 

 

Screenshot

 

 

 

 

 

Leave a Reply