ehlzi/Ervin Elzie - Applied JS HW #1

## Ervin Elzie - Applied JS HW #1
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Convert me to ES6</title>
</head>

<body>

At least one piece of data has to come in from every input type.

<form id="myForm" action="" method="get">

    Name:<input type="text" id="test" name="fullname" placeholder="Enter Full Name"><br>

    Year in School:<br>

    First<input type="radio" name="year" value="First">

    Second<input type="radio" name="year" value="Second">

    Third<input type="radio" name="year" value="Third"><br>

    Sports that you like:<br>

    Baseball <input type="checkbox" name="hobbies" value="baseball">

    Basketball <input type="checkbox" name="hobbies" value="basketball">

    Football <input type="checkbox" name="hobbies" value="football">

    Hockey <input type="checkbox" name="hobbies" value="hockey"><br>

    Favorite animated comedy show<select name="show">
        <option value="">Choose Below</option>
        <option value="Family Guy">Family Guy</option>
        <option value="Simpsons">Simpsons</option>
        <option value="South Park">South Park</option>
    </select><br>

    Comments<br>

    <textarea cols="50" rows="6" name="comments" placeholder="Enter Comments"></textarea><br>

    <input type="submit" name="submit" value="enter me">

</form>
<script type="text/javascript">

    //your job is to convert the following to ES6. We should see improved variable declaration and arrow syntax on the function and any other improvements you can think of!

    //Use const instead of let for variables that won't be reassigned.
    const validateForm = (event) => {

        event.preventDefault(); //Prevent default form submission

        /*
        - Storing the reference to the form in a variable
        */
        const form = document.getElementById('myForm');

        //Converts the form elements to an array
        const formElements = Array.from(form.elements);

        const radioGroupsChecked = new Set();
        const checkboxGroupsChecked = new Set();

        /*
        Looping through the form elements
        For...of is easier to read than a traditional for loop
        */

        for (const element of formElements) {

            /*
            - Checking if the element is empty
            - If the element is empty, display an alert and return false
            - This is a more efficient way to check if an element is empty than using a for loop
            - If the element is empty, the function will return false and stop executing
            */

            if (element.type !== "submit" && element.value.trim() === "") {

                    alert(`Please select your ${element.name}`);
                    return false;

            }

            /*
            - Checking if the element is a radio button
            - If the element is a radio button, check if any of the radio buttons are checked
            - If no radio buttons are checked, display an alert and return false
            - This is a more efficient way to check if any radio buttons are checked than using a for loop
            - If no radio buttons are checked, the function will return false and stop executing
            - Using a Set to store the radio groups that have been checked
            - If a radio group has already been checked, skip the check
            */

            if (element.type === 'radio') {

                if (!radioGroupsChecked.has(element.name)) {

                    const radios = [...document.querySelectorAll(`[name="${element.name}"]`)];

                    if (!radios.some(el => el.checked)) {
                        alert(`Please select your ${element.name}`);
                        return false;
                    }

                    radioGroupsChecked.add(element.name);
                }
            }

            /*
            //Checking if the element is a checkbox
            //If the element is a checkbox, check if any of the checkboxes are checked
            //If no checkboxes are checked, display an alert and return false
            //This is a more efficient way to check if any checkboxes are checked than using a for loop
            //If no checkboxes are checked, the function will return false and stop executing
            //Using a Set to store the checkbox groups that have been checked
            //If a checkbox group has already been checked, skip the check
            */
            if (element.type === 'checkbox') {

                if (!checkboxGroupsChecked.has(element.name)) {

                    const checkboxes = [...document.querySelectorAll(`[name="${element.name}"]`)];

                    if (!checkboxes.some(el => el.checked)) {
                        alert(`Please select at least one ${element.name}`);
                        return false;
                    }

                    checkboxGroupsChecked.add(element.name);
                }
            }

        }

        alert("Form submitted successfully!");
        form.submit();

    }

    document.getElementById("myForm").addEventListener("submit", validateForm);

    /* Original Code for backup and reference
    function validateForm() {
        for (var i=0; i<document.forms[0].length; i++){
            if (document.forms[0][i].value === ''){
                alert('Please enter your ' + document.forms[0][i].name);
                return false;
            }

            var radioGroup = false;
            if (document.forms[0].elements[i].type == 'radio' ||  document.forms[0].elements[i].type == 'checkbox'){
                var msg = document.forms[0].elements[i].name;
                var numElmnts = document.getElementsByName(msg).length;
                var elem = document.getElementsByName(msg);

                for (var j = 0; j < numElmnts; j++) {
                    if (elem[j].checked == true) {
                        radioGroup = true;
                    }

                }

                if (radioGroup == false) {
                    alert('Please select your ' + document.forms[0][i].name);
                    return false;
                }
            }
        }
        */
</script>

</body>
</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
	<title>Convert me to ES6</title>
	</head>

	<body>

	At least one piece of data has to come in from every input type.

	<form id="myForm" action="" method="get">

	Name:<input type="text" id="test" name="fullname" placeholder="Enter Full Name"><br>

	Year in School:<br>

	First<input type="radio" name="year" value="First">

	Second<input type="radio" name="year" value="Second">

	Third<input type="radio" name="year" value="Third"><br>

	Sports that you like:<br>

	Baseball <input type="checkbox" name="hobbies" value="baseball">

	Basketball <input type="checkbox" name="hobbies" value="basketball">

	Football <input type="checkbox" name="hobbies" value="football">

	Hockey <input type="checkbox" name="hobbies" value="hockey"><br>

	Favorite animated comedy show<select name="show">
	<option value="">Choose Below</option>
	<option value="Family Guy">Family Guy</option>
	<option value="Simpsons">Simpsons</option>
	<option value="South Park">South Park</option>
	</select><br>

	Comments<br>

	<textarea cols="50" rows="6" name="comments" placeholder="Enter Comments"></textarea><br>

	<input type="submit" name="submit" value="enter me">

	</form>
	<script type="text/javascript">

	//your job is to convert the following to ES6. We should see improved variable declaration and arrow syntax on the function and any other improvements you can think of!

	//Use const instead of let for variables that won't be reassigned.
	const validateForm = (event) => {

	event.preventDefault(); //Prevent default form submission

	/*
	- Storing the reference to the form in a variable
	*/
	const form = document.getElementById('myForm');

	//Converts the form elements to an array
	const formElements = Array.from(form.elements);

	const radioGroupsChecked = new Set();
	const checkboxGroupsChecked = new Set();

	/*
	Looping through the form elements
	For...of is easier to read than a traditional for loop
	*/

	for (const element of formElements) {

	/*
	- Checking if the element is empty
	- If the element is empty, display an alert and return false
	- This is a more efficient way to check if an element is empty than using a for loop
	- If the element is empty, the function will return false and stop executing
	*/

	if (element.type !== "submit" && element.value.trim() === "") {

	alert(`Please select your ${element.name}`);
	return false;

	}

	/*
	- Checking if the element is a radio button
	- If the element is a radio button, check if any of the radio buttons are checked
	- If no radio buttons are checked, display an alert and return false
	- This is a more efficient way to check if any radio buttons are checked than using a for loop
	- If no radio buttons are checked, the function will return false and stop executing
	- Using a Set to store the radio groups that have been checked
	- If a radio group has already been checked, skip the check
	*/

	if (element.type === 'radio') {

	if (!radioGroupsChecked.has(element.name)) {

	const radios = [...document.querySelectorAll(`[name="${element.name}"]`)];

	if (!radios.some(el => el.checked)) {
	alert(`Please select your ${element.name}`);
	return false;
	}

	radioGroupsChecked.add(element.name);
	}
	}

	/*
	//Checking if the element is a checkbox
	//If the element is a checkbox, check if any of the checkboxes are checked
	//If no checkboxes are checked, display an alert and return false
	//This is a more efficient way to check if any checkboxes are checked than using a for loop
	//If no checkboxes are checked, the function will return false and stop executing
	//Using a Set to store the checkbox groups that have been checked
	//If a checkbox group has already been checked, skip the check
	*/
	if (element.type === 'checkbox') {

	if (!checkboxGroupsChecked.has(element.name)) {

	const checkboxes = [...document.querySelectorAll(`[name="${element.name}"]`)];

	if (!checkboxes.some(el => el.checked)) {
	alert(`Please select at least one ${element.name}`);
	return false;
	}

	checkboxGroupsChecked.add(element.name);
	}
	}

	}

	alert("Form submitted successfully!");
	form.submit();

	}

	document.getElementById("myForm").addEventListener("submit", validateForm);

	/* Original Code for backup and reference
	function validateForm() {
	for (var i=0; i<document.forms[0].length; i++){
	if (document.forms[0][i].value === ''){
	alert('Please enter your ' + document.forms[0][i].name);
	return false;
	}

	var radioGroup = false;
	if (document.forms[0].elements[i].type == 'radio' \|\| document.forms[0].elements[i].type == 'checkbox'){
	var msg = document.forms[0].elements[i].name;
	var numElmnts = document.getElementsByName(msg).length;
	var elem = document.getElementsByName(msg);

	for (var j = 0; j < numElmnts; j++) {
	if (elem[j].checked == true) {
	radioGroup = true;
	}

	}

	if (radioGroup == false) {
	alert('Please select your ' + document.forms[0][i].name);
	return false;
	}
	}
	}
	*/
	</script>

	</body>
	</html>
No results found