This is a form generator I created so users can input a URL, description and link. The output will eventually be a JavaScript news slider. The HTML the form generated is irrelevant for now but I'd like to see how I can improve the JavaScript code handing the processing.
This is my first version/draft.
<style>
body{
background-color:green;
}
.hideElement{
display:none;
}
.container{
display: inline-block;
margin:25px;
border: 2px solid white;
padding:10px;
}
p.slidenum{
text-align: center;
font-size: 22px;
font-weight: bolder;
}
p{
font-size: 20px;
}
input[type="text"]{
background-color:white;
color:black;
font-size:16px;
padding:10px;
}
input[type="button"]{
background-color:#A17F3F;
color:white;
font-size:16px;
border:2px solid;
border-radius:5px;
padding:10px;
}
</style>
<div id="step1" class=" ">
<h1>How many slides do you want to generate?</h1>
<input type="text" id="numOfSlides" name="numOfSlides">
<input type="button" value="Continue" onClick="generateForm()">
</div>
<div id="step2" class="hideElement">
<input type="button" id="genCodeButton" value="Generate Code" onClick="generateCode(); hideForm()">
<input type="button" value="Go Back" onClick="hideStep1(); clearForm(); toggleStep2(); toggleCodeOutput(); showGenCodeButton()">
</div>
<!--empty div, will be populated once user enters num of slides -->
<div id="sliderFormGenerated" class=" "> </div>
<br>
<textarea id="codeOutput" class="hideElement" rows="30" cols="70"></textarea>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
function generateForm(){
//get num of slides required by user, limit to 8
var numOfSlides = document.getElementById('numOfSlides').value;
//make sure num of slides is a valid integer 1-8
if(isNaN(numOfSlides)){
alert("Well that doesn't make much sense. Please enter a positive integer 1-8");
//document.getElementById('sliderFormGenerated').innerHTML="<p>Please enter a positive integer 1-8.</p>";
}
else if (numOfSlides >= 9) {
alert("The limit is 8 slides, please enter 8 or less.");
//document.getElementById('sliderFormGenerated').innerHTML="<p>Please enter a positive integer 1-8.</p>";
}
else if(numOfSlides < 1){
alert("Please enter a positive integer 1-8");
//document.getElementById('sliderFormGenerated').innerHTML="<p>Please enter a positive integer 1-8.</p>";
}
else {
//document.getElementById('sliderFormGenerated').innerHTML="<p>Great! For simplicity, let's make one at a time</p>";
//document.getElementById('sliderFormGenerated').innerHTML=sliderFormNumber;
//for loop to add unique id to each generated element
for(var i=0; i < numOfSlides; i++){
//declare form to be inserted by fucntion call
var sliderForm = " <p>\"Read More\" URL: </p><input type=\'text\' id=\'link\'>";
$("#sliderFormGenerated").append("<div class=\"container\"><p class=\"slidenum\">Slide " +(i+1) + "</p><p>Image URL: </p> <input type=\'text\' id=\'imgsrc" + i + "\'" + ">" + i + "<p>Description: </p><input type=\'text\' id=\'description" + i + "\'>" + i +"<p>\"Read More\" URL: </p><input type=\'text\' id=\'link" + i +"\'>" +i + "</div>");
$('#sliderFormGenerated').removeClass("hideElement");
}
toggleStep2();
hideStep1();
}
}
function hideStep1(){
$('#step1').toggleClass("hideElement");
}
function toggleStep2(){
$('#step2').toggleClass("hideElement");
}
function showGenCodeButton(){
$('#genCodeButton').removeClass("hideElement");
}
function hideForm(){
$('#sliderFormGenerated').addClass("hideElement");
}
function toggleCodeOutput(){
$('#codeOutput').addClass("hideElement");
}
function clearForm(){
document.getElementById("sliderFormGenerated").innerHTML=" ";
}
function generateCode(){
$('#codeOutput').toggleClass("hideElement");
$('#genCodeButton').addClass("hideElement");
//TODO: this is the same as numOfSlides variable declared above
var slides = document.getElementById('numOfSlides').value;
var inputArray = [];
for (i = 0; i < slides; i++){
var temp = document.getElementById('imgsrc' + i).value;
var temp1 = document.getElementById('description' + i).value;
var temp2 = document.getElementById('link' + i).value;
inputArray.push("<img src=\'" + temp + "\'>" + "<p>" + temp1 + "</p>" + "<a href=\'"+temp2+"\'>Read More</a>");
}
document.getElementById('codeOutput').innerHTML=inputArray.join('');
}
</script>
</body>