The Odin Project, a Walkthrough of Etch a Sketch
HTML-код
- Опубликовано: 11 сен 2024
- I created a discord server: Join here if you wanna join the community or reach out to me!
/ discord
github.com/cod...
In this video, we will be tackling another Odin Project assignment. We will be creating our own etch a sketch app, or in other words, a sketchpad of sorts. We won't use a ton of css or html, so we will be learning plenty of javascript methods here. We will have to update the DOM quite frequently, so stick around so we can see some different ways to do that. This will just be a 1 part series, so hopefully you can follow along and catch me in the next one!
Hi, Rob! Thank you for taking the time to do these videos. As someone new to programming, The Odin Project can have a pretty steep learning curve but you’ve helped make it a bit easier for me and others who’ve watched your walkthroughs.
Hey Cam! Welcome to the channel! Thanks so much for the nice comment! I remember starting out learning to program, and it was extremely difficult and frustrating. There's benefit in struggling, however, I hope to ease some of the frustration. It's hard to receive feedback on whether I'm actually helping anyone, so the fact that I've made it a bit easier for you makes it all worth it. If you have any questions or need anything (like code review or help with a project), feel free to leave a comment and I'll respond as soon as I can!
There is a lot of terms and concepts in here that TOP does not really go over before this project. Thanks for the tutorial!
yeah the linear gradient style blew my mind hahaha
this is so true, TOP gave us a path, and forced us to look for terms and concepts on others sides, which is really frustrating, before every project they gave, u need to look for sources that from other sides
@@hongquannguyen5532At the end you reach here
Thank you so much for the video! I'm currently doing TOP, and I tried to do this project, but I was wasting time and wasn't going anywhere, there's a bunch of concepts that TOP hasn't covered yet, and I was pretty much lost. Thanks again!
Hey Hussein! Welcome to the channel! I'm glad it was helpful. I know the feeling all too well. I'm glad that this video helped out a bit and hopefully you can keep learning!
Thanks!
Heh, everyone make it with grid, but in project assignment says that we can make it with that we already learn! They mean with flexbox and loops. Grids will be in next section
Super useful. Was struggling on the draggable part but know I'm enlightened! Thanks Rob.
Hey Tran! Welcome to the channel. Yeah, that was a tricky part for me, but I'm glad that i was able to help!
I got a little frustrated today trying to complete this project in the foundations course, but this video motivated me. I’m going to take another crack at it!
Hey David! Programming can be really frustrating. Glad you got more motivation from this video. How did the next attempt go?
Wow this was super helpful, honestly doing this piecemeal would take forever, the difficulty jump feels kinda unfair but that is programming for you. Thanks brother.
It's just the odin project which is terrible as it wastes your time making you read and reread the same info while skipping important stuff.
Thanks so much for this walkthrough! I have one suggestion though. Instead of listening for click events on the body element, you can listen for them on the board itself.
In my version I also made it so that you can toggle grid lines, which I find useful.
Hi Rob, thank you for this video! I was having a hard time finishing this assignment and thanks to your video I understand the steps and logic easily!
Thanks so much!! I'm glad this helped
kendinden ekleme yaptin mi projeye yoksa aynen yapip gectin mi? ahahkjakh merak ettim
Hi Rob, I appreciate your tutorial. This was really helpful and easy to follow through.
Thanks so much! I really appreciate your comment and I'm glad that it was helpful!
Thanks for the video ! I also did the challenge , but watching how you do it always helps me learn different ways .
Hey Ab Krew! Welcome to the channel! That's great to hear! Yeah, that's one of the great things about programming, there's lots of different ways to get to a solution. What was the trickiest part of this project for you?
@@codingwithrob Definitely the usage of dom . Also i used google a lot for the css parts as well .
Yep, messing with the dom using javascript is weird. On a professional and personal level, I usually use a framework like react, so even doing this was weird for me. Google is definitely your best friend when programming haha.
I really enjoy hearing/seeing the way you think through function creation. Thank you!!!
love the video, it helped me alot. Just one suggestion, could you zoom in on your code a bit, its hard to see it without going fullscreen and i cant code along that way.
Welcome to the channel! Glad it helped! Thanks for the suggestion, I didn't even realize that haha. Going forward, I will make sure to zoom in.
The furthest I was able to make it on my own was to get the board to work, but I am struggling with getting the different buttons to toggle :/ thank you so much for making this video for people like me who struggled through this project!
Thanks so much for the feedback! Hopefully the way I did the toggling helped you think through the process.
How's the odin project going for you so far? If you find it difficult, don't worry, thats definitely normal and means that you're learning
@@codingwithrob so far it's definitely a really slow uphill climb but I find myself learning concepts much more efficiently by figuring it out as I go rather than being spoon-fed answers, the lack of hand-holding actually proved to be really well throughout the course!
This was great and super helpful, but no way I could do this all on my own. Been self teaching for about 8mo and still feel so inadequate. Hopefully some day it comes as easy as you made it look.
Hey Alex! If I'm being honest, as a youtuber I have complete control over what makes it into a video. What these videos don't show is me trying to debug something simple for 20+ minutes, which happens probably at least every single video. And, Ive been in software for a decently long time. It just takes a lot of practice, and eventually it gets easier and easier. I know for sure that if you keep up with it, it will become second nature to you as well.
@@codingwithrob Thanks for sharing. I was amazed that you got more done in the first 5 minutes, while I've been trying to figure out how to created the repeated divs for the last 45 minutes :)
Oooh, so that's why you made the board size dynamic too.
I see. Thanks a lot 😊.
Thanks so much 💜.
Hey Kelvin! Welcome to the channel! 💜
That's a great question, I remember this being a bit frustrating to figure out when I was doing it. So if we go to timestamp 7:28 , I'll try to explain what ended up happening, and I'll refering to the main.js file. In line 5 and 6, we are setting up 32 rows and 32 columns, based off of the size which was 32. However, in the for loop on line 8, we are only going from i = 0 to i = 256, so it was only coloring 256 squares, which would be 16 rows. So it did create all of the squares that we wanted, but it wasn't coloring all of them in
Thanks for this video. I learnt a lot from you. You made it real simple for me.
Thank you! this video helped me solve one last step I needed to complete the etch-a-sketch project
Awesome break down! Really appreciate your work!
Don't the instructions state not to use display: grid?
Hey Rob, great tutorial, thank you very much! One question though, is there a way to add a class to squares so I can have a border around each box in the board?
Amazing tutorial!
Glad it was helpful!
6:52 you say the button should allow it to fire the changeSize function but how does the button know it's taking the value from that function?
Hey Fwan! That is actually a great question, nice job on picking that up. So, I could be mistaken, so if anyone else understands this better and reads this, please jump in. Also, I'm not the best at explaining things over text, so let me know if I don't make sense. So what I think happens, is the input section and the button are both contained within a div. The default action (this is actually hidden since its default) of a button is of type submit, so anytime a button is clicked, the html is going to assume that there is a form or inputs that need to be submitted. This in turn causes the function, changeSize to fire with the value that we have put into the input section. If we put set up the button like: then I assume that nothing would happen. So, in short, since they're both in the same div and since one is an input and one is a button, they are actually automatically tied together
@@codingwithrob That is very interesting. I am working on the project right now and have came across some weird things with button. I noticed if you give the button an ID in the HTML, you can access it in the JavaScript as if it were defined without having to use document.querySelector. For example.
window.onload = function() {
createSketchpad(0);
};
function createSketchpad(size) {
const sketchpad = document.querySelector('.sketchpad');
sketchpad.style.gridTemplateColumns = `repeat(${size}, 1fr)`;
sketchpad.style.gridTemplateRows = `repeat(${size}, 1fr)`;
for(var i = 0; i < Math.pow(size,2); i ++) {
var gridIndex = document.createElement('div');
gridIndex.style.backgroundColor = 'blue';
sketchpad.insertAdjacentElement('beforeend', gridIndex);
}
};
submitSizeButton.onclick = function chooseSketchpadSize() {
var submitSizeInput = document.querySelector('.submitSizeInput').value;
createSketchpad(submitSizeInput);
};
submitSizeButton is not defined anywhere in this JS but just by having its ID set in the HTML the code works for changing the size. I wonder why.
Are you on The Odin Project discord? They have some great discussions on there.
Hmm, that is very interesting haha. I didn't know you could do that. That might make using buttons a lot easier. I wonder if it's common to do that.
By the way, your code looks great! Did you have programming experience before starting the Odin project?
I'm actually not on the discord currently. I should probably join though! I'd be interested in seeing what people have to say
@@codingwithrob I do have coding experience (I'm a junior dev right now) but most of this code I learned from your code up until the 6 minute mark! Right now I am trying to figure out how to fill the board onmousedown instead of onmouseover haha.
That makes sense, I could tell that some of your code was inspired by mine, but there's also more that uses a unique but equally valid style to it. So that tells me that you know what you want to do with your code and I think that it shows you're taking a good approach to my videos. I think that tutorial videos like this are best used by pulling bits and pieces from it and incorporating those into your own ideas and styles. Which is exactly what you're doing and that's awesome
How do you make the 'Set Size' button fire the input value? its not doing anything for me. i have to press enter to trigger the input and also my original value of '16' does nothing, i have to retype the values before i can draw
extremely helpful! thank you for this. how long have you been programming? are you a professional? And did you learn through TOP? Thank again :D
Welcome to the channel! I'm glad it was helpful! So good questions, I programmed quite a bit in college for my classes, so I started learning about 10 years ago now, and I learned the basics of c++ and python. I didn't learn any Javascript or web dev until about 3 years ago. I did actually mostly learn through the Odin Project! But it was quite a bit different back then, so it's cool to see how much they've changed and improved it. And yes, I am a professional developer now. I am a full stack developer at a smaller company, so I get to use a whole bunch of different technologies to create software that we need.
@@codingwithrob interesting. Thanks for the reply.
Hi Rob, how are you grabbing and storing the size value using and the Set Size ? This is around the 6min mark of your video
I dont understand how to use to grab and store a variable. Instead, for this part, Im using a Let (variable) = prompt() to grab and store the value into a variable.
Sorry if my question is phrased badly.
Hey Jaky, that is an excellent question. So, I think it's able to grab the value from the on change attribute we set on the input, so that stores the value. It gets set though by the button firing the onchange event. It might not look like the button is connected to the input field, which I didn't think how I did it would work either, but I think that since they are both contained in the same div, the html is smart enough to link them together. Buttons automatically have a submit attribute on them, so I think that it fires the function almost as if its in a form. Looking back at this, it probably would make more sense to do something explicit and easy to read, like submitting a form.
I think that your way of doing it with a prompt is a great way to do it! That's the amazing thing about programming, there are tons of ways to do accomplish the same thing, and there isn't necessarily a better way, just different ways
thanks Rob,
for this video!!
What's the .prettierrc file? ive never heard of that.
First of all great video Rob, I have been having this particular problem for a while now and wanted to know if you could help me.
Every time I write a function in javascript with document; for example: let board = document.querySelector('.board'). I get a "ReferenceError: document is not defined". Do you know a way to fix this? Thanks again for your videos
try getElementByClassName and your classes may not be in scope
Where have you put the script file in index.html? For example I got "Uncaught TypeError: Cannot read properties of null (reading 'style')" and looking through my code I found that my script file was in without defer in the tag, which results in the js file load first, without finding the items I want to grab from index.html. Adding defer in the tag, or moving the script tag last before closing the body tag fixes this. Hope you solved it!
@@johanhellberg9677 thanks a lot. this helped solve mine
@@walejemo Awesome! Glad to hear it worked.
While I was doing this project I selected 1000 for the size without making sure my validation worked first and it crashed. Now anytime I load the html file it loads the board and then the whole screen turns white. The code is the exact same as before the crash and the board loads if i unlink the js file. Anyone know how to fix this?
whats up with 'BUTTON'. why does it need to be capitalized?
Thank you for this tutorial! I have a strange problem, at 8:31 when i type in 5000 squares in set size , to test if the console.log else statement will work, my page stops responding and it crashes, anyone have an idea how to fix this and what could be the reason?
Is there a video where you cover how you use prettier? I installed the extension a long time ago but I didn't know it required configuration.
Haha for some reason, getting prettier to work is harder than it should be. There's probably other ways to get it configured, but I do it in the beginning of this video: ruclips.net/video/9t7SuenTpAk/видео.html So, the way I do it, you have to have a prettier config file in every project you work. I think that this a better way to do it, since you can set up custom configs with a team and the stylings will remain consistent. But, there's probably a way to do it without a config file.
@@codingwithrob Thank you. After struggling for two days with this project, anything to save me time is a blessing.
Sure thing! Prettier is such a good utility haha. My code would look like trash without it
Thank you so much!
Glad it helped!
Thanks!
Around the 7-8min mark you set squares using DOM to get all the div elements and used remove in the forEach loop. Im still unsure what that was supposed to do.
also when i click reset, outside my drawing box also goes to white background color.
The best!
what is reset.css used for?
Hey Jethro! Great question. So, html typically has a whole bunch of styles that are automatically added to a website. Those styles aren't really shown to us, and they can be annoying to work around. A reset sheet strips those default styles away so that we can be 100% in control of the styles that we apply. Here's a section on the odin project that explains it better than me:
www.theodinproject.com/lessons/node-path-intermediate-html-and-css-default-styles
Thanks a lot!
We haven’t learned grid yet
I was thinking that too, either I missed it but was questioning that as well.
I looked around in the discord about the lack of mentioning grid/flexbox or media queries (they cover them in detail pretty early in a Udemy course I took) and most of the replies said that they probably won't add any dedicated sections to them. Hopefully they at least mention it in the future so I just google'd it to refresh my memory lol
3:35