JavaScript DOM Implementation
0
$begingroup$
I'm supposed to create a website that adds multiple forms to the page, is responsive and checks if the inputs are valid (validation is not important, just needs to show some attempt at regex). Below is what I've written so far. What I'm looking for is any advice on making it more efficient and compact. Any and all help is appreciated and considered. Thanks in advance!
index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>index.html</title>
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body onload="execute()" id="body">
<h3>Content Below:</h3>
<div id="buffer">
<div id="content">
<!-- Content will go here -->
</div>
</div>
<div id="info">
<!-- Info will go here -->
</div>
</body>
</html>
script.js
function ContentDisplayer() {
this.count = 0;
this.show = function(id) {
var tag = document.getElementById(id);
tag.style.display = 'block';
}
this.showText = function(id, content) {
var tag = document.getElementById(id);
tag.innerHTML = content;
}
this.constructForm = function(containing_id, question) {
//Create div containing the form
var div_tag = document.createElement('div');
div_tag.id = 'div_' + this.count;
document.getElementById('body').appendChild(div_tag);
//Create the form tag
var form_tag = document.createElement('form');
form_tag.id = 'form_' + this.count;
document.getElementById(div_tag.id).appendChild(form_tag);
//Create the fieldset tag
var fieldset_tag = document.createElement('fieldset');
fieldset_tag.id = 'fieldset_' + this.count;
document.getElementById(form_tag.id).appendChild(fieldset_tag);
//Create question label
var label_tag = document.createElement('label');
var label_text = document.createTextNode(question);
label_tag.appendChild(label_text);
label_tag.id = 'label_' + this.count;
document.getElementById(fieldset_tag.id).appendChild(label_tag);
//insert line break
var break_tag = document.createElement('br');
document.getElementById(fieldset_tag.id).appendChild(break_tag);
//Create answer label
var input_tag = document.createElement('input');
input_tag.id = 'input_' + this.count;
input_tag.type = 'text';
document.getElementById(fieldset_tag.id).appendChild(input_tag);
//insert line break
var break_tag = document.createElement('br');
document.getElementById(fieldset_tag.id).appendChild(break_tag);
//Create button
var button_tag = document.createElement('button');
var button_text = document.createTextNode('Submit');
button_tag.appendChild(button_text);
button_tag.type = 'button';
button_tag.id = 'button_' + this.count;
button_tag.onclick = function() {
var x = document.getElementById(input_tag.id);
if(input_tag.id == 'input_0') {
if(/^[a-zA-Z]+$/.test(x.value)) {
x.style.backgroundColor = "green";
x.style.borderColor = "green";
}
}
if(input_tag.id == 'input_1') {
if((/^[0-9]+$/.test(x.value)) && x.value > 0 && x.value <= 100) {
x.style.backgroundColor = "green";
x.style.borderColor = "green";
}
}
if(input_tag.id == 'input_2') {
if(/^w+@[a-zA-Z_]+?.[a-zA-Z]{2,3}$/.test(x.value)) {
x.style.backgroundColor = "green";
x.style.borderColor = "green";
}
}
if(input_tag.id == 'input_3') {
if(/d{1,5}sw{1,10}sw{1,10}/.test(x.value)) {
x.style.backgroundColor = "green";
x.style.borderColor = "green";
}
}
if(input_tag.id == 'input_4') {
if(/^d{3}-d{3}-d{4}$/.test(x.value)) {
x.style.backgroundColor = "green";
x.style.borderColor = "green";
}
}
}
document.getElementById(fieldset_tag.id).appendChild(button_tag);
this.count += 1;
}
}
var c;
var questions = [
'Enter your first name',
'Enter your age',
'Enter your email',
'Enter your address',
'Enter your phone number (must use dashes): ###-###-####'
];
var question_ids = [
'name_content',
'age_content',
'email_content',
'address_content',
'phone_content'
];
function execute() {
c = new ContentDisplayer();
c.show('buffer');
c.showText('content', '<h1>Hello!</h1>');
c.showText('info', 'If the box turns green, the information is valid!');
//create loop to add forms to page
for (var i = 0; i < questions.length; i++) {
c.constructForm(question_ids[i], questions[i]);
}
}
style.css
body {
font-family: "Times New Roman", Times, serif;
background-color: pink;
}
.buffer {
display: none;
}
input[type=text] {
border: 2px solid red;
border-radius: 4px;
background-color: #f44242;
margin: 1px;
}
input[type=text]:focus {
border: 2px solid blue;
border-radius: 4px;
background-color: #41dcf4;
}
button {
background-color: green;
border: none;
border-radius: 6px;
color: white;
text-align: center;
font-size: 16px;
}
javascript homework dom
asked 3 mins ago
David WhiteDavid White
261313
$endgroup$
add a comment |
0
$begingroup$
I'm supposed to create a website that adds multiple forms to the page, is responsive and checks if the inputs are valid (validation is not important, just needs to show some attempt at regex). Below is what I've written so far. What I'm looking for is any advice on making it more efficient and compact. Any and all help is appreciated and considered. Thanks in advance!
index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>index.html</title>
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body onload="execute()" id="body">
<h3>Content Below:</h3>
<div id="buffer">
<div id="content">
<!-- Content will go here -->
</div>
</div>
<div id="info">
<!-- Info will go here -->
</div>
</body>
</html>
script.js
function ContentDisplayer() {
this.count = 0;
this.show = function(id) {
var tag = document.getElementById(id);
tag.style.display = 'block';
}
this.showText = function(id, content) {
var tag = document.getElementById(id);
tag.innerHTML = content;
}
this.constructForm = function(containing_id, question) {
//Create div containing the form
var div_tag = document.createElement('div');
div_tag.id = 'div_' + this.count;
document.getElementById('body').appendChild(div_tag);
//Create the form tag
var form_tag = document.createElement('form');
form_tag.id = 'form_' + this.count;
document.getElementById(div_tag.id).appendChild(form_tag);
//Create the fieldset tag
var fieldset_tag = document.createElement('fieldset');
fieldset_tag.id = 'fieldset_' + this.count;
document.getElementById(form_tag.id).appendChild(fieldset_tag);
//Create question label
var label_tag = document.createElement('label');
var label_text = document.createTextNode(question);
label_tag.appendChild(label_text);
label_tag.id = 'label_' + this.count;
document.getElementById(fieldset_tag.id).appendChild(label_tag);
//insert line break
var break_tag = document.createElement('br');
document.getElementById(fieldset_tag.id).appendChild(break_tag);
//Create answer label
var input_tag = document.createElement('input');
input_tag.id = 'input_' + this.count;
input_tag.type = 'text';
document.getElementById(fieldset_tag.id).appendChild(input_tag);
//insert line break
var break_tag = document.createElement('br');
document.getElementById(fieldset_tag.id).appendChild(break_tag);
//Create button
var button_tag = document.createElement('button');
var button_text = document.createTextNode('Submit');
button_tag.appendChild(button_text);
button_tag.type = 'button';
button_tag.id = 'button_' + this.count;
button_tag.onclick = function() {
var x = document.getElementById(input_tag.id);
if(input_tag.id == 'input_0') {
if(/^[a-zA-Z]+$/.test(x.value)) {
x.style.backgroundColor = "green";
x.style.borderColor = "green";
}
}
if(input_tag.id == 'input_1') {
if((/^[0-9]+$/.test(x.value)) && x.value > 0 && x.value <= 100) {
x.style.backgroundColor = "green";
x.style.borderColor = "green";
}
}
if(input_tag.id == 'input_2') {
if(/^w+@[a-zA-Z_]+?.[a-zA-Z]{2,3}$/.test(x.value)) {
x.style.backgroundColor = "green";
x.style.borderColor = "green";
}
}
if(input_tag.id == 'input_3') {
if(/d{1,5}sw{1,10}sw{1,10}/.test(x.value)) {
x.style.backgroundColor = "green";
x.style.borderColor = "green";
}
}
if(input_tag.id == 'input_4') {
if(/^d{3}-d{3}-d{4}$/.test(x.value)) {
x.style.backgroundColor = "green";
x.style.borderColor = "green";
}
}
}
document.getElementById(fieldset_tag.id).appendChild(button_tag);
this.count += 1;
}
}
var c;
var questions = [
'Enter your first name',
'Enter your age',
'Enter your email',
'Enter your address',
'Enter your phone number (must use dashes): ###-###-####'
];
var question_ids = [
'name_content',
'age_content',
'email_content',
'address_content',
'phone_content'
];
function execute() {
c = new ContentDisplayer();
c.show('buffer');
c.showText('content', '<h1>Hello!</h1>');
c.showText('info', 'If the box turns green, the information is valid!');
//create loop to add forms to page
for (var i = 0; i < questions.length; i++) {
c.constructForm(question_ids[i], questions[i]);
}
}
style.css
body {
font-family: "Times New Roman", Times, serif;
background-color: pink;
}
.buffer {
display: none;
}
input[type=text] {
border: 2px solid red;
border-radius: 4px;
background-color: #f44242;
margin: 1px;
}
input[type=text]:focus {
border: 2px solid blue;
border-radius: 4px;
background-color: #41dcf4;
}
button {
background-color: green;
border: none;
border-radius: 6px;
color: white;
text-align: center;
font-size: 16px;
}
javascript homework dom
asked 3 mins ago
David WhiteDavid White
261313
$endgroup$
add a comment |
0
0
0
$begingroup$
I'm supposed to create a website that adds multiple forms to the page, is responsive and checks if the inputs are valid (validation is not important, just needs to show some attempt at regex). Below is what I've written so far. What I'm looking for is any advice on making it more efficient and compact. Any and all help is appreciated and considered. Thanks in advance!
index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>index.html</title>
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body onload="execute()" id="body">
<h3>Content Below:</h3>
<div id="buffer">
<div id="content">
<!-- Content will go here -->
</div>
</div>
<div id="info">
<!-- Info will go here -->
</div>
</body>
</html>
script.js
function ContentDisplayer() {
this.count = 0;
this.show = function(id) {
var tag = document.getElementById(id);
tag.style.display = 'block';
}
this.showText = function(id, content) {
var tag = document.getElementById(id);
tag.innerHTML = content;
}
this.constructForm = function(containing_id, question) {
//Create div containing the form
var div_tag = document.createElement('div');
div_tag.id = 'div_' + this.count;
document.getElementById('body').appendChild(div_tag);
//Create the form tag
var form_tag = document.createElement('form');
form_tag.id = 'form_' + this.count;
document.getElementById(div_tag.id).appendChild(form_tag);
//Create the fieldset tag
var fieldset_tag = document.createElement('fieldset');
fieldset_tag.id = 'fieldset_' + this.count;
document.getElementById(form_tag.id).appendChild(fieldset_tag);
//Create question label
var label_tag = document.createElement('label');
var label_text = document.createTextNode(question);
label_tag.appendChild(label_text);
label_tag.id = 'label_' + this.count;
document.getElementById(fieldset_tag.id).appendChild(label_tag);
//insert line break
var break_tag = document.createElement('br');
document.getElementById(fieldset_tag.id).appendChild(break_tag);
//Create answer label
var input_tag = document.createElement('input');
input_tag.id = 'input_' + this.count;
input_tag.type = 'text';
document.getElementById(fieldset_tag.id).appendChild(input_tag);
//insert line break
var break_tag = document.createElement('br');
document.getElementById(fieldset_tag.id).appendChild(break_tag);
//Create button
var button_tag = document.createElement('button');
var button_text = document.createTextNode('Submit');
button_tag.appendChild(button_text);
button_tag.type = 'button';
button_tag.id = 'button_' + this.count;
button_tag.onclick = function() {
var x = document.getElementById(input_tag.id);
if(input_tag.id == 'input_0') {
if(/^[a-zA-Z]+$/.test(x.value)) {
x.style.backgroundColor = "green";
x.style.borderColor = "green";
}
}
if(input_tag.id == 'input_1') {
if((/^[0-9]+$/.test(x.value)) && x.value > 0 && x.value <= 100) {
x.style.backgroundColor = "green";
x.style.borderColor = "green";
}
}
if(input_tag.id == 'input_2') {
if(/^w+@[a-zA-Z_]+?.[a-zA-Z]{2,3}$/.test(x.value)) {
x.style.backgroundColor = "green";
x.style.borderColor = "green";
}
}
if(input_tag.id == 'input_3') {
if(/d{1,5}sw{1,10}sw{1,10}/.test(x.value)) {
x.style.backgroundColor = "green";
x.style.borderColor = "green";
}
}
if(input_tag.id == 'input_4') {
if(/^d{3}-d{3}-d{4}$/.test(x.value)) {
x.style.backgroundColor = "green";
x.style.borderColor = "green";
}
}
}
document.getElementById(fieldset_tag.id).appendChild(button_tag);
this.count += 1;
}
}
var c;
var questions = [
'Enter your first name',
'Enter your age',
'Enter your email',
'Enter your address',
'Enter your phone number (must use dashes): ###-###-####'
];
var question_ids = [
'name_content',
'age_content',
'email_content',
'address_content',
'phone_content'
];
function execute() {
c = new ContentDisplayer();
c.show('buffer');
c.showText('content', '<h1>Hello!</h1>');
c.showText('info', 'If the box turns green, the information is valid!');
//create loop to add forms to page
for (var i = 0; i < questions.length; i++) {
c.constructForm(question_ids[i], questions[i]);
}
}
style.css
body {
font-family: "Times New Roman", Times, serif;
background-color: pink;
}
.buffer {
display: none;
}
input[type=text] {
border: 2px solid red;
border-radius: 4px;
background-color: #f44242;
margin: 1px;
}
input[type=text]:focus {
border: 2px solid blue;
border-radius: 4px;
background-color: #41dcf4;
}
button {
background-color: green;
border: none;
border-radius: 6px;
color: white;
text-align: center;
font-size: 16px;
}
javascript homework dom
asked 3 mins ago
David WhiteDavid White
261313
$endgroup$
I'm supposed to create a website that adds multiple forms to the page, is responsive and checks if the inputs are valid (validation is not important, just needs to show some attempt at regex). Below is what I've written so far. What I'm looking for is any advice on making it more efficient and compact. Any and all help is appreciated and considered. Thanks in advance!
index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>index.html</title>
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body onload="execute()" id="body">
<h3>Content Below:</h3>
<div id="buffer">
<div id="content">
<!-- Content will go here -->
</div>
</div>
<div id="info">
<!-- Info will go here -->
</div>
</body>
</html>
script.js
function ContentDisplayer() {
this.count = 0;
this.show = function(id) {
var tag = document.getElementById(id);
tag.style.display = 'block';
}
this.showText = function(id, content) {
var tag = document.getElementById(id);
tag.innerHTML = content;
}
this.constructForm = function(containing_id, question) {
//Create div containing the form
var div_tag = document.createElement('div');
div_tag.id = 'div_' + this.count;
document.getElementById('body').appendChild(div_tag);
//Create the form tag
var form_tag = document.createElement('form');
form_tag.id = 'form_' + this.count;
document.getElementById(div_tag.id).appendChild(form_tag);
//Create the fieldset tag
var fieldset_tag = document.createElement('fieldset');
fieldset_tag.id = 'fieldset_' + this.count;
document.getElementById(form_tag.id).appendChild(fieldset_tag);
//Create question label
var label_tag = document.createElement('label');
var label_text = document.createTextNode(question);
label_tag.appendChild(label_text);
label_tag.id = 'label_' + this.count;
document.getElementById(fieldset_tag.id).appendChild(label_tag);
//insert line break
var break_tag = document.createElement('br');
document.getElementById(fieldset_tag.id).appendChild(break_tag);
//Create answer label
var input_tag = document.createElement('input');
input_tag.id = 'input_' + this.count;
input_tag.type = 'text';
document.getElementById(fieldset_tag.id).appendChild(input_tag);
//insert line break
var break_tag = document.createElement('br');
document.getElementById(fieldset_tag.id).appendChild(break_tag);
//Create button
var button_tag = document.createElement('button');
var button_text = document.createTextNode('Submit');
button_tag.appendChild(button_text);
button_tag.type = 'button';
button_tag.id = 'button_' + this.count;
button_tag.onclick = function() {
var x = document.getElementById(input_tag.id);
if(input_tag.id == 'input_0') {
if(/^[a-zA-Z]+$/.test(x.value)) {
x.style.backgroundColor = "green";
x.style.borderColor = "green";
}
}
if(input_tag.id == 'input_1') {
if((/^[0-9]+$/.test(x.value)) && x.value > 0 && x.value <= 100) {
x.style.backgroundColor = "green";
x.style.borderColor = "green";
}
}
if(input_tag.id == 'input_2') {
if(/^w+@[a-zA-Z_]+?.[a-zA-Z]{2,3}$/.test(x.value)) {
x.style.backgroundColor = "green";
x.style.borderColor = "green";
}
}
if(input_tag.id == 'input_3') {
if(/d{1,5}sw{1,10}sw{1,10}/.test(x.value)) {
x.style.backgroundColor = "green";
x.style.borderColor = "green";
}
}
if(input_tag.id == 'input_4') {
if(/^d{3}-d{3}-d{4}$/.test(x.value)) {
x.style.backgroundColor = "green";
x.style.borderColor = "green";
}
}
}
document.getElementById(fieldset_tag.id).appendChild(button_tag);
this.count += 1;
}
}
var c;
var questions = [
'Enter your first name',
'Enter your age',
'Enter your email',
'Enter your address',
'Enter your phone number (must use dashes): ###-###-####'
];
var question_ids = [
'name_content',
'age_content',
'email_content',
'address_content',
'phone_content'
];
function execute() {
c = new ContentDisplayer();
c.show('buffer');
c.showText('content', '<h1>Hello!</h1>');
c.showText('info', 'If the box turns green, the information is valid!');
//create loop to add forms to page
for (var i = 0; i < questions.length; i++) {
c.constructForm(question_ids[i], questions[i]);
}
}
style.css
body {
font-family: "Times New Roman", Times, serif;
background-color: pink;
}
.buffer {
display: none;
}
input[type=text] {
border: 2px solid red;
border-radius: 4px;
background-color: #f44242;
margin: 1px;
}
input[type=text]:focus {
border: 2px solid blue;
border-radius: 4px;
background-color: #41dcf4;
}
button {
background-color: green;
border: none;
border-radius: 6px;
color: white;
text-align: center;
font-size: 16px;
}
javascript homework dom
javascript homework dom
asked 3 mins ago
David WhiteDavid White
261313
asked 3 mins ago
David WhiteDavid White
261313
asked 3 mins ago
David WhiteDavid White
261313
asked 3 mins ago
David WhiteDavid White
261313
asked 3 mins ago
David WhiteDavid White
261313
261313
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
return StackExchange.using("mathjaxEditing", function () {
StackExchange.MarkdownEditor.creationCallbacks.add(function (editor, postfix) {
StackExchange.mathjaxEditing.prepareWmdForMathJax(editor, postfix, [["\$", "\$"]]);
});
});
}, "mathjax-editing");
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "196"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f213284%2fjavascript-dom-implementation%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Code Review Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
Use MathJax to format equations. MathJax reference.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f213284%2fjavascript-dom-implementation%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
