https://github.com/kaningleb/learn-js

querySelector, querySelectorAll, document.style, onclick, addEventListener, toggle, insertAdjacentHTML
https://github.com/kaningleb/learn-js

js-classes promise

Last synced: 4 months ago
JSON representation

querySelector, querySelectorAll, document.style, onclick, addEventListener, toggle, insertAdjacentHTML

• Host: GitHub
• URL: https://github.com/kaningleb/learn-js
• Owner: KaninGleb
• Created: 2024-11-16T13:46:46.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-05-05T13:52:18.000Z (about 1 year ago)
• Last Synced: 2025-10-23T07:34:43.046Z (8 months ago)
• Topics: js-classes, promise
• Language: HTML
• Homepage:
• Size: 88.9 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Repository Overview 🌐

This repository is dedicated to my practice tasks from **Learn JavaScript**. Here, you'll find various interactive components and examples that help enhance my understanding of JavaScript and web development. 🚀

## 🔗 Project Links:

   
🌍 Interacting with a Web Page


1. $\textsf{\color{gold}{✨ Web Page Interacting ✨}}$ 


   Explore basic interactions and event handling. 


   #### [Run Demo](https://kaningleb.github.io/Learn-JS/Interacting-with-a-web-page/01-Interacting/) $\textsf{\color{#4493f8}{/}}$ [View Code](https://github.com/KaninGleb/Learn-JS/tree/main/Interacting-with-a-web-page/01-Interacting)

   

3. $\textsf{\color{gold}{✨ Carousel ✨}}$ 


   Create a dynamic carousel to showcase images or content. 


   #### [Run Demo](https://kaningleb.github.io/Learn-JS/Interacting-with-a-web-page/02-Carousel/) $\textsf{\color{#4493f8}{/}}$ [View Code](https://github.com/KaninGleb/Learn-JS/tree/main/Interacting-with-a-web-page/02-Carousel)

3. $\textsf{\color{gold}{✨ Expanding Tree ✨}}$ 


   Implement an expanding tree structure for better data visualization. 


   #### [Run Demo](https://kaningleb.github.io/Learn-JS/Interacting-with-a-web-page/03-Expanding-tree/) $\textsf{\color{#4493f8}{/}}$ [View Code](https://github.com/KaninGleb/Learn-JS/tree/main/Interacting-with-a-web-page/03-Expanding-tree)

4. $\textsf{\color{gold}{✨ Sorted Table ✨}}$ 


   Build a sortable table to manage data effectively. 


   #### [Run Demo](https://kaningleb.github.io/Learn-JS/Interacting-with-a-web-page/04-Sorted-table/) $\textsf{\color{#4493f8}{/}}$ [View Code](https://github.com/KaninGleb/Learn-JS/tree/main/Interacting-with-a-web-page/04-Sorted-table)

5. $\textsf{\color{gold}{✨ Data Tooltip ✨}}$ 


   Create informative tooltips that provide additional context. 


   #### [Run Demo](https://kaningleb.github.io/Learn-JS/Interacting-with-a-web-page/05-Data-tooltip/) $\textsf{\color{#4493f8}{/}}$ [View Code](https://github.com/KaninGleb/Learn-JS/tree/main/Interacting-with-a-web-page/05-Data-tooltip)

6. $\textsf{\color{gold}{✨ Catch the Link Transition ✨}}$ 


   Implement catch transitions when navigating links. 


   #### [Run Demo](https://kaningleb.github.io/Learn-JS/Interacting-with-a-web-page/06-Catch-the-link-transition/) $\textsf{\color{#4493f8}{/}}$ [View Code](https://github.com/KaninGleb/Learn-JS/tree/main/Interacting-with-a-web-page/06-Catch-the-link-transition)

7. $\textsf{\color{gold}{✨ Delegation Image Gallery ✨}}$ 


   Develop an image gallery using event delegation for efficiency. 


   #### [Run Demo](https://kaningleb.github.io/Learn-JS/Interacting-with-a-web-page/07-Delegation-image-gallery/) $\textsf{\color{#4493f8}{/}}$ [View Code](https://github.com/KaninGleb/Learn-JS/tree/main/Interacting-with-a-web-page/07-Delegation-image-gallery)

   
🪟 Modal windows 


1. $\textsf{\color{gold}{✨ Modal dialog box with form ✨}}$ 


   Create a modal dialog that includes a form for user input. 


   #### [Run Demo](https://kaningleb.github.io/Learn-JS/Modal-windows/01-Modal-dialog-box-with-form/) $\textsf{\color{#4493f8}{/}}$ [View Code](https://github.com/KaninGleb/Learn-JS/tree/main/Modal-windows/01-Modal-dialog-box-with-form)

   
🤝 Promises


1. $\textsf{\color{gold}{✨ Circle animation with Promise ✨}}$ 


   Implement a circular animation that resolves with a promise to demonstrate asynchronous behavior. 


   #### [Run Demo](https://kaningleb.github.io/Learn-JS/Promises/01-Circle-Animation-with-Promises/) $\textsf{\color{#4493f8}{/}}$ [View Code](https://github.com/KaninGleb/Learn-JS/tree/main/Promises/01-Circle-Animation-with-Promises)

  

   
👍 Classes


   

1. $\textsf{\color{gold}{✨ Simple calculator with Object Methods ✨}}$ 


   Develop a simple calculator using JavaScript object methods to perform basic arithmetic operations (addition and multiplication).

   This project demonstrates object-oriented programming principles. 


   #### [Run Demo](https://kaningleb.github.io/Learn-JS/Classes/01-Simple-calculator-using-Object-methods/) $\textsf{\color{#4493f8}{/}}$ [View Code](https://github.com/KaninGleb/Learn-JS/tree/main/Classes/01-Simple-calculator-using-Object-methods)

2. $\textsf{\color{gold}{✨ Clock with Class ✨}}$ 


   Implement a clock using JavaScript classes. 


   #### [Run Demo](https://kaningleb.github.io/Learn-JS/Classes/02-Clock-with-Class/) $\textsf{\color{#4493f8}{/}}$ [View Code](https://github.com/KaninGleb/Learn-JS/tree/main/Classes/02-Clock-with-Class)