Created
August 26, 2012 07:08
-
-
Save ynonp/3475531 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" | |
| "http://www.w3.org/TR/html4/loose.dtd"> | |
| <html> | |
| <head> | |
| <title>Cool Web Site</title> | |
| <meta name="viewport" content="width=device-width" /> | |
| <style> | |
| label { | |
| min-width: 100px; | |
| display: inline-block; | |
| } | |
| div { | |
| margin:5px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <form> | |
| <div> | |
| <label for="name">Name</label> | |
| <input type="text" id="name" /> | |
| </div> | |
| <div> | |
| <label for="number">Phone Number</label> | |
| <input type="tel" id="number" /> | |
| </div> | |
| <div> | |
| <label for="email">Email</label> | |
| <input type="email" id="email" /> | |
| </div> | |
| <div> | |
| <label for="color">Color</label> | |
| <input type="color" id="color" /> | |
| </div> | |
| <div> | |
| <label for="gender">Gender</label> | |
| <select id="gender"> | |
| <option value="m">Male</option> | |
| <option value="f">Female</option> | |
| </select> | |
| </div> | |
| <button id="save">Save</button> | |
| <button id="restore">Load</button> | |
| </form> | |
| <ul> | |
| </ul> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> | |
| <script src="main.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Created with JetBrains WebStorm. | |
| * User: ynonperek | |
| * Date: 8/26/12 | |
| * Time: 9:54 AM | |
| * To change this template use File | Settings | File Templates. | |
| */ | |
| $(function() { | |
| var contact = {}; | |
| function save() { | |
| console.log('save'); | |
| contact.name = $('#name').val(); | |
| contact.number = $('#number').val(); | |
| contact.email = $('#email').val(); | |
| contact.color = $('#color').val(); | |
| contact.gender = $('#gender').val(); | |
| localStorage.setItem('data', JSON.stringify(contact)); | |
| } | |
| function restore() { | |
| var saved_value = localStorage.getItem('data'); | |
| if ( saved_value ) { | |
| contact = JSON.parse( saved_value ); | |
| } | |
| show_all(); | |
| } | |
| function show_all() { | |
| $('#name' ).val( contact.name ); | |
| $('#number').val( contact.number ); | |
| $('#email' ).val( contact.email ); | |
| $('#color' ).val( contact.color ); | |
| $('#gender').val( contact.gender ); | |
| } | |
| $('#save').click( save ); | |
| $('form').on('input', save ); | |
| $('#restore').click( restore ); | |
| $('form').submit(function() { | |
| return false; | |
| }); | |
| restore(); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Created with JetBrains WebStorm. | |
| * User: ynonperek | |
| * Date: 8/26/12 | |
| * Time: 9:54 AM | |
| * To change this template use File | Settings | File Templates. | |
| */ | |
| $(function() { | |
| $('#save').click(function() { | |
| var name = $('#username').val(); | |
| localStorage.setItem('username', name); | |
| }); | |
| $('#restore').click(function() { | |
| var name = localStorage.getItem('username'); | |
| if ( name ) { | |
| $('#username').val( name ); | |
| } | |
| }); | |
| $('form').submit(function() { | |
| return false; | |
| }); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" | |
| "http://www.w3.org/TR/html4/loose.dtd"> | |
| <html> | |
| <head> | |
| <title>Cool Web Site</title> | |
| </head> | |
| <body> | |
| <form> | |
| <label for="username">User Name:</label> | |
| <input type="text" id="username" /> | |
| <button id="save">Save</button> | |
| <button id="restore">Load</button> | |
| </form> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> | |
| <script src="main.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" | |
| "http://www.w3.org/TR/html4/loose.dtd"> | |
| <html> | |
| <head> | |
| <title>Cool Web Site</title> | |
| </head> | |
| <body> | |
| <form> | |
| <label for="task">Task:</label> | |
| <input type="text" id="task" /> | |
| <button id="add">Add</button> | |
| <button id="restore">Load</button> | |
| </form> | |
| <ul> | |
| </ul> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> | |
| <script src="main.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Created with JetBrains WebStorm. | |
| * User: ynonperek | |
| * Date: 8/26/12 | |
| * Time: 9:54 AM | |
| * To change this template use File | Settings | File Templates. | |
| */ | |
| $(function() { | |
| var tasks = []; | |
| function show_all() { | |
| $('ul').html(''); | |
| for ( var i=0; i < tasks.length; i++ ) { | |
| var t = tasks[i]; | |
| $('ul').append('<li>' + t + '</li>'); | |
| } | |
| } | |
| $('#add').click(function() { | |
| var new_task = $('input').val(); | |
| tasks.push( new_task ); | |
| show_all(); | |
| localStorage.setItem('tasks', JSON.stringify(tasks)); | |
| }); | |
| $('#restore').click(function() { | |
| var old_value = localStorage.getItem('tasks'); | |
| if ( old_value ) { | |
| tasks = JSON.parse( old_value ); | |
| } | |
| show_all(); | |
| }); | |
| $('form').submit(function() { | |
| return false; | |
| }); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment