API tools faq
paste
Advertisement
Patrikrizek

lesson-8-hw-help

Patrikrizek
Mar 24th, 2022
89
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 20.16 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Javascript form</title>
  8.     <meta name="author" content="Patrik Krizek">
  9.     <meta name="description" content="Classroom-based IT training">
  10.  
  11.     <!-- CSS -->
  12.     <link href="stylesheet.css" rel="stylesheet">
  13.    
  14. </head>
  15. <body>
  16.     <!-- Header -->
  17.     <header>
  18.         <h1>Order form,Validation & Print</h1>
  19.        <p>Please find order form below. The form has data input validation in place. After pressing submit button the collected data in form are displayed on the screen.</p>
  20.    </header>
  21.    
  22.    <!-- Main -->
  23.    <div id="main">
  24.  
  25.        <!-- Form - Customer Details -->
  26.        <div id="formCusotomerDetails">
  27.            <h2>Customer Details</h2>
  28.    
  29.            <label for="fname">First name*</label><br>
  30.            <input type="text" name="fname" id="fname" placeholder="John" pattern="[A-Za-z]" required autofocus><br>
  31.            
  32.            <label for="lname">Last name*</label><br>
  33.            <input type="text" name="lname" id="lname" placeholder="Smith" pattern="[A-Za-z]"required><br>
  34.            
  35.            <label for="cname">Company name <span class="optional">(optional)</span></label><br>
  36.            <input type="text" name="cname" id="cname" placeholder="Your company name"><br>
  37.        
  38.            <label for="country">Country*</label><br>
  39.            <select name="country" id="country">Country</select><br>
  40.            
  41.            <!-- JS -->
  42.            <script>
  43.                const countryList = [
  44.                    "Select your country",
  45.                    "Afghanistan",
  46.                    "Albania",
  47.                    "Algeria",
  48.                    "American Samoa",
  49.                    "Andorra",
  50.                    "Angola",
  51.                    "Anguilla",
  52.                    "Antarctica",
  53.                    "Antigua and Barbuda",
  54.                    "Argentina",
  55.                    "Armenia",
  56.                    "Aruba",
  57.                    "Australia",
  58.                    "Austria",
  59.                    "Azerbaijan",
  60.                    "Bahamas (the)",
  61.                    "Bahrain",
  62.                    "Bangladesh",
  63.                    "Barbados",
  64.                    "Belarus",
  65.                    "Belgium",
  66.                    "Belize",
  67.                    "Benin",
  68.                    "Bermuda",
  69.                    "Bhutan",
  70.                    "Bolivia (Plurinational State of)",
  71.                    "Bonaire, Sint Eustatius and Saba",
  72.                    "Bosnia and Herzegovina",
  73.                    "Botswana",
  74.                    "Bouvet Island",
  75.                    "Brazil",
  76.                    "British Indian Ocean Territory (the)",
  77.                    "Brunei Darussalam",
  78.                    "Bulgaria",
  79.                    "Burkina Faso",
  80.                    "Burundi",
  81.                    "Cabo Verde",
  82.                    "Cambodia",
  83.                    "Cameroon",
  84.                    "Canada",
  85.                    "Cayman Islands (the)",
  86.                    "Central African Republic (the)",
  87.                    "Chad",
  88.                    "Chile",
  89.                    "China",
  90.                    "Christmas Island",
  91.                    "Cocos (Keeling) Islands (the)",
  92.                    "Colombia",
  93.                    "Comoros (the)",
  94.                    "Congo (the Democratic Republic of the)",
  95.                    "Congo (the)",
  96.                    "Cook Islands (the)",
  97.                    "Costa Rica",
  98.                    "Croatia",
  99.                    "Cuba",
  100.                    "Curaçao",
  101.                    "Cyprus",
  102.                    "Czechia",
  103.                    "Côte d'Ivoire",
  104.                    "Denmark",
  105.                    "Djibouti",
  106.                    "Dominica",
  107.                    "Dominican Republic (the)",
  108.                    "Ecuador",
  109.                    "Egypt",
  110.                    "El Salvador",
  111.                    "Equatorial Guinea",
  112.                    "Eritrea",
  113.                    "Estonia",
  114.                    "Eswatini",
  115.                    "Ethiopia",
  116.                    "Falkland Islands (the) [Malvinas]",
  117.                    "Faroe Islands (the)",
  118.                    "Fiji",
  119.                    "Finland",
  120.                    "France",
  121.                    "French Guiana",
  122.                    "French Polynesia",
  123.                    "French Southern Territories (the)",
  124.                    "Gabon",
  125.                    "Gambia (the)",
  126.                    "Georgia",
  127.                    "Germany",
  128.                    "Ghana",
  129.                    "Gibraltar",
  130.                    "Greece",
  131.                    "Greenland",
  132.                    "Grenada",
  133.                    "Guadeloupe",
  134.                    "Guam",
  135.                    "Guatemala",
  136.                    "Guernsey",
  137.                    "Guinea",
  138.                    "Guinea-Bissau",
  139.                    "Guyana",
  140.                    "Haiti",
  141.                    "Heard Island and McDonald Islands",
  142.                    "Holy See (the)",
  143.                    "Honduras",
  144.                    "Hong Kong",
  145.                    "Hungary",
  146.                    "Iceland",
  147.                    "India",
  148.                    "Indonesia",
  149.                    "Iran (Islamic Republic of)",
  150.                    "Iraq",
  151.                    "Ireland",
  152.                    "Isle of Man",
  153.                    "Israel",
  154.                    "Italy",
  155.                    "Jamaica",
  156.                    "Japan",
  157.                    "Jersey",
  158.                    "Jordan",
  159.                    "Kazakhstan",
  160.                    "Kenya",
  161.                    "Kiribati",
  162.                    "Korea (the Democratic People's Republic of)",
  163.                    "Korea (the Republic of)",
  164.                    "Kuwait",
  165.                    "Kyrgyzstan",
  166.                    "Lao People's Democratic Republic (the)",
  167.                    "Latvia",
  168.                    "Lebanon",
  169.                    "Lesotho",
  170.                    "Liberia",
  171.                    "Libya",
  172.                    "Liechtenstein",
  173.                    "Lithuania",
  174.                    "Luxembourg",
  175.                    "Macao",
  176.                    "Madagascar",
  177.                    "Malawi",
  178.                    "Malaysia",
  179.                    "Maldives",
  180.                    "Mali",
  181.                    "Malta",
  182.                    "Marshall Islands (the)",
  183.                    "Martinique",
  184.                    "Mauritania",
  185.                    "Mauritius",
  186.                    "Mayotte",
  187.                    "Mexico",
  188.                    "Micronesia (Federated States of)",
  189.                    "Moldova (the Republic of)",
  190.                    "Monaco",
  191.                    "Mongolia",
  192.                    "Montenegro",
  193.                    "Montserrat",
  194.                    "Morocco",
  195.                    "Mozambique",
  196.                    "Myanmar",
  197.                    "Namibia",
  198.                    "Nauru",
  199.                    "Nepal",
  200.                    "Netherlands (the)",
  201.                    "New Caledonia",
  202.                    "New Zealand",
  203.                    "Nicaragua",
  204.                    "Niger (the)",
  205.                    "Nigeria",
  206.                    "Niue",
  207.                    "Norfolk Island",
  208.                    "Northern Mariana Islands (the)",
  209.                    "Norway",
  210.                    "Oman",
  211.                    "Pakistan",
  212.                    "Palau",
  213.                    "Palestine, State of",
  214.                    "Panama",
  215.                    "Papua New Guinea",
  216.                    "Paraguay",
  217.                    "Peru",
  218.                    "Philippines (the)",
  219.                    "Pitcairn",
  220.                    "Poland",
  221.                    "Portugal",
  222.                    "Puerto Rico",
  223.                    "Qatar",
  224.                    "Republic of North Macedonia",
  225.                    "Romania",
  226.                    "Russian Federation (the)",
  227.                    "Rwanda",
  228.                    "Réunion",
  229.                    "Saint Barthélemy",
  230.                    "Saint Helena, Ascension and Tristan da Cunha",
  231.                    "Saint Kitts and Nevis",
  232.                    "Saint Lucia",
  233.                    "Saint Martin (French part)",
  234.                    "Saint Pierre and Miquelon",
  235.                    "Saint Vincent and the Grenadines",
  236.                    "Samoa",
  237.                    "San Marino",
  238.                    "Sao Tome and Principe",
  239.                    "Saudi Arabia",
  240.                    "Senegal",
  241.                    "Serbia",
  242.                    "Seychelles",
  243.                    "Sierra Leone",
  244.                    "Singapore",
  245.                    "Sint Maarten (Dutch part)",
  246.                    "Slovakia",
  247.                    "Slovenia",
  248.                    "Solomon Islands",
  249.                    "Somalia",
  250.                    "South Africa",
  251.                    "South Georgia and the South Sandwich Islands",
  252.                    "South Sudan",
  253.                    "Spain",
  254.                    "Sri Lanka",
  255.                    "Sudan (the)",
  256.                    "Suriname",
  257.                    "Svalbard and Jan Mayen",
  258.                    "Sweden",
  259.                    "Switzerland",
  260.                    "Syrian Arab Republic",
  261.                    "Taiwan",
  262.                    "Tajikistan",
  263.                    "Tanzania, United Republic of",
  264.                    "Thailand",
  265.                    "Timor-Leste",
  266.                    "Togo",
  267.                    "Tokelau",
  268.                    "Tonga",
  269.                    "Trinidad and Tobago",
  270.                    "Tunisia",
  271.                    "Turkey",
  272.                    "Turkmenistan",
  273.                    "Turks and Caicos Islands (the)",
  274.                    "Tuvalu",
  275.                    "Uganda",
  276.                    "Ukraine",
  277.                    "United Arab Emirates (the)",
  278.                    "United Kingdom of Great Britain and Northern Ireland (the)",
  279.                    "United States Minor Outlying Islands (the)",
  280.                    "United States of America (the)",
  281.                    "Uruguay",
  282.                    "Uzbekistan",
  283.                    "Vanuatu",
  284.                    "Venezuela (Bolivarian Republic of)",
  285.                    "Viet Nam",
  286.                    "Virgin Islands (British)",
  287.                    "Virgin Islands (U.S.)",
  288.                    "Wallis and Futuna",
  289.                    "Western Sahara",
  290.                    "Yemen",
  291.                    "Zambia",
  292.                    "Zimbabwe",
  293.                    "Åland Islands"
  294.                ];
  295.                 let option = "";
  296.        
  297.                 countryList.forEach(createListCountries);
  298.                 document.getElementById("country").innerHTML = option;
  299.    
  300.                 function createListCountries(value, index, array) {
  301.                     option += "<option value='" + value + "'>" + value + "</option>";
  302.                 }
  303.             </script>
  304.            
  305.             <label for="street" required>Street*</label><br>
  306.             <input name="street" id="street" placeholder="1st address line" ><br>
  307.            
  308.             <label for="city">Town / City*</label><br>
  309.             <input type="text" name="city" id="city" placeholder="London" pattern="[A-Za-z]" required><br>
  310.              
  311.             <label for="postcode" required>Postcode*</label><br>
  312.             <input type="text" name="postcode" id="postcode" placeholder="EC3V 3LA"><br>
  313.                
  314.             <label for="phone">Phone number <span class="optional">(optional)</span></label><br>
  315.             <input type="number" name="phone" id="phone" placeholder="123456789" pattern="[0-9]{9}" ><br>
  316.            
  317.             <label for="email">Email address*</label><br>
  318.             <input type="email" name="email" id="email" placeholder="john.smith@email.com" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" required><br>
  319.            
  320.             <label for="note">Note <span class="optional">(optional)</span></label><br>
  321.             <textarea name="note" id="note" rows="4" cols="50" maxlength="250" placeholder="Enter your note here. (limited to 250 characters)."></textarea><br>
  322.                    
  323.             <input type="submit" onclick="validateCustomerDetails()" value="Submit"><br>
  324.  
  325.             <!-- JS -->
  326.             <script>
  327.                 function validateCustomerDetails() {
  328.                     //TODO: Create Full name formula
  329.                     var fName = document.getElementById('fname').value ;
  330.                     var lName = document.getElementById('lname').value; ;
  331.                     var fullName = fName + " " + lName;
  332.                    
  333.                     var companyName = document.getElementById('cname').value;
  334.                    
  335.                     //TODO: Create Address formula
  336.                     var street = document.getElementById('street').value ;
  337.                     var city = document.getElementById('city').value;
  338.                     var postcode = document.getElementById('postcode').value;
  339.                     var country = document.getElementById('country').value;
  340.                     var address = street + ", " + city + ", " + postcode + ", " + country;
  341.                        
  342.                     var phone = document.getElementById('phone').value;
  343.                     var email = document.getElementById('email').value;
  344.                     var note = document.getElementById('note').value;
  345.  
  346.                     //TODO: Create Validation function
  347.                     var fNameCheckPattern = /^[a-zA-Z]+$/;
  348.                     var lNameCheckPattern = /^[a-zA-Z]+$/;
  349.                     var cityCheckPattern = /^[a-zA-Z]+$/;
  350.                     var phoneCheckPattern =  /[0-9]{9}/;
  351.                     var emailCheckPattern = /[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$/;
  352.  
  353.                     if (!fNameCheckPattern.test(fName)) {
  354.                         document.getElementById('fname').focus(); alert("Please enter First name correctly. Only Characters are allowed.")
  355.                     } else if (!lNameCheckPattern.test(lName)) {
  356.                         document.getElementById('lname').focus(); alert("Please enter Last name correctly. Only Characters are allowed.");
  357.                     } else if (!cityCheckPattern.test(city)) {
  358.                         document.getElementById('city').focus(); alert("Please enter the town / city name correctly. Only Characters are allowed.");
  359.                     } else if (!phoneCheckPattern.test(phone)) {
  360.                         document.getElementById('phone').focus(); alert("Please enter your phone number right formate. Example: 123456798");
  361.                     } else if (!emailCheckPattern.test(email)) {
  362.                         document.getElementById('email').focus(); alert("Please enter your email in right formate. Example: John.Smith@email.com");
  363.                     } else {
  364.                         printCustomerDetails ();
  365.                     }
  366.  
  367.                     function printCustomerDetails () {
  368.                         document.getElementById('outputFullName').innerHTML = "<b>Full name: </b>" + fullName;
  369.                         document.getElementById('outputCompanyName').innerHTML = "<b>Company name: </b>" + companyName;
  370.                         document.getElementById('outputAddress').innerHTML = "<b>Address: </b>" + address;
  371.                         document.getElementById('outputPhone').innerHTML = "<b>Phone: </b>" + phone;
  372.                         document.getElementById('outputEmail').innerHTML = "<b>Email: </b>" + email;
  373.                         document.getElementById('outputNote').innerHTML = "<b>Note: </b>" + note;
  374.                     }
  375.                 }
  376.             </script>
  377.            
  378.             <small>*required fields</small>
  379.         </div>
  380.    
  381.         <!-- Form - Expedition -->
  382.         <div id="formExpedition">
  383.             <h2>Expedition Details</h2>
  384.    
  385.             <div id="expedition">
  386.                 <form id="destinations">
  387.                     <label for="northPole">North Pole</label>
  388.                     <input type="radio" id="northPole" name="destination" value="North Pole" required="required" checked>
  389.                     <label for="southPole">South Pole</label>
  390.                     <input type="radio" id="southPole" name="destination" value="South Pole">
  391.                     <label for="marianaTrench">Mariana Trench</label>
  392.                     <input type="radio" id="marianaTrench" name="destination" value="Mariana Trench">
  393.                 </form>
  394.             </div><br>
  395.  
  396.             <div id="dates">
  397.                 <div id="fromdate">
  398.                 <label for="fdate">From*</label><br>
  399.                 <input type="date" name="fdate" id="fdate" value="2021-11-09" min="2021-11-09" max="2022-11-09" required><br>
  400.                 </div>
  401.  
  402.                 <div id="enddate">
  403.                     <label for="edate">To*</label><br>
  404.                     <input type="date" name="edate" id="edate" value="2021-11-09" min="2021-11-10" max="2022-11-09" required><br>
  405.                     </div>
  406.             </div><br>  
  407.            
  408.             <input type="submit" onclick="validateExpeditionDetails()"><br>
  409.            
  410.             <!-- JS -->
  411.             <script>
  412.                 function validateExpeditionDetails() {
  413.                     //TODO: Create check function or jQuery
  414.                     var destination = document.querySelector('input[name=destination]:checked').value; //jQuery library solution
  415.                     var fromDate = document.getElementById('fdate').value;
  416.                     var toDate = document.getElementById('edate').value;
  417.                     //TODO: create Total days formula
  418.                     var totalDays = (new Date(toDate) - new Date(fromDate)) / (1000 * 60 * 60 *24);
  419.                    
  420.                     //JS radio check function - optional, not in use
  421.                     function checkRadio() {
  422.                         document.getElementsByName('destination')
  423.                         .forEach(radio => {
  424.                             if (radio.checked) {
  425.                                 console.log(radio.value);
  426.                             }
  427.                         })
  428.                     }
  429.                    
  430.                     //TODO: Create Validation function
  431.                     if (totalDays === 0 || totalDays <= 14) {alert("Your expedition must to be longer then 2 weeks!");}
  432.                        else printExpeditionDetails();
  433.                                        
  434.                    //TODO: Create print function
  435.                    function printExpeditionDetails() {
  436.                        document.getElementById('outputDestination').innerHTML = "<b>Destination: </b>" + destination;
  437.                         document.getElementById('outputFromDate').innerHTML = "<b>From: </b>" + fromDate;
  438.                         document.getElementById('outputToDate').innerHTML = "<b>To: </b>" + toDate;
  439.                         document.getElementById('outputTotalDays').innerHTML = "<b>Total days: </b>" + totalDays;
  440.                     }
  441.                 }
  442.             </script>
  443.  
  444.             <small>*required fields</small>
  445.         </div>
  446.    
  447.         <!-- Print forms -->
  448.         <div id="print">
  449.             <h2>Congrats! Get ready for your expedition. We will contact you soon.</h2>
  450.             <small>This is a printable version of your forms.</small>
  451.             <hr>
  452.  
  453.             <h3>Customer Details</h3>
  454.             <p id="outputFullName"><b>Full name:</b></p>
  455.             <p id="outputCompanyName"><b>Company name:</b></p>
  456.             <p id="outputAddress"><b>Address:</b></p>
  457.             <p id="outputPhone"><b>Phone:</b></p>
  458.             <p id="outputEmail"><b>Email:</b></p>
  459.             <p id="outputNote"><b>Note:</b></p>
  460.             <hr>
  461.            
  462.             <h3>Expedition Details</h3>
  463.             <p id="outputDestination"><b>Destination:</b></p>
  464.             <p id="outputFromDate"><b>From:</b></p>
  465.             <p id="outputToDate"><b>To:</b></p>
  466.             <p id="outputTotalDays"><b>Total days:</b></p>
  467.  
  468.         </div>
  469.     </div>
  470. </body>
  471. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!