Skip to content

Instantly share code, notes, and snippets.

@Timothy-Achonu

Timothy-Achonu/script.js

Last active May 25, 2024 12:54
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Timothy-Achonu/3a30a01e3e2f848285693e64b784eb74 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Timothy-Achonu/3a30a01e3e2f848285693e64b784eb74 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
script.js
const style = document.createElement('style');
// Step 2: Add CSS rules to the style element
style.innerHTML = ` * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Raleway", sans-serif;
font-weight: 400;
}
input {
font-weight: 600;
outline: none;
font-family: "Raleway", sans-serif;
color: #282828;
}
.hidden-input {
border: none;
outline: none;
padding: 1.25rem 0rem;
border-radius: 8px;
flex: 1;
font-weight: 600;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
}
li {
list-style: none;
}
main {
padding: 13rem 9.625rem;
}
@media (max-width: 700px) {
main {
padding: 5rem 2rem;
}
}
form {
display: flex;
flex-direction: column;
row-gap: 3.25rem;
max-width: 700px;
}
fieldset {
display: flex;
flex-direction: column;
row-gap: 1rem;
border: none;
}
label {
color: #828282;
}
.input {
padding: 1.25rem 1.5rem;
border-radius: 8px;
border: 1px solid #bdbdbd;
display: flex;
align-items: center;
/* outline: none; */
}
.document-type {
justify-content: space-between;
position: relative;
cursor: pointer;
}
.selected-document {
color: #282828;
}
.selected-document + svg {
transform: rotate(180deg);
}
.document-options {
display: none;
flex-direction: column;
gap: 0.75rem;
position: absolute;
top: 110%;
left: 0;
overflow-y: scroll;
width: 100%;
background-color: white;
color: #243665;
max-height: 300px;
text-align: center;
padding: 1rem 0;
z-index: 10;
box-shadow: 2px 3px 17px 0px rgba(0, 0, 0, 0.54);
-webkit-box-shadow: 2px 3px 17px 0px rgba(0, 0, 0, 0.54);
-moz-box-shadow: 2px 3px 17px 0px rgba(0, 0, 0, 0.54);
text-align: center;
}
.document-options.show {
display: flex;
}
.option {
cursor: pointer;
padding: 0.75rem;
}
.option:hover {
background-color: #f2f2f2;
}
.option.selected {
background-color: #243665;
color: white;
}
.option.selected:hover {
background-color: #243665;
}
/* country numbers */
.phone-number {
gap: 1rem;
padding: 0rem 1.5rem;
position: relative;
}
.selected-country {
display: flex;
align-items: center;
gap: 4px;
border-right: solid 1px #d5d9e7;
padding: 3px 0;
padding-right: 4px;
}
.selected-country > * {
cursor: pointer;
}
.country-options-wrapper {
display: none;
align-items: center;
flex-direction: column;
gap: 14px;
border-right: solid 1px #d5d9e7;
padding: 16px 0;
position: absolute;
max-width: 200px;
background-color: white;
color: #243665;
top: 110%;
left: 0;
box-shadow: 2px 3px 17px 0px rgba(0, 0, 0, 0.54);
-webkit-box-shadow: 2px 3px 17px 0px rgba(0, 0, 0, 0.54);
-moz-box-shadow: 2px 3px 17px 0px rgba(0, 0, 0, 0.54);
text-align: center;
z-index: 20;
}
.input.search-input {
padding: 0.5rem 0.5rem;
width: auto;
max-width: 95%;
}
.country-options-wrapper.show {
display: flex;
}
.country-options {
align-items: center;
flex-direction: column;
gap: 14px;
max-height: 250px;
overflow-y: scroll;
max-width: 200px;
width: 100%;
}
.country-option-li {
cursor: pointer;
padding: 0.75rem;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
text-align: start;
column-gap: 1rem;
}
/* form > fieldset .phone-number .country-options > * > img {
} */
.country-option-li:hover {
background-color: #f2f2f2;
}
.country-option-li.selected {
background-color: #243665;
color: white;
}
.country-option-li.selected:hover {
background-color: #243665;
}
.input.title-input {
gap: 8px;
}
.title-hidden-input.hidden-input {
width: 20px;
height: 20px;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: 10;
opacity: 0;
}
.outer-circle.title-outer-circle {
width: 20px;
height: 20px;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 50%;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
border: #bdbdbd solid 1.8px;
padding: 3px;
}
.title-hidden-input + .outer-circle {
border: #243665 solid 1.8px;
}
.title-inner-circle {
width: 100%;
height: 100%;
background-color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.title-hidden-input:checked + .title-outer-circle .title-inner-circle {
background-color: #243665;
color: #243665;
}
fieldset.title .input input,
fieldset.title-units .input input {
flex: 0;
}
/* Title inputs */
form > fieldset.title-units > div {
border: solid 1px #eeeeee;
border-radius: 8px;
padding: 1.625rem;
display: flex;
flex-direction: column;
gap: 1.625rem;
}
form > fieldset.title-units .input {
border: none;
gap: 8px;
padding: 0 0;
}
form > fieldset.title-units .input .hidden-input {
width: 20px;
height: 20px;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: 10;
opacity: 0;
}
form > fieldset.title-units .input .outer-circle {
width: 20px;
height: 20px;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 4px;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
border: #bdbdbd solid 1.6px;
}
form > fieldset.title-units .input input:checked + .outer-circle {
background-color: #243665;
}
form > fieldset.header textarea {
border: 1px solid #bdbdbd;
padding: 1.25rem 1.5rem;
border-radius: 8px;
min-height: 107px;
outline: none;
}
form > fieldset.header textarea::placeholder {
color: #bdbdbd;
font-weight: 500;
}
.submit-btn-wrapper {
display: flex;
}
.submit-btn {
background-color: #243665;
padding: 14px 32px;
border: none;
outline: none;
border-radius: 8px;
font-family: "Raleway", sans-serif;
color: white;
cursor: pointer;
width: 100%;
display:flex;
justify-content: center;
align-items: center;
}
`
document.addEventListener("DOMContentLoaded", function () {
const form = document.querySelector("form");
form.appendChild(style);
//variables
const countries = [
{
code: "+234",
identifier: "Nigeria",
flag: "https://flagcdn.com/w320/ng.png",
},
{
code: "+233",
identifier: "Ghana",
flag: "https://flagcdn.com/w320/gh.png",
},
{
code: "+93",
identifier: "Afghanistan",
flag: "https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Flag_of_the_Taliban.svg/320px-Flag_of_the_Taliban.svg.png",
},
{
code: "+35818",
identifier: "Åland Islands",
flag: "https://flagcdn.com/w320/ax.png",
},
{
code: "+355",
identifier: "Albania",
flag: "https://flagcdn.com/w320/al.png",
},
{
code: "+213",
identifier: "Algeria",
flag: "https://flagcdn.com/w320/dz.png",
},
{
code: "+1684",
identifier: "American Samoa",
flag: "https://flagcdn.com/w320/as.png",
},
{
code: "+376",
identifier: "Andorra",
flag: "https://flagcdn.com/w320/ad.png",
},
{
code: "+244",
identifier: "Angola",
flag: "https://flagcdn.com/w320/ao.png",
},
{
code: "+1264",
identifier: "Anguilla",
flag: "https://flagcdn.com/w320/ai.png",
},
{
code: "+672",
identifier: "Antarctica",
flag: "https://flagcdn.com/w320/aq.png",
},
{
code: "+1268",
identifier: "Antigua and Barbuda",
flag: "https://flagcdn.com/w320/ag.png",
},
{
code: "+54",
identifier: "Argentina",
flag: "https://flagcdn.com/w320/ar.png",
},
{
code: "+374",
identifier: "Armenia",
flag: "https://flagcdn.com/w320/am.png",
},
{
code: "+297",
identifier: "Aruba",
flag: "https://flagcdn.com/w320/aw.png",
},
{
code: "+61",
identifier: "Australia",
flag: "https://flagcdn.com/w320/au.png",
},
{
code: "+43",
identifier: "Austria",
flag: "https://flagcdn.com/w320/at.png",
},
{
code: "+994",
identifier: "Azerbaijan",
flag: "https://flagcdn.com/w320/az.png",
},
{
code: "+1242",
identifier: "Bahamas",
flag: "https://flagcdn.com/w320/bs.png",
},
{
code: "+973",
identifier: "Bahrain",
flag: "https://flagcdn.com/w320/bh.png",
},
{
code: "+880",
identifier: "Bangladesh",
flag: "https://flagcdn.com/w320/bd.png",
},
{
code: "+1246",
identifier: "Barbados",
flag: "https://flagcdn.com/w320/bb.png",
},
{
code: "+375",
identifier: "Belarus",
flag: "https://flagcdn.com/w320/by.png",
},
{
code: "+32",
identifier: "Belgium",
flag: "https://flagcdn.com/w320/be.png",
},
{
code: "+501",
identifier: "Belize",
flag: "https://flagcdn.com/w320/bz.png",
},
{
code: "+229",
identifier: "Benin",
flag: "https://flagcdn.com/w320/bj.png",
},
{
code: "+1441",
identifier: "Bermuda",
flag: "https://flagcdn.com/w320/bm.png",
},
{
code: "+975",
identifier: "Bhutan",
flag: "https://flagcdn.com/w320/bt.png",
},
{
code: "+591",
identifier: "Bolivia",
flag: "https://flagcdn.com/w320/bo.png",
},
{
code: "+387",
identifier: "Bosnia and Herzegovina",
flag: "https://flagcdn.com/w320/ba.png",
},
{
code: "+267",
identifier: "Botswana",
flag: "https://flagcdn.com/w320/bw.png",
},
{
code: "+47",
identifier: "Bouvet Island",
flag: "https://flagcdn.com/w320/bv.png",
},
{
code: "+55",
identifier: "Brazil",
flag: "https://flagcdn.com/w320/br.png",
},
{
code: "+246",
identifier: "British Indian Ocean Territory",
flag: "https://flagcdn.com/w320/io.png",
},
{
code: "+1284",
identifier: "British Virgin Islands",
flag: "https://flagcdn.com/w320/vg.png",
},
{
code: "+673",
identifier: "Brunei",
flag: "https://flagcdn.com/w320/bn.png",
},
{
code: "+359",
identifier: "Bulgaria",
flag: "https://flagcdn.com/w320/bg.png",
},
{
code: "+226",
identifier: "Burkina Faso",
flag: "https://flagcdn.com/w320/bf.png",
},
{
code: "+257",
identifier: "Burundi",
flag: "https://flagcdn.com/w320/bi.png",
},
{
code: "+855",
identifier: "Cambodia",
flag: "https://flagcdn.com/w320/kh.png",
},
{
code: "+237",
identifier: "Cameroon",
flag: "https://flagcdn.com/w320/cm.png",
},
{
code: "+1",
identifier: "Canada",
flag: "https://flagcdn.com/w320/ca.png",
},
{
code: "+238",
identifier: "Cape Verde",
flag: "https://flagcdn.com/w320/cv.png",
},
{
code: "+599",
identifier: "Caribbean Netherlands",
flag: "https://flagcdn.com/w320/bq.png",
},
{
code: "+1345",
identifier: "Cayman Islands",
flag: "https://flagcdn.com/w320/ky.png",
},
{
code: "+236",
identifier: "Central African Republic",
flag: "https://flagcdn.com/w320/cf.png",
},
{
code: "+235",
identifier: "Chad",
flag: "https://flagcdn.com/w320/td.png",
},
{
code: "+56",
identifier: "Chile",
flag: "https://flagcdn.com/w320/cl.png",
},
{
code: "+86",
identifier: "China",
flag: "https://flagcdn.com/w320/cn.png",
},
{
code: "+61",
identifier: "Christmas Island",
flag: "https://flagcdn.com/w320/cx.png",
},
{
code: "+61",
identifier: "Cocos (Keeling) Islands",
flag: "https://flagcdn.com/w320/cc.png",
},
{
code: "+57",
identifier: "Colombia",
flag: "https://flagcdn.com/w320/co.png",
},
{
code: "+269",
identifier: "Comoros",
flag: "https://flagcdn.com/w320/km.png",
},
{
code: "+682",
identifier: "Cook Islands",
flag: "https://flagcdn.com/w320/ck.png",
},
{
code: "+506",
identifier: "Costa Rica",
flag: "https://flagcdn.com/w320/cr.png",
},
{
code: "+385",
identifier: "Croatia",
flag: "https://flagcdn.com/w320/hr.png",
},
{
code: "+53",
identifier: "Cuba",
flag: "https://flagcdn.com/w320/cu.png",
},
{
code: "+599",
identifier: "Curaçao",
flag: "https://flagcdn.com/w320/cw.png",
},
{
code: "+357",
identifier: "Cyprus",
flag: "https://flagcdn.com/w320/cy.png",
},
{
code: "+420",
identifier: "Czechia",
flag: "https://flagcdn.com/w320/cz.png",
},
{
code: "+45",
identifier: "Denmark",
flag: "https://flagcdn.com/w320/dk.png",
},
{
code: "+253",
identifier: "Djibouti",
flag: "https://flagcdn.com/w320/dj.png",
},
{
code: "+1767",
identifier: "Dominica",
flag: "https://flagcdn.com/w320/dm.png",
},
{
code: "+1849",
identifier: "Dominican Republic",
flag: "https://flagcdn.com/w320/do.png",
},
{
code: "+243",
identifier: "DR Congo",
flag: "https://flagcdn.com/w320/cd.png",
},
{
code: "+593",
identifier: "Ecuador",
flag: "https://flagcdn.com/w320/ec.png",
},
{
code: "+20",
identifier: "Egypt",
flag: "https://flagcdn.com/w320/eg.png",
},
{
code: "+503",
identifier: "El Salvador",
flag: "https://flagcdn.com/w320/sv.png",
},
{
code: "+240",
identifier: "Equatorial Guinea",
flag: "https://flagcdn.com/w320/gq.png",
},
{
code: "+291",
identifier: "Eritrea",
flag: "https://flagcdn.com/w320/er.png",
},
{
code: "+372",
identifier: "Estonia",
flag: "https://flagcdn.com/w320/ee.png",
},
{
code: "+268",
identifier: "Eswatini",
flag: "https://flagcdn.com/w320/sz.png",
},
{
code: "+251",
identifier: "Ethiopia",
flag: "https://flagcdn.com/w320/et.png",
},
{
code: "+500",
identifier: "Falkland Islands",
flag: "https://flagcdn.com/w320/fk.png",
},
{
code: "+298",
identifier: "Faroe Islands",
flag: "https://flagcdn.com/w320/fo.png",
},
{
code: "+679",
identifier: "Fiji",
flag: "https://flagcdn.com/w320/fj.png",
},
{
code: "+358",
identifier: "Finland",
flag: "https://flagcdn.com/w320/fi.png",
},
{
code: "+33",
identifier: "France",
flag: "https://flagcdn.com/w320/fr.png",
},
{
code: "+594",
identifier: "French Guiana",
flag: "https://flagcdn.com/w320/gf.png",
},
{
code: "+689",
identifier: "French Polynesia",
flag: "https://flagcdn.com/w320/pf.png",
},
{
code: "+262",
identifier: "French Southern and Antarctic Lands",
flag: "https://flagcdn.com/w320/tf.png",
},
{
code: "+241",
identifier: "Gabon",
flag: "https://flagcdn.com/w320/ga.png",
},
{
code: "+220",
identifier: "Gambia",
flag: "https://flagcdn.com/w320/gm.png",
},
{
code: "+995",
identifier: "Georgia",
flag: "https://flagcdn.com/w320/ge.png",
},
{
code: "+49",
identifier: "Germany",
flag: "https://flagcdn.com/w320/de.png",
},
{
code: "+350",
identifier: "Gibraltar",
flag: "https://flagcdn.com/w320/gi.png",
},
{
code: "+30",
identifier: "Greece",
flag: "https://flagcdn.com/w320/gr.png",
},
{
code: "+299",
identifier: "Greenland",
flag: "https://flagcdn.com/w320/gl.png",
},
{
code: "+1473",
identifier: "Grenada",
flag: "https://flagcdn.com/w320/gd.png",
},
{
code: "+590",
identifier: "Guadeloupe",
flag: "https://flagcdn.com/w320/gp.png",
},
{
code: "+1671",
identifier: "Guam",
flag: "https://flagcdn.com/w320/gu.png",
},
{
code: "+502",
identifier: "Guatemala",
flag: "https://flagcdn.com/w320/gt.png",
},
{
code: "+44",
identifier: "Guernsey",
flag: "https://flagcdn.com/w320/gg.png",
},
{
code: "+224",
identifier: "Guinea",
flag: "https://flagcdn.com/w320/gn.png",
},
{
code: "+245",
identifier: "Guinea-Bissau",
flag: "https://flagcdn.com/w320/gw.png",
},
{
code: "+592",
identifier: "Guyana",
flag: "https://flagcdn.com/w320/gy.png",
},
{
code: "+509",
identifier: "Haiti",
flag: "https://flagcdn.com/w320/ht.png",
},
{
code: "+504",
identifier: "Honduras",
flag: "https://flagcdn.com/w320/hn.png",
},
{
code: "+852",
identifier: "Hong Kong",
flag: "https://flagcdn.com/w320/hk.png",
},
{
code: "+36",
identifier: "Hungary",
flag: "https://flagcdn.com/w320/hu.png",
},
{
code: "+354",
identifier: "Iceland",
flag: "https://flagcdn.com/w320/is.png",
},
{
code: "+91",
identifier: "India",
flag: "https://flagcdn.com/w320/in.png",
},
{
code: "+62",
identifier: "Indonesia",
flag: "https://flagcdn.com/w320/id.png",
},
{
code: "+98",
identifier: "Iran",
flag: "https://flagcdn.com/w320/ir.png",
},
{
code: "+964",
identifier: "Iraq",
flag: "https://flagcdn.com/w320/iq.png",
},
{
code: "+353",
identifier: "Ireland",
flag: "https://flagcdn.com/w320/ie.png",
},
{
code: "+44",
identifier: "Isle of Man",
flag: "https://flagcdn.com/w320/im.png",
},
{
code: "+972",
identifier: "Israel",
flag: "https://flagcdn.com/w320/il.png",
},
{
code: "+39",
identifier: "Italy",
flag: "https://flagcdn.com/w320/it.png",
},
{
code: "+225",
identifier: "Ivory Coast",
flag: "https://flagcdn.com/w320/ci.png",
},
{
code: "+1876",
identifier: "Jamaica",
flag: "https://flagcdn.com/w320/jm.png",
},
{
code: "+81",
identifier: "Japan",
flag: "https://flagcdn.com/w320/jp.png",
},
{
code: "+44",
identifier: "Jersey",
flag: "https://flagcdn.com/w320/je.png",
},
{
code: "+962",
identifier: "Jordan",
flag: "https://flagcdn.com/w320/jo.png",
},
{
code: "+76,7",
identifier: "Kazakhstan",
flag: "https://flagcdn.com/w320/kz.png",
},
{
code: "+254",
identifier: "Kenya",
flag: "https://flagcdn.com/w320/ke.png",
},
{
code: "+686",
identifier: "Kiribati",
flag: "https://flagcdn.com/w320/ki.png",
},
{
code: "+383",
identifier: "Kosovo",
flag: "https://flagcdn.com/w320/xk.png",
},
{
code: "+965",
identifier: "Kuwait",
flag: "https://flagcdn.com/w320/kw.png",
},
{
code: "+996",
identifier: "Kyrgyzstan",
flag: "https://flagcdn.com/w320/kg.png",
},
{
code: "+856",
identifier: "Laos",
flag: "https://flagcdn.com/w320/la.png",
},
{
code: "+371",
identifier: "Latvia",
flag: "https://flagcdn.com/w320/lv.png",
},
{
code: "+961",
identifier: "Lebanon",
flag: "https://flagcdn.com/w320/lb.png",
},
{
code: "+266",
identifier: "Lesotho",
flag: "https://flagcdn.com/w320/ls.png",
},
{
code: "+231",
identifier: "Liberia",
flag: "https://flagcdn.com/w320/lr.png",
},
{
code: "+218",
identifier: "Libya",
flag: "https://flagcdn.com/w320/ly.png",
},
{
code: "+423",
identifier: "Liechtenstein",
flag: "https://flagcdn.com/w320/li.png",
},
{
code: "+370",
identifier: "Lithuania",
flag: "https://flagcdn.com/w320/lt.png",
},
{
code: "+352",
identifier: "Luxembourg",
flag: "https://flagcdn.com/w320/lu.png",
},
{
code: "+853",
identifier: "Macau",
flag: "https://flagcdn.com/w320/mo.png",
},
{
code: "+261",
identifier: "Madagascar",
flag: "https://flagcdn.com/w320/mg.png",
},
{
code: "+265",
identifier: "Malawi",
flag: "https://flagcdn.com/w320/mw.png",
},
{
code: "+60",
identifier: "Malaysia",
flag: "https://flagcdn.com/w320/my.png",
},
{
code: "+960",
identifier: "Maldives",
flag: "https://flagcdn.com/w320/mv.png",
},
{
code: "+223",
identifier: "Mali",
flag: "https://flagcdn.com/w320/ml.png",
},
{
code: "+356",
identifier: "Malta",
flag: "https://flagcdn.com/w320/mt.png",
},
{
code: "+692",
identifier: "Marshall Islands",
flag: "https://flagcdn.com/w320/mh.png",
},
{
code: "+596",
identifier: "Martinique",
flag: "https://flagcdn.com/w320/mq.png",
},
{
code: "+222",
identifier: "Mauritania",
flag: "https://flagcdn.com/w320/mr.png",
},
{
code: "+230",
identifier: "Mauritius",
flag: "https://flagcdn.com/w320/mu.png",
},
{
code: "+262",
identifier: "Mayotte",
flag: "https://flagcdn.com/w320/yt.png",
},
{
code: "+52",
identifier: "Mexico",
flag: "https://flagcdn.com/w320/mx.png",
},
{
code: "+691",
identifier: "Micronesia",
flag: "https://flagcdn.com/w320/fm.png",
},
{
code: "+373",
identifier: "Moldova",
flag: "https://flagcdn.com/w320/md.png",
},
{
code: "+377",
identifier: "Monaco",
flag: "https://flagcdn.com/w320/mc.png",
},
{
code: "+976",
identifier: "Mongolia",
flag: "https://flagcdn.com/w320/mn.png",
},
{
code: "+382",
identifier: "Montenegro",
flag: "https://flagcdn.com/w320/me.png",
},
{
code: "+1664",
identifier: "Montserrat",
flag: "https://flagcdn.com/w320/ms.png",
},
{
code: "+212",
identifier: "Morocco",
flag: "https://flagcdn.com/w320/ma.png",
},
{
code: "+258",
identifier: "Mozambique",
flag: "https://flagcdn.com/w320/mz.png",
},
{
code: "+95",
identifier: "Myanmar",
flag: "https://flagcdn.com/w320/mm.png",
},
{
code: "+264",
identifier: "Namibia",
flag: "https://flagcdn.com/w320/na.png",
},
{
code: "+674",
identifier: "Nauru",
flag: "https://flagcdn.com/w320/nr.png",
},
{
code: "+977",
identifier: "Nepal",
flag: "https://flagcdn.com/w320/np.png",
},
{
code: "+31",
identifier: "Netherlands",
flag: "https://flagcdn.com/w320/nl.png",
},
{
code: "+687",
identifier: "New Caledonia",
flag: "https://flagcdn.com/w320/nc.png",
},
{
code: "+64",
identifier: "New Zealand",
flag: "https://flagcdn.com/w320/nz.png",
},
{
code: "+505",
identifier: "Nicaragua",
flag: "https://flagcdn.com/w320/ni.png",
},
{
code: "+227",
identifier: "Niger",
flag: "https://flagcdn.com/w320/ne.png",
},
{
code: "+683",
identifier: "Niue",
flag: "https://flagcdn.com/w320/nu.png",
},
{
code: "+672",
identifier: "Norfolk Island",
flag: "https://flagcdn.com/w320/nf.png",
},
{
code: "+850",
identifier: "North Korea",
flag: "https://flagcdn.com/w320/kp.png",
},
{
code: "+389",
identifier: "North Macedonia",
flag: "https://flagcdn.com/w320/mk.png",
},
{
code: "+1670",
identifier: "Northern Mariana Islands",
flag: "https://flagcdn.com/w320/mp.png",
},
{
code: "+47",
identifier: "Norway",
flag: "https://flagcdn.com/w320/no.png",
},
{
code: "+968",
identifier: "Oman",
flag: "https://flagcdn.com/w320/om.png",
},
{
code: "+92",
identifier: "Pakistan",
flag: "https://flagcdn.com/w320/pk.png",
},
{
code: "+680",
identifier: "Palau",
flag: "https://flagcdn.com/w320/pw.png",
},
{
code: "+970",
identifier: "Palestine",
flag: "https://flagcdn.com/w320/ps.png",
},
{
code: "+507",
identifier: "Panama",
flag: "https://flagcdn.com/w320/pa.png",
},
{
code: "+675",
identifier: "Papua New Guinea",
flag: "https://flagcdn.com/w320/pg.png",
},
{
code: "+595",
identifier: "Paraguay",
flag: "https://flagcdn.com/w320/py.png",
},
{
code: "+51",
identifier: "Peru",
flag: "https://flagcdn.com/w320/pe.png",
},
{
code: "+63",
identifier: "Philippines",
flag: "https://flagcdn.com/w320/ph.png",
},
{
code: "+64",
identifier: "Pitcairn Islands",
flag: "https://flagcdn.com/w320/pn.png",
},
{
code: "+48",
identifier: "Poland",
flag: "https://flagcdn.com/w320/pl.png",
},
{
code: "+351",
identifier: "Portugal",
flag: "https://flagcdn.com/w320/pt.png",
},
{
code: "+1787,939",
identifier: "Puerto Rico",
flag: "https://flagcdn.com/w320/pr.png",
},
{
code: "+974",
identifier: "Qatar",
flag: "https://flagcdn.com/w320/qa.png",
},
{
code: "+242",
identifier: "Republic of the Congo",
flag: "https://flagcdn.com/w320/cg.png",
},
{
code: "+262",
identifier: "Réunion",
flag: "https://flagcdn.com/w320/re.png",
},
{
code: "+40",
identifier: "Romania",
flag: "https://flagcdn.com/w320/ro.png",
},
{
code: "+7",
identifier: "Russia",
flag: "https://flagcdn.com/w320/ru.png",
},
{
code: "+250",
identifier: "Rwanda",
flag: "https://flagcdn.com/w320/rw.png",
},
{
code: "+590",
identifier: "Saint Barthélemy",
flag: "https://flagcdn.com/w320/bl.png",
},
{
code: "+290",
identifier: "Saint Helena, Ascension and Tristan da Cunha",
flag: "https://flagcdn.com/w320/sh.png",
},
{
code: "+1869",
identifier: "Saint Kitts and Nevis",
flag: "https://flagcdn.com/w320/kn.png",
},
{
code: "+1758",
identifier: "Saint Lucia",
flag: "https://flagcdn.com/w320/lc.png",
},
{
code: "+590",
identifier: "Saint Martin",
flag: "https://flagcdn.com/w320/mf.png",
},
{
code: "+508",
identifier: "Saint Pierre and Miquelon",
flag: "https://flagcdn.com/w320/pm.png",
},
{
code: "+1784",
identifier: "Saint Vincent and the Grenadines",
flag: "https://flagcdn.com/w320/vc.png",
},
{
code: "+685",
identifier: "Samoa",
flag: "https://flagcdn.com/w320/ws.png",
},
{
code: "+378",
identifier: "San Marino",
flag: "https://flagcdn.com/w320/sm.png",
},
{
code: "+239",
identifier: "São Tomé and Príncipe",
flag: "https://flagcdn.com/w320/st.png",
},
{
code: "+966",
identifier: "Saudi Arabia",
flag: "https://flagcdn.com/w320/sa.png",
},
{
code: "+221",
identifier: "Senegal",
flag: "https://flagcdn.com/w320/sn.png",
},
{
code: "+381",
identifier: "Serbia",
flag: "https://flagcdn.com/w320/rs.png",
},
{
code: "+248",
identifier: "Seychelles",
flag: "https://flagcdn.com/w320/sc.png",
},
{
code: "+232",
identifier: "Sierra Leone",
flag: "https://flagcdn.com/w320/sl.png",
},
{
code: "+65",
identifier: "Singapore",
flag: "https://flagcdn.com/w320/sg.png",
},
{
code: "+1721",
identifier: "Sint Maarten",
flag: "https://flagcdn.com/w320/sx.png",
},
{
code: "+421",
identifier: "Slovakia",
flag: "https://flagcdn.com/w320/sk.png",
},
{
code: "+386",
identifier: "Slovenia",
flag: "https://flagcdn.com/w320/si.png",
},
{
code: "+677",
identifier: "Solomon Islands",
flag: "https://flagcdn.com/w320/sb.png",
},
{
code: "+252",
identifier: "Somalia",
flag: "https://flagcdn.com/w320/so.png",
},
{
code: "+27",
identifier: "South Africa",
flag: "https://flagcdn.com/w320/za.png",
},
{
code: "+500",
identifier: "South Georgia",
flag: "https://flagcdn.com/w320/gs.png",
},
{
code: "+82",
identifier: "South Korea",
flag: "https://flagcdn.com/w320/kr.png",
},
{
code: "+211",
identifier: "South Sudan",
flag: "https://flagcdn.com/w320/ss.png",
},
{
code: "+34",
identifier: "Spain",
flag: "https://flagcdn.com/w320/es.png",
},
{
code: "+94",
identifier: "Sri Lanka",
flag: "https://flagcdn.com/w320/lk.png",
},
{
code: "+249",
identifier: "Sudan",
flag: "https://flagcdn.com/w320/sd.png",
},
{
code: "+597",
identifier: "Suriname",
flag: "https://flagcdn.com/w320/sr.png",
},
{
code: "+4779",
identifier: "Svalbard and Jan Mayen",
flag: "https://flagcdn.com/w320/sj.png",
},
{
code: "+46",
identifier: "Sweden",
flag: "https://flagcdn.com/w320/se.png",
},
{
code: "+41",
identifier: "Switzerland",
flag: "https://flagcdn.com/w320/ch.png",
},
{
code: "+963",
identifier: "Syria",
flag: "https://flagcdn.com/w320/sy.png",
},
{
code: "+886",
identifier: "Taiwan",
flag: "https://flagcdn.com/w320/tw.png",
},
{
code: "+992",
identifier: "Tajikistan",
flag: "https://flagcdn.com/w320/tj.png",
},
{
code: "+255",
identifier: "Tanzania",
flag: "https://flagcdn.com/w320/tz.png",
},
{
code: "+66",
identifier: "Thailand",
flag: "https://flagcdn.com/w320/th.png",
},
{
code: "+670",
identifier: "Timor-Leste",
flag: "https://flagcdn.com/w320/tl.png",
},
{
code: "+228",
identifier: "Togo",
flag: "https://flagcdn.com/w320/tg.png",
},
{
code: "+690",
identifier: "Tokelau",
flag: "https://flagcdn.com/w320/tk.png",
},
{
code: "+676",
identifier: "Tonga",
flag: "https://flagcdn.com/w320/to.png",
},
{
code: "+1868",
identifier: "Trinidad and Tobago",
flag: "https://flagcdn.com/w320/tt.png",
},
{
code: "+216",
identifier: "Tunisia",
flag: "https://flagcdn.com/w320/tn.png",
},
{
code: "+90",
identifier: "Turkey",
flag: "https://flagcdn.com/w320/tr.png",
},
{
code: "+993",
identifier: "Turkmenistan",
flag: "https://flagcdn.com/w320/tm.png",
},
{
code: "+1649",
identifier: "Turks and Caicos Islands",
flag: "https://flagcdn.com/w320/tc.png",
},
{
code: "+688",
identifier: "Tuvalu",
flag: "https://flagcdn.com/w320/tv.png",
},
{
code: "+256",
identifier: "Uganda",
flag: "https://flagcdn.com/w320/ug.png",
},
{
code: "+380",
identifier: "Ukraine",
flag: "https://flagcdn.com/w320/ua.png",
},
{
code: "+971",
identifier: "United Arab Emirates",
flag: "https://flagcdn.com/w320/ae.png",
},
{
code: "+44",
identifier: "United Kingdom",
flag: "https://flagcdn.com/w320/gb.png",
},
{
code: "+1",
identifier: "United States",
flag: "https://flagcdn.com/w320/us.png",
},
{
code: "+268",
identifier: "United States Minor Outlying Islands",
flag: "https://flagcdn.com/w320/um.png",
},
{
code: "+1340",
identifier: "United States Virgin Islands",
flag: "https://flagcdn.com/w320/vi.png",
},
{
code: "+598",
identifier: "Uruguay",
flag: "https://flagcdn.com/w320/uy.png",
},
{
code: "+998",
identifier: "Uzbekistan",
flag: "https://flagcdn.com/w320/uz.png",
},
{
code: "+678",
identifier: "Vanuatu",
flag: "https://flagcdn.com/w320/vu.png",
},
{
code: "+3906698,79",
identifier: "Vatican City",
flag: "https://flagcdn.com/w320/va.png",
},
{
code: "+58",
identifier: "Venezuela",
flag: "https://flagcdn.com/w320/ve.png",
},
{
code: "+84",
identifier: "Vietnam",
flag: "https://flagcdn.com/w320/vn.png",
},
{
code: "+681",
identifier: "Wallis and Futuna",
flag: "https://flagcdn.com/w320/wf.png",
},
{
code: "+967",
identifier: "Yemen",
flag: "https://flagcdn.com/w320/ye.png",
},
{
code: "+260",
identifier: "Zambia",
flag: "https://flagcdn.com/w320/zm.png",
},
{
code: "+263",
identifier: "Zimbabwe",
flag: "https://flagcdn.com/w320/zw.png",
},
];
let selectedCountry = countries[0];
const selectOptions = [
"Document",
"Document",
"Document",
"Document",
"Document",
"Document",
];
//element variables
const selectedCountryElement =
document.querySelector(".selected-country");
const selectedCountryCode = document.querySelector(
"#selected-country-code"
);
const selectedCountryFlag = document.querySelector(
"#selected-country-flag"
);
const countryOptions = document.querySelector(".country-options");
const countryOptionsWrapper = document.querySelector(
".country-options-wrapper"
);
const documentType = document.querySelector(".document-type");
const selectedDocument = document.querySelector(".selected-document");
const documentOptions = document.querySelector(".document-options");
const phoneInput = document.querySelector("#phone-input");
const searchInput = document.querySelector(".search-input");
const formElement = document.querySelector('form');
//set default selected country
if(selectedCountryFlag) selectedCountryFlag.src = selectedCountry.flag;
if(selectedCountryCode) selectedCountryCode.textContent = selectedCountry.code;
let previouslySelectedCountry = null;
function layoutCoutries(countries) {
countries.forEach((country) => {
const optionElement = document.createElement("li");
optionElement.classList.add("country-option-li");
const optionFlag = document.createElement("img");
optionFlag.src = country.flag;
optionFlag.alt = "flag";
optionFlag.style.width = "24px";
optionFlag.style.height = "18px";
optionFlag.style.borderRadius = "4px";
const optionCountry = document.createElement("span");
optionElement.addEventListener("click", (e) => {
selectedCountry = country;
selectedCountryFlag.src = selectedCountry.flag;
selectedCountryCode.textContent = selectedCountry.code;
Array.from(countryOptions.children)[0].classList.remove(
"selected"
);
if (previouslySelectedCountry) {
previouslySelectedCountry.classList.remove("selected");
}
previouslySelectedCountry = optionElement;
optionElement.classList.toggle("selected");
});
optionCountry.textContent = country.identifier;
optionElement.append(optionCountry, optionFlag);
if (selectedCountry.identifier === country.identifier) {
optionElement.classList.add("selected");
}
countryOptions?.append(optionElement);
});
}
layoutCoutries(countries);
let previouslySelectedDoc = null;
selectOptions.forEach((option, index) => {
const optionElement = document.createElement("li");
optionElement.classList.add("option");
optionElement.textContent = `${option} ${index + 1}`;
optionElement.addEventListener("click", () => {
selectedDocument.textContent = `${option} ${index + 1}`;
if (previouslySelectedDoc) {
previouslySelectedDoc.classList.remove("selected");
}
previouslySelectedDoc = optionElement;
optionElement.classList.toggle("selected");
});
documentOptions?.append(optionElement);
});
//event listeners
phoneInput?.addEventListener("input", () => {
const value = phoneInput?.value;
const maxLength = 10;
if (value.length >= maxLength) {
phoneInput.value = value.slice(0, maxLength);
}
});
selectedCountryElement?.addEventListener("click", () => {
console.log('clicked');
countryOptionsWrapper?.classList.toggle("show");
});
documentType?.addEventListener("click", () => {
documentOptions.classList.toggle("show");
});
searchInput?.addEventListener("input", () => {
const value = searchInput.value;
const filteredCountries = countries.filter((country) =>
country.identifier.toLowerCase().includes(value.toLowerCase())
);
while (countryOptions?.firstChild) {
// Remove the first child element
countryOptions.removeChild(countryOptions.firstChild);
}
layoutCoutries(filteredCountries);
});
window.addEventListener("click", (event) => {
const shouldNotRemoveCountryOptionsShowClass =
Array.from(event.target.parentElement.classList).includes(
"selected-country"
) ||
Array.from(event.target.classList).includes("selected-country") ||
Array.from(event.target.classList).includes("search-input") ||
Array.from(event.target.parentElement.classList).includes(
"search-input"
);
const shouldNotRemoveDocumentOptionsShowClass =
Array.from(event.target.parentElement.classList).includes(
"document-type"
) || Array.from(event.target.classList).includes("document-type");
if (!shouldNotRemoveCountryOptionsShowClass) {
countryOptionsWrapper.classList.remove("show");
// while (countryOptions.firstChild) {
// Remove the first child element
// countryOptions.removeChild(countryOptions.firstChild);
//}
// layoutCoutries(countries);
//reset search Input
// searchInput.value = "";
}
if (!shouldNotRemoveDocumentOptionsShowClass) {
documentOptions?.classList.remove("show");
}
});
//Submit event
formElement?.addEventListener('submit', (e) => {
e.preventDefault();
})
});
Raw
serlz-form.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet"
/>
<script src="./script.js">
</script>
</head>
<body>
<main>
<form action="">
<fieldset>
<label for="BVN">Bank Verification Number</label>
<input class="input" type="number" name="BVN" />
</fieldset>
<fieldset>
<label for="BVN">Document Type</label>
<div class="input document-type" type="text">
<ul class="document-options"></ul>
<span class="selected-document" style="font-weight: 600"
>Choose Document</span
>
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.6004 7.46094L11.1671 12.8943C10.5254 13.5359 9.47539 13.5359 8.83372 12.8943L3.40039 7.46094"
stroke="#828282"
stroke-width="1.25"
stroke-miterlimit="10"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
</fieldset>
<fieldset class="">
<label for="phone-number">Phone number</label>
<div class="input phone-number">
<div class="country-options-wrapper">
<input
class="input search-input"
type="text"
name="search"
placeholder="Enter country name"
/>
<ul class="country-options"></ul>
</div>
<div class="selected-country">
<img
src="./flag.svg"
alt="flag"
id="selected-country-flag"
style="width: 24px; height: 18px; border-radius: 4px"
/>
<span style="font-weight: 600" id="selected-country-code"
>+234</span
>
</div>
<input
class="hidden-input"
type="number"
name="phone-number"
id="phone-input"
/>
</div>
</fieldset>
<fieldset class="title">
<label for="title" style="font-weight: 600; color: #282828"
>Title goes here for instance</label
>
<div class="input title-input">
<div style="position: relative; width: 20px; height: 20px">
<input
class="hidden-input title-hidden-input"
type="radio"
name="title"
/>
<div
class="outer-circle title-outer-circle"
style="position: absolute"
>
<div class="title-inner-circle">.</div>
</div>
</div>
<label for="title">Instant</label>
</div>
<div class="input title-input">
<input
class="hidden-input title-hidden-input"
type="radio"
name="title"
/>
<div style="position: relative; width: 20px; height: 20px">
<input
class="hidden-input title-hidden-input"
type="radio"
name="title"
/>
<div
class="outer-circle title-outer-circle"
style="position: absolute"
>
<div class="title-inner-circle">.</div>
</div>
</div>
<label for="title">Automate</label>
</div>
</fieldset>
<fieldset class="title-units">
<label for="title" style="font-weight: 600; color: #282828"
>Title goes here for instance</label
>
<div>
<div class="input">
<div style="position: relative; width: 20px; height: 20px">
<input class="hidden-input" type="checkbox" name="units" />
<div class="outer-circle" style="position: absolute">
<svg
width="12"
height="10"
viewBox="0 0 12 10"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M11.3167 0.904462C11.5076 1.0794 11.5205 1.37591 11.3455 1.56675L4.47054 9.06675C4.38415 9.161 4.26301 9.21587 4.13518 9.21864C4.00736 9.22142 3.88395 9.17187 3.79354 9.08146L0.668544 5.95646C0.485485 5.7734 0.485485 5.4766 0.668544 5.29355C0.851602 5.11049 1.1484 5.11049 1.33146 5.29355L4.11028 8.07237L10.6545 0.933257C10.8294 0.74242 11.1259 0.729528 11.3167 0.904462Z"
fill="white"
stroke="white"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
</div>
<label for="units">2 units - ₦50,000</label>
</div>
<div class="input">
<div style="position: relative; width: 20px; height: 20px">
<input class="hidden-input" type="checkbox" name="units" />
<div class="outer-circle" style="position: absolute">
<svg
width="12"
height="10"
viewBox="0 0 12 10"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M11.3167 0.904462C11.5076 1.0794 11.5205 1.37591 11.3455 1.56675L4.47054 9.06675C4.38415 9.161 4.26301 9.21587 4.13518 9.21864C4.00736 9.22142 3.88395 9.17187 3.79354 9.08146L0.668544 5.95646C0.485485 5.7734 0.485485 5.4766 0.668544 5.29355C0.851602 5.11049 1.1484 5.11049 1.33146 5.29355L4.11028 8.07237L10.6545 0.933257C10.8294 0.74242 11.1259 0.729528 11.3167 0.904462Z"
fill="white"
stroke="white"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
</div>
<label for="units">4 units - ₦100,000</label>
</div>
</div>
</fieldset>
<fieldset class="header">
<label for="header" style="font-weight: 600">Header</label>
<textarea
name="header"
id="header"
placeholder="Enter text here"
></textarea>
</fieldset>
<div class="submit-btn-wrapper">
<button type="submit" class="submit-btn"> Submit</button>
</div>
</form>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment