Exercise Dom by Raul Valencia by DkSanjed · Pull Request #2 · DkSanjed/javascript-tutorial

DkSanjed · 2020-06-02T02:44:35Z

Exercise dom

juancho11gm · 2020-06-04T18:41:58Z

2-dom-manipulation/form.js

@@ -0,0 +1,65 @@
+let form = document.querySelector('form');


You can use classes. e.g: .contact-form to reuse code.

juancho11gm · 2020-06-04T18:46:43Z

2-dom-manipulation/form.js

+        nameCondition.classList.add('required');
+        return "";
+    } else {
+        nameCondition.classList.remove("required");


Use ' instead of " to keep the standard.

juancho11gm · 2020-06-04T18:48:59Z

2-dom-manipulation/form.js

+}
+
+function validEmail(){
+    if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(Email.value)) {


you can save the RegEx in a const. It can be at the top of the code.
const EMAIL_REGEX = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/

juancho11gm · 2020-06-04T18:49:45Z

2-dom-manipulation/form.js

+        console.log(`${Email.id}: You have entered an invalid email address`)
+        alert("You have entered an invalid email address!");  


you are mixing ' with ".

juancho11gm · 2020-06-04T18:50:37Z

2-dom-manipulation/form.js

+}
+
+function validNumber(){
+    if (/\d+$/.test(Phone.value)) {


you can save the RegEx in a const. It can be at the top of the code.
const PHONE_REGEX = /\d+$/

juancho11gm · 2020-06-04T18:51:27Z

2-dom-manipulation/form.js

+function structureIf(nameCondition){
+    if (nameCondition.value == '') {
+        console.log(`${nameCondition.id}: It's need value`);
+        nameCondition.classList.add('required');


You can save the class name in a const.
const REQUIRED_CLASS = 'required';

I would name it const ERROR_CLASS = 'error';.
Because I can enter a value, but with the wrong format. So it would be a format problem and not a required problem.

juancho11gm · 2020-06-04T18:52:22Z

2-dom-manipulation/form.js

+
+function validEmail(){
+    if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(Email.value)) {
+        Email.classList.remove("required");


Here you can use the const. REQUIRED_CLASS.

juancho11gm

Hi Raúl, please see the comments and send the changes.

juancho11gm · 2020-06-04T18:52:27Z

2-dom-manipulation/form.js

+        Email.classList.remove("required");
+        return Email.value;
+    } else {
+        Email.classList.add("required");


Here you can use the const. REQUIRED_CLASS.

juancho11gm · 2020-06-04T18:53:02Z

2-dom-manipulation/form.js

+}
+
+function validCheckbox2(array){
+    let check = "";


you are mixing ' with ".

juancho11gm · 2020-06-04T18:54:08Z

2-dom-manipulation/form.js

+
+function validCheckbox2(array){
+    let check = "";
+    if (array[0].checked == false && array[1].checked == false && array[2].checked == false && array[3].checked == false) {


You can find an easier way to validate it

Imagine that you have more checkboxes. Would you do it in the same way?

juancho11gm · 2020-06-04T18:55:38Z

2-dom-manipulation/form.js

+        checkbox_id.classList.remove("required");
+        for (let index = 0; index < array.length; index++) {
+            if (array[index].checked == true) {
+                check += array[index].value+ ". ";


if you want to concat strings use template literals. I think that t's better to return the array with the checked values.

juancho11gm · 2020-06-04T18:57:40Z

2-dom-manipulation/style.css

@@ -0,0 +1,3 @@
+.required{


Suggested change

.required{

.required {

juancho11gm · 2020-06-04T19:06:25Z

2-dom-manipulation/form.js

+function structureIf(nameCondition){
+    if (nameCondition.value == '') {
+        console.log(`${nameCondition.id}: It's need value`);
+        nameCondition.classList.add('required');


I would name it const ERROR_CLASS = 'error';.
Because I can enter a value, but with the wrong format. So it would be a format problem and not a required problem.

juancho11gm · 2020-06-04T19:13:29Z

2-dom-manipulation/forms.html

+        <p id="print_name">Name:</p>
+        <p id="print_email">Email:</p>
+        <p id="print_number">Number:</p>
+        <p id="print_checkbox">Checkbox:</p>


It's not wrong. If you want to create it from js file you can use document.createElement.

juancho11gm · 2020-06-04T19:14:09Z

2-dom-manipulation/form.js

+let form = document.querySelector('form');
+
+function structureIf(nameCondition){
+    if (nameCondition.value == '') {


Suggested change

if (nameCondition.value == '') {

if (nameCondition.value === '') {

juancho11gm · 2020-06-04T19:18:33Z

2-dom-manipulation/form.js

+
+function structureIf(nameCondition){
+    if (nameCondition.value == '') {
+        console.log(`${nameCondition.id}: It's need value`);


alert it too

juancho11gm · 2020-06-04T19:19:12Z

2-dom-manipulation/forms.html

+            <div>
+                <textarea name="text" id="textArea" cols="50" rows="10"></textarea>
+            </div>
+            <button id="Button_submit">Send message</button>


Suggested change

<button id="Button_submit">Send message</button>

<button id="submit-button">Send message</button>

juancho11gm · 2020-06-04T19:22:37Z

Tip: follow this convention.

Exercise Dom by Raul Valencia

51dbdee

DkSanjed requested review from fabianmarinog and pushdev-code June 2, 2020 02:44

juancho11gm reviewed Jun 4, 2020

View reviewed changes

juancho11gm requested changes Jun 4, 2020

View reviewed changes

		console.log(`${Email.id}: You have entered an invalid email address`)
		alert("You have entered an invalid email address!");

	if (nameCondition.value == '') {
	if (nameCondition.value === '') {

	<button id="Button_submit">Send message</button>
	<button id="submit-button">Send message</button>

Conversation

DkSanjed commented Jun 2, 2020

Uh oh!

Choose a reason for hiding this comment

Uh oh!

juancho11gm Jun 4, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

juancho11gm Jun 4, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

juancho11gm Jun 4, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

juancho11gm Jun 4, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

juancho11gm left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

juancho11gm Jun 4, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

juancho11gm commented Jun 4, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

juancho11gm Jun 4, 2020 •

edited

Loading

juancho11gm Jun 4, 2020 •

edited

Loading

juancho11gm Jun 4, 2020 •

edited

Loading

juancho11gm Jun 4, 2020 •

edited

Loading

juancho11gm Jun 4, 2020 •

edited

Loading