Moodboarder is a great place for anyone who enjoys making aesthetic moodboards. Simply pick one of three templates, add it to your board, and customize it in your own style!

Throughout my design journey, I realized how much I enjoy creating things from scratch. That’s what led me to learn JavaScript - so I could add interactivity to my designs. Honestly, I’m so glad I decided to learn it, because I had been missing out on so much.

If you’d like to check out the code, click here to visit my GitHub.

What I aimed with this project is below:

• Hands-on practice with JavaScript
• Working with classes, constructors, and "this" keyword
• Building an app I would actually use
• Mastering event listeners and conditionals, and launching a finished app on the web

01. Landing Page

When you first visit the website, you’ll be greeted by a simple yet informative landing page. You can start by changing the title however you like, and when you click the instructional text, it will show you three different templates.

02. Template Selection

Here, you have three options to choose from: a title with text, a quote, or an image.

03. Editing a Note

To edit a note, simply click on the note you’ve just added. This will bring up the editing screen.

04. Final Look

And voilà! Now you have a beautiful moodboard. You can take a screenshot by clicking the button below, or by using the PrtSc button on your keyboard (this method is recommended because the library I’m using cannot capture images due to cross-platform data protection).