Need help on the Dynamic Lists section of course

BEGINNERS & HELP
#1

Hello, It looks like I have everything correct here but the inputs are not working properly. What am I doing wrong here?

Website

My favorite fruits

Add fruit
#2

//

Website

My favorite fruits

Add fruit //
#3

hey,

we need to see your code in order to help you out.

Greetz

#4

Hello,

Im having trouble with this dynamic list, its not showing the LIST to html. Ive ran the code and watched the lesson a few times. Could you please assist me with this matter? Thank you.

code as follows;

This Is Great Website

My favorite fruits

1 Like
#5

Hey @Javier_Flores, hope you are ok.

Could you please share your code? so we can help you review it.

You can use the “Preformatted Text” Button to encapsulate any kind of code you want to show.


function formatText(){

let words = “I’m a preformatted Text box, Please use me wisely!”

}

prefromatted_text-animated

preformatted text
preformatted text957Ă—174 11.9 KB

Carlos Z.

#6

Hey @Javier_Flores, hope you are ok.

Could you please share your code? so we can help you review it.

You can use the “Preformatted Text” Button to encapsulate any kind of code you want to show.


function formatText(){

let words = “I’m a preformatted Text box, Please use me wisely!”

}

prefromatted_text-animated

preformatted text
preformatted text957Ă—174 11.9 KB

Carlos Z.

#7

Here is the copy of the code, thank btw for letting me know how to do that.
please advise.

type or paste code here
```<html>

<head>
  <title> This Is Great Website</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


</head>

<body>

  <h1>My favorite fruits</h1>
  <ol id="fruitlist">
  </ol>

  <input id ="fruitTextInput" placeholder="Write fruit" type="text"/>
  <button id="addFruitButton">Add fruit</button>





<script>

  var fruits = ["Apple", "Orange", "Bannana", " Pineapple"];

  function redrawlist(){
  var list = $("#fruitList");
  list.html();



  $.each(fruits,function(index,value){

    $("<li/>").text(value).appendTo(fruitlist);

  });
}
      redrawlist();

    $("#addFruitButton").click(function(){
      var fruitText = $("#fruitTextInput").val();
      fruits.push(fruitText);
      console.log(fruits);

      redrawList();

    });


</script>



</body>
#8 


<html>

<head>
  <title> This Is Great Website</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


</head>

<body>




  <h1>My favorite fruits</h1>
  <ol id="fruitlist">
  </ol>

  <input id="fruitTextInput" placeholder="Write fruit" type="text"/>
  <button id="addFruitButton">Add fruit</button>


<script>

var fruits = [{name:"Apple", color:"Green", weight:10},
              {name:"Orange", color:"Orange", weight:20},
              {name:"Banana", color:"Yellow", weight: 30}];

  function redrawList(){
  var list = $("#fruitList");
  list.html("");

  $.each(fruits,function(index,value){
    console.log(value);

  var listItems =  $("<li/>").text("fruit name: "+value.name+" Fruit color: "+valu.color+" fruit weight:"+valu.weight+").appendTo(list);


   });
 }

  redrawList();

  $("#addFruitButton").click(function(){
    var fruitText = $("#fruitTextInput").val();
    fruits.push(fruitText);
    console.log(fruits);


    redrawList();


  });



</script>



</body>

</html>
1 Like
#9

Hey @Javier_Flores.

you are going far away of what the exercises ask.

  var listItems =  $("<li/>").text("fruit name: "+value.name+" Fruit color: "+valu.color+" fruit weight:"+valu.weight+").appendTo(list);

you have some syntax error on this variable, but this is not the way to use jquery code properly. Try to do the exercise simply has possible so you can understand what are you trying to get.

If you have any more questions, please let us know so we can help you! :slight_smile:

Carlos Z.