Beginner JavaScript Tutorial - DOM Manipulation and API calls to Storyblok

Поділитися
Вставка
  • Опубліковано 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

КОМЕНТАРІ • 35

  • @samujell
    @samujell Рік тому +4

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

    • @JamesQQuick
      @JamesQQuick  Рік тому +1

      Thank you :)

    • @S-Lomar
      @S-Lomar 9 місяців тому

      💓💓💕💕😂🥰😍😍💓💓🥰💓💓🥰😍🥰🥰😍😍💕💕💓

  • @gosnooky
    @gosnooky Рік тому +1

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

  • @markos8971
    @markos8971 Рік тому +3

    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.

    • @JamesQQuick
      @JamesQQuick  Рік тому

      Great suggestions and thanks for the feedback!

  • @veebxl
    @veebxl 6 місяців тому

    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

  • @blazer125
    @blazer125 Рік тому

    This is Great! Thank You!

  • @arungupta421
    @arungupta421 Рік тому

    Nice, thanks

  • @MrAreaboy419
    @MrAreaboy419 4 місяці тому

    Good tutorial quite complex js but good overall

  • @GentlemanTomcat
    @GentlemanTomcat Рік тому +1

    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 = ' ';

  • @g1zger
    @g1zger Рік тому +1

    Hey James,
    Could you tell me which VSCode theme you‘re using? :)
    Great Video, love you content!!

  • @kevinmungame1869
    @kevinmungame1869 Рік тому

    super, thank you.

  • @scott_itall8638
    @scott_itall8638 6 місяців тому

    A Gantt Chart and maybe a Trello Board?

  • @menagames6478
    @menagames6478 Рік тому

    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.

  • @illy59
    @illy59 10 місяців тому

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

    • @JamesQQuick
      @JamesQQuick  10 місяців тому

      Thank you! Hmm unfortunately, I'm not sure. I've gone through phases of using a bunch of different ones lol

    • @illy59
      @illy59 10 місяців тому

      @@JamesQQuick No biggie I managed to figure out by playing around the themes you mentioned in your blog😉

  • @deatho0ne587
    @deatho0ne587 Рік тому +1

    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

  • @chrisdizzle313
    @chrisdizzle313 10 місяців тому +1

    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?

    • @JamesQQuick
      @JamesQQuick  10 місяців тому

      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!

    • @S-Lomar
      @S-Lomar 9 місяців тому

      And how to earn on that project 🥰🥰🥰🥰🥰🥰🥰😍🥰🥰🥰😍🥰🥰🥰😍🥰🥰🥰🥰🥰🥰

  • @bobbysilver272
    @bobbysilver272 Рік тому

    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.

    • @JamesQQuick
      @JamesQQuick  Рік тому +1

      Typically that happens because of poor internet connection. UA-cam will downgrade the quality automatically. You can manually set it to hd though. I have to do that sometimes when I’m watching videos

  • @ChandraSkinner
    @ChandraSkinner 9 місяців тому

    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?

    • @JamesQQuick
      @JamesQQuick  9 місяців тому

      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

  • @kristiankristiansen5603
    @kristiankristiansen5603 Рік тому

    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?

    • @kristiankristiansen5603
      @kristiankristiansen5603 Рік тому

      Found the error, it's * ${event.titel} not * ${event.title}

    • @JamesQQuick
      @JamesQQuick  Рік тому

      Ah did I have the bug in my code or was that a typo in yours?

  • @bobmichael8735
    @bobmichael8735 13 днів тому

    what vs theme is this ?

  • @bobroccoli1289
    @bobroccoli1289 4 місяці тому

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

  • @EricMillen
    @EricMillen Рік тому +2

    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.

    • @JamesQQuick
      @JamesQQuick  Рік тому +1

      Thanks for the feedback. I'll try to work on that!