First Project JS

Hello,

I have started my first project and I choose a grocery list. I made the dynamic list, it works and all, but I also tried to save the list even if you refresh the page, but I don’t find anything helpful. I also tried to make a delete button, but it doesn’t work. I searched on stackoverflow.com, w3school and freecodecamp. Could anyone help me or give me some ideas?

<!DOCTYPE html>
<html>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/style.css">
        <link href='https://fonts.googleapis.com/css?family=Charmonman' rel='stylesheet'>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">


   <head>


            <title> Grocery List </title>

   </head>

   <style>

            .bar-menu {
                 list-style-type: none;
                 margin: 0;
                 padding: 0;
                 overflow: hidden;
                 background-color: #41B3A3;
                 font-family: 'Charmonman';
            }

            .menu {
                 float: left;
            }

             li {
                 cursor: pointer;
             }

            .menu a {
                 display: block;
                 color: black;
                 text-align: center;
                 padding: 14px 16px;
                 text-decoration: none;
            }

            .menu a:hover {
                  background-color: #E27D60;
            }

            .active {
                  background-color: #C38D9E;
            }

            h1{
                  margin-top: 40px;
                  text-align: center;
                  font-size: 32px;
                  font-family: 'Charmonman';
            }

            body {
                  background-color: #85DCAB;
            }

            input {
                  margin: 0;
                  border: none;
                  border-radius: 0;
                  width: 75%;
                  padding: 10px;
                  float: left;
                  font-size: 16px;
            }

            #btnn {
                  padding: 10px;
                  width: 25%;
                  background: #41B3A3;
                  color: #555;
                  float: left;
                  text-align: center;
                  font-size: 16px;
                  cursor: pointer;
                  transition: 0.3s;
                  border-radius: 0;
            }



</style>


 <body>

<!-- Navigation bar-->
   <ul class="bar-menu">
       <li class ="menu"><a href="New project.html">Home</a></li>
       <li class ="menu"><a href="page2.html">Grocery list</a></li>
       <li class ="menu"><a href="Contact.html">Contact</a></li>

   </ul>

   <h1>Grocery list</h1>

      <hr>

   <form>

      <input placeholder = "Write item..." type="text" id= "addinggroceries" >
      <button type= "button" id = "btnn">Add item!</button>

      <ul id="groceryList">

      </ul>

  </form>

  <script>

    //list of items added to a list by input of the user


        var groceries = [];

        var list = $("#groceryList");

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

        $("#btnn").click(function(){
        var add = $("#addinggroceries").val();
        $("<li/>").text(add).appendTo(list)
        });



        </script>


 </body>

 </html>

I have 3 pages, but this is the main one. I also tried to put a “required” attribute to the “input” tag, but it doesn’t work.

1 Like

@thecil I saw you edited something, but I don’t see what.

1 Like

Hi @carmen1408, hope you are great.

I have tested your code, and it is working very nice, congratulations :partying_face:

Now about saving the list item, for that you might need a database or a webserver that handle those, for the assignment is not necessary because could be a little bit more complex to add that functionality (but is possible).

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

Carlos Z.

Thank you very much!

Have a great weekend! :grin:

Hi @thecil,

I finished my first project and thought I’m using this thread to upload it :slight_smile:
My study counselor suggested to create a readme file and upload it on GitHub.
That’s the link; https://github.com/karlaMee/piggybank/blob/996c340f6a96ad2136ee2afa8f59a30dfb65b5d5/README.md

Initially I tried to create a program wit three options and compound interest but it was too confusing and I got stuck so I decided to keep it simple(wasn’t that simple tbh :grimacing:).
I’m looking forward you having a look over it and give me some feedback and suggestions on how to improve. Btw I tried to attach a .js file, but it didn’t work for some reason.

Thank you :blush:

Do not put your code in the ReadME file. Readme file is just for introduction of your project with simple English. The real code should go into another js file that you need to commit into your GitHub. Make sure you are uploading the JS file as well.

Hi @Malik,
Thank you for your response. I must have misunderstood…
I hope It’s right this time.

https://github.com/karlaMee/piggybank/blob/0a9b3c7580523382f784e55616a916fdceb15874/firstproject.js

I need to have a deeper look into GitHub, it still confuses me tbh. Just in case here is the code, thanks for having a look at it :slight_smile:


<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
     <meta charset="utf-8">

     <title>PIGGYBANK</title>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <style>
         button {border: 5px solid pink;
                 border-radius:20px}
         p.short{width:70px;
                 height:20px;
                 border: 5px solid pink;
                 margin:20px;
                 border-radius:20px;
                 text-align: center;}
     </style>

  </head>
 <body background ="https://media.coindesk.com/uploads/2017/08/piggy-bank-e1504182200356.jpg">

       <h1><font color = "pink">Stashing away for your little pigglets</font></h1>
       <h3><font color = "pink">Earn 10% APY on your savings</font></h3>

   <div style="right:20px;padding:30px"></div>

          <input id = "deposit" placeholder = "Add amount" type = "number" >
          <button style = "background-color: pink" id = "btn"
          >Add to your Piggy Bank</button>
          <p class = "short" id = "PIGGYBANK"></p>

   <div style="right:20px;padding:50px"></div>

          <button style = "background-color: pink" id = "addUP">Show my savings after 1 year</button>
          <p class = "short" id = "SITotal"></p>


     <script>
     var depoArray = [];

     $("#btn").click(function(){
      var userDeposit = $("#deposit").val();
     depoArray.push(parseInt(userDeposit));
      console.log(depoArray);
      var sum = depoArray.reduce(depoArr);
     function depoArr(total, value, index, array) {
     return total + value;
     }
       document.getElementById("PIGGYBANK").innerHTML = sum;
     });


     function depoArr(total, value, index, array) {
      return total + value;
     }


     $("#addUP").click(function SI(){
     var P =   depoArray.reduce(depoArr)
     var R = 10;
     var T = 1;
     var SI = P*R*T/100;
     var To = parseInt(P) + SI;
         document.getElementById("SITotal").innerHTML = To;

     });
   </script>


 </body>
</html>

Yup, this is good. However, you named your html file with a .js extension. If you fix that to a .html extension, you’re all good.

Happy learning ! :smiley:

1 Like

Ok cool I understand :+1: I actually had it in an .html file but understood I need to upload in .js file. I’ll get the hang of it eventually …
Thanks for having a look :slight_smile:

1 Like

First project done. @thecil @Malik

Please give your reviews https://github.com/Buldge/Kyle-Ogle.git

2 Likes

This is an awesome first project ! Way to go ! Keep up the good work! :clap:

Hi Everybody!

I’m going to copy @Karla and use this thread to show my first JS project. No need to create a new topic since this is already open :wink:

Here’s the link to my GitHub
https://github.com/FerfiCarvalho/engraver-quotation.git

Since im also into 3D printing and I’m having lots of requests for engravers I’ve decided to make something that would help me on daily tasks. So if you’d like an engraver with your name, you write it down, choose the letter type (you can see it change so you have a preview - kind of), the height of the letters and in the end it will give you the price.

Still have some cosmetic / responsive issues to deal with but I’m very happy with it, at least for the moment.

@thecil, my tutor @JesseJames and anyone who would like to comment, please let me know what you think :ok_hand: Thank you very much!

3 Likes

Loved the calculator, Great styling and Very Nice Work! Congratulations :clap: