Beginner JavaScript Tutorial - DOM Manipulation and API calls to Storyblok

You don't need a framework like React to build something cool. Let's build an event calendar using Vanilla HTML, CSS, and JavaScript that pulls in event data from Storyblok. At the end, I'll give you a list of challenges that you can take on to further increase your JavaScript and Web Development skills.

**RESOURCES**

**QUESTIONS ABOUT MY SETUP**

**STAY IN TOUCH 👋**

**DISCORD**

[veebxl]

Thank you so much! I finally understood the basics, after months of dabbling in JS exercises - this is how to present several concepts at once. THANK YOU

[GentlemanTomcat]

Great tutorial, this is my first experience with your channel and a headless CMS (or any CMS), excited to dig into it more.

Just a heads up I found a bug where in the current code the first day of the is whatever day of the week you are building the project. To fix this I added "theFirst.setDate(1);" to:

let theFirst = new Date();
theFirst.setDate(1);
theFirst.setMonth(month);
theFirst.setFullYear(year);

Also to handle to overflow days, for months like April 2023 which start on a Saturday, I made the calendar 6 rows instead of 5 by increasing the i iterations to 42 from 35.

for(let i = 0; i < 42; i++) {
const day =
day.classList.add('day');

As a result though certain events would linger on the calendar when switching months since the events are only being rendered when the day number was changing. To fix this I cleared out the eventName.innerText each time a dayElement is created in the "for" loop.

for (let i = 0; i < dayElements.length; i++) {
const day = dayElements[i];
const eventName =
eventName.innerText = ' ';

[gosnooky]

Damn, beginners' JS using the native Date object. Talk about baptism by fire.

[markos]

This fantastic and the way how you present it. I love your videos and overall quality of the content you present. I wold love to see more of Storyblok related use cases. Thumbs up and see you on next one.

[samujell]

The quality of your videos is impressive. I can’t imagine how much hard work you have to invest. Thank you and 👏👏👏

[quaap]

Great tutorial, very educational!. Thank you!

[MrAreaboy]

Good tutorial quite complex js but good overall

[deathone]

13:08 you can just defer the script of the JS, instead of putting it at the bottom.

PS: James - 37:27 your audio and visual are not synced it seems

[gzger]

Hey James,
Could you tell me which VSCode theme you‘re using? :)

Great Video, love you content!!

[scott_itall]

A Gantt Chart and maybe a Trello Board?

[chrisdizzle]

Love the video my boy! When you created the updateCalendar function, how do you know you need to pass in "month, year, events". Is there a some type of guide out there that says "if you are building this, this is what needs to be passed"? How do you decide what goes in the parens?

[StockRecursiveOverflow]

Maybe there is a bug in your code, 35 for the loop seems not right. There are months need 42 cells.

[illy]

Great tutorial!! Btw what theme do u use in your editor? That caught my attention lol

[ChandraSkinner]

This was an excellent tutorial. I created it with a table. But haven't add the events yet. I do have one question. How can you add the dates for the previous and next month in the empty cells?

[bobbysilver]

Good video concept and pace. However, many of the images and the code on the screen is blurry. I wonder if was like this on record or if the video quality you uploaded was not a high enough resolution? It makes following the code unnecessarily harder.

[menagames]

Hi James, thanks for the great tutorial. I have tried to debug many times and at the end I have cloned from the git repo and I'm seeing an issue with the days and the numbers they don't work as expected. Am I missing a plugin or an add-in.

[kristiankristiansen]

Testing with the code from your repo and my own storyblok data and token, i can log the data fine, but the ui is showing * undefined. any suggestions?

[EricMillen]

I like your videos but you your fast pace of talking and the cuts to full screen shots of you talking (when I'm still trying to type the code that you just cut away from) make it hard to follow along.