Skip to content

Dom exercise #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
EstefaSora125 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Dom exercise #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 68 additions & 0 deletions 2-dom-manipulation/form.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML BASIC</title>
<meta name="robots" content ="index,noodp">
<meta name="description" content="This web page have the form layout">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="og:title" property="og:title" content="Principal form layout">
<meta name="twitter:card" content="summary">
<link rel="alternate" hreflang="es" href="https://pushdev.co/">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>PUSH DEV</h1>
</header>
<main>
<article>
<section>
<h4>FORM</h4>
<form id="contact_form">
<fieldset>
<legend>Please enter your contact details</legend>
<label for="user_name">Your name:
<input type="text" id="user_name" name="Name" aria-required="true">
<abbr title="required">*</abbr>
</label>
<label for="email_this">E-mail address
<input id="email_this" name="Email" aria-required="true" >
Comment on lines +29 to +30
Copy link
Collaborator

@pushdev-code pushdev-code Jun 9, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<label for="email_this">E-mail address
<input id="email_this" name="Email" aria-required="true" >
<label for="email">E-mail address
<input id="email" name="Email" aria-required="true" >

<abbr title="required">*</abbr>
</label>
<label for="user_phone_number">Phone number (+57)
<input id="user_phone_number" name="Phone Number">
</label>
</fieldset>
<fieldset>
<legend>Please select the courses thar are you interested in
<abbr title="required">*</abbr>
</legend>
<div id="course" >
Copy link
Collaborator

@pushdev-code pushdev-code Jun 9, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<div id="course" >
<div id="course">

<input type="checkbox" id="taste_1" name="taste_web" value=" Web Developer ">
<label for="taste_1">Web Developer</label>
<input type="checkbox" id="taste_2" name="taste_react" value=" React Developer ">
<label for="taste_2">React Developer</label>
<input type="checkbox" id="taste_3" name="taset_fullstack" value=" Fullstack Developer">
<label for="taste_3">Fullstack Developer</label>
<input type="checkbox" id="taste_4" name="taste_other" value=" Other">
<label for="taste_4">Other</label>
</div>
</fieldset>
<label for="text-box">Please enter a message</label>
<div>
<textarea name="message" id="text-box" cols="40" rows="10"></textarea>
</div>
Comment on lines +53 to +55
Copy link
Collaborator

@pushdev-code pushdev-code Jun 9, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<div>
<textarea name="message" id="text-box" cols="40" rows="10"></textarea>
</div>
<textarea name="message" id="text-box" cols="40" rows="10"></textarea>

<button>Send mesagge</button>
Copy link
Collaborator

@pushdev-code pushdev-code Jun 9, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<button>Send mesagge</button>
<button>Send message</button>

<button type="reset">Reset form</button>
<li id="paragraph"></li>
Copy link
Collaborator

@pushdev-code pushdev-code Jun 9, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No list here, use <p>

Suggested change
<li id="paragraph"></li>
<p id="paragraph"></p>

</form>
</section>
</article>
</main>
<footer>
<p>This example was created <time datetime="2020-04-12 11:21">at 11:21 AM</time></p>
Copy link
Collaborator

@pushdev-code pushdev-code Jun 9, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<p>This example was created <time datetime="2020-04-12 11:21">at 11:21 AM</time></p>
<p>This example was created at<time datetime="2020-04-12 11:21">11:21 AM</time></p>

</footer>
<script src="form.js"></script>
</body>
</html>
78 changes: 78 additions & 0 deletions 2-dom-manipulation/form.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
'use strict'

const VAL_EMAIL = /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;

function validateForm(event){
event.preventDefault();

let name = document.querySelector('#contact_form').querySelector('#user_name'),
email = document.querySelector('#contact_form').querySelector('#email_this'),
number = document.querySelector('#contact_form').querySelector('#user_phone_number'),
textBox = document.querySelector('#contact_form').querySelector('#text-box'),
box = document.querySelector('#contact_form').querySelectorAll('input[type="checkbox"]');
Comment on lines +8 to +12
Copy link
Collaborator

@pushdev-code pushdev-code Jun 9, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you can save the form reference so you get the elements faster. It is also better to use const since these values will never change. Grouping multiple variable definitions is not easy to read, so it's better if you keep them separated.

Suggested change
let name = document.querySelector('#contact_form').querySelector('#user_name'),
email = document.querySelector('#contact_form').querySelector('#email_this'),
number = document.querySelector('#contact_form').querySelector('#user_phone_number'),
textBox = document.querySelector('#contact_form').querySelector('#text-box'),
box = document.querySelector('#contact_form').querySelectorAll('input[type="checkbox"]');
const form = document.querySelector('#contact_form');
const name = form.querySelector('#user_name');
const email = form.querySelector('#email_this');
const number = form.querySelector('#user_phone_number');
const textBox = form.querySelector('#text-box');
const box = form.querySelectorAll('input[type="checkbox"]');


validateName(name);
validarEmail(email);
validatePhone(number);
validateChecBox(box);
Copy link
Collaborator

@pushdev-code pushdev-code Jun 9, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
validateChecBox(box);
validateCheckBox(box);


let valu = [name.value, email.value, number.value, validateChecBox(box), textBox.value];
let pu = [" Name: ", "Email: ", "Phone number: ", "Courses: ", "Message: "];

for (let index = 0; index < valu.length; index++) {
for (let ind = 0; ind < pu.length; ind++) {
showInfotmation(pu, valu);
}
}
};
Comment on lines +19 to +27
Copy link
Collaborator

@pushdev-code pushdev-code Jun 9, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you don't need to do this, in Javascript you can use objects as dictionaries:

let formValues = {
  name:  'name',
   email:  'email'
};
// and then you can access these key/pair values

for (const property in formValues) {
  console.log(`${property}: ${formValues[property]}`);
}

In this way you don't need to do a double for loop which is performance heavy.


function validateName(name){
if (name.value =='') {
name.classList.add('form_error');
alert('You have to write your name');
}else{
name.classList.remove('form_error');
}
};

function validarEmail(Email) {
Copy link
Collaborator

@pushdev-code pushdev-code Jun 9, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

be consistent and always use English

Suggested change
function validarEmail(Email) {
function validateEmail(Email) {

if (Email.value == ''){
Email.classList.add('form_error');
alert('Write an email');
} else if(!VAL_EMAIL.test(Email.value)) {
alert('The email is not correct');
} else{
Email.classList.remove('form_error');
}
};

function validatePhone(number){
if (isNaN(number.value) == true || number.value =='') {
number.classList.add('form_error');
alert('You must type numbers');
} else {
number.classList.remove('form_error');
}
};

function validateChecBox(courses) {
let select = null;
let count = [];
for (let index = 0; index < courses.length; index++) {
if (courses[index].checked ==true) {
select = courses[index].value;
let show = count.push(select);
}
}
if(select == null){
alert ('You have to select a course');
}
return count;
};
Comment on lines +59 to +71
Copy link
Collaborator

@pushdev-code pushdev-code Jun 9, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

for some reason this validation is being executed twice and then a double alert is being displayed to the user, can you double check.


function showInfotmation(label, text=[]){
Copy link
Collaborator

@pushdev-code pushdev-code Jun 9, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
function showInfotmation(label, text=[]){
function showInformation(label, text=[]){

document.getElementById("paragraph").innerHTML = label + ' <br> ' + text;
Copy link
Collaborator

@pushdev-code pushdev-code Jun 9, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Be consistent when using single/double quotes

Suggested change
document.getElementById("paragraph").innerHTML = label + ' <br> ' + text;
document.getElementById('paragraph').innerHTML = label + ' <br> ' + text;

Copy link
Collaborator

@pushdev-code pushdev-code Jun 9, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use the id as a global variable, but be careful because other elements might have the same ID.

Suggested change
document.getElementById("paragraph").innerHTML = label + ' <br> ' + text;
paragraph.innerHTML = label + ' <br> ' + text;

};

const form = document.querySelector('form');
form.addEventListener('submit', validateForm);
3 changes: 3 additions & 0 deletions 2-dom-manipulation/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.form_error {
border: 2px solid tomato;
}