Beginner JavaScript Tutorial - DOM Manipulation and API calls to Storyblok
HTML-код
- Опубликовано: 15 фев 2023
- 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*
Github Repo - github.com/jamesqquick/vanill...
*SPONSORED BY STORYBLOK* - storyblok.com/
*QUESTIONS ABOUT MY SETUP*
Check out my Uses page for my VS Code setup, what recording equipment I use, etc. www.jamesqquick.com/uses
*STAY IN TOUCH 👋*
Check out the Podcast - compressed.fm/
Courses - jamesqquick.com/courses
Newsletter 🗞 - www.jamesqquick.com/newsletter
Follow me on Twitter 🐦 - / jamesqquick
*DISCORD*
Join the Learn Build Teach Discord Server 💬 - / discord
Damn, beginners' JS using the native Date object. Talk about baptism by fire.
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 = document.createElement('div');
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 = day.querySelector('.event-name')
eventName.innerText = ' ';
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.
Great suggestions and thanks for the feedback!
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
The quality of your videos is impressive. I can’t imagine how much hard work you have to invest. Thank you and 👏👏👏
Thank you :)
💓💓💕💕😂🥰😍😍💓💓🥰💓💓🥰😍🥰🥰😍😍💕💕💓
This is Great! Thank You!
Hey James,
Could you tell me which VSCode theme you‘re using? :)
Great Video, love you content!!
Nice, thanks
super, thank you.
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?
Just made that up based on the use case. By passing in those parameters, I can make the function more reusable and self-contained. In JavaScript you might hear about "pure functions" which basically means the function has all the data it needs to do its job (and it doesn't change any outside data). This isn't fully "pure" but by passing in those props, the function has the info it needs to do it's thing!
And how to earn on that project 🥰🥰🥰🥰🥰🥰🥰😍🥰🥰🥰😍🥰🥰🥰😍🥰🥰🥰🥰🥰🥰
Good tutorial quite complex js but good overall
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
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.
Great tutorial!! Btw what theme do u use in your editor? That caught my attention lol
Thank you! Hmm unfortunately, I'm not sure. I've gone through phases of using a bunch of different ones lol
@@JamesQQuick No biggie I managed to figure out by playing around the themes you mentioned in your blog😉
A Gantt Chart and maybe a Trello Board?
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.
Typically that happens because of poor internet connection. RUclips will downgrade the quality automatically. You can manually set it to hd though. I have to do that sometimes when I’m watching videos
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?
That would just take extra calculations. For previous month, you'd count back from the number of days in the month for the available slots, and the opposite for the next month
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?
Found the error, it's * ${event.titel} not * ${event.title}
Ah did I have the bug in my code or was that a typo in yours?
Maybe there is a bug in your code, 35 for the loop seems not right. There are months need 42 cells.
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.
Thanks for the feedback. I'll try to work on that!