I tried my hand at creating a simple website for personal use, where I could input and edit text in an organized manner. A key feature I wanted was the ability to add new text fields dynamically by clicking a button, but it turned out to be more challenging than anticipated.
Just to clarify, I am not a professional in any way. I am a complete beginner and have likely made numerous mistakes along the way.
Any assistance would be greatly appreciated! Here is the code snippet:
function EDITTHIS() {
document.getElementById('DESCRIPTION').contentEditable = 'true';
document.getElementById('DESCRIPTION').style = 'background:yellow';
}
function ENDTHIS() {
document.getElementById('DESCRIPTION').contentEditable = 'false';
document.getElementById('DESCRIPTION').style = 'background:palegreen';
}
function AMPLIFYER() {
function CREATION(element, element_id, element_text) {
var element_a = document.createElement(element);
element_a.setAttribute("id", element_id);
var element_text = document.createTextNode(elemet_name);
element_a.appendChild(element_text);
document.body.appendChild(element_a);
}
CREATION("DIV", "DIVTHAT", "Write Here.");
CREATION("BUTTON", "EDITTHAT", "EDIT");
CREATION("BUTTON", "DONETHAT", "DONE");
}
function CREATION(element, element_id, element_text) {
var element_a = document.createElement(element);
element_a.setAttribute("id", element_id);
var element_text = document.createTextNode(elemet_name);
element_a.appendChild(element_text);
document.body.appendChild(element_a);
}h1 {
background-color: green;
color: white;
font-size: 105px;
margin-top: 0px;
margin-bottom: 50px;
text-shadow: 0px 0px 5px #6de1ff;
vertical-align: middle;
line-height: 300px;
}
h2 {
background-color: none;
color: Black;
font-size: 45px;
margin-top: 50px;
margin-bottom: 0px;
text-shadow: 0px 0px 5px #6de1ff;
}
button {
background-color: palegreen;
border: solid green;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
div {
min-height: 30px;
width: 1140px;
padding: 50px 50px;
font-size: 26px;
}
body {
background-image: url("BG.png");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: right bottom;
}<html>
<head>
<title>Welcome to FELRYN</title>
</head>
<body>
<center>
<h1>FELRYN</h1>
</center>
<h2>Description of World:</h2>
<div id="DESCRIPTION" contentEditable="false" style="background:palegreen">Write the description here.</div>
<br />
<button id="WANNAEDIT?" onclick="EDITTHIS()"> Edit</button>
<button id="DONEEDIT?" onclick="ENDTHIS()"> Done</button>
<br />
<br />
<br />
<button id="MULTIPLY!" onclick="AMPLIFYER()">Create New Feild.</button>
<br />
<br />
<br />
</body>
</html>