This week was the start of the three week long Front-End block of the Northcoders bootcamp I'm on. We started off the week by creating mini-apps by manipulating information available to us using the DOM, then moving into React in the second half of the week.

If you've enjoyed any of my blog series, then maybe consider following me on GitHub 😁

What I've learnt this week

DOM manipulation

At the start of the week, we learnt how to access and manipluate what's on a webpage using JavaScript, it was great to learn out to make something interactive and have some more visual feedback on what I was doing than what you get when doing backend tasks.

To put these new skills into practice, we built a tic-tac-toe game and were very happy with the way it turned out, we didn't get around to styling it, and instead focussed on the functionality, but the styling is something that would be good to come back to.

Form validation

This covered learning how to make form fields required, using RegEx to do form field validation on things like emails and URLs to make sure the user provides the correct information, and learning how to get the values from submitted forms.

We built a meme generator that took two input fields for top text, and bottom text, and then a third input field that takes an image URL. We used RegEx to validate the url and the condition that as long as there was either top or bottom text entered, the form would allow you to submit the form to generate the meme.

React

For my first day using React, I built a pizza parlour site, that would use buttons to add and remove pizzas from a basket, clear the basket and confirm an order. I had heavy influence from Crazy Pedro's and Dough Boys Pizza in the naming and pizza types! I was really happy to get stuck into React and build something functional with it, I'm really happy with how it turned out and how much I was able to do in such a short time. Keep an eye out because I plan to finish the pizza parlour project off and show off what I can do!

But here's a demo of what it looks like so far!

React mini-app

For the last two days this week, we were building a working calculator using React, and taking advantage of states that React allows us to use, over methods like closure that we have been used to using. I'd really like to get this calculator full functional and styled when I have some spare time to put on my portfolio site.

Resources that I've found useful this week

I Hate Regex

I hate Regex is a great site that has prebuilt regex strings, as well as details on how they work, as well as some wicked diagrams that show the flow of the logic.

Interneting is hard

Interneting is hard is another great site that has a very comprehensive beginners guide to HTML and CSS, it's a great ready through in the mornings before starting off