let fontSize = 3; function start(){ swal("Welcome to Build Your Own Page! What is your name?", { content: "input", }) .then((value) => { document.getElementById("body").innerHTML += "

Welcome " + value + "

"; nextFun(); }); } function nextFun(){ swal("Let's pick a theme! Would would you like blue, green, red or purple?", { buttons: { red: { text: "Red", value: "#DC143C", }, blue: { text: "Blue", value: "#87CEEB", }, green: { text: "Green", value: "#32CD32", }, Purple: { text: "Purple", value: "#9932CC", } } }) .then((value) => { switch (value) { case "#DC143C": document.getElementById("body").style = "background-color: " + value+";"; pickTitle(); break; case "#87CEEB": document.getElementById("body").style = "background-color: " + value+";"; pickTitle(); break; case "#32CD32": document.getElementById("body").style = "background-color: " + value+";"; pickTitle(); break; case "#9932CC": document.getElementById("body").style = "background-color: " + value+";"; pickTitle(); break; default: swal("No Theme Selected"); setTimeout(pickTitle, 1500); } }); } function pickTitle(){ swal("Nice look! Now let's title your document. What's the title?", { content: "input", }) .then((value) => { if(value){ document.getElementById("body").innerHTML += "

"+value+"

"; addParagraph1(); }else{ swal("No Title Made"); setTimeout(addParagraph1, 1500); } }); } function addParagraph1(){ swal("Ok, now lets add a paragraph. You can write whatever you want of course, but as a suggestion you could tell us something about yourself", { content: { element: "input", attributes: { type: "textbox", }, }, }) .then((value) => { if(value){ document.getElementById("body").innerHTML += "

"+value+"

"; addParagraph2(); }else{ swal("No Paragraph 1 Made"); } }); } function addParagraph2(){ swal("Let's make another paragraph to fill things out", { content: { element: "input", attributes: { type: "textbox", }, }, }) .then((value) => { if(value){ document.getElementById("body").innerHTML += "

"+value+"

"; }else{ swal("No Paragraph 1 Made"); } }); } function fontResizer(e){ if(e.innerHTML === "+"){ if(fontSize < 6){ fontSize++; } }else{ if(fontSize > 1){ fontSize--; } } switch(fontSize) { case 1: document.getElementById("body").style.fontSize = "x-small"; break; case 2: document.getElementById("body").style.fontSize = "small"; break; case 3: document.getElementById("body").style.fontSize = "medium"; break; case 4: document.getElementById("body").style.fontSize = "large"; break; case 5: document.getElementById("body").style.fontSize = "x-large"; break; case 6: document.getElementById("body").style.fontSize = "xx-large"; break; default: } } function changeTheme(e){ let value = e.innerHTML; switch (e.innerHTML) { case "Red": document.getElementById("body").style = "background-color: #DC143C;"; break; case "Blue": document.getElementById("body").style = "background-color: #87CEEB;"; break; case "Green": document.getElementById("body").style = "background-color: #32CD32;"; break; case "Purple": document.getElementById("body").style = "background-color: #9932CC;"; break; default: swal("No Theme Selected"); } } function addProfileImage(){ swal("Enter the URL for your profile image", { content: "input", }) .then((value) => { document.getElementById("profilePic").src = value; }); }

Build Your Own Custom Page