Dynamic List - User Adds Elements

Javascript Programming
#1

Hi everyone,

In this exercise https://academy.ivanontech.com/products/javascript-programming-for-blockchain-developers/categories/1708400/posts/5734443, Ivan added a redrawList() function. I’m wondering if it is necessary. The way I have come to solve the exercise was somewhat different.
Here is my solution:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Ordered list assignment</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  </head>
  <body>
    <h1>My favourite fruits</h1>
    <ol id="myList">

    </ol>                   
    <input type="text" id="textBox" onfocus="this.value=''" placeholder="Enter a fruit..."> //here, I was looking for a solution to be able avoid clearing the text input box manually. I found onfocus will do the job when we click on the box.
    <button type="button" id="btn1" name="button">Add to list</button>
    <script>
      let fruits = [];
      let list = $("#myList");
      $("#btn1").click(function(){
        let item = $("#textBox").val();
        if(fruits.includes(item)){   //this is to avoid adding the same fruit to the list
          alert("Item is already on list, please enter a different fruit!")
        }else{
          fruits.push(item);
          console.log(fruits);
          $("<li/>").text(item).appendTo(list);
        }
      });
    
    </script>
  </body>
</html>

I didn’t really understand why we need to display a list in the first place, and not just letting the user to add items to the list. Can anyone explain why my code is not practical, and why Ivan’s solution would be a better one?
I’m trying to understand…
Thanks a lot

Zoltan

2 Likes
#2

Hey @Zoltan!

No, redrawList() isn’t necessary. There are different ways to approach the same task. By questioning the original approach, you have come up with an equally valid, and I must say impressive, solution! :muscle:

The mini-programs we are writing in this course are for demonstration and learning purposes, and if they were to be used for a fully functional web page, they would obviously need to integrate with a lot of other functionality, and that is what would eventually drive your decision as to which method is more suitable. You might well start with one method and then need to change it because of another factor that comes in to play.

So, the fact that you are already thinking about different, and more efficient, alternative approaches to the same task, is an indication that you’re already developing key programming skills.

We don’t — without rewatching the videos, I can’t honestly remember the context, but it may well have simply been to expand on a list Ivan had already used in a previous video, which was already there… or some other similar reason.

You code is practical, and it’s great alternative …(improvement! :shushing_face: :wink:

I’m particularly impressed with how you’ve used onfocus="this.value=''" to clear the text box. You can also achieve this functionality with the JavaScript by adding…

$('#textBox').val('');

… to your click function. Can you come up with a suitable position for it? I would suggest that it’s better to script as much of this kind of dynamic functionality in the JavaScript rather than by using HTML attributes. I think it would make it easier for other developers to follow and find things, and also to modify and develop your code further.

You’re doing a great job at that!
Keep up the innovative and creative experimentation!.. and keep questioning!.. it’s one of the best ways to learn! :smiley:

2 Likes
#3

Hey Jon,
Thank you so much for taking the time to run my code and to answer my question! I think I have figured it out where I would pass in this line of code into my little program.

let fruits = [];
      let list = $("#myList");
      $("#btn1").click(function(){
        let item = $("#textBox").val();
        if(fruits.includes(item)){
          alert("Item is already on list, please enter a different fruit!")
        }else{
          fruits.push(item);
          console.log(fruits);
          $("<li/>").text(item).appendTo(list);
          $('#textBox').val('');
        }
      });

Right at the end seems to be a good place for it, after appending item to the list, we don’t need the “textBox” to hold any value. Thank you for the suggestion, I wouldn’t have figured this out in a million years, I think. :man_facepalming:

Thanks again!

Zoltan :slightly_smiling_face:

2 Likes
#4

That’s where I decided to put it too (for the same reason) :smiley:

You’re doing great! :muscle:

2 Likes
#5

It is good to see different approaches to the problem and understanding why you need different solutions. My proposal is the one bellow. Also different from Ivan’s and Zoltan’s.

<body>

    <h2>Favorite fruits</h2>

        <input id='fruitAdder' type="text" placeholder="Text input" />
        <button id='fruitButton' name="button">Add fruit</button>

        <ol id='fruitList'> Fruit Table </ol>


    <script>

    var fruits = ['apple', 'oranges', 'banana'];

          $.each(fruits,function(index, value){
            var listItem = $('<li/>').text(value).appendTo(fruitList);
          });

          $('#fruitButton').click(function(){
            var newFruit = $('#fruitAdder').val();
            fruits.push(newFruit);
            $('<li/>').text(newFruit).appendTo(fruitList);
          });


    </script>
    
  </body>

Link to a discussion about this solution in another thread

2 Likes
#6

Totally agree! :smiley: You can learn a lot by looking at how other people have approached the same task. It also helps develop a more open, flexible and responsive mindset while programming.

Thanks for sharing your solution, @dragos_andrei_87!
I’ve also added a link to your discussion about your solution with @thecil, because I think it will be helpful to include those comments here as well. I’ve added the link to your post with the code.

2 Likes
#7

This is similar to how I solved the problem:

Great Website 
  <h1>My favorite fruits</h1>
  <ol id="fruitList">
  </ol>
  <input id="fruitsTextBox" placeholder="Write Fruit" type="text" />
  <button id="theButton">Add to Fruits List</button>
  <script>

  var fruits = ["Apple", "Orange", "Banana"];

  var list = $("#fruitList");
  fruits.push("Pear");
  fruits.push("Pineapple");
  fruits.push("Kiwi");

  console.log(fruits)
  $.each(fruits, function(index, value){
    $("<li/>").text(value).appendTo(list)
  });


    $("#theButton").click(function(){
      var textInputted = $("#fruitsTextBox").val();
      fruits.push($("#fruitsTextBox").val());
      $("<li/>").text(textInputted).appendTo(list);
      console.log(fruits)
    })


  </script>
1 Like
#8

Hey Zoltan!
I was losing my mind over this assignment, but your solution makes perfect sense to me. So I just wanted to leave a big thank you :slight_smile: