Dynamic country dropdown using JavaScript

css/responsive.css

@@ -10,6 +10,11 @@
     margin-bottom: 30px;
   }
 }
+@media (max-width: 768px) {
+  #contact select {
+    width: 100%;
+  }
+}
 @media screen and (max-width: 1130px) {
   .menu-btn {
     display: block;

css/style.css

@@ -1,3 +1,4 @@
+
 /* Google fonts */
 
 @import url("https://fonts.googleapis.com/css2?family=Lora:wght@400;700&family=Montserrat:wght@400;800&family=Parisienne&family=Roboto&family=Teko:wght@300&display=swap");
@@ -552,6 +553,14 @@ textarea {
   border-radius: 4px;
   resize: vertical;
 }
+input[type="text"]:focus,
+textarea:focus,
+select:focus {
+  outline: none;
+  border-color: #ff4d7a;
+  box-shadow: 0 0 8px rgba(252, 3, 107, 0.5);
+}
+
 
 label {
   padding: 0px 0px 7px 6px;
@@ -947,4 +956,4 @@ input[type=radio] {
   transform: translateY(-80px);
 }
 
-/* end */
+/* end */

index.html

@@ -507,14 +507,19 @@ <h1 class="color">Send us a message</h1>
                     </div>
                     <div class="crow">
                         <div class="ccol-left">
-                            <select name="country" id="country">
+                            <select name="country" id="country" required>
+  <option value="" disabled selected>-- Select Your Country --</option>
+</select>
+
+                            <!-- <select name="country" id="country">
+                                 <option value="" disabled selected>-- Select Your Country --</option>
                                 <option value="India">India</option>
                                 <option value="Russia">Russia</option>
                                 <option value="usa">USA</option>
                                 <option value="Japan">Japan</option>
                                 <option value="France">France</option>
                                 <option value="Brazil">Brazil</option>
-                            </select>
+                            </select> -->
                         </div>
                     </div>
                     <div class="crow">
@@ -602,6 +607,41 @@ <h1 class="color">Send us a message</h1>
                 navlinks.classList.toggle("mobile-menu");
             });
         </script>
+        <script>
+  const countries = [
+    "Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Argentina", "Armenia", "Australia", "Austria", "Azerbaijan",
+    "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bhutan", "Bolivia",
+    "Bosnia and Herzegovina", "Botswana", "Brazil", "Brunei", "Bulgaria", "Burkina Faso", "Burundi",
+    "Cambodia", "Cameroon", "Canada", "Cape Verde", "Central African Republic", "Chad", "Chile", "China", "Colombia",
+    "Comoros", "Costa Rica", "Croatia", "Cuba", "Cyprus", "Czech Republic", "Denmark", "Djibouti", "Dominica",
+    "Dominican Republic", "Ecuador", "Egypt", "El Salvador", "Equatorial Guinea", "Eritrea", "Estonia", "Eswatini",
+    "Ethiopia", "Fiji", "Finland", "France", "Gabon", "Gambia", "Georgia", "Germany", "Ghana", "Greece", "Grenada",
+    "Guatemala", "Guinea", "Guinea-Bissau", "Guyana", "Haiti", "Honduras", "Hungary", "Iceland", "India", "Indonesia",
+    "Iran", "Iraq", "Ireland", "Israel", "Italy", "Jamaica", "Japan", "Jordan", "Kazakhstan", "Kenya", "Kiribati",
+    "Kuwait", "Kyrgyzstan", "Laos", "Latvia", "Lebanon", "Lesotho", "Liberia", "Libya", "Liechtenstein", "Lithuania",
+    "Luxembourg", "Madagascar", "Malawi", "Malaysia", "Maldives", "Mali", "Malta", "Mauritania", "Mauritius", "Mexico",
+    "Micronesia", "Moldova", "Monaco", "Mongolia", "Montenegro", "Morocco", "Mozambique", "Myanmar", "Namibia",
+    "Nauru", "Nepal", "Netherlands", "New Zealand", "Nicaragua", "Niger", "Nigeria", "North Korea", "North Macedonia",
+    "Norway", "Oman", "Pakistan", "Palau", "Panama", "Papua New Guinea", "Paraguay", "Peru", "Philippines", "Poland",
+    "Portugal", "Qatar", "Romania", "Russia", "Rwanda", "Saint Kitts and Nevis", "Saint Lucia", "Saint Vincent and the Grenadines",
+    "Samoa", "San Marino", "Sao Tome and Principe", "Saudi Arabia", "Senegal", "Serbia", "Seychelles", "Sierra Leone",
+    "Singapore", "Slovakia", "Slovenia", "Solomon Islands", "Somalia", "South Africa", "South Korea", "South Sudan",
+    "Spain", "Sri Lanka", "Sudan", "Suriname", "Sweden", "Switzerland", "Syria", "Taiwan", "Tajikistan", "Tanzania",
+    "Thailand", "Timor-Leste", "Togo", "Tonga", "Trinidad and Tobago", "Tunisia", "Turkey", "Turkmenistan",
+    "Tuvalu", "Uganda", "Ukraine", "United Arab Emirates", "United Kingdom", "United States", "Uruguay", "Uzbekistan",
+    "Vanuatu", "Vatican City", "Venezuela", "Vietnam", "Yemen", "Zambia", "Zimbabwe"
+  ];
+
+  const countryDropdown = document.getElementById("country");
+
+  countries.forEach(country => {
+    const option = document.createElement("option");
+    option.value = country;
+    option.textContent = country;
+    countryDropdown.appendChild(option);
+  });
+</script>
+
         <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
         <script src="js/script.js"></script>
     </body>