Html / Css / JavaScrypt Please Help.

keavlar · October 24, 2016

Hello guys.

I have a real big problem, after tomorow i need to give a project , and i didnt finished it. I have a problem with the Jason/ Local Storage Thing.

The idea is create a web-note online, on local storage.

I Did all that should be done, but i have no idea how to make all information to be saved on local Storage , also by using the Jason, in Java script.

is it possible, some one could help please?

We didnt learn the Jason and local Str, so i have no idea how to drop all that i did inside. I mean, as i see it, i need to change the entire script.

Appreciate all your help.

https://drive.google.com/open?id=0B67xK9mKH8BZZTFpVENMQlZUNTQ this is the link for the File.

Thank you again if you can help.

vorticalbox · October 24, 2016

post your code in code tags, most people won't like downloading random files from the web.

keavlar · October 24, 2016

1 minute ago, vorticalbox said:

post your code in code tags, most people won't like downloading random files from the web.

Could you please show me example?

keavlar · October 24, 2016

<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lemon" /><head>
    <title></title>
    <meta charset="utf-8" />
    <link href="StyleSheet.css" rel="stylesheet" />
    <script src="JavaScript.js"></script>
</head>
<body>

    <div id="title">

    </div>

    <div id="textArea">
        <input type="date" id="userDateBox" /> <input type="time" id="userTimeBox" />
        <br />
        <br />

         <span id="errorMessageTextBox"> </span>   
        <br />

        <textarea id="textBoxWithUserText" rows="4" cols="30" name="message"></textarea>
        <br />
        <input type="button" name="Save" value="Save" onclick="noteTextBox()" />
    </div>

    <div id="notes">


        <div class="userNote">
            <div class="noteArea">Hello</div>
            <div class="userNoteDate">10.16.2016</div>
            <div class="userTimeNote">10:30 </div>
            <div id="closeButton" onclick="deleteTheNote(this)"></div>
        </div>
        <div class="userNote">
            <div class="noteArea">Hello</div>
            <div class="userNoteDate">10.16.2016</div>
            <div class="userTimeNote">10:40 </div>
            <div id="closeButton" onclick="deleteTheNote(this)"></div>
        </div>
    </div>

</body>
</html>

body {
    background: url("pictures/tile.jpg");
    height:100%;
}

span{
      text-align: center;
      color:red;
    
}

#title{
   background:url("pictures/title.png");
   background-repeat: no-repeat;
   background-position:center;
    height:70px;
    width:100%;

}

#textArea{
   
    background:url("pictures/formbg.jpg"),url("pictures/formbg.jpg"),url("pictures/formbg.jpg");
    height:250px;
    width:100%;
    background-position:center 25px, center 90px,center 153px;  /*there is 5 lines, if i want to make 4 i need to make less xp*/
    background-repeat:no-repeat,no-repeat,no-repeat; 
    text-align: center;
    
   
}



/*   COLOR PART*/

#notes {
   
    width: 300px;
    color: red;
    -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
    animation: mymove 5s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    50% {color: blue;}
}

/* Standard syntax */
@keyframes mymove {
    50% {color: blue;}
}


/*   COLOR PART*/




#notes{
    height:1200px;
    width:100%;
   font-style: oblique;
    
}
#textBoxWithUserText{
    width:500px;
    height:100px;
    margin-top:20px;
    opacity: 0.6;
    
}

.userNote{
    background:url("pictures/notebg.png");
    background-repeat:no-repeat;
    height:255px;
    width:205px;
    float:left;
  

}

.noteArea {
    opacity: 0.6;
   /* border:solid black 1px;  */ 
    margin-top:33px;
    margin-left:13px;
    height:150px;
    width:150px;
    resize: none;
    overflow:auto;
    
}

.userNoteDate{
    float:left;
    width:150px;
    margin-top:10px;
    margin-left:13px;
  
}
.userTimeNote{
    float:left;
    margin-top:5px;
    width:150px;
    margin-left:13px;
   

}



  .userNote:hover > #closeButton{
   
    background:url("pictures/close.png");  

    height:32px;
    width:32px;
   /* margin-top:10px;
    margin-left:118px;
    margin-bottom:173px;  */
    position:relative;
    top:-175px;
    right:-150px;

     opacity: 0.5;
}

  #closeButton {
   opacity: 0;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   cursor: pointer;
   }


  
  * {
font-family: Lemon;
	font-size: 14px;
  }

function noteTextBox() {
    
    var textBoxWithUserText = document.getElementById("textBoxWithUserText");
    var notes = document.getElementById("notes");
    var textBox = textBoxWithUserText.value;

    var errorMessageTextBox = document.getElementById("errorMessageTextBox");

    errorMessageTextBox.innerText = "";  // resset error message for the missing text 


    if (textBox === "") {
       // alert("Missing a text for note!");
        errorMessageTextBox.innerText =  ' Please enter a remind message !';
        return;
        }


    var userDateBox = document.getElementById("userDateBox");
    var userDate = userDateBox.value;

    if (userDate <1) {
       // alert("Missing Date");
        errorMessageTextBox.innerText = ' Please Enter a Date !';
        return;
    }


    var userTimeBox = document.getElementById("userTimeBox");
    var userTime = userTimeBox.value;

    if (userTime < 1) {
        //  alert("Missing Time");
        errorMessageTextBox.innerText = ' Please enter a time!';
        return;
    }

  
  
    notes.innerHTML = notes.innerHTML + '<div class="userNote"> <div class="noteArea">' + textBox +
        '</div>  <div class="userNoteDate">' + userDate + '</div> <div class="userTimeNote">' + userTime + '</div><div id="closeButton" onclick="deleteTheNote(this)">   </div>';
    
    textBoxWithUserText.value = " ";
    userDateBox.value = -1;
    userTimeBox.value = -1;
}



function deleteTheNote(button){
    button.parentNode.outerHTML = "";
}

Dimmizer · October 24, 2016

1 minute ago, keavlar said:

Could you please show me example?

http://pastebin.com/

paste code there and then reply with link OR put code tags which would be like [ code ] then code goes here and then [ /code ]

make sure u close the brackets

Dimmizer · October 24, 2016

Heh nvm you got it

keavlar · October 24, 2016

1 minute ago, Dimmizer said:

Heh nvm you got it

yeah.

vorticalbox · October 24, 2016

check out html5 local storage. http://www.w3schools.com/HTML/html5_webstorage.asp

keavlar · October 24, 2016

3 minutes ago, vorticalbox said:

check out html5 local storage. http://www.w3schools.com/HTML/html5_webstorage.asp

Man, i tried every thing.. I cant find a way to save the created notes. i need to save entire Html code .. NO idea how to do it with out writing code from the scrap.

vorticalbox · October 24, 2016

you currently store user notes in memory then write to the html dom. You just need to save that local storage and check for notes on page load.

personally I would store user notes in an array then right that into a text file or using the code I linked to save it to local storage.

keavlar · October 24, 2016

4 minutes ago, vorticalbox said:

you currently store user notes in memory then write to the html dom. You just need to save that local storage and check for notes on page load.

personally I would store user notes in an array then right that into a text file or using the code I linked to save it to local storage.

I wanted to do the same, but we never learn that part.. The teacher , just dropped that bomb on us, thats is why i actually asking for help, to be more specific, i am asking for some one to write that code, to show me how it is done. And i am not asking to do my job, i know it looks that way , but i never would do something like this, if i had a choise, but i am stuck, i didnt even thought it would be that hard in th end..

vorticalbox · October 24, 2016

40 minutes ago, keavlar said:

I wanted to do the same, but we never learn that part.. The teacher , just dropped that bomb on us, thats is why i actually asking for help, to be more specific, i am asking for some one to write that code, to show me how it is done. And i am not asking to do my job, i know it looks that way , but i never would do something like this, if i had a choise, but i am stuck, i didnt even thought it would be that hard in th end..

I would love too but I cant right now and I won't be on a computer until tomorrow afternoon hopefully someone will post before me but if not i will try put some code together.

keavlar · October 24, 2016

19 minutes ago, vorticalbox said:

I would love too but I cant right now and I won't be on a computer until tomorrow afternoon hopefully someone will post before me but if not i will try put some code together.

Thx

Mr_KoKa · October 24, 2016

I made usage example, it is important to keep track of items html representation so when you remove them you can remove also the html.

When removing item just mark it as removed in you memory so indexes won't change, in this example it is important to not change indexes as remove function references item by index. You could create dictionary, and you would need to save list of items names instead of count, but that would involve creating unique names for items.

localStorage.setItem second argument need to be a string so you need to use JSON.stringify on item object. I keep reference to html inside of item so I create temporary object that omits this attribute before I stringify item.

When loading you need to parse json and push it to item array, then create html representation, it is similar to adding new item, but you add it from storage, not from form.

https://repl.it/EEsH/3

keavlar · October 24, 2016

27 minutes ago, Mr_KoKa said:

I made usage example, it is important to keep track of items html representation so when you remove them you can remove also the html.

When removing item just mark it as removed in you memory so indexes won't change, in this example it is important to not change indexes as remove function references item by index. You could create dictionary, and you would need to save list of items names instead of count, but that would involve creating unique names for items.

localStorage.setItem second argument need to be a string so you need to use JSON.stringify on item object. I keep reference to html inside of item so I create temporary object that omits this attribute before I stringify item.

When loading you need to parse json and push it to item array, then create html representation, it is similar to adding new item, but you add it from storage, not from form.

https://repl.it/EEsH/3

OMG every one so smart.. I KNOW WHAT I NEED TO DO , I HAVE NO IDEA HOT TO WRITE IT ON PAPER..!!!!!!!! NO PRACTICE IN THIS MATTER, COPISH ?

Mr_KoKa · October 24, 2016

Just now, keavlar said:

COPISH

I don't, I gave you working example with source code.

keavlar · October 24, 2016

33 minutes ago, Mr_KoKa said:

I don't, I gave you working example with source code.

If i wanted an example, i wouldnt ask any one.. i know how to use google

Mr_KoKa · October 24, 2016

You wanted a code that shows how it is done, but not to do your job, so my example is exactly that. If you think that your single function is to much to drop it and start from scratch then I won't help you.

Sign In

Html / Css / JavaScrypt Please Help.

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Topics

Latest From Linus Tech Tips:

Every Monitor Fails This Test… Except One - Sun Vision rE rLCD Display