Build a Beautiful Automatic Calendar | HTML, CSS & JavaScript Tutorial

Поделиться
HTML-код
  • Опубликовано: 5 июн 2024
  • Hey Everyone, Welcome back to my tutorial. In this tutorial, I will show you, how to create a beautiful automatic changing Calendar, using HTML, CSS and JavaScript.
    • Please Be Sure to drop a LIKE on this video, and SUBSCRIBE to my Channel for more videos.
    ==============================================================
    • Timestamps:-
    00:00 - Introduction
    00:54 - HTML Code
    04:18 - CSS Code
    17:44 - JavaScript Code
    29:51 - Giving Calendar A More Cleaner Look
    30:56 - Fixing Bug
    31:30 - Final Output
    ==============================================================
    • Important Links:-
    1. VSCode - code.visualstudio.com/
    2. Live Server Extension - marketplace.visualstudio.com/...
    3. BG Image - bit.ly/38V4vFD
    4. Moment JS Library - momentjs.com/
    ==============================================================
    • Follow me on Instagram: @techy_sharnav
    • Add me on Discord: TechySharnav#1615
    ===============================================================
    ◘ My other Programming Tutorials →
    • Random Hex Color Generator (HTML, CSS, JS):- • Adaptive Random Hex Co...
    Multi-layered Text Shadow Effect (HTML & CSS):- • Multi-layered Text Sha...
    • My Python Tutorial Playlist : tiny.cc/amwaqz
    • Auto Typer (Visual Basic Script): • How to make an Auto Ty...
    • Prank Virus (Visual Basic Script): • How to create a Prank...
    ===============================================================
    ◘ Some of my How-to Tutorials →
    • Add Custom Theme to IDLE: • How to add Custom Them...
    • Change OEM information on Windows: • How to Change OEM Logo...
    • Add Icons to Folders: • How to Customize Folde...
    • Change skin of your mouse cursor: • How to add Custom Them...
    • Download RUclips videos using VLC: • How to download YouTub...
    • Change Lockscreen Background in Windows 7: • How to Change Lockscre...

Комментарии • 34

  • @SharnavTech
    @SharnavTech  2 года назад

    Download Source Code:- bit.ly/3NMai3P

  • @empowercode
    @empowercode 3 года назад

    Hey! I just found your channel and subscribed, love what you're doing! Particularly, I like how clear and detailed your explanations are as well as the depth of knowledge you have surrounding the topic! Since I run a tech education channel as well, I love to see fellow Content Creators sharing, educating, and inspiring a large global audience. I wish you the best of luck on your RUclips Journey, can't wait to see you succeed!
    Your content really stands out and you've put so much thought into your videos!
    Cheers, happy holidays, and keep up the great work :)

    • @SharnavTech
      @SharnavTech  3 года назад

      Very Very Much Thank you brother! Your words mean a lot to me.

    • @SharnavTech
      @SharnavTech  3 года назад

      I also wish you luck and success for your channel.

    • @empowercode
      @empowercode 3 года назад

      @@SharnavTech No problem, I'm so glad I could help you out!

  • @tenc6491
    @tenc6491 Год назад

    First tutorial video on youtube with the most number of ads. I counted out of curiosity and noticed 20+ ads in 32 minutes video. Not fair mate! I know we all do it to make some cash but not to this extent. Honestly!

    • @SharnavTech
      @SharnavTech  Год назад

      Thank you for bringing this to my attention. It's not me who has placed the ads. It's added by RUclips automatically. Now, I'll manually place 3-4 ads only. Kindly check after a few hours.

  • @rouymalic4463
    @rouymalic4463 2 года назад +2

    I like the code it so look professional I would like to add how see the list of month like they have an additional buttons to see every month

    • @SharnavTech
      @SharnavTech  2 года назад +1

      Thanks! The buttons can be implemented, but its quite a bit of work to do.
      (with the animation)

  • @juanch3400
    @juanch3400 3 года назад +1

    Thank You 👌👌👌

  • @toanjack3214
    @toanjack3214 2 года назад +1

    I love this your videos

  • @romimaximus
    @romimaximus 2 года назад +1

    at 23:11, i dont understand where that "obj" comes from ? .... cause i dont see you calling the function "getDate()" inside the function generateCalendar(), to get the returned values from "getDate()" ? its confusing to me !! thank you.. !!

    • @SharnavTech
      @SharnavTech  2 года назад

      'obj' is a global variable, that is declared after declaring the getDate function. See 22:32

  • @nanaama2631
    @nanaama2631 Год назад

    Hello please where from the calendar number class you called in the CSS?

    • @SharnavTech
      @SharnavTech  Год назад +1

      Sorry, I am not able to get you properly. If you meant where the 'calender__number' class came from, then it comes from JavaScript (see 28:30).

  • @user-wz9qr6ki9v
    @user-wz9qr6ki9v 2 года назад +1

    спасибо за видео,привет из россии,подписался!

    • @SharnavTech
      @SharnavTech  2 года назад

      Добро пожаловать и спасибо за подписку!

  • @christiandominicalday9448
    @christiandominicalday9448 2 года назад

    Can I ask? where does "calendar__number" came from?

    • @SharnavTech
      @SharnavTech  2 года назад

      That class comes from JavaScript, from the for loop.

  • @bigkgaming8171
    @bigkgaming8171 Год назад

    at 24:40 I have error ,
    moment is not defined at generateCalendar

    • @SharnavTech
      @SharnavTech  Год назад

      You need to include moment.js library into the project. See 3:05 - 3:50

  • @ellisgael6747
    @ellisgael6747 3 года назад +2

    Fantastic 😍💋 💝💖♥️❤️

  • @SayeedHasanJisad
    @SayeedHasanJisad 2 года назад

    brother can i have the source code?

  • @surendrasuri8495
    @surendrasuri8495 2 года назад

    I need source code

  • @Non-Person404
    @Non-Person404 Год назад

    no working... full problems importing moment.js to my vscode project... dislike

    • @SharnavTech
      @SharnavTech  Год назад +1

      What problems are you facing? Please elaborate.

    • @Non-Person404
      @Non-Person404 Год назад

      @@SharnavTech Uncaught SyntaxError: The requested module '../../etc' does not provide an export named 'moment' (at '../../etc), i have this problem and i try to solve it with many syntax to import the node.js Moment.js to my javascript project... but nothing working... all my route is ok and the links too.. i doesnt have idea what i do now. My project based vscode and y have html, css and javascript. y copy and all it, but the problems is the import of Moment.js to my javascript...

    • @SharnavTech
      @SharnavTech  Год назад +1

      Moment is available as a library for NodeJS. You can simply install it by executing 'npm i moment' in the root directory of your project.
      Then you can simply import by using
      import moment from 'moment';
      www.npmjs.com/package/moment

    • @Non-Person404
      @Non-Person404 Год назад +1

      @@SharnavTech not working...if you have discord pass me you id and i talk to you for solve this problem.. (edited: i have seen your id on your description, I'm talking to you right now)