68 Replies
you know this isn't google, right?
what are you trying to achieve, what have you tried so far, do you have any code or screenshots or mockups or anything that's more than "round checkboxes"?
i actually accidentally pressed post without completing the description and didnt realize it💀
im trying to remake this, and i want round checkboxes like this
is it applicable to make round checkboxes in this case
wait im sharing the codepen
here
I'm pretty sure that's done with pseudoelements and the :checked pseudo-class
you hide the checkbox itself with
appearance: none;, then add a ::before and ::before:checked to restyle a pseudoelement based on whether the input is checkedyes, you can do that
radio and checkboxes are some of the few inputs that can have pseudo-elements
you just need what jochem said
you can align it with an inline grid
okay
why in this case, when i click on addBtn element, only one div (taskListItem) is added
but when i keep "const taskListItem = document.createElement("div")" inside the addeventlistener, as much as divs are added when i click
because taskListItem still refers to the same element, which is already added
when you keep it in the listener, it's creates a fresh element every time the listener runs
ohh
is it suitable to use const in this, or should i use let
do you need to change the object taskListContainer refers to before it goes out of scope at the end of the listener?
whats the object tasklistcontainer refers to?
i cant tell
u mean the dom element?
the javascript object that is the result of document.createElement in this case
ohh
yeah i have to add some attributes to it
before i appendchild it
hmm, I was a little inaccurate in my phrasing. Do you need to change what object the variable refers to before it goes out of scope?
const makes it so that a variable cannot be changed, so a string declared as const will always be the same string, same for an int or float.
There is one exception, namely objects. An object assigned to a const variable works a little differently, because the variable only contains a reference to the object, not the actual object itself. The reference can't be changed if the variable is const, so a const variable will always reference the object it was assigned at declaration, until it goes out of scope, but the object it refers to can still be manipulated, and its properties changed.ohh
i get it
yeah i dont need to change it
then you use
const
the best thing to do if you're not sure is to just use const until you get an error in the consoleokay thanks😁
you have created a form, in a backwards way
why dont you just use a form?
is it good for to do list
good? it's the correct way
that input with the add button should be in a form, and then you handle the submit event
ohh
is it fine if i make it a form after everything is working
sure
doesnt this look abit goofy
why do they require to add true in the brackets
MDN Web Docs
Node: cloneNode() method - Web APIs | MDN
The cloneNode() method of the Node interface
returns a duplicate of the node on which this method was called.
Its parameter controls if the subtree contained in a node is also cloned or not.
deep
If true, then the node and its whole subtree, including text that may be in child Text nodes, is also copied.also, use a <template>
dont clone random elements
is it unsafe
no and yes
but mostly no
safety isnt a consideration for that
can u explain this, i didnt understand
oh i just searched for template javascript, thats y i couldnt find
yeah, you'd just run into template literals then I think
the `strings like this with backticks`
that was an <html> tag
yup, very very likely, which is not the right tool for this - it does work, but still not right
omg its so complicated
the template tag? MDN goes into depth a lot
at its base, it's just a tag that isn't rendered, that you can use to store HTML nodes for use by JavaScript
ohh
also, you clone the
contents, not the nodehows the js i wrote
i havent added form or template yet
a mess
50% of it is unnecessary
implement the form and the template, then you will see your js code shrink a lot
ooo
a quick example: you're checking for the enter key, but the form automatically submits if you press the enter key in the text input
and if you add the
required attribute, it is automatically validated
there goes a big chunk outohh
i was told that at this point, i shouldnt worry about the best practices
should i remake the project using form and template
THAT IS AWFUL ADVICE
holy fuck, that advice is so fucking bad im swearing
that is the shittiest type of advice ever: wrong and when you havent gained any habits
why? because then you gain awful habits
YES, YOU ALWAYS SHOULD FOLLOW BEST PRACTICES
specially when you are learning
for a personal project that is just for you, when you are out of the learning phase, you can do all the horrid code you need to get it to work
but now, you need to learn and practice the best practices
also, those 2 arent the best practice: they are the correct way
im telling you to use a form because you are supposed to use a form, instead of rolling your half-baked form-like-ish javascript implementation
im telling you to use a <template> tag because that is the element used to create clonable html contents that you can re-use
ohhh
imagine you are taking driving licenses and the instructor says "it's okay, you are learning, you can drive at 200km/h on the wrong lane because you dont need to follow best practices"
that is what that advice is, but less deadly
💀
now you see why it is bad?
yeah
should i remake the whole from scratch or should i just make the necessary adjustments
just the adjustments
unless you think the code is beyond salvaging
MDN Web Docs
<form>: The Form element - HTML: HyperText Markup Language | MDN
The <form> HTML element represents a document section containing interactive controls for submitting information.
this doesnt seem to explain how to work with this using javascript
See Also: HTML Form Guides. There at the bottom of the page
working with forms seem to be hard
is it an advanced concept
no, it's basic
Yeah, forms are part of the initial internet. We had form submission technology before we could display images
why does it seem hard
is it that im finding mdn too hard, since this is like the first time im trying to learn something through mdn
mdn isnt a tutorial site
that's like learning about leafs by reading the bio-chemical processes they use to produce oxigen
that's a bit extreme... learning from reference documentation is an important skill, but it does require having a bunch of context
there are examples, but they assume a baseline comfort
comfort you don't have yet
yes, it is. but you get my point, right?
i didnt have any trouble learning from w3 schools but today i heard that they are popular for using not good practices
they have some innacurate content, yes
take a long time to fix
take years to update outdated content
but what are you even struggling about in a form?
it's just a spicy div
If you’re having problems understanding forms please make a new post and we’ll do our best to help you understand
not really, no. I learned PHP from the reference docs just fine
the reference docs in php are less technical, in my opinion
they are complete, but less technical
ok im creating a new post