Question

我是编程方面的新手，我正在尝试解决在线网站上的一些问题。这些问题之一使我停了下来。这是HTML代码。我不知道如何更改此代码以使应用程序运行。这是下面的代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>Mini App</title>

    <style>

      div.user-photo {
        margin: 1em auto;
      }

    </style>
  </head>
  <body>

    <script>
      const fetchAndDisplayUsers = () => {
        users.push({
          age: 40,
          weight: 75,
          height: 6,
          country: 'Nigeria',
          name: 'Charles Odili',
          id: 'dfhb454768DghtF'
        });

        displayUsers(users);
      };

      const startApp = () => {

      };

      startApp();
    </script>
  </body>
</html>

最终结果是构建BMEye（一个简单的BMI计算器应用程序）

Answer 1

这应该给您带来先机

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport"
      content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>Mini App</title>

    <style>
      
       div.user-photo {
        margin: 1em auto;
      }
      
      body {
        background: white;
      }
      
      .select {
        margin-bottom: 2.5em;
      }
      
      .user-photo {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        overflow: hidden;
      }
      
      .details {
        color: white;
        background-color: #6200ee;
        font-size: 1.3em;
        margin-top: 4em;
        padding: 0.5em 1em 0.5em 1em;
        border-radius: 10px;
      }
      
      .details p {
        margin: 0.3em;
      }
      
      #outcome {
        position: absolute;
        right: 2.2em;
        bottom: 6.5em;
        width: 100px;
        text-align: center;
      }
      
      #outcome h5 {
        padding: 1em;
        background: white;
        border-radius: 10%;
        margin: 0;
      }
      
      #outcome p {
        height: 40px;
        color: white;
        border-bottom: 5px solid white;
        font-size: 2em;
        margin: 0;
        padding: 0.5em 0 0.5em 0;
      }
      
      #oracle {
        margin-top: 2.5em;
        border: 1px solid;
        width: 100%;
      }
      
    </style>
  </head>
  <body>
    <button id="filter-query" class="mdc-icon-button material-icons">filter_list</button>
    <div class="select">
      <select class="select-text">
        <option selected="selected" disabled="disabled">Select User</option>
      </select>
    </div>

    <div class="user-photo">
      <img src="https://via.placeholder.com/150"alt="User Photo">
    </div>

    <div class="details mdc-elevation--z3">
      <p>
        <span class="prop" data-age="Age:">19</span>
        <span class="value" data-age-value></span>
      </p>
      <p>
        <span class="prop" data-height="Height:">9</span>
        <span class="value" data-height-value></span>
      </p>
      <p>
        <span class="prop" data-weight="Weight:">90</span>
        <span class="value" data-weight-value></span>
      </p>
      <p>
        <span class="prop" data-country="Country:">Nigeria</span>
        <span class="value" data-country-value></span>
      </p>

      <p>
        <span class="prop" data-gender="Gender:">Male</span>
        <span class="value" data-gender-value></span>
      </p>


    </div>
    <button id="oracle" class="mdc-button">Calculate BMI</button>

    <div id="outcome">
      <h5 class="mdc-typography--headline5">BMI</h5>
      <p></p>
    </div>
    <script>
      
      const users = [];
      
      const computeBMI = ({ weight, height, country }) => {
        
        let countries = ['Chad', 'Sierra Leone', 'Mali', 'Gambia', 'Uganda', 'Ghana', 'Senegal', 'Somalia', 'Ivory Coast', 'Isreal'];
        
        let bmi = weight/Math.pow((height * 0.3048), 2);
        
        if(countries.find(count => count === country)) {
          return (bmi * 0.82);
        }
        
        return bmi
         
      }
      
      const getSelectedUser = (userId) => {
         return users.find(({ id }) => id === userId);
      }
      
      const displaySelectedUser = ({ target }) => {
        let user = getSelectedUser(target.value);

        let properties = Object.keys(user);
        properties.forEach(prop => {
          let element = document.querySelector(`span[data-${prop}-value]`);
          if(element)
          {
            element.textContent = user[prop]
          }
        });
      }
      
      const letsCalculateBMI = () => {
        let selected = document.querySelector("select").value;
        
        let user = getSelectedUser(selected);
        
        let bmi = computeBMI(user);
        
        document.querySelector("#outcome").textContent = bmi
      }
      
      const powerupTheUI = () => {
        document.querySelector("select").addEventListener('change', displaySelectedUser);
        document.querySelector("#oracle").addEventListener('click', letsCalculateBMI)
      }
      
      
      const displayUsers = (users) => {
        users.forEach (user => {
          
          let newUser = document.createElement("option");
          
          newUser.value = user.id;
          
          newUser.textContent = user.name;
                    
          document.querySelector("select").appendChild(newUser);
          
        });
      }
      const fetchAndDisplayUsers = () => {
        users.push({
          age: 40,
          weight: 75,
          height: 6,
          country: 'Isreal',
          name: 'Charles Odili',
          id: 'dfhb454768DghtF'
        });
        
        users.push({
          age: 20,
          weight: 89,
          height: 8,
          country: 'Nigeria',
          name: 'Emeka Mamah',
          id: 'dfhb454768Dg'
        });
        
        users.push({
          age: 20,
          weight: 89,
          height: 8,
          country: 'Chad',
          name: 'Sixtus Iwuchukwu',
          id: 'dfhb454768BK'
        });

        displayUsers(users);
      };
      
      
      
      const startApp = () => {
        powerupTheUI()
        fetchAndDisplayUsers()
        
      };

      startApp();

    </script>
  </body>
</html>

Answer 2

这是您要寻找的答案，实际上我一直在尝试解决这个问题，问题是，如果您不将BMI结果答案的格式设置为小数点后1位，它将无法正常工作，因此以下是工作代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>Mini App</title>

    <style>
      body {
        background-color: white;
      }
      div.user-photo {
        margin: 1em auto;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        overflow: hidden;
      }
      .select {
        margin-bottom: 2.5em;
      }
      .details {
        color: white;
        background-color: #6200ee;
        font-size: 1.3em;
        margin-top: 4em;
        padding: 0.5em 1em;
        border-radius: 10px;
      }
      .details p {
        margin: 0.3em;
      }
      #outcome {
        position: absolute;
        right: 2.2em;
        bottom: 6.5em;
        width: 100px;
        text-align: center;
      }
      #outcome h3 {
        padding: 1em;
        background-color: white;
        border-radius: 10%;
        margin: 0;
      }
      #outcome p {
        height: 40px;
        color: white;
        border-bottom: 5px solid white;
        font-size: 2em;
        padding: 0.5em 0;
        margin: 0;
      }
      #oracle {
        margin-top: 2.5em;
        border: 1px solid #333;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <button class="mdc-icon-button material-icons" id="filter-query">
      filter_list
    </button>
    <div class="select">
      <select class="select-text" id="select-text">
        <option selected disabled value="0">Select user</option>
      </select>
    </div>
    <div class="user-photo">
      <img
        src="https://via.placeholder.com/150

C/O https://placeholder.com/"
        alt="User Photo"
      />
    </div>
    <div class="details mdc-elevation--z3">
      <p>
        <span class="prop" data-age="Age:">Age</span
        ><span class="value" data-age-value="">&nbsp;40</span>
      </p>
      <p>
        <span class="prop" data-height="Height:">Height</span
        ><span class="value" data-height-value="">&nbsp; 6</span>
      </p>
      <p>
        <span class="prop" data-weight="Weight:">Weight</span
        ><span class="value" data-weight-value="">&nbsp;70</span>
      </p>
      <p>
        <span class="prop" data-gender="Gender:">Gender</span
        ><span class="value" data-gender-value="">&nbsp;F</span>
      </p>
      <p>
        <span class="prop" data-country="Country:">Country</span
        ><span class="value" data-country-value="">&nbsp;Rwanda</span>
      </p>
    </div>
    <button id="oracle" class="mdc-button">
      Calculate BMI
    </button>
    <div id="outcome">
      <h3 class="mdc-typography--headline5">BMI</h3>
      <p></p>
    </div>
    <script>
      const users = [];
      const countries = [
        'Chad',
        'Sierra Leone',
        'Mali',
        'Gambia',
        'Uganda',
        'Ghana',
        'Senegal',
        'Somalia',
        'Ivory Coast',
        'Isreal',
      ];

      const userList = document.querySelector('#select-text');
      const button = document.querySelector('#oracle');
      const displayUsers = (users) => {
        users.forEach((user) => {
          const optionElement = document.createElement('option');
          optionElement.textContent = `${user.name}`;
          optionElement.value = `${user.id}`;
          userList.appendChild(optionElement);
        });
      };
      const fetchAndDisplayUsers = () => {
        const api = 'https://randomapi.com/api/y1lfp11q?key=LEIX-GF3O-AG7I-6J84';
   		fetch(api).then(result => result.json()).then(({ results }) => {
          const [ user ] = results;
          users.push(user);
          displayUsers([user]);
        });
        users.push({
          age: 40,
          weight: 75,
          height: 6,
          country: 'Nigeria',
          name: 'Charles Odili',
          id: 'dfhb454768DghtF',
        });
        users.push({
          age: 23,
          weight: 70,
          height: 6.5,
          country: 'Rwanda',
          name: 'Ingabire Debolah',
          id: 'dm9dtaId',
        });
        displayUsers(users);
      };
      const getSelectedUser = (userId) =>
        users.find((user) => user.id === userId);

      const computeBMI = ({ weight, height, country }) => {
        const h = height * 0.3048;
        let bmi = weight / (h * h);
        for (let i = 0; i< countries.length; i++) {
          if ( countries[i].toLowerCase() === country.toLowerCase()) {
          	bmi = bmi * 0.82;
          }
        }
        return bmi.toFixed(1);
      };
      const letsCalculateBMI = () => {
        const userId = document.querySelector('#select-text').value;
        const bmiResult = document.querySelector('#outcome>p');
        const user = getSelectedUser(userId);
        const bmi = computeBMI(user);
        bmiResult.textContent = `${bmi}`;
      };

      const displaySelectedUser = ({ target }) => {
        const user = getSelectedUser(target.value);
        const properties = Object.keys(user);
        properties.forEach((property) => {
          const span = document.querySelector(
            `.value[data-${property}-value=""]`
          );
          if (span) {
            span.textContent = ` : ${user[property]}`;
          }
        });
      };
      const powerupTheUI = () => {
        button.addEventListener('click', letsCalculateBMI);
        userList.addEventListener('change', displaySelectedUser);
      };
      const startApp = () => {
        powerupTheUI();
        fetchAndDisplayUsers();
      };
      startApp();
    </script>
  </body>
</html>

Answer 3

Private Sub QuestionBox_TextChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles QuestionBox.TextChanged
    Dim Number = QListBoxLoad.SelectedIndex
    Dim a As String : a = AnswerLoadFile.Lines(Number)
    Debug.Print(indexThroughString(a, 2))
    Dim b As String : b = AnswerLoadFile.Lines(Number)
    Debug.Print(indexThroughString(b, 3))
    Dim c As String : c = AnswerLoadFile.Lines(Number)
    Debug.Print(indexThroughString(c, 4))
    Dim d As String : d = AnswerLoadFile.Lines(Number)
    Debug.Print(indexThroughString(d, 5))
    AnswerA.Text = (indexThroughString(a, 2))
    AnswerB.Text = (indexThroughString(b, 3))
    AnswerC.Text = (indexThroughString(c, 4))
    AnswerD.Text = (indexThroughString(d, 5))
End Sub

Answer 4

由于我从这里的人们那里得到了答案，我最终接受了挑战。通过测试时，我需要做一些更改：我必须将select元素禁用并默认选中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>Mini App</title>

    <style>
        body {
            background-color: white;
        }
        div.user-photo {
            margin: 1em auto;
            width: 150px;
            height: 150px;
            border-radius: 50%;
            overflow: hidden;
        }
        .select {
            margin-bottom: 2.5em;
        }
        .details {
            color: white;
            background-color: #6200ee;
            font-size: 1.3em;
            margin-top: 4em;
            padding: 0.5em 1em;
            border-radius: 10px;
        }
        .details p {
            margin: 0.3em;
        }
        #outcome {
            position: absolute;
            right: 2.2em;
            bottom: 6.5em;
            width: 100px;
            text-align: center;
        }
        #outcome h3 {
            padding: 1em;
            background-color: white;
            border-radius: 10%;
            margin: 0;
        }
        #outcome p {
            height: 40px;
            color: white;
            border-bottom: 5px solid white;
            font-size: 2em;
            margin: 0;
            padding: 0.5em 0;
        }
        #oracle {
            margin-top: 2.5em;
            border: 1px solid #333;
            width: 100%;
        }
    </style>
</head>
<body>
<button class="mdc-icon-button material-icons" id="filter-query">filter_list</button>
<div class="select">
    <select class="select-text" id="select-text">
        <option selected = "true" disabled ="disabled">Select User</option>
    </select>
</div>
<div class= "user-photo">
    <img
            src = "https://via.placeholder.com/150

C/O https://placeholder.com/"
            alt="User Photo"
    />
</div>
<div class= "details mdc-elevation--z3">
    <p>
        <span class="prop" data-age="Age :">Age </span
        ><span class="value" data-age-value=""> 40 </span>
    </p>
    <p>
       <span class="prop" data-height="Height :">Height </span
       ><span class="value" data-height-value=""> 6 </span>
    </p>
    <p>
        <span class="prop" data-weight="Weight :">Weight </span
        ><span class="value" data-weight-value=""> 70 </span>
    </p>
    <p>
        <span class="prop" data-country="Country :">Country </span
        ><span class="value" data-country-value=""> Rwanda </span>
    </p>
    <p>
       <span class="prop" data-gender="Gender :">Gender </span
       ><span class="value" data-gender-value=""> F </span>
    </p>
</div>
<button id="oracle" class="mdc-button">
    Calculate BMI
</button>
<div id="outcome">
    <h3 class= "mdc-typography--headline5">BMI</h3>
    <p></p>
</div>
<script>
    const users = [];
    const countries = [
        'Chad',
        'Sierra Leone',
        'Mali',
        'Gambia',
        'Uganda',
        'Ghana',
        'Senegal',
        'Somalia',
        'Ivory Coast',
        'Isreal'
    ];

    const userList = document.querySelector('#select-text');
    const button = document.querySelector('#oracle');
    const displayUsers = (users) => {
        users.forEach((user) => {
            const optionElement = document.createElement('option');
            optionElement.textContent = `${user.name}`;
            optionElement.value = `${user.id}`;
            userList.appendChild(optionElement);
        });
    };
    const fetchAndDisplayUsers = () => {
        const api = 'https://randomapi.com/api/y1lfp11q?key=LEIX-GF3O-AG7I-6J84';
        fetch(api).then(result => result.json()).then (({ results}) => {
            const [ user ] = results;
            users.push(user);
            displayUsers([user]);
        });
        users.push({
            age: 40,
            weight: 75,
            height: 6,
            country: 'Nigeria',
            name: 'Charles Odili',
            id: 'dfhb454768DghtF'
        });
        users.push({
            age: 23,
            weight: 70,
            height: 6.5,
            country: 'Rwanda',
            name: 'Ingabire Deborah',
            id: 'dm9dtald'
        });
        displayUsers(users);
    };
    const getSelectedUser = (userId) =>
        users.find((user) => user.id === userId);

    const computeBMI = ({ weight, height, country }) =>  {
        const h = height * 0.3048;
        let bmi = weight / (h * h);
        for (let i = 0; i< countries.length; i++) {
            if ( countries[i].toLowerCase() === country.toLowerCase()) {
                bmi = bmi * 0.82;
            }
        }
        return bmi.toFixed(1);
    };
    const letsCalculateBMI = () => {
        const userId = document.querySelector('#select-text').value;
        const bmiResult = document.querySelector('#outcome>p');
        const user = getSelectedUser(userId);
        const bmi = computeBMI(user);
        bmiResult.textContent = `${bmi}`;
    };

    const displaySelectedUser = ({ target } ) => {
        const user = getSelectedUser(target.value);
        const properties = Object.keys(user);
        properties.forEach((property) => {
            const span = document.querySelector(
                `.value[data-${property}-value=""]`
            );
            if (span) {
                span.textContent = ` : ${user[property]}`;
            }
        });
    };
    const powerupTheUI = () => {
        button.addEventListener('click', letsCalculateBMI);
        userList.addEventListener('change', displaySelectedUser);
    };
    const startApp = () => {
        powerupTheUI();
        fetchAndDisplayUsers();
    };
    startApp();
</script>
</body>
</html>

如何更改此代码以解决Andela Homestudy Assessment挑战？

4 个答案: