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>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

<!DOCTYPE html>

<head>

<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"

</head>

<body>

<br>

<h1 class="text-center">IFrame Generator Online</h1>

<label for="iframename">IFrame Name:</label>

<input

name=""

type="text"

id="name"

value="myIframe"

placeholder="Enter Iframe Name"

required

class="form-control"

</div>

<label for="iframewidth">IFrame Width:</label>

<input

name=""

type="number"

id="width"

placeholder="Enter Iframe Width"

value="600"

required

class="form-control"

</div>

<label for="iframeheight">IFrame Height:</label>

<input

name=""

type="number"

id="height"

placeholder="Enter Iframe Height"

value="400"

required

class="form-control"

</div>

<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>

<label for="marginwidth">Margin Width:</label>

<input

name=""

type="number"

id="marginwidth"

placeholder="Enter Margin Width"

value="0"

required

class="form-control"

</div>

<label for="marginheight">Margin Height:</label>

<input

name=""

type="number"

id="marginheight"

placeholder="Enter Margin Height"

value="0"

required

class="form-control"

</div>

<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>

<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>

<label for="bordersize">Border Size:</label>

<input

name=""

type="number"

id="bordersize"

placeholder="Enter Border Size"

value="0"

required

class="form-control"

</div>

<label for="bordercolor">Border Color:</label>

<input

name=""

type="text"

id="bordercolor"

placeholder="Enter Border Size"

value="ffffff"

required

class="form-control"

</div>

<label for="iframeurl">Iframe URL:</label>

<input

name=""

type="text"

id="iframeurl"

placeholder="Enter Iframe URL"

required

class="form-control"

</div>

Generate Preview and HTML Code

</button>

</div>

<textarea

class="form-control"

name=""

id="code"

cols="30"

rows="10"

placeholder="HTML Code"

></textarea>

</div>

Copy to Clipboard

</button>

</div>

</body>

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>

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

Get Started

Screenshot

Leave a Reply Cancel reply

Get Started

Screenshot

Related posts:

You Might Also Like

Build a HTML5 Filterable Search List in Browser Using Vanilla Javascript Full Project For Beginners

JavaScript typeof Operator Program to Check If a Variable is of Function Type at Run Time Full Project For Beginners

Node.js Clipboard.js Example to Copy Text to Clipboard From Textarea Widget in Browser Using Javascript Full Project For Beginners

Leave a Reply Cancel reply