Created
January 22, 2022 22:04
-
-
Save Yousif-FJ/52d1ce299e3a1d7e3baa6adc4a9199e2 to your computer and use it in GitHub Desktop.
Q/In the last FIFA World Cup , which was held in Russia in 2018, there are only 4 teams from 32 others qualified to the semi-final and after they played this stage and final stage, these 4 teams took ordered as following: (France: 1st (Champions), Croatia: 2nd, Belgium: 3rd, England: 4th). Write a complete HTML and JavaScript code to input only …
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Document</title> | |
| <style> | |
| </style> | |
| </head> | |
| <body> | |
| <h1>FIFA World Cup Classification</h1> | |
| <table border="1"> | |
| <caption>Team Classsification</caption> | |
| <tr> | |
| <th>No.</th> | |
| <th>Team</th> | |
| <th>Order</th> | |
| </tr> | |
| <tr> | |
| <td>1</td> | |
| <td id="tb-1-team"></td> | |
| <td id="tb-1-order"></td> | |
| </tr> | |
| <tr> | |
| <td>2</td> | |
| <td id="tb-2-team"></td> | |
| <td id="tb-2-order"></td> | |
| </tr> | |
| <tr> | |
| <td>3</td> | |
| <td id="tb-3-team"></td> | |
| <td id="tb-3-order"></td> | |
| </tr> | |
| <tr> | |
| <td>4</td> | |
| <td id="tb-4-team"></td> | |
| <td id="tb-4-order"></td> | |
| </tr> | |
| </table> | |
| <script> | |
| function UpdateTableData(columnNumber, team, placement){ | |
| const tableTeam = document.getElementById(`tb-${columnNumber}-team`); | |
| const tableOrder = document.getElementById(`tb-${columnNumber}-order`); | |
| tableTeam.innerHTML = team; | |
| tableOrder.innerHTML = placement; | |
| } | |
| const WinnerTeams = ["France","Croatia","Belgium", "England"]; | |
| for (let index = 1; index < 5; index++) { | |
| const input = window.prompt(`Enter team number # ${index}`); | |
| let indexOfTeam = WinnerTeams.indexOf(input); | |
| if (indexOfTeam == -1) { | |
| UpdateTableData(index, input, "Not from the top 4"); | |
| } | |
| else{ | |
| UpdateTableData(index, input, indexOfTeam+1); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment