-
-
Save prof3ssorSt3v3/52ebd432bb7b8a155985a2f82509541d to your computer and use it in GitHub Desktop.
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Putting User Input into JS Objects</title> | |
| <style> | |
| .formBox{ | |
| padding: 0.5rem 2rem; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <form> | |
| <div class="formBox"> | |
| <label for="title">Movie</label> | |
| <input type="text" id="title" placeholder="Title"/> | |
| </div> | |
| <div class="formBox"> | |
| <label for="yr">Year</label> | |
| <input type="number" id="yr" placeholder="Year"/> | |
| </div> | |
| <div class="formBox"> | |
| <button id="btn">Click to Add</button> | |
| </div> | |
| <div id="msg"> | |
| <pre></pre> | |
| </div> | |
| </form> | |
| <script> | |
| let movies = []; | |
| // example {id:1592304983049, title: 'Deadpool', year: 2015} | |
| const addMovie = (ev)=>{ | |
| ev.preventDefault(); //to stop the form submitting | |
| let movie = { | |
| id: Date.now(), | |
| title: document.getElementById('title').value, | |
| year: document.getElementById('yr').value | |
| } | |
| movies.push(movie); | |
| document.forms[0].reset(); // to clear the form for the next entries | |
| //document.querySelector('form').reset(); | |
| //for display purposes only | |
| console.warn('added' , {movies} ); | |
| let pre = document.querySelector('#msg pre'); | |
| pre.textContent = '\n' + JSON.stringify(movies, '\t', 2); | |
| //saving to localStorage | |
| localStorage.setItem('MyMovieList', JSON.stringify(movies) ); | |
| } | |
| document.addEventListener('DOMContentLoaded', ()=>{ | |
| document.getElementById('btn').addEventListener('click', addMovie); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Jeez, thanks so much! I have been using React for so long I forgot how to use Vanilla! How would you access that state object elsewhere in the app? For example, 2 inputs to capture (ex.) string1 and string2, add that to a user object (done, tutorial above) and then access that object for another api call?
If you are talking about the movies array - in this simple example it is just a global variable.
This isn't a production ready code base though, just an illustration of some concepts for my students.
I have other videos on finite state machines, and what a reducer is - https://www.youtube.com/watch?v=TOhUqDGNFtA that help students understand the vanilla JS behind React.
Thank you! The video reference was helpful. I like how simple and short your videos are. Very helpful!
great lesson! could you please tell me how to store the form in cache API instead of localStorage? Thank you!
Cache API stores files, not data. You would have to create a file, and write your data to that file, then save the file.
Cache API video - https://www.youtube.com/watch?v=Gu0t2EW2kfU
Hello I'm getting the following error:
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') at HTMLDocument.<anonymous> (index.html:216:43) (anonymous) @ index.html:216
This video - https://www.youtube.com/watch?v=gL8M9Sl5QLs is about uploading data with fetch.
I have a full playlist on how fetch / AJAX works.
It is important to note that you can't upload directly to a database. You can use fetch to send an HTTP Request that can include files or data. There needs to be a server-side script (API) that handles whatever you are sending and it will be responsible for putting things into the server-side database.