Discuss Scratch

god286
Scratcher
1000+ posts

How do I create a new element with a class with JS

MagicCrayon9342 wrote:

I have no idea on how localstorage works
You should learn it, it will help you in the future.
Basically you can store key-value pairs. The value has to be a string though.

meowclient
Typescript and ESM support
Kind-of good documentation
Easy to use
meowclient


                 _ ____  ___   __   
__ _ ___ __| |___ \( _ ) / /_
/ _` |/ _ \ / _` | __) / _ \| '_ \
| (_| | (_) | (_| |/ __/ (_) | (_) |
\__, |\___/ \__,_|_____\___/ \___/
|___/
^ inspired by @Chiroyce, made with figlet
MagicCrayon9342
Scratcher
1000+ posts

How do I create a new element with a class with JS

god286 wrote:

MagicCrayon9342 wrote:

I have no idea on how localstorage works
You should learn it, it will help you in the future.
Basically you can store key-value pairs. The value has to be a string though.
well considering what your telling me doesn't help at all I'll just have to go without the feature until I figure it out in like 20 years.

Actual code goes way farther and makes the flow of software creation much faster than links.

Last edited by MagicCrayon9342 (Jan. 16, 2022 01:03:08)


signature
MagicCrayon9342
Scratcher
1000+ posts

How do I create a new element with a class with JS

also the code immediately breaks upon switching to tailwind so I won't be doing that this time.

signature
MagicCrayon9342
Scratcher
1000+ posts

How do I create a new element with a class with JS

for now I'm making the buttons a bit nicer with :hover suffixes and some extra css

signature
CST1229
Scratcher
1000+ posts

How do I create a new element with a class with JS

MagicCrayon9342 wrote:

umm well I have no idea on how localstorage works and nothing on stack overflow works
A quick guide:
// get local storage (you could use window.localStorage everytime but that's typing more characters)
const storage = window.localStorage;
 
// set values
storage.setItem("key", "value");
 
// NOTE: values are automatically converted to strings, I think using x.toString().
// for objects, this returns "[object Object]" and for arrays, it's a comma-separated list of values
// so you might want to JSON.stringify() the value before storing, then JSON.parse() it afterhand
 
// get values
storage.getItem("key") // -> value
// console.log(storage.getItem("key"))
 
// remove an item
storage.removeItem("key");
 
// clear this site's localstorage
storage.clear();
 
// there's also storage.length and storage.key(number)

Last edited by CST1229 (Jan. 16, 2022 03:19:39)


This is a signature. It's text that appears below each post I write. Click here to make your own. And use Shift+Down to see more if you're on Chrome.
Scratch Day
Instead of posting Support/No Support on a topic by itself, just use ocular reactions instead. Doesn't waste a post and seeing vote totals is easy.
Stuff I made
All emojis usable in the forums and in comments

⌚️⏰⏱️⏲️⌨️☎️⌛️⚖️⚙️✉️✂️✒️☂️✏️☕️♟️⚰️⚱️⛏️⚔️⚒️⛓️⚗️⛑️
⭐️✨⚡️☄️☀️⛅️☁️⛈️⛄️❄️☔️☘️
☹️✌️☝️✍️✋☺️
⚽️⚾️⛳️⛹️⛷️⛸️
✈️⛵️Ⓜ️⚓️⛽️⛲️⛺️⛪️⛰️⛱️⛴️⛩️♨️
❗️❕❓❔©️®️‼️⁉️™️➕➖➗✖️⛔⭕❌✔️〰️〽️⚠️
☑️✅❎▶️⏩⏪⏫⏬ℹ️⏭️⏮️⏯️⏏️◀️➡️⬅️⬆️⬇️↗️↘️↙️↖️↪️↩️⤴️⤵️✳️✴️❇️㊗️㊙️
⚕️☦️♾️⚛️⛎️✝️☪️☮️☯️☸️♈️♉️♊️♋️♌️♍️♎️♏️♐️♑️♒️♓️
❤️❣️♠️♣️♥️♦️♀️♂️♻️☢️☣️⚜️➰️➿️☠️
⬛️⬜️⚪️⚫️▪️▫️◻️◼️◽️

Copy-paste as you wish!
MagicCrayon9342
Scratcher
1000+ posts

How do I create a new element with a class with JS

CST1229 wrote:

MagicCrayon9342 wrote:

umm well I have no idea on how localstorage works and nothing on stack overflow works
A quick guide:
// get local storage (you could use window.localStorage everytime but that's typing more characters)
const storage = window.localStorage;
 
// set values
storage.setItem("key", "value");
 
// NOTE: values are automatically converted to strings, I think using x.toString().
// for objects, this returns "[object Object]" and for arrays, it's a comma-separated list of values
// so you might want to JSON.stringify() the value before storing, then JSON.parse() it afterhand
 
// get values
storage.getItem("key") // -> value
// console.log(storage.getItem("key"))
 
// remove an item
storage.removeItem("key");
 
// clear this site's localstorage
storage.clear();
 
// there's also storage.length and storage.key(number)
ok, also does anyone know why stack overflow code never works?

signature
MagicCrayon9342
Scratcher
1000+ posts

How do I create a new element with a class with JS

Can I save the DOM to localStorage as a string then every time the app is loaded it loads the DOM back in to the page.
I'm going to have a button function

function save() {
  // code here

<button onClick="save()">Save</button>

signature
CST1229
Scratcher
1000+ posts

How do I create a new element with a class with JS

MagicCrayon9342 wrote:

Can I save the DOM to localStorage as a string then every time the app is loaded it loads the DOM back in to the page.
I think you should store the cards in something like an array or an object then recreate them when loading but if you really want to store the DOM, you can get/set the innerHTML of the cards container and store that in localstorage.

Last edited by CST1229 (Jan. 16, 2022 04:07:04)


This is a signature. It's text that appears below each post I write. Click here to make your own. And use Shift+Down to see more if you're on Chrome.
Scratch Day
Instead of posting Support/No Support on a topic by itself, just use ocular reactions instead. Doesn't waste a post and seeing vote totals is easy.
Stuff I made
All emojis usable in the forums and in comments

⌚️⏰⏱️⏲️⌨️☎️⌛️⚖️⚙️✉️✂️✒️☂️✏️☕️♟️⚰️⚱️⛏️⚔️⚒️⛓️⚗️⛑️
⭐️✨⚡️☄️☀️⛅️☁️⛈️⛄️❄️☔️☘️
☹️✌️☝️✍️✋☺️
⚽️⚾️⛳️⛹️⛷️⛸️
✈️⛵️Ⓜ️⚓️⛽️⛲️⛺️⛪️⛰️⛱️⛴️⛩️♨️
❗️❕❓❔©️®️‼️⁉️™️➕➖➗✖️⛔⭕❌✔️〰️〽️⚠️
☑️✅❎▶️⏩⏪⏫⏬ℹ️⏭️⏮️⏯️⏏️◀️➡️⬅️⬆️⬇️↗️↘️↙️↖️↪️↩️⤴️⤵️✳️✴️❇️㊗️㊙️
⚕️☦️♾️⚛️⛎️✝️☪️☮️☯️☸️♈️♉️♊️♋️♌️♍️♎️♏️♐️♑️♒️♓️
❤️❣️♠️♣️♥️♦️♀️♂️♻️☢️☣️⚜️➰️➿️☠️
⬛️⬜️⚪️⚫️▪️▫️◻️◼️◽️

Copy-paste as you wish!
NFlex23
Scratcher
1000+ posts

How do I create a new element with a class with JS

MagicCrayon9342 wrote:

(#26)

CST1229 wrote:

MagicCrayon9342 wrote:

umm well I have no idea on how localstorage works and nothing on stack overflow works
A quick guide:
// get local storage (you could use window.localStorage everytime but that's typing more characters)
const storage = window.localStorage;
 
// set values
storage.setItem("key", "value");
 
// NOTE: values are automatically converted to strings, I think using x.toString().
// for objects, this returns "[object Object]" and for arrays, it's a comma-separated list of values
// so you might want to JSON.stringify() the value before storing, then JSON.parse() it afterhand
 
// get values
storage.getItem("key") // -> value
// console.log(storage.getItem("key"))
 
// remove an item
storage.removeItem("key");
 
// clear this site's localstorage
storage.clear();
 
// there's also storage.length and storage.key(number)
ok, also does anyone know why stack overflow code never works?
Which “stack overflow code” doesn't work?

Here are some SO links that work and should answer your questions:

Last edited by NFlex23 (Jan. 16, 2022 11:50:58)


Maximouse
Scratcher
1000+ posts

How do I create a new element with a class with JS

MagicCrayon9342 wrote:

ok, also does anyone know why stack overflow code never works?
It almost always works if you change things like variable names to match your existing code.


This is Maximouse's signature. Learn more about signatures.
MagicCrayon9342
Scratcher
1000+ posts

How do I create a new element with a class with JS

Maximouse wrote:

(#30)

MagicCrayon9342 wrote:

ok, also does anyone know why stack overflow code never works?
It almost always works if you change things like variable names to match your existing code.
most of the time the existing code is from stack overflow

signature
god286
Scratcher
1000+ posts

How do I create a new element with a class with JS

MagicCrayon9342 wrote:

most of the time the existing code is from stack overflow
stackoverflow isnt a person its a community

meowclient
Typescript and ESM support
Kind-of good documentation
Easy to use
meowclient


                 _ ____  ___   __   
__ _ ___ __| |___ \( _ ) / /_
/ _` |/ _ \ / _` | __) / _ \| '_ \
| (_| | (_) | (_| |/ __/ (_) | (_) |
\__, |\___/ \__,_|_____\___/ \___/
|___/
^ inspired by @Chiroyce, made with figlet

Powered by DjangoBB

Standard | Mobile