Javascript code that DISPLAYS the radio button value in a text box that also checks for the drop down value and displays a certain array value depending on the radio value choosen for the drop down se

Javascript code that DISPLAYS the radio button value in a text box that also checks for the drop down value and displays a certain array value depending on the radio value choosen for the drop down se
Webpage Layout Week no 3 9/6/2021 Cities SD SF SJ Year 2000 2020 2021 1,386,932 SUBMIT ============================================================================================================== Instructions: 1. Create a html form with the selection option of Cities (dropdown list) 2. Display the selected City Name 3. Select the Year (radio buttons) 3. Based on the selected year, display the corresponding Population value. (Refer to the table data below) 4. Follow exactly the background colors. Note: In the JavaScript code, apply either one of the following applicable control statements: (If/else, switch, for loop, while or do while loop) Data Cities 2000 2020 2021 SD 1,110,549 1,386,932 1,427,720 SJ 8,949,943 1,013,240 1,109,343 SF 776,733 873,965 883,255 SAC 407,018 524,943 525,398 SB 184,401 222,101 224,706 LA 3,694,820 3,898,747 3,983,540 San Jose Assignment-03 Control Structures State of California Cities Population Name San Diego Population Population Name San Diego San Francisco Sacramento San Bernardino Los Angeles Op Opt Op 1. HTML file – yourname_Assignment_03.html 2. CSS file – yourname_Assignment_03.css 3. JavaScript file – yourname_Assignment_03.js Upload in BB Assignments content area the following files: ==============================================================================================================
Javascript code that DISPLAYS the radio button value in a text box that also checks for the drop down value and displays a certain array value depending on the radio value choosen for the drop down se
body{ background-color: #d9f2d9; margin-top: 50px; font-family: Arial, Helvetica, sans-serif button{ margin-top: 20px; margin-left: 210px; border: 3px solid black; background-color: antiquewhite; .assign{ text-align: center; border: 2px solid black; width: 250px; margin: auto; background-color: #ffcc33; font-size: 20px; .cs{ text-align: center; border: 2px solid black; width: 250px; margin: auto; background-color: #ffeecc; font-size: 18px; .sc{ text-align: center; border: 2px solid black; width: 250px; margin: auto; border-bottom: none; background-color: #ffccb3; font-size: 20px; .cp{ text-align: center; border: 2px solid black; width: 250px; margin: auto; border-top: none; background-color: #ffccb3; font-size: 20px; .fpop{ margin: auto; width: 450px; .tCities{ border-spacing: 1em; .cname{ background-color: lightblue; border: 3px solid black; width: 270px; font-weight: normal; font-size: 20px; .popyr{ float: right; margin-right: 200px; border-collapse: collapse; .popnum{ margin-top: 20px; margin-left: 160px; border-collapse: collapse; width: 270px; .city{ background-color: lightblue; border: 3px solid black; width: 75px; font-size: 15px; .cn{ border: 2px solid black; background-color: #ffcc33; padding: 2px; option{ background-color: #d9f2d9; border: 2px solid black; border-color: black; .yr{ border: 3px solid black; background-color: red; text-align: center; width: 80px; .pop, .popnumber{ border: 3px solid black; text-align: center; .pop{ background-color: #4d9900; width: 140px; font-size: 20px; .popnumber{ background-color: #ffeecc; width: 100px; .rb{ padding-right: 15px; .dcn{ border: none; background-color: transparent; appearance: none; width: 75px; outline: none; #displaycity{ background-color: #ffdf80; border: 3px solid black; width: 270px; text-align: center; #rb_years{ text-align: center; margin-top: 45px; margin-left: 100px; border-collapse: collapse; #yr_00{ border: 3px solid black; border-bottom: 2px solid black; padding-top: 2px; padding-left: 27px; padding-right: 25px; padding-bottom: 10px; #yr_20{ border: 3px solid black; border-top: 2px solid black; border-bottom: 1px solid black; background-color: #4d9900; padding-top: 2px; padding-left: 27px; padding-right: 25px; padding-bottom: 3px; #yr_21{ border: 3px solid black; border-top: 1px solid black; padding-top: 2px; padding-left: 27px; padding-right: 25px; padding-bottom: 3px; #pop_num{ background-color: transparent; text-align: center; border: transparent;
Javascript code that DISPLAYS the radio button value in a text box that also checks for the drop down value and displays a certain array value depending on the radio value choosen for the drop down se

Assignment-03

Control Structures

State of California

Cities Population

SUBMIT
Javascript code that DISPLAYS the radio button value in a text box that also checks for the drop down value and displays a certain array value depending on the radio value choosen for the drop down se
function Dropcity() { var select = document.getElementById(‘dropcity’); var option = select.options[select.selectedIndex]; document.getElementById(‘displaycity’).value = option.value; document.getElementById(‘value’).value = option.text; /* function below is the if/else statement section*/ function Popnums() var checked_year = document.querySelector(‘input[name=”year”]:checked’); if(checked_year != null){ document.getElementById(‘pop_num’).value==option.value; } else { document.forms[0].elements[‘year’].value; }