Learning Axis
Learning Axis
  • 503
  • 17 906 391
calendar using HTML CSS and JavaScript
#html #css #javascript #tutorials #trending #learning #learningaxis
This video shows to create calendar using HTML CSS and JavaScript.
Follow us on:
Facebook: learningaxis01
Instagram: learningaxis01
Tiktok: www.tiktok.com/@learning_axis
LinkedIn: www.linkedin.com/company/learning-axis
If You need Graphic designing and web development services please visit contact@learning-axis.com.
Sound effects from Pixabay.
Source code: rb.gy/3t5k1s
zhlédnutí: 1 469

Video

Password Generator Using HTML, CSS & JavaScript
zhlédnutí 2,4KPřed měsícem
Password Generator Using HTML, CSS & JavaScript
User Registration | Login & Logout Functionality in React with OneEntry Headless CMS
zhlédnutí 987Před měsícem
User Registration | Login & Logout Functionality in React with OneEntry Headless CMS
Manage Forms With OneEntry Headless CMS
zhlédnutí 676Před měsícem
Manage Forms With OneEntry Headless CMS
Optimize Your Workflow | OneEntry CMS Tutorial for App and Website Management
zhlédnutí 880Před měsícem
Optimize Your Workflow | OneEntry CMS Tutorial for App and Website Management
Form Validation using JavaScript
zhlédnutí 2,6KPřed 2 měsíci
Form Validation using JavaScript
Rich Text Editor Using HTML, CSS & JavaScript
zhlédnutí 3,5KPřed 3 měsíci
Rich Text Editor Using HTML, CSS & JavaScript
Accordion Using HTML, CSS, & JavaScript
zhlédnutí 1,6KPřed 3 měsíci
Accordion Using HTML, CSS, & JavaScript
Preloader Using HTML CSS JavaScript
zhlédnutí 3,5KPřed 4 měsíci
Preloader Using HTML CSS JavaScript
Analog Clock Using HTML, CSS & JavaScript
zhlédnutí 8KPřed 5 měsíci
Analog Clock Using HTML, CSS & JavaScript
Email OTP Setup with HTML, CSS, and JavaScript
zhlédnutí 36KPřed 7 měsíci
Email OTP Setup with HTML, CSS, and JavaScript
Revolutionize Your Forms with Visme | Stunning Designs & Real-Time Lead Tracking
zhlédnutí 2,8KPřed 7 měsíci
Revolutionize Your Forms with Visme | Stunning Designs & Real-Time Lead Tracking
How to Make a Popup Using HTML, CSS and JavaScript
zhlédnutí 6KPřed 9 měsíci
How to Make a Popup Using HTML, CSS and JavaScript
Digital Clock Using HTML, CSS, & JavaScript
zhlédnutí 19KPřed 9 měsíci
Digital Clock Using HTML, CSS, & JavaScript
Calculator Using HTML, CSS and JavaScript
zhlédnutí 11KPřed 10 měsíci
Calculator Using HTML, CSS and JavaScript
New responsive container Queries | HTML CSS
zhlédnutí 3,3KPřed 10 měsíci
New responsive container Queries | HTML CSS
Countdown Timer Using HTML, CSS, & JavaScript
zhlédnutí 4,2KPřed 10 měsíci
Countdown Timer Using HTML, CSS, & JavaScript
Create Tabs With HTML, CSS, & JavaScript
zhlédnutí 3,8KPřed 10 měsíci
Create Tabs With HTML, CSS, & JavaScript
Accordion | HTML, CSS, & JavaScript
zhlédnutí 2KPřed 10 měsíci
Accordion | HTML, CSS, & JavaScript
Online Code Editor | Live Code Editor Using HTML, CSS & JavaScript
zhlédnutí 3,8KPřed 10 měsíci
Online Code Editor | Live Code Editor Using HTML, CSS & JavaScript
WhatsApp | How to Send Data From HTML Form to WhatsApp
zhlédnutí 15KPřed 10 měsíci
WhatsApp | How to Send Data From HTML Form to WhatsApp
Responsive Video Playlist | How to create Video Playlist using HTML CSS JavaScript
zhlédnutí 6KPřed 11 měsíci
Responsive Video Playlist | How to create Video Playlist using HTML CSS JavaScript
Responsive Carousel | How to Create Responsive Card Slider Using HTML, CSS & JavaScript
zhlédnutí 7KPřed 11 měsíci
Responsive Carousel | How to Create Responsive Card Slider Using HTML, CSS & JavaScript
How to Send HTML Form Data to Gmail Using JavaScript
zhlédnutí 48KPřed 11 měsíci
How to Send HTML Form Data to Gmail Using JavaScript
Google Sheets | How To Send HTML Form Data To Google Sheets
zhlédnutí 79KPřed rokem
Google Sheets | How To Send HTML Form Data To Google Sheets
Drag And Drop | How To Add Drag & Drop Functionality In Website
zhlédnutí 2,3KPřed rokem
Drag And Drop | How To Add Drag & Drop Functionality In Website
Live Chat | How to Add Live Chat Option to Website
zhlédnutí 6KPřed rokem
Live Chat | How to Add Live Chat Option to Website
Google reCAPTCHA | How to Implement Google reCAPTCHA on Website
zhlédnutí 11KPřed rokem
Google reCAPTCHA | How to Implement Google reCAPTCHA on Website
Pagination | Pagination in JavaScript | Ecommerce Website
zhlédnutí 8KPřed rokem
Pagination | Pagination in JavaScript | Ecommerce Website
Orange Juice | HTML CSS
zhlédnutí 25KPřed rokem
Orange Juice | HTML CSS

Komentáře

  • @user-ez3mq2uk8v
    @user-ez3mq2uk8v Před 6 hodinami

    best

  • @kidzeezy0112
    @kidzeezy0112 Před 10 hodinami

    To be able to do this you need at least 1 yr experience/learning

  • @anujhadiyel4837
    @anujhadiyel4837 Před 13 hodinami

    Please reply me

  • @anujhadiyel4837
    @anujhadiyel4837 Před 13 hodinami

    And i am just start please how can I do like you menas leran HTML and CSS source??

  • @anujhadiyel4837
    @anujhadiyel4837 Před 13 hodinami

    Brother you deserve better not only 183 you can achieve more so keep it up

  • @andriwahyu34
    @andriwahyu34 Před 15 hodinami

    Apakah ada cara membuat gerakan pada tombol dengan java?

  • @learning-axis
    @learning-axis Před 16 hodinami

    Follow us on: Facebook: facebook.com/learningaxis01 Instagram: instagram.com/learningaxis01 Tiktok: www.tiktok.com/@learning_axis LinkedIn: www.linkedin.com/company/learning-axis If You need Graphic designing and web development services please visit contact@learning-axis.com Source code: rb.gy/gxwfbt

  • @Beauty-46
    @Beauty-46 Před 17 hodinami

    App name

  • @Cutequingy
    @Cutequingy Před dnem

    Hello while we code does our colour also change 😅 bc inever done

  • @RkRipon-bts
    @RkRipon-bts Před dnem

    Brather we are codeing lover ❤❤❤❤❤❤❤❤❤

  • @meow1799
    @meow1799 Před dnem

    code?

  • @Sill.C4T9
    @Sill.C4T9 Před dnem

    My brain who only knows lua:🔥🔥🔥🔥🔥

  • @user-sf7tt5sf3u
    @user-sf7tt5sf3u Před dnem

    Source code ?

  • @mayankmaheshwari9526

    How did you do that?

  • @ProGamerYT1902AJDogsRecruiter

    Bro it literally says auto-type on the top of the screen

  • @redriver143
    @redriver143 Před dnem

    so much code for so easy looking ending thats fucked up 😅

  • @Animatedtoons830
    @Animatedtoons830 Před dnem

    how can we run c in sublime text

  • @user-ko3rb4sl4z
    @user-ko3rb4sl4z Před dnem

    sir mere me to submit btn pr click kar ke redirect ho raha hai muje vo disable karna kese karu

  • @learning-axis
    @learning-axis Před dnem

    Follow us on: Facebook: facebook.com/learningaxis01 Instagram: instagram.com/learningaxis01 Tiktok: www.tiktok.com/@learning_axis LinkedIn: www.linkedin.com/company/learning-axis If You need Graphic designing and web development services please visit contact@learning-axis.com Source code: rb.gy/s02qdg

  • @bondarliua
    @bondarliua Před dnem

    2 in 1😮😮😮😮

  • @patrickjohnson7743

    That's very nice ❤🎉

  • @soyamparida8510
    @soyamparida8510 Před 2 dny

    Advanced css can make you a website

    • @learning-axis
      @learning-axis Před dnem

      Absolutely! Advanced CSS can transform a basic website into a visually stunning and interactive experience, enhancing usability and engagement.

  • @khaderuddinwaseemmohammad7599

    Whoa!!!

  • @ayesha24237
    @ayesha24237 Před 2 dny

    theme name

  • @messengercreator
    @messengercreator Před 2 dny

    mean while DEEPAI since start 1990 and u can show ur picture and video and anything u want to not hard type to build

  • @andriwahyu34
    @andriwahyu34 Před 3 dny

    Bgm sound?

  • @andriwahyu34
    @andriwahyu34 Před 3 dny

    Ohh sitt rileks and fokus, thks your video❤

  • @andriwahyu34
    @andriwahyu34 Před 3 dny

    Woh rileks dude, 😊

  • @ayesha24237
    @ayesha24237 Před 3 dny

    Theme name?

  • @yashsinha1509
    @yashsinha1509 Před 3 dny

    Amazing

  • @septiadinuransyah2269

    How make HTML trick to make sound play auto in Landing page

    • @learning-axis
      @learning-axis Před dnem

      use the <audio> tag with the autoplay attribute: <audio src="your-sound-file.mp3" autoplay></audio>

  • @issailyas3211
    @issailyas3211 Před 3 dny

    كيف تثق في كودك كذا😂

    • @learning-axis
      @learning-axis Před dnem

      You can trust your code by thoroughly testing it, reviewing it for errors, and ensuring it follows best practices and standards.

  • @learning-axis
    @learning-axis Před 3 dny

    Follow us on: Facebook: facebook.com/learningaxis01 Instagram: instagram.com/learningaxis01 Tiktok: www.tiktok.com/@learning_axis LinkedIn: www.linkedin.com/company/learning-axis If You need Graphic designing and web development services please visit contact@learning-axis.com Source code: rb.gy/vsmkyj

  • @user-my2te4lf3m
    @user-my2te4lf3m Před 3 dny

    WOW

  • @yavuk9171
    @yavuk9171 Před 4 dny

    Нахрена писать всю строчку кода? Уффф

  • @clipvideomp4etcomedie686

    ❤🎉

  • @Gamesreviews-u8j
    @Gamesreviews-u8j Před 4 dny

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>bola nagalaw</title> <style> body, html { margin: 0; padding: 0; overflow: hidden; background: #f0f0f0; } #canvas-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #score { position: absolute; top: 10px; left: 10px; font-size: 24px; font-family: Arial, sans-serif; color: #333; } #menu { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); display: flex; justify-content: center; align-items: center; flex-direction: column; } #menu button { font-size: 24px; padding: 10px 20px; margin: 10px; cursor: pointer; } #shop { background: #fff; padding: 10px; border: 1px solid #ccc; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); margin-top: 20px; } .shop-item { margin-bottom: 10px; } .shop-item button { margin-left: 10px; } #back-to-menu { position: absolute; top: 10px; right: 10px; font-size: 18px; padding: 10px 20px; background: #ff0000; color: #fff; border: none; cursor: pointer; display: none; } </style> </head> <body> <div id="canvas-container"></div> <div id="score">Score: 0</div> <div id="menu"> <button onclick="startGame()">Start</button> <button onclick="restartGame()">Restart</button> <button onclick="exitGame()">Exit</button> <div id="shop"> <div class="shop-item"> <span>Red Ball - 5 Points</span> <button onclick="buyBallColor('red', 5)">Buy</button> </div> <div class="shop-item"> <span>Green Ball - 10 Points</span> <button onclick="buyBallColor('green', 10)">Buy</button> </div> <div class="shop-item"> <span>Blue Ball - 15 Points</span> <button onclick="buyBallColor('blue', 15)">Buy</button> </div> <div class="shop-item"> <span>Yellow Ball - 20 Points</span> <button onclick="buyBallColor('yellow', 20)">Buy</button> </div> <div class="shop-item"> <span>Purple Ball - 25 Points</span> <button onclick="buyBallColor('purple', 25)">Buy</button> </div> </div> </div> <button id="back-to-menu" onclick="exitGame()">Back to Menu</button> <script src="cdnjs.cloudflare.com/ajax/libs/matter-js/0.17.1/matter.min.js"></script> <script> // Set up the Matter.js engine const { Engine, Render, Runner, Bodies, World, Mouse, MouseConstraint, Events } = Matter; const engine = Engine.create(); const world = engine.world; const width = window.innerWidth; const height = window.innerHeight; const render = Render.create({ element: document.getElementById('canvas-container'), engine: engine, options: { width: width, height: height, wireframes: false } }); // Function to create a new ball function createBall() { return Bodies.circle(width / 2, height / 2, 25, { restitution: 0.9, render: { fillStyle: 'red' } }); } // Create initial ball let ball = createBall(); // Create ground and walls const ground = Bodies.rectangle(width / 2, height + 50, width, 100, { isStatic: true }); const leftWall = Bodies.rectangle(-50, height / 2, 100, height, { isStatic: true }); const rightWall = Bodies.rectangle(width + 50, height / 2, 100, height, { isStatic: true }); const ceiling = Bodies.rectangle(width / 2, -50, width, 100, { isStatic: true }); // Add all bodies to the world World.add(world, [ball, ground, leftWall, rightWall, ceiling]); // Add mouse control const mouse = Mouse.create(render.canvas); const mouseConstraint = MouseConstraint.create(engine, { mouse: mouse, constraint: { render: { visible: false } } }); World.add(world, mouseConstraint); // Keep the mouse in sync with rendering render.mouse = mouse; let runner; // Scoring system let score = 0; const scoreElement = document.getElementById('score'); // Sound effect const bounceSound = new Audio('bounce.mp3'); // Update score on collision and play sound Events.on(engine, 'collisionStart', (event) => { const pairs = event.pairs; pairs.forEach(pair => { if (pair.bodyA === ball || pair.bodyB === ball) { if (pair.bodyA === ground || pair.bodyB === ground || pair.bodyA === leftWall || pair.bodyB === leftWall || pair.bodyA === rightWall || pair.bodyB === rightWall || pair.bodyA === ceiling || pair.bodyB === ceiling) { score++; scoreElement.innerText = `Score: ${score}`; bounceSound.play(); } } }); }); // Shop logic function buyBallColor(color, cost) { if (score >= cost) { ball.render.fillStyle = color; score -= cost; scoreElement.innerText = `Score: ${score}`; } else { alert('Not enough points to buy this color'); } } // Menu logic function startGame() { document.getElementById('menu').style.display = 'none'; document.getElementById('back-to-menu').style.display = 'block'; runner = Runner.create(); Runner.run(runner, engine); Render.run(render); } function exitGame() { if (runner) { Runner.stop(runner); } Render.stop(render); document.getElementById('menu').style.display = 'flex'; document.getElementById('back-to-menu').style.display = 'none'; } function restartGame() { if (runner) { Runner.stop(runner); } World.clear(world); Engine.clear(engine); score = 0; scoreElement.innerText = `Score: ${score}`; ball = createBall(); World.add(world, [ball, ground, leftWall, rightWall, ceiling, mouseConstraint]); startGame(); } // Initially stop the engine and render exitGame(); </script> </body> </html>

  • @Sidhubanala
    @Sidhubanala Před 4 dny

    u did it in the visual code?

  • @user-mo3je8pf1z
    @user-mo3je8pf1z Před 4 dny

    Nice work. Wanting to be a web developer too

    • @learning-axis
      @learning-axis Před dnem

      Thanks! That's great to hear! Web development is an exciting and rewarding field. If you need any tips or resources, feel free to ask!

  • @DヨヨZ
    @DヨヨZ Před 4 dny

    cool 👍

  • @learning-axis
    @learning-axis Před 4 dny

    Follow us on: Facebook: facebook.com/learningaxis01 Instagram: instagram.com/learningaxis01 Tiktok: www.tiktok.com/@learning_axis LinkedIn: www.linkedin.com/company/learning-axis If You need Graphic designing and web development services please visit contact@learning-axis.com Source code: rb.gy/he0agl

  • @kendy4
    @kendy4 Před 5 dny

    Now Make it work …* Struggles in Javascriipt** 😅

  • @Efsane_yolculuk9
    @Efsane_yolculuk9 Před 5 dny

    Wow it’s perfect and great 🎉

  • @Tseng-EGG
    @Tseng-EGG Před 6 dny

    Very good design, but I think you can add a checkbox to select whether the password must contain abc or 123 or other elements. You can also enter the password length through the input box to generate a secure corresponding password.

    • @Tseng-EGG
      @Tseng-EGG Před 5 dny

      like

    • @Tseng-EGG
      @Tseng-EGG Před 5 dny

      <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="Password.css"> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; } body { background-color: #333333; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .container { background-color: white; padding: 30px; display: grid; gap: 40px; border-radius: 10px; box-shadow: 2px 2px 20px #000000; } .container h2 { text-align: center; font-size: 26px; color: orangered; font-family: sans-serif; } input { padding: 20px; user-select: none; height: 50px; width: none; border-radius: 5px; border: none; border: 2px solid orangered; outline: none; font-size: 20px; } input::placeholder { font-size: 20px; } .btns{ display: flex; justify-content: space-between; gap: 10px; } .btn{ font-size: 15px; padding: 13px 50px; background-color: orangered; color: white; cursor: pointer; border-radius: 10px; } .btn_opps{ font-size: 15px; padding: 13px 50px; background-color: orangered; color: white; cursor: pointer; border-radius: 10px; } .btn:hover { color: white; background-color: black; } .btn_opps:hover { color: white; background-color: black; } #setting{ display: none; } </style> </head> <body> <div class="container"> <h2>Generate Your Password</h2> <input id="password" type="text" name="" placeholder="Password" readonly> <input type="number" name="" placeholder="passLength" id="passLength"> <div class="btns"> <div class="btn" onclick="genPassword()">Generate</div> <div class="btn_opps" id="setting_btn" onclick="opensetting_page()">Setting</div> <a class="btn" onclick="copyPassword()">Copy</a> </div> <div id="setting" align="center"> <h3>Setting</h3> <label><input type="checkbox" id="includeAZ"> 密碼包含A-Z</label><br> <label><input type="checkbox" id="include09"> 密碼包含0-9</label><br> <label><input type="checkbox" id="includeSymbols"> 密碼包含標點符號</label><br> </div> </div> <script> function opensetting_page() { var content = document.getElementById("setting"); if (content.style.display === "none" || content.style.display === "") { content.style.display = "block"; // 顯示內容 } else { content.style.display = "none"; // 隱藏內容 } } function genPassword() { var passLength = parseInt(document.getElementById("passLength").value); var chars = ""; if (document.getElementById("includeAZ").checked) { chars += "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; } if (document.getElementById("include09").checked) { chars += "0123456789"; } if (document.getElementById("includeSymbols").checked) { chars += "!@#$%^&*()_-+=<>?/{}[]"; } if (chars === "") { alert("請至少選擇一個密碼設定項目。"); return; } var password = ""; for (var i = 0; i < passLength; i++) { var randomNumber = Math.floor(Math.random() * chars.length); password += chars.substring(randomNumber, randomNumber + 1); } document.getElementById("password").value = password; } function copyPassword() { var copyText = document.getElementById("password"); copyText.select(); document.execCommand("copy"); } </script> </body> </html>

    • @learning-axis
      @learning-axis Před 4 dny

      Thank you for the suggestion! I'm glad you liked the design. Adding a checkbox to select specific password requirements and an input box for password length are great ideas. I'll consider implementing these features in the next update to enhance functionality and user customization. Thanks for your valuable feedback!

    • @Tseng-EGG
      @Tseng-EGG Před 4 dny

      @@learning-axis glad you liked it

  • @maniboss4045
    @maniboss4045 Před 6 dny

    Seen difficult

  • @Samar0551
    @Samar0551 Před 6 dny

    Daam dude..❤

  • @ojotimilehin362
    @ojotimilehin362 Před 6 dny

    Wow… ❤

  • @learning-axis
    @learning-axis Před 6 dny

    Follow us on: Facebook: facebook.com/learningaxis01 Instagram: instagram.com/learningaxis01 Tiktok: www.tiktok.com/@learning_axis LinkedIn: www.linkedin.com/company/learning-axis If You need Graphic designing and web development services please visit contact@learning-axis.com Source code: rb.gy/ekuiuj

  • @user-kn3nd3bs2i
    @user-kn3nd3bs2i Před 6 dny

    Was it supposed to be this way cuz some hexagons are below and some are above the middle white hexagon? If not you could just give it (white hexagon) a z-indec

  • @user-kn3nd3bs2i
    @user-kn3nd3bs2i Před 7 dny

    If only I could type that fast 😅