-
+
- ... +
- ... +
- ... +
- ... +
- ... +
- ... +
- ... +
- ... +
- ... +
- ... +
-
+
-
+
- BMW +
- Mahindra +
- Audi +
- Toyota +
- Honda +
- Hundai +
- Tata +
- Suzuki +
` tag and replaces them with another word dynamically.
+
+## 5. Extract and Count Unique Links from a Page
+
+Count all the unique hyperlinks (``) in a page and display their count.
diff --git a/day-18/README.md b/day-18/README.md
new file mode 100644
index 0000000..8dd3b89
--- /dev/null
+++ b/day-18/README.md
@@ -0,0 +1,45 @@
+# Day 18 - 40 Days of JavaScript - DOM Manipulations
+
+## **🎯 Goal of This Lesson**
+
+- ✅ Module 3 & DOM
+- ✅ Intro to DOM Manipulation
+- ✅ What Will We Learn?
+- ✅ Create Elements
+- ✅ Inserting Elements - Before
+- ✅ Inserting Elements - After
+- ✅ Modify Content - innerHTML
+- ✅ Security Risk of innerHTML
+- ✅ Modify Content - textContent
+- ✅ Removing Elements
+- ✅ Travarsing DOM
+- ✅ Manipulating Styles
+- ✅ Manipulating Classes
+- ✅ Working with classLIst
+- ✅ Controlling Visibility
+- ✅ Project 1 - Toggle Me
+- ✅ Project 2 - Task Manager
+0- ✅ Tasks and Wrapping Up
+
+## 🫶 Support
+
+Your support means a lot.
+
+- Please SUBSCRIBE to [tapaScript YouTube Channel](https://youtube.com/tapasadhikary) if not done already. A Big Thank You!
+- Liked my work? It takes months of hard work to create quality content and present it to you. You can show your support to me with a STAR(⭐) to this repository.
+
+ > Many Thanks to all the `Stargazers` who have supported this project with stars(⭐)
+
+### 🤝 Sponsor My Work
+
+I am an independent educator and open-source enthusiast who creates meaningful projects to teach programming on my YouTube Channel. **You can support my work by [Sponsoring me on GitHub](https://github.com/sponsors/atapas) or [Buy Me a Cofee](https://buymeacoffee.com/tapasadhikary)**.
+
+## Video
+
+Here is the video for you to go through and learn:
+
+[](https://www.youtube.com/watch?v=BoYgn_Mf0hA "Video")
+
+## **👩💻 🧑💻 Assignment Tasks**
+
+Please find the task assignments in the [Task File](./task.md).
diff --git a/day-18/banner.png b/day-18/banner.png
new file mode 100644
index 0000000..dfe81af
Binary files /dev/null and b/day-18/banner.png differ
diff --git a/day-18/index.css b/day-18/index.css
new file mode 100644
index 0000000..b08343f
--- /dev/null
+++ b/day-18/index.css
@@ -0,0 +1,20 @@
+.main-class {
+ font-size: large;
+ padding: 2px;
+ border: 2px solid red;
+ background-color: pink;
+ border-radius: 5px;
+}
+
+.secondary-class {
+ font-size: large;
+ padding: 2px;
+ border: 2px solid green;
+ background-color: teal;
+ border-radius: 5px;
+}
+
+.layout {
+ display: flex;
+ flex-direction: column;
+}
\ No newline at end of file
diff --git a/day-18/index.html b/day-18/index.html
new file mode 100644
index 0000000..779cca8
--- /dev/null
+++ b/day-18/index.html
@@ -0,0 +1,47 @@
+
+
+
+
+
+
+ Hope you are enjoying 40 days of JavaScript
+ I love DOM
+ Somethign More Somethign Even more Let's do some style This is a paragraph that can be shown or hidden by clicking the button above. Welcome!Welcome to the Day 18
+
+
+ test
+ I am going to be removed
+
+
+
+ 
+
+
+
+
+
+
+
+
+ Something
+ Task Manager
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/day-18/projects/toggle/logic.js b/day-18/projects/toggle/logic.js
new file mode 100644
index 0000000..c7ea940
--- /dev/null
+++ b/day-18/projects/toggle/logic.js
@@ -0,0 +1,8 @@
+console.log("Project: Toggle");
+
+function toggleInfo() {
+ console.log("Toggling");
+ const para = document.getElementById("myParagraph");
+
+ para.classList.toggle("hidden")
+}
\ No newline at end of file
diff --git a/day-18/projects/toggle/ui.css b/day-18/projects/toggle/ui.css
new file mode 100644
index 0000000..0641b3c
--- /dev/null
+++ b/day-18/projects/toggle/ui.css
@@ -0,0 +1,14 @@
+.info {
+ margin-top: 20px;
+ font-size: 18px;
+ color: #333;
+}
+.action {
+ padding: 10px 20px;
+ font-size: 16px;
+ cursor: pointer;
+}
+
+.hidden {
+ display: none;
+}
diff --git a/day-18/projects/toggle/ui.html b/day-18/projects/toggle/ui.html
new file mode 100644
index 0000000..f169bf8
--- /dev/null
+++ b/day-18/projects/toggle/ui.html
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
Toggle Paragraph Example
+
+
+ + + + + \ No newline at end of file diff --git a/day-19/default/event-default.js b/day-19/default/event-default.js new file mode 100644 index 0000000..7fed8ce --- /dev/null +++ b/day-19/default/event-default.js @@ -0,0 +1,12 @@ +console.log("Event Defaults"); + +document.getElementById("websiteLink").addEventListener("click", function (e) { + console.log("Navigating to website!"); + // e.preventDefault(); + // console.log("Default link behavior prevented!"); +}); + +document.getElementById("loginForm").addEventListener("submit", function (e) { + // e.preventDefault(); + console.log("Form submission prevented!"); +}); diff --git a/day-19/index.html b/day-19/index.html new file mode 100644 index 0000000..5b3edae --- /dev/null +++ b/day-19/index.html @@ -0,0 +1,37 @@ + + + + + +
Welcome to the Day 19 - Events
+Hope you are enjoying 40 days of JavaScript!
+ ++
Event Handling
+ + + + + ++
Event Object
+ + ++ Event Bubbling, Capturing, and Delegation + +
+ Event Default Behaviour + +
+ Custom Event + +
+ Project: FAQ + + + \ No newline at end of file diff --git a/day-19/index.js b/day-19/index.js new file mode 100644 index 0000000..5044b99 --- /dev/null +++ b/day-19/index.js @@ -0,0 +1,90 @@ +console.log("Day 19 - JavaScript Events"); + +// What will we learn today? + +// - What is an Event? +// - Event Handling and Why? +// - Event Handling in Markup +// - Event Handling in Script +// - addEventListener and removeEventListener +// - DOM Content Loaded +// - Event Object +// - Event Capturing and Bubbling +// - Event Delegation +// - Event Default Behaviour +// - Custom Events +// - Project(s) +// - Tasks + +// Event Handling in Markup +function handleClick(greeting) { + console.log(`Button Clicked with a ${greeting}`); +} + +// Event Handling in Script +const myBtn2Elem = document.getElementById("myBtn2"); +myBtn2Elem.onclick = function() { + console.log("My Button 2 Clicked"); +} +// Can not add multiple +myBtn2Elem.onclick = function() { + console.log("My Button 2 Clicked Again"); +} +// Separating fundtion +myBtn2Elem.onclick = handleClick; +myBtn2Elem.onclick = () => handleClick("Hola"); + +// addEventListener and removeEventListener +let counter = 0; +const counBtnElem = document.getElementById("countBtn"); +const handleCount = function() { + console.log(counter); + counter++; +} +const greetMe = function() { + console.log("Thank You!"); +} +/* +counBtnElem.addEventListener("click", function() { + console.log(counter); + counter++; +}) + +counBtnElem.removeEventListener("click", function() { + console.log(counter); + counter++; +}) +*/ + +counBtnElem.addEventListener("click", handleCount); +counBtnElem.addEventListener("click", greetMe); +counBtnElem.removeEventListener("click", handleCount); + +// DOM Conetnt Loaded + +// will never run +document.onDOMContentLoaded = function() { + console.log("DOM Content Loaded..."); +}; + +// this will run +document.addEventListener("DOMContentLoaded", function() { + console.log("DOM Content Loaded..."); +}); + + +// Event Object +const searchElem = document.getElementById("search-id"); +function handleChange(event) { + console.log(event); + console.log("Target:", event.target); + console.log("Target Name:", event.target.name); + console.log("Target Value:", event.target.value); + console.log("Event Type:", event.type); + console.log("Current Target:", event.currentTarget); + console.log("this:", this); +} +searchElem.addEventListener("change", handleChange); + + + diff --git a/day-19/path/event-path.html b/day-19/path/event-path.html new file mode 100644 index 0000000..b6f83cd --- /dev/null +++ b/day-19/path/event-path.html @@ -0,0 +1,40 @@ + + + + + + +
Event Bubbling, Capturing, and Delegation
+
+
+
+
+
+
+ +
-
+
- Item 1 +
- Item 2 +
+ + +
+ +
+ Parent
+
+
+
+
+
+
\ No newline at end of file
diff --git a/day-19/path/event-path.js b/day-19/path/event-path.js
new file mode 100644
index 0000000..8e8b3b3
--- /dev/null
+++ b/day-19/path/event-path.js
@@ -0,0 +1,80 @@
+console.log("Event Bubbling, Capturing, and Delegation");
+
+// Event Capturing and Bubbling
+
+// In event bubbling, the event starts from the target element and bubbles upwards through its ancestors (parent → grandparent → etc.).
+
+// The Flow is: Child → Parent → Grandparent → Document
+
+// Bubbling
+
+document.getElementById("grandparent").addEventListener("click", () => {
+ console.log("Grandparent clicked");
+});
+
+document.getElementById("parent").addEventListener("click", () => {
+ console.log("Parent clicked");
+});
+
+document.getElementById("child").addEventListener("click", () => {
+ console.log("Child clicked");
+});
+
+// Capturing
+
+// In event capturing, the event flows from the outermost ancestor down to the target element before the actual target handles it.
+
+// The Flow is: Document → Grandparent → Parent → Child
+
+// Rarely used, but useful if you want to catch events before they reach the target.
+
+document.getElementById("grandparent").addEventListener(
+ "click",
+ () => {
+ console.log("Captured at Grandparent");
+ },
+ true // Capture phase
+);
+
+document.getElementById("parent").addEventListener(
+ "click",
+ () => {
+ console.log("Captured at Parent");
+ },
+ true // Capture phase
+);
+
+document.getElementById("child").addEventListener(
+ "click",
+ () => {
+ console.log("Captured at Child");
+ },
+ true // Capture phase
+);
+
+// Event Delegation - it is a technique where you add a single event listener to a parent element instead of each child. It uses event bubbling to handle events from dynamically added or existing child elements.
+
+// Efficient for handling events on lists, tables, or any repeated/dynamic content.
+
+document.getElementById("itemList").addEventListener("click", (event) => {
+ if (event.target.tagName === "LI") {
+ console.log(`You clicked on ${event.target.textContent}`);
+ }
+});
+
+// Dynamically add a new list item
+let newItemElem = document.createElement("li");
+newItemElem.textContent = "Item 3";
+document.getElementById("itemList").appendChild(newItemElem);
+
+
+// event.stopPropagation() - event.stopPropagation() is a method used inside an event handler to stop the event from bubbling up (or propagating further) through the DOM tree
+
+document.getElementById("parent").addEventListener("click", () => {
+ console.log("Parent clicked");
+});
+
+document.getElementById("child").addEventListener("click", (e) => {
+ // e.stopPropagation();
+ console.log("Child clicked");
+});
diff --git a/day-19/path/event.css b/day-19/path/event.css
new file mode 100644
index 0000000..3e5cfba
--- /dev/null
+++ b/day-19/path/event.css
@@ -0,0 +1,7 @@
+form {
+ margin: 5px;
+}
+
+.hidden {
+ display: none;
+}
\ No newline at end of file
diff --git a/day-19/projects/faq.css b/day-19/projects/faq.css
new file mode 100644
index 0000000..c614d79
--- /dev/null
+++ b/day-19/projects/faq.css
@@ -0,0 +1,19 @@
+.faq-item {
+ border: 1px solid #ddd;
+ margin: 10px 0;
+ padding: 10px;
+ }
+
+ .question {
+ font-weight: bold;
+ cursor: pointer;
+ }
+
+ .answer {
+ display: none;
+ margin-top: 5px;
+ }
+
+ .answer.show {
+ display: block;
+ }
\ No newline at end of file
diff --git a/day-19/projects/faq.html b/day-19/projects/faq.html
new file mode 100644
index 0000000..0a19ecd
--- /dev/null
+++ b/day-19/projects/faq.html
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/day-19/projects/faq.js b/day-19/projects/faq.js
new file mode 100644
index 0000000..b5e3e50
--- /dev/null
+++ b/day-19/projects/faq.js
@@ -0,0 +1,23 @@
+console.log("Project: FAQ");
+
+
+
+const faq = document.querySelector(".faq");
+
+// Event Delegation: Handle clicks on all questions
+faq.addEventListener("click", function (e) {
+ if (e.target.classList.contains("question")) {
+ e.stopPropagation();
+
+ const currentItem = e.target.parentElement;
+ const currentAnswer = currentItem.querySelector(".answer");
+
+ currentAnswer.classList.toggle("show");
+ }
+});
+
+// Click outside to collapse all
+document.addEventListener("click", function () {
+ const allAnswers = document.querySelectorAll(".answer.show");
+ allAnswers.forEach(answer => answer.classList.remove("show"));
+});
\ No newline at end of file
diff --git a/day-19/task.md b/day-19/task.md
new file mode 100644
index 0000000..d92ee76
--- /dev/null
+++ b/day-19/task.md
@@ -0,0 +1,48 @@
+# Tasks
+
+Please complete the following tasks and post them on the tapaScript Discord under "40 Days of JavaScript".
+
+> **DO NOT USE AI to FIND ANSWERS**. If you are stuck, let's discuss it on DISCORD and learn. Also, please note that none of the answers need you to create any UI. Just focus on the logic building and print the output on the browser console.
+
+## 1. Create a Dynamic Tabbed Interface
+
+Build a clean, accessible tab component where clicking on a tab header displays the corresponding tab content. It mimics real-world use like dashboards, profile settings, or pricing plans.
+
+### Functional Requirements
+
+- ✅ Clicking a tab title shows the corresponding content.
+- ✅ Only one tab content is visible at a time.
+- ✅ The active tab should have a visual highlight.
+- ✅ Add a keyboard shortcut: pressing 1, 2, or 3 switches to that tab.
+
+ Example:
+
+ ```js
+ document.addEventListener("keydown", (e) => {
+ if (e.key === "1") switchToTab(1);
+ if (e.key === "2") switchToTab(2);
+ if (e.key === "3") switchToTab(3);
+ });
+ ```
+
+- ✅ Use event delegation to handle tab clicks.
+- ✅ Use classList to manage active state.
+- ✅ Use a custom event to broadcast when a tab is changed (log tab name to console).
+- ✅ Use stopPropagation() if needed during advanced control.
+
+### Basic HTML Structure
+
+```html
+
+
+ What is JavaScript?
+ JavaScript is a scripting language used to create dynamic content.
+
+
+ What is the DOM?
+ The DOM is the Document Object Model representing the page structure.
+
+
+
+ What is 40 Days of JavaScript?
+ It is an initiative by tapaScript Family to win over JavaScript with fundamentals and code.
+
+
+```
diff --git a/day-20/README.md b/day-20/README.md
new file mode 100644
index 0000000..1b9a37b
--- /dev/null
+++ b/day-20/README.md
@@ -0,0 +1,36 @@
+# Day 20 - 40 Days of JavaScript - Advanced DOM Tips and Tricks
+
+## **🎯 Goal of This Lesson**
+
+- ✅ Intro
+- ✅ Efficient DOM Travarsal
+- ✅ Template and Cloning
+- ✅ Document Fragment
+- ✅ Range
+- ✅ Shadow DOM
+- ✅ Advanced Class Manipulations
+- ✅ Handling Large-Scale Updates
+- ✅ Mutation Observer
+
+## 🫶 Support
+
+Your support means a lot.
+
+- Please SUBSCRIBE to [tapaScript YouTube Channel](https://youtube.com/tapasadhikary) if not done already. A Big Thank You!
+- Liked my work? It takes months of hard work to create quality content and present it to you. You can show your support to me with a STAR(⭐) to this repository.
+
+ > Many Thanks to all the `Stargazers` who have supported this project with stars(⭐)
+
+### 🤝 Sponsor My Work
+
+I am an independent educator and open-source enthusiast who creates meaningful projects to teach programming on my YouTube Channel. **You can support my work by [Sponsoring me on GitHub](https://github.com/sponsors/atapas) or [Buy Me a Cofee](https://buymeacoffee.com/tapasadhikary)**.
+
+## Video
+
+Here is the video for you to go through and learn:
+
+[](https://youtu.be/aNhPav1DgTY "Video")
+
+## **👩💻 🧑💻 Assignment Tasks**
+
+Please find the task assignments in the [Task File](./task.md).
diff --git a/day-20/banner.png b/day-20/banner.png
new file mode 100644
index 0000000..c9a8386
Binary files /dev/null and b/day-20/banner.png differ
diff --git a/day-20/index.html b/day-20/index.html
new file mode 100644
index 0000000..ccadf48
--- /dev/null
+++ b/day-20/index.html
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+Welcome to Home
+ About us page here.
+ Contact info displayed here.
+ Day 20 - DOM Advanced Tips
+ +
+
+
+
+
+
+
+
+
+
+
+
+ Hello world and universe!
+ +
+
+
+
+
+
+
+ Title
+Description here
+Hello
+
+
+
+
+
\ No newline at end of file
diff --git a/day-20/index.js b/day-20/index.js
new file mode 100644
index 0000000..ababb31
--- /dev/null
+++ b/day-20/index.js
@@ -0,0 +1,121 @@
+console.log("Day 20 - DOM: Advanced Tips");
+
+// Efficient DOM traversal
+const parent = document.querySelector('.card');
+const firstChild = parent.firstElementChild;
+const next = firstChild.nextElementSibling;
+const lastChild = parent.lastElementChild;
+const parentOfElement = firstChild.parentElement;
+
+// Templates and Cloning
+const template = document.getElementById('card-template');
+const clone = template.content.cloneNode(true);
+clone.querySelector('.title').textContent = "DOM Advance Topic";
+clone.querySelector('.desc').textContent = "Hope you are learning something New";
+
+document.body.appendChild(clone);
+
+// Document Fragment and Range
+
+// Document Fragment
+// - Not part of the main DOM tree until you insert it
+// - Acts like a temp container
+// - Great for building chunks of DOM before adding them.
+
+const fragment = document.createDocumentFragment();
+
+for (let i = 0; i<=3; i++) {
+ const li = document.createElement('li');
+ li.textContent = `Item ${i}`;
+ fragment.appendChild(li);
+}
+
+document.getElementById("list").appendChild(fragment);
+
+// Range
+const p = document.getElementById('para');
+
+const range = document.createRange();
+
+range.setStart(p.firstChild, 6); // After "Hello "
+range.setEnd(p.childNodes[2], 4)
+
+const content = range.cloneContents();
+
+console.log(content);
+
+// Shadow DOM
+document.querySelector('.card').innerHTML
+
+// shadow host
+
+const shadowHost = document.querySelector('#box');
+const shadow = shadowHost.attachShadow({mode: 'open'});
+shadow.innerHTML = `Hello Shadow!
`; + +// Advanced Class Manipulation + +const btn = document.querySelector('.btn'); +btn.classList.add('active'); +btn.classList.remove('disabled'); +btn.classList.toggle('visible'); +btn.classList.replace('error', 'success'); + +// Handling Large-Scale DOM Updates + +function addItems(count) { + const frag = document.createDocumentFragment(); + for (let i = 0; i < count; i++) { + const div = document.createElement('div'); + div.textContent = `Item ${i}`; + frag.appendChild(div); + } + document.body.appendChild(frag); + } + + addItems(10); + + // Mutation Observer + + // const observer = new MutationObserver(callback); + // observer.observe(targetNode, config); + + const target = document.getElementById('watchMe'); + + const observer = new MutationObserver((mutationsList, observer) => { + for (const mutation of mutationsList) { + console.log(`Type of mutation: ${mutation.type}`); + + if (mutation.type === 'childList') { + console.log('A child node was added or removed.'); + } + + if (mutation.type === 'attributes') { + console.log(`Attribute ${mutation.attributeName} was changed.`); + } + + if (mutation.type === 'characterData') { + console.log(`Text content changed to: ${mutation.target.data}`); + } + } + }); + + const config = { + subtree: true, + characterData: true, + childList: true, + attributes: true, + } + + observer.observe(target, config); + + function changeDOM() { + target.textContent = "Goodbye!"; + target.setAttribute("data-status", "Changed"); + } + + + + + + diff --git a/day-20/task.md b/day-20/task.md new file mode 100644 index 0000000..4b65641 --- /dev/null +++ b/day-20/task.md @@ -0,0 +1,36 @@ +# Tasks + +Please complete the following tasks and post them on the tapaScript Discord under "40 Days of JavaScript". + +> **DO NOT USE AI to FIND ANSWERS**. If you are stuck, let's discuss it on DISCORD and learn. Also, please note that none of the answers need you to create any UI. Just focus on the logic building and print the output on the browser console. + +## 1. Traverse and Toggle Classes + +Build a navigation menu. On click of a list item: + +- Traverse up to parent `- `
+- Remove .active class from all `
- ` +- Add .active only to the clicked `
- `
+
+## 2. Highlight Text Using Range
+
+Use the Range API to highlight a portion of a paragraph by wrapping it with a `` tag.
+
+## 3. Use DocumentFragment for Performance
+
+Insert 100 list items into the DOM using:
+
+- Plain DOM methods (one by one)
+- DocumentFragment (all at once)
+
+## 4. Build a “Smart Cloner”
+
+Create a UI with an element and a “Clone” button. Use cloneNode(true) and cloneNode(false) and show the difference visually.
+
+## 5. MutationObserver Watcher
+
+Create a div and use MutationObserver to log whenever:
+
+- A new child is added
+- The class attribute changes
+- Text is modified
diff --git a/day-21/README.md b/day-21/README.md
new file mode 100644
index 0000000..4b07419
--- /dev/null
+++ b/day-21/README.md
@@ -0,0 +1,41 @@
+# Day 21 - 40 Days of JavaScript - Build a Quiz Game using DOM
+
+## **🎯 Goal of This Lesson**
+
+- ✅ Complete the design of a Quiz App.
+- ✅ Develop the Quiz App with the following features:
+ - ✅ Show Random Questions for the Quiz.
+ - ✅ Start a timer for the X(say 15) seconds for user to answer a question.
+ - ✅ After 15 seconds a Next button should appear to navigate to the next question.
+ - ✅ If user is not selecting an answer within the 15 seconds, the right answer should be selected by default.
+ - ✅ When user selects a wrong answer, the right answer should be shown.
+ - ✅ A result should be shown at the end of all the questions.
+ - ✅ The result should also store the highest scorer and show that.
+ - ✅ There shold be a way to restart the game at the end.
+- ✅ Non Functional Requirements:
+ - ✅ Good Look and Feel.
+ - ✅ Optimal usages of the timer.
+ - ✅ Clean code.
+
+## 🫶 Support
+
+Your support means a lot.
+
+- Please SUBSCRIBE to [tapaScript YouTube Channel](https://youtube.com/tapasadhikary) if not done already. A Big Thank You!
+- Liked my work? It takes months of hard work to create quality content and present it to you. You can show your support to me with a STAR(⭐) to this repository.
+
+ > Many Thanks to all the `Stargazers` who have supported this project with stars(⭐)
+
+### 🤝 Sponsor My Work
+
+I am an independent educator and open-source enthusiast who creates meaningful projects to teach programming on my YouTube Channel. **You can support my work by [Sponsoring me on GitHub](https://github.com/sponsors/atapas) or [Buy Me a Cofee](https://buymeacoffee.com/tapasadhikary)**.
+
+## Video
+
+Here is the video for you to go through and learn:
+
+[](https://youtu.be/hTDeyBq5EdM "Video")
+
+## **👩💻 🧑💻 Assignment Project**
+
+Please check the project assignment in the [Task File](../project-assignment/recipe-finder.md).
diff --git a/day-21/banner.png b/day-21/banner.png
new file mode 100644
index 0000000..93a7157
Binary files /dev/null and b/day-21/banner.png differ
diff --git a/day-21/index.html b/day-21/index.html
new file mode 100644
index 0000000..8c3fa09
--- /dev/null
+++ b/day-21/index.html
@@ -0,0 +1,19 @@
+
+
+
+
+
+
Quiz App + + + + +++ + \ No newline at end of file diff --git a/day-21/index.js b/day-21/index.js new file mode 100644 index 0000000..799d4f8 --- /dev/null +++ b/day-21/index.js @@ -0,0 +1,121 @@ +const quizData = [ + { + question: "What does DOM stand for?", + options: [ + "Document Order Model", + "Document Object Model", + "Data Object Method", + "Direct Object Management" + ], + correct: 1 + }, + { + question: "Which method selects by ID?", + options: [ + "getElementById()", + "querySelectorAll()", + "getElement()", + "getElementsByClassName()" + ], + correct: 0 + }, + { + question: "Which event fires on input change?", + options: ["click", "submit", "change", "keydown"], + correct: 2 + } +]; + +let questions = [...quizData].sort(() => Math.random() - 0.5); +let currentQuestion = 0; +let score = 0; +let timer; +let timeLeft; + +const questionEl = document.getElementById("question"); +const optionsEl = document.getElementById("options"); +const nextBtn = document.getElementById("next-btn"); +const timerEl = document.getElementById("timer"); +const resultEl = document.getElementById("result"); + +function loadQuestion() { + clearInterval(timer); + timeLeft = 15; + updateTimer(); + timer = setInterval(countdown, 1000); + + const q = questions[currentQuestion]; + questionEl.textContent = `Q${currentQuestion + 1}. ${q.question}`; + optionsEl.innerHTML = ""; + + q.options.forEach((option, index) => { + const btn = document.createElement("button"); + btn.classList.add("option-btn"); + btn.textContent = option; + btn.addEventListener("click", () => selectAnswer(index, true)) + optionsEl.appendChild(btn); + }); + nextBtn.style.display = "none"; +} + +function countdown() { + timeLeft--; + updateTimer(); + if (timeLeft === 0) { + clearInterval(timer); + selectAnswer(questions[currentQuestion]?.correct, false) + } +} + +function updateTimer() { + timerEl.textContent = `⏱️ ${timeLeft}`; +} + +function selectAnswer(index, shouldScore) { + clearInterval(timer); + const q = questions[currentQuestion]; + const buttons = document.querySelectorAll('.option-btn'); + + buttons.forEach(btn => btn.disabled = true); + + if (index === q.correct) { + shouldScore && score++; + buttons[index].classList.add("correct"); + } else { + buttons[index].classList.add("wrong"); + buttons[q.correct].classList.add("correct"); + } + + nextBtn.style.display = "inline-block"; +} + +nextBtn.addEventListener("click", () => { + currentQuestion++; + + if(currentQuestion < questions.length) { + loadQuestion(); + } else { + showResult(); + } +}) + +function showResult() { + nextBtn.style.display = "none"; + const highScore = localStorage.getItem("quizHighScore") || 0; + + const isNew = score > highScore; + + if(isNew) { + localStorage.setItem("quizHighScore", score); + } + + resultEl.innerHTML = ` +⏱️ 15+Loading...
+ + + +Hurray!!! Quiz Completed
+You have scored ${score} out of ${questions.length} questions
+Highest Score: ${Math.max(score, highScore)}
+ ${isNew ? "Hey, New High Score!
": ""} + + ` +} + +loadQuestion(); \ No newline at end of file diff --git a/day-21/style.css b/day-21/style.css new file mode 100644 index 0000000..85ae758 --- /dev/null +++ b/day-21/style.css @@ -0,0 +1,73 @@ +* { + box-sizing: border-box; + font-family: "Segoe UI", sans-serif; +} + +body { + margin: 0; + padding: 0; + background-color: #1e1e2f; + color: #f0f0f0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.quiz-box { + background: #2a2a40; + padding: 3px; + border-radius: 16px; + width: 90%; + max-width: 500px; + text-align: center; + box-shadow: 0 8px 16px rgba(0,0,0,0.3); +} + +#question { + margin-bottom: 20px; +} + +.options { + display: flex; + flex-direction: column; + gap: 10px; + margin-bottom: 20px; +} + +#next-btn { + padding: 10px 20px; + border: none; + background: #4b6cb7; + color: white; + border-radius: 10px; + cursor: pointer; + font-size: 16px; +} + +#timer { + font-size: 20px; + margin-bottom: 10px; + color: #ffcc00; +} + +.option-btn { + padding: 12px; + background: #38385e; + border: none; + border-radius: 8px; + color: white; + cursor: pointer; + transition: background 0.3s ease; +} + +.option-btn:hover { + background: #4b4b7e; +} + +.option-btn.correct { + background-color: #3cb371; +} +.option-btn.wrong { + background-color: #e74c3c; +} diff --git a/day-22/README.md b/day-22/README.md new file mode 100644 index 0000000..c281b85 --- /dev/null +++ b/day-22/README.md @@ -0,0 +1,45 @@ +# Day 22 - 40 Days of JavaScript - Async JavaScript - Callbacks + +## **🎯 Goal of This Lesson** + +- ✅ Synchronous vs Asynchronous +- ✅ JavaScript is Synchronous +- ✅ Asynchronous JavaScript +- ✅ Callback Functions +- ✅ Dealing With APIs +- ✅ APIs and Callback +- ✅ The Pizza Order App +- ✅ Callback Hell or Callback Pyramid +- ✅ Debugging +- ✅ What’s Next + +## How to run the API? + +- Open the terminal and change the directory to `api/pizzahub`. +- Then install the depenedencies with `npm install` command. +- Run the API server locally with `npm run start` command. + +The API server will be available on `localhost:3000`. + +## 🫶 Support + +Your support means a lot. + +- Please SUBSCRIBE to [tapaScript YouTube Channel](https://youtube.com/tapasadhikary) if not done already. A Big Thank You! +- Liked my work? It takes months of hard work to create quality content and present it to you. You can show your support to me with a STAR(⭐) to this repository. + + > Many Thanks to all the `Stargazers` who have supported this project with stars(⭐) + +### 🤝 Sponsor My Work + +I am an independent educator and open-source enthusiast who creates meaningful projects to teach programming on my YouTube Channel. **You can support my work by [Sponsoring me on GitHub](https://github.com/sponsors/atapas) or [Buy Me a Cofee](https://buymeacoffee.com/tapasadhikary)**. + +## Video + +Here is the video for you to go through and learn: + +[](https://youtu.be/EtoHtZ8mdWA "Video") + +## **👩💻 🧑💻 Assignment Tasks** + +Please find the task assignments in the [Task File](./task.md). diff --git a/day-22/banner.png b/day-22/banner.png new file mode 100644 index 0000000..363b888 Binary files /dev/null and b/day-22/banner.png differ diff --git a/day-22/index.html b/day-22/index.html new file mode 100644 index 0000000..baf44f8 --- /dev/null +++ b/day-22/index.html @@ -0,0 +1,19 @@ + + + + + +Callback - PizzaHub + + + + +++ + \ No newline at end of file diff --git a/day-22/index.js b/day-22/index.js new file mode 100644 index 0000000..16e3dbb --- /dev/null +++ b/day-22/index.js @@ -0,0 +1,82 @@ +console.log("Async JavaScript - Callback"); + +const storeEL = document.getElementById("store"); +const orderDetailsEL = document.getElementById("order-details"); +const addOnEL = document.getElementById("add-on"); +const orderEL = document.getElementById("order"); + +function orderPizza(type, name) { + // Query the pizzahub for a store + storeEL.textContent = `Locating Store...`; + query(`api/pizzahub/`, function (result, error) { + if (!error) { + let shopId = result[0]; + console.log({ shopId }); + storeEL.textContent = `Located Store: ${shopId}`; + + // Get the store and query pizzas + orderDetailsEL.textContent = `Loading Order...`; + query(`api/pizzahub/pizzas/${shopId}`, function (result, error) { + if (!error) { + let pizzas = result; + console.log({ pizzas }); + + // Find if my pizza is availavle + let myPizza = pizzas.find((pizza) => { + console.log(pizza.name); + return pizza.type === type && pizza.name === name; + }); + console.log({ myPizza }); + + orderDetailsEL.textContent = `You have ordered for ${myPizza.type} ${myPizza.name}`; + + // Check for the free beverages + addOnEL.textContent = `Checking for Add-Ons...`; + query( + `api/pizzahub/beverages/${myPizza.id}`, + function (result, error) { + if (!error) { + let beverage = result[0]; + console.log({ beverage }); + addOnEL.textContent = `We have added an add-on ${beverage.name} for you.`; + + // Prepare an order + orderEL.textContent = `Preparing your order...`; + query( + `api/order`, + + function (result, error) { + if (!error) { + console.log( + `Your order of ${type} ${name} with ${beverage.name} has been placed` + ); + orderEL.textContent = `Your order of ${type} ${name} with ${beverage.name} has been placed at ${new Date(result.createdAt)}`; + } else { + console.log( + `Bad luck, No Pizza for you today!` + ); + orderEL.textContent = `Bad luck, No Pizza for you today!`; + } + }, + { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify( { + pizzaId: myPizza.id, + beverageId: beverage.id, + }) + } + ); + } + } + ); + } + }); + } + }); +} + +// Call the orderPizza method +orderPizza("veg", "Margherita"); diff --git a/day-22/lib/query.js b/day-22/lib/query.js new file mode 100644 index 0000000..c89b0af --- /dev/null +++ b/day-22/lib/query.js @@ -0,0 +1,12 @@ +// You no need to learn this method now. We will leaern it deeper in the future sessions. +function query(endpoint, callback, options) { + fetch(`http://localhost:3000/${endpoint}`, options) + .then(function (response) { + return response.json(); + }) + .then(function (json) { + setTimeout(() => { + callback(json) + }, 2000); + }); +} diff --git a/day-22/task.md b/day-22/task.md new file mode 100644 index 0000000..17b67e0 --- /dev/null +++ b/day-22/task.md @@ -0,0 +1,63 @@ +# Tasks + +Please complete the following tasks and post them on the tapaScript Discord under "40 Days of JavaScript". + +> **DO NOT USE AI to FIND ANSWERS**. If you are stuck, let's discuss it on DISCORD and learn. Also, please note that none of the answers need you to create any UI. Just focus on the logic building and print the output on the browser console. + +## 1. Pass a function to greet a user and then thank them + +## 2. Implement a calculator function that accepts two numbers and a callback to perform operations like add, subtract + +```js +function calculator(a, b, operationCallback) { + // Complete this function +} + +function add(x, y) { + return x + y; +} + +// Test calculator(5, 3, add); +``` + +Also test it with subtract, multiply, divide functions. + +## 3. Create a delayedMessage function that prints a message after a delay using setTimeout + +```js +function delayedMessage(message, delay, callback) { + // Your code here +} + +// delayedMessage("Task complete", 2000, () => console.log("Callback Fired!")) +``` + +## 4. Implement a function that filters numbers in an array based on a condition provided via callback + +```js +function filterNumbers(arr, conditionCallback) { + // Use loop and callback to return filtered array +} + +// Example: filterNumbers([1, 2, 3, 4], n => n > 2) // should return [3, 4] +``` + +## 5. Execute a sequence of tasks one after another using callbacks + +```js +function task1(callback) { + console.log("Task 1 done"); + callback(); +} + +function task2(callback) { + console.log("Task 2 done"); + callback(); +} + +function task3() { + console.log("Task 3 done"); +} + +// Call them in sequence using nested callbacks +``` diff --git a/day-23/README.md b/day-23/README.md new file mode 100644 index 0000000..9676654 --- /dev/null +++ b/day-23/README.md @@ -0,0 +1,53 @@ +# Day 23 - 40 Days of JavaScript - Async JavaScript - Promises + +## **🎯 Goal of This Lesson** + +- ✅ Introduction +- ✅ What Are We Going To Cover? +- ✅ What is a Promise in JavaScript? +- ✅ Callback to Promise +- ✅ How to Create Promises? +- ✅ The resolve and reject +- ✅ Promise States and Values +- ✅ How Promises Resolve or Reject? +- ✅ Handling Promises +- ✅ then(), catch(), finally() +- ✅ The Promise Chain and Rules +- ✅ Handling Errors +- ✅ The finally() +- ✅ Promise Chain Mistakes +- ✅ Handling Multiple Promises +- ✅ How to Cancel a Promise? +- ✅ PizzaHub App with Promises’ +- ✅ Tasks + +## How to run the API? + +- Open the terminal and change the directory to `api/pizzahub`. +- Then install the depenedencies with `npm install` command. +- Run the API server locally with `npm run start` command. + +The API server will be available on `localhost:3000`. + +## 🫶 Support + +Your support means a lot. + +- Please SUBSCRIBE to [tapaScript YouTube Channel](https://youtube.com/tapasadhikary) if not done already. A Big Thank You! +- Liked my work? It takes months of hard work to create quality content and present it to you. You can show your support to me with a STAR(⭐) to this repository. + + > Many Thanks to all the `Stargazers` who have supported this project with stars(⭐) + +### 🤝 Sponsor My Work + +I am an independent educator and open-source enthusiast who creates meaningful projects to teach programming on my YouTube Channel. **You can support my work by [Sponsoring me on GitHub](https://github.com/sponsors/atapas) or [Buy Me a Cofee](https://buymeacoffee.com/tapasadhikary)**. + +## Video + +Here is the video for you to go through and learn: + +[](https://youtu.be/R52MdtIW3rs "Video") + +## **👩💻 🧑💻 Assignment Tasks** + +Please find the task assignments in the [Task File](./task.md). diff --git a/day-23/banner.png b/day-23/banner.png new file mode 100644 index 0000000..b6a29ff Binary files /dev/null and b/day-23/banner.png differ diff --git a/day-23/index.html b/day-23/index.html new file mode 100644 index 0000000..6248b06 --- /dev/null +++ b/day-23/index.html @@ -0,0 +1,14 @@ + + + + + +PizzaHub - Order Here
+ + + + +Promise - PizzaHub + + + + +40 Days of JavaScript - Promises
+ PizzaHub with Promises + + \ No newline at end of file diff --git a/day-23/index.js b/day-23/index.js new file mode 100644 index 0000000..9a16a93 --- /dev/null +++ b/day-23/index.js @@ -0,0 +1,281 @@ +console.log("Promises"); + +// - What is a Promise in JavaScript? +// - Callback to Promise +// - Understanding Promise States +// - How promises are resolved and rejected +// - Handling Promises +// - Promise Chain +// - Handling Multiple Promises +// - How to Cancel a Promise +// - That PizzaHub App +// - Tasks and Assignments + +/*let promise = new Promise(function(resolve, reject){ + +}); + +// Executor +function(resolve, reject){ + // Logic goes here + resolve() + reject() + resolve() +}*/ + +// state - +// pending: Initially when the executor function starts the execution. +// fulfilled: When the promise is resolved. +// rejected: When the promise is rejected. + +// result - +// undefined: Initially when the state value is pending. +// value: When resolve(value) is called. +// error: When reject(error) is called. + +// - How promises are resolved and rejected + + +let promise1 = new Promise(function (resolve, reject) { + resolve("Hey, I am done!"); +}); + +let promise2 = new Promise(function (resolve, reject) { + reject("Something is not right!"); +}); + +let anotherPromise = new Promise(function (resolve, reject) { + resolve("I am surely going to get resolved!"); + + reject(new Error("Will this be ignored?")); // ignored + resolve("Ignored?"); // ignored +}); + + +// - Handling Promises + +// .then() +// .catch() +// .finally() + +let loading = false + const promise = new Promise(function(resolve, reject) { + loading = true; + // Make a Network Call(API Call/IO Operation) + resolve("I am resolved...") + }); + + promise.then( + (result) => {console.log(result)} + ).catch( + (error) => {console.error(error)} + ).finally( + () => { + loading = false; + } + ); + + // - Promise Chain + + // Rule 1: Every promise gives you a .then() handler method. Every rejected promise provides you a .catch() handler. + + // Rule 2: You can do mainly three valuable things from the .then() method. You can return another promise(for async operation). You can return any other value from a synchronous operation. Lastly, you can throw an error. + + // Return a promise from the .then() handler + + // Create a Promise +let getUser = new Promise(function(resolve, reject) { + const user = { + name: 'John Doe', + email: 'jdoe@email.com', + password: 'jdoe.password', + permissions: [ 'db', 'dev'] + }; + resolve(user); +}); + +getUser +.then(function(user) { + + console.log(`Got user ${user.name}`); + + return new Promise(function(resolve, reject) { + setTimeout(function(){ + resolve('Bangalore') + }, 2000) + }) +}).then((address) => { + console.log(`User address is ${address}`); +}); + +// Return a simple value from the .then() handler + +getUser +.then(function(user) { + console.log(`Got user ${user.name}`); + return user.email; +}) +.then(function(email) { + console.log(`User email is ${email}`); +}); + +// Throw an error from the .then() handler + +getUser +.then(function(user) { + + console.log(`Got user ${user.name}`); + + if (!user.permissions.includes("hr")) { + throw new Error("You are not allowed to access the HR module"); + } + + return user.email; +}) +.then((email) => { + console.log(`User email is ${email}`); +}) +.catch((error) => { + console.error(error); +}); + +// Rule 3: You can rethrow from the .catch() handler to handle the error later. In this case, the control will go to the next closest .catch() handler. + +let promise401 = new Promise(function(resolve, reject) { + reject(401) +}); + +promise401 +.catch((error) => { + console.log(error); + if (error === 401) { + console.log("Rethrowing 401"); + throw error; + } else { + // Do Something + } +}) +.then((result) => { + console.log(result); +}) +.catch((error) => { + console.log(`handling ${error} here`); +}) + +// Rule 4 - Unlike .then() and .catch(), the .finally() handler doesn't process the result value or error. It just passes the result as is to the next handler. + +// Create a Promise +let promiseFinally = new Promise(function(resolve, reject) { + resolve('Testing Finally.'); +}); + +promiseFinally + .finally(function() { + console.log("Running Finally!") + }) + .then(function(result) { + console.log(result); + }) + + // Rule 5 - Calling the .then() handler method multiple times on a single promise is NOT chaining. + + + promise + .then((result) => { + // Do Something + return 101; + }) + .then((result) => { + // result // 101 + // throw error + }) + .catch((error) => { + + }) + + + // This is not Chaining Promises + +// Create a Promise +{ +let promise = new Promise(function (resolve, reject) { + resolve(10); + }); + + // Calling the .then() method multiple times + // on a single promise - It's not a chain + promise.then(function (value) { + value++; + return value; + }) + .then(function (value) { + value = value + 10; + return value; + }) + .then(function (value) { + value = value + 20; + console.log(value); + return value; + }); +} + + // Handle Multiple Promises + + // promise.all([promises]) + +const BULBASAUR_POKEMONS_URL = 'https://pokeapi.co/api/v2/pokemon/bulbasaur'; +const RATICATE_POKEMONS_URL = 'https://pokeapi.co/api/v2/pokemon/raticate'; +const KAKUNA_POKEMONS_URL = 'https://pokeapi.co/api/v2/pokemon/kakuna'; + +let promise_1 = getPromise(BULBASAUR_POKEMONS_URL); +let promise_2 = getPromise(RATICATE_POKEMONS_URL); +let promise_3 = getPromise(KAKUNA_POKEMONS_URL); + + +Promise.all([promise_1, promise_2, promise_3]) +.then((result) => { + console.log(result); +}) +.catch((error) => { + console.error(error); +}) + + + +Promise.any([promise_1, promise_2, promise_3]) +.then((result) => { + console.log(result); +}) +.catch((error) => { + console.error(error); +}) + + +// settling a promise = fulfilling(resolve) + rejecting + +Promise.allSettled([promise_1, promise_2, promise_3]) +.then((result) => { + console.log(result); +}) +.catch((error) => { + console.error(error); +}) + + +Promise.race([promise_1, promise_2, promise_3]) +.then((result) => { + console.log(result); +}) +.catch((error) => { + console.error(error); +}) + +Promise.resolve() +// let promise = new Promise(resolve => resolve(value)); + +Promise.reject() +// let promise = new Promise((resolve, reject) => reject(error)); + + +// How to Cancel a Promise + diff --git a/day-23/pizzahub/lib/query.js b/day-23/pizzahub/lib/query.js new file mode 100644 index 0000000..a50ea24 --- /dev/null +++ b/day-23/pizzahub/lib/query.js @@ -0,0 +1,15 @@ +function query(endpoint, options) { + return new Promise((resolve, reject) => { + setTimeout(() => { + fetch(`http://localhost:3000/${endpoint}`, options) + .then((response) => { + if (!response.ok) { + throw new Error(`HTTP error ${response.status}`); + } + return response.json(); + }) + .then(resolve) + .catch(reject); + }, 2000); + }); +} diff --git a/day-23/pizzahub/ph.html b/day-23/pizzahub/ph.html new file mode 100644 index 0000000..f89edd0 --- /dev/null +++ b/day-23/pizzahub/ph.html @@ -0,0 +1,19 @@ + + + + + +Promise - PizzaHub + + + + +++ + \ No newline at end of file diff --git a/day-23/pizzahub/ph.js b/day-23/pizzahub/ph.js new file mode 100644 index 0000000..3e1e8ab --- /dev/null +++ b/day-23/pizzahub/ph.js @@ -0,0 +1,57 @@ +// Returns a shop id +let getShopIds = () => { + const url = `api/pizzahub`; + return query(url); +}; + +// Returns a promise with pizza list for a shop +let getPizzaList = (shopId) => { + const url = `api/pizzahub/pizzas/${shopId}`; + return query(url); +}; + +// Returns a promise with pizza that matches the customer request +let getMyPizzaWithAddOn = (pizzas, type, name) => { + let myPizza = pizzas.find((pizza) => { + return pizza.type === type && pizza.name === name; + }); + const url = `api/pizzahub/beverages/${myPizza.id}`; + return query(url); +}; + +// Returns a promise after Placing the order +let performOrder = (result) => { + return query(`api/order`, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + pizzaId: result.pizzaId, + beverageId: result.id, + }), + }); +}; + +// Confirm the order +let confirmOrder = (type, name, createdAt) => { + console.log( + `Your order of ${type} ${name} has been placed at ${new Date( + createdAt + )}!` + ); +}; + +function orderPizza(type, name) { + getShopIds() + .then((shopIds) => getPizzaList(shopIds[0])) + .then((pizzas) => getMyPizzaWithAddOn(pizzas, type, name)) + .then((pizzaWithAddOns) => performOrder(pizzaWithAddOns[0])) + .then((order) => confirmOrder(type, name, order.createdAt)) + .catch(function (error) { + console.log(`Bad luck, No Pizza for you today!`); + }); +} + +// Call the orderPizza method +orderPizza("veg", "Margherita"); diff --git a/day-23/promise.js b/day-23/promise.js new file mode 100644 index 0000000..8753dbf --- /dev/null +++ b/day-23/promise.js @@ -0,0 +1,9 @@ +function getPromise(URL) { + return fetch(URL) + .then((response) => { + if (!response.ok) { + throw new Error(`HTTP error ${response.status}`); + } + return response.json(); + }); +} diff --git a/day-23/task.md b/day-23/task.md new file mode 100644 index 0000000..3501f7e --- /dev/null +++ b/day-23/task.md @@ -0,0 +1,62 @@ +# Tasks + +Please complete the following tasks and post them on the tapaScript Discord under "40 Days of JavaScript". + +> **DO NOT USE AI to FIND ANSWERS**. If you are stuck, let's discuss it on DISCORD and learn. Also, please note that none of the answers need you to create any UI. Just focus on the logic building and print the output on the browser console. + +## 1. Create Your First Promise + +- Create a Promise that resolves with the string "Hello, Promises!" after 1 second. +- Log the result using .then(). + +## 2. Reject a Promise + +- Create a Promise that immediately rejects with the message "Something went wrong!". +- Handle the error using .catch(). + +## 3. Simulate Coin Toss + +Return a Promise that randomly resolves to "Heads" or "Tails" after 1 second. + +## 4. Promise with Condition + +- Create a function checkAge(age) that returns a Promise. +- Resolve if age >= 18, reject otherwise. + +## 5. Chain Promises Sequentially + +- Create three Promises that log: + - "Step 1 done" + - "Step 2 done" + - "Step 3 done" +- Chain them using .then(). + +## 6. Value Transformation in Chain + +- Create a Promise that resolves with 5. +- Chain .then() handlers to double it, then square it. +- Final output should be 100. + +## 7. Chain with Random Rejection + +- First .then() resolves to "Start". +- Second .then() randomly throws an error or returns "Continue". +- Handle rejection gracefully. + +## 8. Multiple then() calls on same Promise + +- Create a single resolved Promise. +- Attach two different .then() handlers to it. +- Explain that both run independently. + +## 9. Return New Promises in .then() + +- Chain multiple .then() where each returns a new Promise with a delay and logs a step like: + - “First” + - “Second” + - “Third” + +## 10. Implement fakeDBQuery() + +- Create a function that simulates a DB query with a random delay and returns data (like a user object). +- Chain multiple fake queries. diff --git a/day-24/README.md b/day-24/README.md new file mode 100644 index 0000000..73bcc23 --- /dev/null +++ b/day-24/README.md @@ -0,0 +1,47 @@ +# Day 24 - 40 Days of JavaScript - Async JavaScript - async/await + +## **🎯 Goal of This Lesson** + +- ✅ Introduction +- ✅ What Will We Learn? +- ✅ Why async/await? +- ✅ The async Keyword +- ✅ The await Keyword +- ✅ Is await synchronous? +- ✅ Error Handling +- ✅ Project - Weather App +- ✅ Top Level await +- ✅ Handling Multiple async/await +- ✅ The pizzahub with async/await +- ✅ Tasks & Project + +## How to run the API? + +- Open the terminal and change the directory to `api/pizzahub`. +- Then install the depenedencies with `npm install` command. +- Run the API server locally with `npm run start` command. + +The API server will be available on `localhost:3000`. + +## 🫶 Support + +Your support means a lot. + +- Please SUBSCRIBE to [tapaScript YouTube Channel](https://youtube.com/tapasadhikary) if not done already. A Big Thank You! +- Liked my work? It takes months of hard work to create quality content and present it to you. You can show your support to me with a STAR(⭐) to this repository. + + > Many Thanks to all the `Stargazers` who have supported this project with stars(⭐) + +### 🤝 Sponsor My Work + +I am an independent educator and open-source enthusiast who creates meaningful projects to teach programming on my YouTube Channel. **You can support my work by [Sponsoring me on GitHub](https://github.com/sponsors/atapas) or [Buy Me a Cofee](https://buymeacoffee.com/tapasadhikary)**. + +## Video + +Here is the video for you to go through and learn: + +[](https://youtu.be/WQdCffdPPKI "Video") + +## **👩💻 🧑💻 Assignment Tasks** + +Please find the task assignments in the [Task File](./task.md). diff --git a/day-24/banner.png b/day-24/banner.png new file mode 100644 index 0000000..ca10be1 Binary files /dev/null and b/day-24/banner.png differ diff --git a/day-24/index.html b/day-24/index.html new file mode 100644 index 0000000..c21966a --- /dev/null +++ b/day-24/index.html @@ -0,0 +1,13 @@ + + + + + +PizzaHub - Order Here
+ + + + +async/await + + + +40 Days of JavaScript - async/await
+ Weather App + + \ No newline at end of file diff --git a/day-24/index.js b/day-24/index.js new file mode 100644 index 0000000..91e9594 --- /dev/null +++ b/day-24/index.js @@ -0,0 +1,109 @@ + +// - Promises: What are the problems? +// - Promise to await +// - async function +// - async/await together +// - Does await make things synchronous? +// - Error Handling with async/await +// - Project example +// - Top Level await +// - Multiple async/await +// - PizzaHub example with async and await +// - Tasks and assignments + + +const promise = new Promise(function(resolve, reject) { + setTimeout(() => { + resolve("I am a promise"); + }, 1000) + +}); + +promise.then((x) => console.log(x)); + + +async function foo() { + return Promise.resolve(101); +} + +async function tacklePromise() { + const result = await foo(); // 101 + console.log(result); +} + +console.log("I am after tacklePromise()"); +console.log(tacklePromise()); + + +const errorPromise = new Promise((resolve, reject) => { + reject("Error Occured!"); +}) + +async function handleErrorPromise() { + try { + await errorPromise; + } catch(error) { + console.error(error) + } + +} + +handleErrorPromise(); + +// errorPromise.catch((error) => console.error(error)); + + +let stores; + +( + async () => { + let response = await fetch('http://localhost:3000/api/pizzahub'); + stores = await response.json(); + + console.log(stores); + } +)(); // IFE + +console.log(stores); + + + + +const BULBASAUR_POKEMONS_URL = 'https://pokeapi.co/api/v2/pokemon/bulbasaur'; +const RATICATE_POKEMONS_URL = 'https://pokeapi.co/api/v2/pokemon/raticate'; +const KAKUNA_POKEMONS_URL = 'https://pokeapi.co/api/v2/pokemon/kakuna'; + + + +async function resolvePokemons() { + const responses = Promise.allSettled([ + fetch(BULBASAUR_POKEMONS_URL), + fetch(RATICATE_POKEMONS_URL), + fetch(KAKUNA_POKEMONS_URL) + ]); + const results = await responses; + console.log(results) + + const pk_1 = await results[0]?.value.json(); + const pk_2 = await results[1]?.value.json(); + const pk_3 = await results[2]?.value.json(); + + console.log(pk_1); + console.log(pk_2); + console.log(pk_3); +} + +async function resolvePokemonsV2() { + const responses = await Promise.allSettled([ + fetch(BULBASAUR_POKEMONS_URL).then(response => response.json()), + fetch(RATICATE_POKEMONS_URL).then(response => response.json()), + fetch(KAKUNA_POKEMONS_URL).then(response => response.json()) + ]); + + console.log(responses); +} + +resolvePokemonsV2(); + + + diff --git a/day-24/pizzahub/lib/query.js b/day-24/pizzahub/lib/query.js new file mode 100644 index 0000000..a50ea24 --- /dev/null +++ b/day-24/pizzahub/lib/query.js @@ -0,0 +1,15 @@ +function query(endpoint, options) { + return new Promise((resolve, reject) => { + setTimeout(() => { + fetch(`http://localhost:3000/${endpoint}`, options) + .then((response) => { + if (!response.ok) { + throw new Error(`HTTP error ${response.status}`); + } + return response.json(); + }) + .then(resolve) + .catch(reject); + }, 2000); + }); +} diff --git a/day-24/pizzahub/ph.html b/day-24/pizzahub/ph.html new file mode 100644 index 0000000..f89edd0 --- /dev/null +++ b/day-24/pizzahub/ph.html @@ -0,0 +1,19 @@ + + + + + +Promise - PizzaHub + + + + +++ + \ No newline at end of file diff --git a/day-24/pizzahub/ph.js b/day-24/pizzahub/ph.js new file mode 100644 index 0000000..75d64f4 --- /dev/null +++ b/day-24/pizzahub/ph.js @@ -0,0 +1,60 @@ +// Returns a shop id +let getShopIds = async () => { + const url = `api/pizzahub`; + return query(url); +}; + +// Returns a promise with pizza list for a shop +let getPizzaList = async (shopId) => { + const url = `api/pizzahub/pizzas/${shopId}`; + return query(url); +}; + +// Returns a promise with pizza that matches the customer request +let getMyPizzaWithAddOn = async (pizzas, type, name) => { + let myPizza = pizzas.find((pizza) => { + return pizza.type === type && pizza.name === name; + }); + const url = `api/pizzahub/beverages/${myPizza.id}`; + return query(url); +}; + +// Returns a promise after Placing the order +let performOrder = async (result) => { + return query(`api/order`, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + pizzaId: result.pizzaId, + beverageId: result.id, + }), + }); +}; + +// Confirm the order +let confirmOrder = (type, name, createdAt) => { + console.log( + `Your order of ${type} ${name} has been placed at ${new Date( + createdAt + )}!` + ); +}; + +async function orderPizza(type, name) { + try { + const shopIds = await getShopIds(); + const pizzas = await getPizzaList(shopIds[0]); + const pizzaWithAddOns = await getMyPizzaWithAddOn(pizzas, type, name); + const order = await performOrder(pizzaWithAddOns[0]); + + confirmOrder(type, name, order.createdAt); + } catch (error) { + console.log(`Bad luck, No Pizza for you today! ${error}`); + } +} + +// Call the orderPizza method +orderPizza("veg", "Margherita"); + diff --git a/day-24/task.md b/day-24/task.md new file mode 100644 index 0000000..1639695 --- /dev/null +++ b/day-24/task.md @@ -0,0 +1,38 @@ +# Tasks + +Please complete the following tasks and post them on the tapaScript Discord under "40 Days of JavaScript". + +> **DO NOT USE AI to FIND ANSWERS**. If you are stuck, let's discuss it on DISCORD and learn. Also, please note that none of the answers need you to create any UI. Just focus on the logic building and print the output on the browser console. + +## 1. Create a function wait(ms) that returns a promise which resolves after ms milliseconds. Use async/await to log messages before and after the delay + +## 2. Using async/await, log "One", then after 1 second log "Two", then "Three" after another 2 seconds. No setTimeout outside of promises + +## 3. Use fetch() with async/await to load a local JSON file (data.json) and display its contents in the console + +## 4. Use the public API `https://jsonplaceholder.typicode.com/users/1` to fetch and display the user’s name, email, and address on the page + +## 5. Modify the previous task to handle errors (e.g., wrong URL) and display a user-friendly error message in the DOM + +## 6. Refactor then/catch to async/await + +```js +fetch('/api/data') + .then(res => res.json()) + .then(data => console.log(data)) + .catch(err => console.error(err)); +``` + +## Project Task + +Let's Build a “Movie Explorer” App + +Build an app that lets users search movies using the OMDB API: +`http://www.omdbapi.com/?apikey=yourkey&s=movieName` + +Hints: + +- Input box for search term +- Display movie title, poster, and year +- Show “No results found” if search fails +- Use async/await, DOM manipulation, and try/catch diff --git a/day-24/weather/index.html b/day-24/weather/index.html new file mode 100644 index 0000000..8606529 --- /dev/null +++ b/day-24/weather/index.html @@ -0,0 +1,16 @@ + + + + +PizzaHub - Order Here
+ + + + +Weather Snap + + + + +🌤️ Weather App
+ + + + + + \ No newline at end of file diff --git a/day-24/weather/index.js b/day-24/weather/index.js new file mode 100644 index 0000000..b4e4c2c --- /dev/null +++ b/day-24/weather/index.js @@ -0,0 +1,50 @@ + +// Get the API Key from here: https://openweathermap.org/api +const API_KEY = ""; + +const queryWeather = async (city) => { + try { + showLoading(); + const res = await fetch( + `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric` + ); + + if (!res.ok) throw new Error("City not found"); + + const data = await res.json(); + displayWeather(data); + } catch (err) { + showError(err.message); + } finally { + hideLoading(); + } +}; + +document.querySelector('#searchBtn').addEventListener('click', () => { + const city = document.querySelector('#cityInput').value; + if (city) { + queryWeather(city); + } +}); + +function showLoading() { + document.querySelector('#loading').innerHTML = '⏳ Loading...'; +} + +function hideLoading() { + document.querySelector('#loading').innerHTML = ''; +} + +function displayWeather(data) { + const html = ` + ${data.name}
+🌡️ Temp: ${data.main.temp}°C
+☁️ Condition: ${data.weather[0].description}
+
+ `;
+ document.querySelector('#result').innerHTML = html;
+}
+
+function showError(message) {
+ document.querySelector('#result').innerHTML = `❌ ${message}
`; +} \ No newline at end of file diff --git a/day-24/weather/style.css b/day-24/weather/style.css new file mode 100644 index 0000000..e69de29 diff --git a/day-25/README.md b/day-25/README.md new file mode 100644 index 0000000..aa0949d --- /dev/null +++ b/day-25/README.md @@ -0,0 +1,51 @@ +# Day 25 - 40 Days of JavaScript - Async JavaScript - fetch() API + +## **🎯 Goal of This Lesson** + +- ✅ Introduction +- ✅ What Will We Learn Today? +- ✅ What is fetch() API +- ✅ fetch() API Syntax +- ✅ fetch() with async/await +- ✅ HTTP Methods +- ✅ feth() - GET Resources +- ✅ fetch() with Query Params +- ✅ fetch() CREATE a Resource +- ✅ fetch() UPDATE a Resource +- ✅ fetch() DELETE a Resource +- ✅ fetch() Custom Headers +- ✅ Create REQUESTs +- ✅ Handling Response &Error +- ✅ Canceling fetch() Request +- ✅ Tasks and Assignments + +## How to run the API? + +- Open the terminal and change the directory to `api/blog`. +- Then install the depenedencies with `npm install` command. +- Run the API server locally with `npm run start` command. + +The API server will be available on `localhost:3000`. + +## 🫶 Support + +Your support means a lot. + +- Please SUBSCRIBE to [tapaScript YouTube Channel](https://youtube.com/tapasadhikary) if not done already. A Big Thank You! +- Liked my work? It takes months of hard work to create quality content and present it to you. You can show your support to me with a STAR(⭐) to this repository. + + > Many Thanks to all the `Stargazers` who have supported this project with stars(⭐) + +### 🤝 Sponsor My Work + +I am an independent educator and open-source enthusiast who creates meaningful projects to teach programming on my YouTube Channel. **You can support my work by [Sponsoring me on GitHub](https://github.com/sponsors/atapas) or [Buy Me a Cofee](https://buymeacoffee.com/tapasadhikary)**. + +## Video + +Here is the video for you to go through and learn: + +[](https://www.youtube.com/watch?v=G3oPZSvrO9w "Video") + +## **👩💻 🧑💻 Assignment Tasks** + +Please find the task assignments in the [Task File](./task.md). diff --git a/day-25/banner.png b/day-25/banner.png new file mode 100644 index 0000000..7946724 Binary files /dev/null and b/day-25/banner.png differ diff --git a/day-25/download/file.txt b/day-25/download/file.txt new file mode 100644 index 0000000..3abcb6a --- /dev/null +++ b/day-25/download/file.txt @@ -0,0 +1 @@ +A dummy file. \ No newline at end of file diff --git a/day-25/index.html b/day-25/index.html new file mode 100644 index 0000000..c108d99 --- /dev/null +++ b/day-25/index.html @@ -0,0 +1,17 @@ + + + + + +The fetch() API + + + +40 Days of JavaScript - The fetch() API
+++ + \ No newline at end of file diff --git a/day-25/index.js b/day-25/index.js new file mode 100644 index 0000000..c49c003 --- /dev/null +++ b/day-25/index.js @@ -0,0 +1,295 @@ +// - 1. What is fetch() API and Syntax +// - 2. Using async/await with fetch() +// - 3. HTTP Methods +// - 4. fetch() Usage: Getting Resources +// - 5. fetch() Usage: Query Params +// - 6. fetch() Usage: Creating Resource +// - 7. fetch() Usage: Custom Headers +// - 8. fetch() Usage: Updating an Entire Resource +// - 9. fetch() Usage: Updating a Part of the Resource +// - 10. fetch() Usage: Deleting Resource +// - 11. Creating a Request Object +// - 12. Handling Response +// - 13. Handling Errors +// - 14. Canceling a Request +// - 15. Tasks and Assignments + +// - 1. What is fetch() API and Syntax +/* +fetch(url, options) + .then(response => response.json()) + .then(data => console.log(data)) + .catch(error => console.error('Error:', error)); +*/ + +// - 2. Using async/await with fetch() +/* +async function fetchData(url) { + try { + const response = await fetch(url, options); + const data = await response.json(); + console.log(data); + } catch(error) { + console.log(error); + } +} +*/ + +// - 3. HTTP Methods + +/* +Check this out: https://www.youtube.com/watch?v=Qf2BBZVaAg8 + +- GET: Fetch data from the server. It does not change anything. +- POST: Send data to the server to create a new resource. +- PUT: Update an entire resource. Replaces the existing data. +- PATCH: Partially update a resource. Only change specific fields. +- DELETE: Delete a resource from the server. +- HEAD: Like GET, but only retrieves the headers (no body). Useful to check if a resource exists or to check metadata. +- OPTIONS: Returns the allowed HTTP methods on a resource (CORS and debugging). +- TRACE: Echoes back the received request to help in debugging or testing — mostly disabled for security reasons. +- CONNECT: Establishes a tunnel to the server, typically for SSL (HTTPS) connections through an HTTP proxy. It’s mostly used for secure communication via a proxy. +*/ + +// - 4. fetch() Usage: Getting Resources + +async function fetchPosts() { + const API_URL = "http://localhost:3000/posts"; + try { + const response = await fetch(API_URL); + // - 12. Handling Response + if (!response.ok) { + throw new Error(`Response status: ${response.status}`); + } + const contentType = response.headers.get("content-type"); + if (!contentType || !contentType.includes("application/json")) { + throw new TypeError("Oops, we haven't got JSON!"); + } + const data = await response.json(); + console.log(data); + } catch (error) { + // - 13. Handling Errors + console.log(error); + } +} + +fetchPosts(); + +// - 5. fetch() Usage: Query Params + +async function fetchPostsWithComments() { + const API_URL = "http://localhost:3000/posts"; + // Set up query parameters + const queryParams = { + _embed: "comments", + }; + try { + // Build a Query String + const queryString = new URLSearchParams(queryParams).toString(); + const url = `${API_URL}?${queryString}`; + + const response = await fetch(url); + const data = await response.json(); + console.log(data); + } catch (error) { + console.log(error); + } +} + +fetchPostsWithComments(); + +// - 6. fetch() Usage: Creating Resource + +async function createPost(postData) { + const API_URL = "http://localhost:3000/posts"; + try { + const response = await fetch(API_URL, { + method: "POST", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(postData), + }); + const result = await response.json(); + console.log(result); + } catch (error) { + console.log(error); + } +} + +const newPostData = { + id: crypto.randomUUID(), + title: "How to use fetch() API for POST?", + views: 0, +}; + +// const createdPostResult = createPost(newPostData); +// console.log(createdPostResult) + +// - 7. fetch() Usage: Custom Headers + +async function login() { + const API_URL = "http://localhost:3000/login"; + try { + const response = await fetch(API_URL, { + method: "POST", + headers: { + "Content-Type": "application/json", + Authorization: "Bearer secret-token", + "Custom-Header": "learn 40 days of JS", + }, + body: JSON.stringify({ username: "tapascript", password: "hello" }), + }); + const result = await response.json(); + console.log(result); + } catch (error) { + console.log(error); + } +} + +login(); + +// - 8. fetch() Usage: Updating an Entire Resource + +async function updatePost(postData) { + console.log("Replacing a POST Data..."); + const API_URL = + "http://localhost:3000/posts/a9057951-515e-3da2-9793-af29719d0e33"; + try { + const response = await fetch(API_URL, { + method: "PUT", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(postData), + }); + const result = await response.json(); + console.log(result); + } catch (error) { + console.log(error); + } +} + +const updatePostData = { + title: "What is 40 Days of JavaScript?", + views: 160, +}; + +const updated = updatePost(updatePostData); +console.log(updated); + +// - 9. fetch() Usage: Updating a Part of the Resource + +async function updateViews(viewData) { + console.log("Updating a View with Partial Data..."); + const API_URL = `http://localhost:3000/posts/${viewData.id}`; + try { + const response = await fetch(API_URL, { + method: "PATCH", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(viewData), + }); + const result = await response.json(); + console.log(result); + } catch (error) { + console.log(error); + } +} + +const updatedPart = updateViews({ + id: "a9057951-515e-4da2-9793-af29719d0e33", + views: 100, +}); +console.log(updatedPart); + +// - 10. fetch() Usage: Deleting Resource + +async function deletePost(postId) { + console.log("Deleting Post..."); + const API_URL = `http://localhost:3000/posts/${postId}`; + try { + const response = await fetch(API_URL, { + method: "DELETE", + }); + const result = await response.json(); + console.log(result); + } catch (error) { + console.log(error); + } +} + +const deleted = deletePost("a9057951-515e-4da2-9793-af29719d0e33"); + +// - 11. Creating a Request Object + +const request1 = new Request("http://localhost:3000/posts", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + id: crypto.randomUUID(), + title: "How to Cancel a Request?", + views: 0, + }), +}); + +async function post(request) { + try { + const response = await fetch(request); + const result = await response.json(); + console.log("Success:", result); + } catch (error) { + console.error("Error:", error); + } +} + +post(request1); + +const request2 = new Request(request1, { + body: JSON.stringify({ + id: crypto.randomUUID(), + title: "How to Parse JSON", + views: 10, + }), +}); + +console.log(request2); + +post(request2); + +// - 14. Canceling a Request + +let controller; +const url = "./download/file.txt"; + +const downloadBtn = document.querySelector("#download-btn"); +const abortBtn = document.querySelector("#abort-btn"); + +downloadBtn.addEventListener("click", downloadFile); + +abortBtn.addEventListener("click", () => { + if (controller) { + controller.abort('User Aborted the Download Action'); + console.log("Download aborted"); + } +}); + +async function downloadFile() { + controller = new AbortController(); + const signal = controller.signal; + try { + console.log("Downloading..."); + setTimeout(async () => { + const response = await fetch(url, { signal }); + console.log("Download complete", response); + + // Download code + const blob = await response.blob(); + const objectUrl = URL.createObjectURL(blob); + const link = document.createElement("a"); + link.href = objectUrl; + link.download = "file.txt"; + link.click(); + URL.revokeObjectURL(objectUrl); + }, 2000); + } catch (err) { + console.error(`Download error: ${err.message}`); + } +} diff --git a/day-25/task.md b/day-25/task.md new file mode 100644 index 0000000..1f99fb4 --- /dev/null +++ b/day-25/task.md @@ -0,0 +1,25 @@ +# Tasks + +Please complete the following tasks and post them on the tapaScript Discord under "40 Days of JavaScript". + +> **DO NOT USE AI to FIND ANSWERS**. If you are stuck, let's discuss it on DISCORD and learn. Also, please note that none of the answers need you to create any UI. Just focus on the logic building and print the output on the browser console. + +## 1. Use `fetch()` to retrieve a list of users from `https://jsonplaceholder.typicode.com/users` and log the names to the console + +## 2. Fetch all posts by userId=1 from `https://jsonplaceholder.typicode.com/posts?userId=1` and display the titles in the DOM + +## 3. Send a `POST` request to `https://jsonplaceholder.typicode.com/posts` with a new post (title, body, userId). Show the response in console + +## 4. Update the post with `ID = 1` by sending a `PUT` request with a new title and body. Use the same endpoint + +## 5. Send a `PATCH` request to update just the title of post `ID = 1` + +## 6. Send a `DELETE` request to remove post with `ID = 1`. Log the status of the response + +## 7. Send a POST request to `https://jsonplaceholder.typicode.com/posts` with `Content-Type: application/json` in headers. Log the response + +## 8. Create a custom function `request(url, options)` that wraps fetch. Use it to `GET` users and `POST` a new post + +## 9. Make a fetch call to a broken URL and use `.catch()` or `try...catch` to show a user-friendly error message + +## 10. Use `AbortController` to cancel a long-running fetch request (you can delay the response using a mock server or setTimeout) diff --git a/day-26/README.md b/day-26/README.md new file mode 100644 index 0000000..36f99ea --- /dev/null +++ b/day-26/README.md @@ -0,0 +1,31 @@ +# Day 26 - 40 Days of JavaScript - Common Mistakes + +## **🎯 Goal of This Lesson** + +- ✅ Introduction +- ✅ Promises and Loop +- ✅ Chain or No-Chain +- ✅ Not Handling Errors +- ✅ Missing Callback +- ✅ Synchronous Operation +- ✅ Unnecessary try/catch +- ✅ Quick Recap + +## 🫶 Support + +Your support means a lot. + +- Please SUBSCRIBE to [tapaScript YouTube Channel](https://youtube.com/tapasadhikary) if not done already. A Big Thank You! +- Liked my work? It takes months of hard work to create quality content and present it to you. You can show your support to me with a STAR(⭐) to this repository. + + > Many Thanks to all the `Stargazers` who have supported this project with stars(⭐) + +### 🤝 Sponsor My Work + +I am an independent educator and open-source enthusiast who creates meaningful projects to teach programming on my YouTube Channel. **You can support my work by [Sponsoring me on GitHub](https://github.com/sponsors/atapas) or [Buy Me a Cofee](https://buymeacoffee.com/tapasadhikary)**. + +## Video + +Here is the video for you to go through and learn: + +[](https://youtu.be/c_zcXUz1neo "Video") diff --git a/day-26/banner.png b/day-26/banner.png new file mode 100644 index 0000000..f3ed4e3 Binary files /dev/null and b/day-26/banner.png differ diff --git a/day-26/index.html b/day-26/index.html new file mode 100644 index 0000000..423f1cf --- /dev/null +++ b/day-26/index.html @@ -0,0 +1,12 @@ + + + + + +Cancel fetch demo
+ + +Common Promise Mistakes + + + +40 Days of JavaScript - Common Promise Mistakes
+ + \ No newline at end of file diff --git a/day-26/index.js b/day-26/index.js new file mode 100644 index 0000000..a1c443c --- /dev/null +++ b/day-26/index.js @@ -0,0 +1,201 @@ +// Mistake 1 - Looping with Promises + +const ids = ["1", "2", "3", "4"]; + +const fetchData = (id) => { + return fetch(`https://jsonplaceholder.typicode.com/users/${id}`); +}; + +const loopFetches = () => { + for (let i = 0; i < ids.length; i++) { + console.log(`*** Fetching details of ${ids[i]} ***`); + const response = fetchData(ids[i]); + response.then((response) => { + response.json().then((data) => { + console.log( + ` + Name: ${data?.name} + Company:${data?.company?.name} + Address: ${data?.address?.city} + ` + ); + }); + }); + } +}; + +// loopFetches(); + +const loopFetchesAsync = async () => { + for (let i = 0; i < ids.length; i++) { + console.log(`=== Fetching details of ${ids[i]} ===`); + const response = await fetchData(ids[i]); + const data = await response.json(); + console.log( + ` + Name: ${data?.name} + Company:${data?.company?.name} + Address: ${data?.address?.city} + ` + ); + } +}; + +// loopFetchesAsync(); + +const loopAll = async () => { + const responses = await Promise.allSettled(ids.map((id) => fetchData(id))); + const data = await Promise.allSettled( + responses.map((response) => response.value.json()) + ); + console.log(data); + data.map((userInfo) => { + const user = userInfo.value; + console.log(`*** Fetching details of ${user?.name} ***`); + console.log( + ` + Name: ${user?.name} + Company:${user?.company?.name} + Address: ${user?.address?.city} + ` + ); + }); +}; + +loopAll(); + +// Mistake 2 - Promise Chain vs. No Chain + +// Chain +const ten = new Promise((resolve, reject) => { + resolve(10); +}); + +ten.then((result) => { + // returns 20 + return result + 10; +}) + .then((result) => { + // returns 200 + return result * 10; + }) + .then((result) => { + // returns 190 + return result - 10; + }) + .then((result) => { + // logs 190 in console + console.log(result); + }); + +// No Chain +ten.then((result) => { + // returns 20 + return result + 10; +}); +ten.then((result) => { + // returns 100 + return result * 10; +}); +ten.then((result) => { + // returns 0 + return result - 10; +}); +ten.then((result) => { + // logs 10 in the console. + console.log(result); +}); + +// Mistake 3 - (Not)Handling Errors with Promises + +const oddEven = (num) => { + return new Promise((resolve, reject) => { + if (num % 2 === 0) { + resolve("Even"); + } else { + reject(new Error("Odd")); + } + }); +}; + +oddEven(10).then((result) => { + console.log(result); +}); + +oddEven(11) + .then((result) => { + console.log(result); + }) + .catch((err) => { + console.error(err.message); + }); + +// Mistake 4 - Missing a function in .then() handler + +const hello = Promise.resolve("Hello"); +hello.then("World").then((result) => console.log(result)); +hello.then(() => "World").then((result) => console.log(result)); + +// Mistake 5 - Using Promises for Synchronous Operations +const cache = { + "tapas@email.com": { + name: "Tapas Adhikary", + org: "tapaScript", + }, +}; + +const getDataV1 = (email) => { + return new Promise((resolve, reject) => { + setTimeout(() => { + const userFromCache = cache[email]; + if (!userFromCache) { + // Make the call to fetch user data + // update cache + console.log("Make the call and update cache"); + } else { + console.log(`User details ${JSON.stringify(userFromCache)}`); + } + }, 2000); + }); +}; + +getDataV1("tapas@email.com"); + +const getDataV2 = (email) => { + const userFromCache = cache[email]; + if (userFromCache) { + console.log(`User details ${JSON.stringify(userFromCache)}`); + } else { + return new Promise((resolve, reject) => { + setTimeout(() => { + console.log("Make the call and update cache"); + }, 2000); + }); + } +}; + +getDataV2("tapas@email.com"); + +// Mistake 6 - Using unnecessary try-catch with promises + +// Redundant try-catch +new Promise((resolve, reject) => { + try { + const value = getValue(); + // do something with value + resolve(value); + } catch (e) { + reject(e); + } +}) + .then((result) => console.log(result)) + .catch((error) => console.log(error)); + +// Better Way +new Promise((resolve, reject) => { + const value = getValue(); + // do something with value + resolve(value); +}) + .then((result) => console.log(result)) + .catch((error) => console.log(error)); diff --git a/day-27/README.md b/day-27/README.md new file mode 100644 index 0000000..7f5f478 --- /dev/null +++ b/day-27/README.md @@ -0,0 +1,30 @@ +# Day 27 - 40 Days of JavaScript - Event Loop + +## **🎯 Goal of This Lesson** + +- ✅ The Chef’s Story +- ✅ Functions and Call Stack +- ✅ Async Code +- ✅ Event Loop +- ✅ Callback Queue +- ✅ Job Queue +- ✅ Tasks and What’s Next? + +## 🫶 Support + +Your support means a lot. + +- Please SUBSCRIBE to [tapaScript YouTube Channel](https://youtube.com/tapasadhikary) if not done already. A Big Thank You! +- Liked my work? It takes months of hard work to create quality content and present it to you. You can show your support to me with a STAR(⭐) to this repository. + + > Many Thanks to all the `Stargazers` who have supported this project with stars(⭐) + +### 🤝 Sponsor My Work + +I am an independent educator and open-source enthusiast who creates meaningful projects to teach programming on my YouTube Channel. **You can support my work by [Sponsoring me on GitHub](https://github.com/sponsors/atapas) or [Buy Me a Cofee](https://buymeacoffee.com/tapasadhikary)**. + +## Video + +Here is the video for you to go through and learn: + +[](https://youtu.be/4IYcwOfW3BM "Video") diff --git a/day-27/banner.png b/day-27/banner.png new file mode 100644 index 0000000..4f711bf Binary files /dev/null and b/day-27/banner.png differ diff --git a/day-27/index.html b/day-27/index.html new file mode 100644 index 0000000..de60b19 --- /dev/null +++ b/day-27/index.html @@ -0,0 +1,12 @@ + + + + + +Event Loop + + + +40 Days of JavaScript - Event Loop
+ + \ No newline at end of file diff --git a/day-27/index.js b/day-27/index.js new file mode 100644 index 0000000..2824ecd --- /dev/null +++ b/day-27/index.js @@ -0,0 +1,32 @@ +// JavaScript is Synchronous +// There can be async behaviours +// - With Browser APIs/Web APIs - setTimeout, setInterval +// - With Promises +// - With Event Handlers + +// Event Loop +// - Call Stack +// - Web APIs +// - Callback Queue: +// - MicroTask Queue/Job Queue: +// - Event Loop: + +function f1() { + console.log("f1"); +} + +function f2() { + console.log("f2"); +} + +function main() { + console.log("main"); + setTimeout(f1, 0); + new Promise((resolve, reject) => { + resolve("I am a promise!"); + }).then((resolve) => console.log(resolve)); + f2(); +} +main(); + + diff --git a/day-27/task.md b/day-27/task.md new file mode 100644 index 0000000..a35c4fc --- /dev/null +++ b/day-27/task.md @@ -0,0 +1,224 @@ +# Tasks + +Please complete the following tasks and post them on the tapaScript Discord under "40 Days of JavaScript". + +> **DO NOT USE AI to FIND ANSWERS**. If you are stuck, let's discuss it on DISCORD and learn. Also, please note that none of the answers need you to create any UI. Just focus on the logic building and print the output on the browser console. + +## 1. What's the output of the code below? + +```js +function f1() { + console.log('f1'); +} + +function f2() { + console.log('f2'); +} + +function f3() { + console.log('f3'); +} + +function f4() { + console.log('f4'); +} + +console.log("Let's do it!"); + +setTimeout(function() {f1();}, 0); + +f4(); + +setTimeout(function() {f2();}, 5000); + +setTimeout(function() {f3();}, 3000); +``` + +Options are, + +- Let's do it!, f4, f1, f3, f2 +- Let's do it!, f1, f3, f2, f4 +- Let's do it!, f1, f2, f3, f4 +- Let's do it!, f1, f4, f2, f3 + +## Example Answer: Let's do it!, f4, f1, f3, f2 + +Explanation: + +- "Let's do it!" is executed by Execution Stack +- f1() calls browser API, so gets added to Callback Queue +- f4() gets added to Execution Stack and is executed +- Event loop finds a callback function f1() in callback queue & executes it +- f2() calls browser API and gets added to Callback Queue. Similarly f3() is added to callback queue +- Now there is nothing in Execution Stack, so event loop checks & finds f2() & - f3() callback functions in callback queue +- f3() goes back into the stack after timeout, and gets executed +- f2() too goes back into the stack after timeout, and gets executed + +## 2. What's the output of the code below? + +```js +function f1() { + console.log('f1'); +} + +console.log("Let's do it!"); + +setTimeout(function() {console.log('in settimeout');}, 0); + +f1(); +f1(); +f1(); +f1(); +``` + +Options are, + +- Let's do it!, in settimeout, f1, f1, f1, f1 +- Let's do it!, f1, f1, f1, f1, in settimeout +- Let's do it!, f1, , in settimeout, f1, f1, f1 + +## 3. Which statements are `true`? Select multiple + +- [ ] JavaScript is single-threaded +- [ ] By default, JavaScript is synchronous +- [ ] Only promises make JavaScript asynchronous +- [ ] All function callbacks are asynchronous + +## 4. Which statement is `true`? Select Only one + +- (_) JavaScript Function Execution Stack(Call Stack) never gets empty. +- (_) The job queue gets higher priority than the callback queue. +- (_) The only job of Event Loop is to manage the Call Stack +- (_) The StackOverflow exception is random. + +### 5. Guess the output + +```js +const tom = () => console.log('Tom'); + +const jerry = () => console.log('Jerry'); + +const cartoon = () => { + console.log('Cartoon'); + + setTimeout(tom, 5000); + + new Promise((resolve, reject) => + resolve('should it be right after Tom, before Jerry?') + ).then(resolve => console.log(resolve)) + + jerry(); +} + +cartoon(); +``` + +Options are, + +- Cartoon, Jerry, should it be right after Tom, before Jerry?, tom +- Cartoon, Tom, Jerry, should it be right after Tom, before Jerry?, +- Cartoon, Tom, should it be right after Tom, before Jerry?, Jerry +- Error + +### 6. Guess the output + +```js +const tom = () => console.log('Tom'); +const jerry = () => console.log('Jerry'); +const doggy = () => console.log('Doggy'); + +const cartoon = () => { + console.log('Cartoon'); + + setTimeout(tom, 50); + setTimeout(doggy, 30); + + new Promise((resolve, reject) => + resolve('I am a Promise, right after tom and doggy! Really?') + ).then(resolve => console.log(resolve)); + new Promise((resolve, reject) => + resolve('I am a Promise after Promise!') + ).then(resolve => console.log(resolve)); + + jerry(); +} + +cartoon(); +``` + +Options are, + +- Cartoon, Jerry, I am a Promise, right after tom and doggy! Really?, I am a Promise after Promise!, , Tom, Doggy +- Cartoon, Jerry, I am a Promise after Promise!, I am a Promise, right after tom and doggy! Really?, Doggy, Tom +- Cartoon, Jerry, I am a Promise, right after tom and doggy! Really?, I am a Promise after Promise!, Doggy, Tom +- Cartoon, Tom, Doggy, I am a Promise, right after tom and doggy! Really?, I am a Promise after Promise!, Jerry +- None of the above. + +### 7. Guess the output + +```js +const f1 = () => console.log('f1'); +const f2 = () => console.log('f2'); +const f3 = () => console.log('f3'); +const f4 = () => console.log('f4'); + +f4(); + +setTimeout(f1, 0); + +new Promise((resolve, reject) => { + resolve('Boom'); +}).then(result => console.log(result)); + +setTimeout(f2, 2000); + +new Promise((resolve, reject) => { + resolve('Sonic'); +}).then(result => console.log(result)); + +setTimeout(f3, 0); + +new Promise((resolve, reject) => { + resolve('Albert'); +}).then(result => console.log(result)); +``` + +Options are, + +- f4, Boom, Sonic, Albert, f1, f3, f2 +- f4, f1, Boom, f2, Sonic, f3, Albert +- f4, Boom, Sonic, Albert, f3, f1, f2 +- f4, Boom, Sonic, Albert, f1, f2, f3 + +### 8. Guess the output + +```js +const f1 = () => { + console.log('f1'); + f2(); +} +const f2 = () => console.log('f2'); +const f3 = () => console.log('f3'); +const f4 = () => console.log('f4'); + +f4(); + +setTimeout(f1, 0); + +new Promise((resolve, reject) => { + resolve('Sonic'); +}).then(result => console.log(result)); + +setTimeout(f3, 0); + +new Promise((resolve, reject) => { + resolve('Albert'); +}).then(result => console.log(result)); +``` + +Options are, + +- f4, f1, f2, Sonic, f3, Albert +- f4, Sonic, Albert, f3, f1, f2 +- f4, Sonic, Albert, f1, f2, f3 +- f4, Albert, Sonic, f1, f2, f3 diff --git a/day-28/README.md b/day-28/README.md new file mode 100644 index 0000000..aa3e52d --- /dev/null +++ b/day-28/README.md @@ -0,0 +1,33 @@ +# Day 28 - Building a Country Explorer App + +## **🎯 Goal of This Lesson** + +- ✅ Before We Start +- ✅ REST Country APIs +- ✅ What Are We Building? +- ✅ The Project Setup +- ✅ The HTML Structure +- ✅ Fetching Countries +- ✅ Showing Details +- ✅ The Map +- ✅ The Time & TimeZone +- ✅ What’s Next? + +## 🫶 Support + +Your support means a lot. + +- Please SUBSCRIBE to [tapaScript YouTube Channel](https://youtube.com/tapasadhikary) if not done already. A Big Thank You! +- Liked my work? It takes months of hard work to create quality content and present it to you. You can show your support to me with a STAR(⭐) to this repository. + + > Many Thanks to all the `Stargazers` who have supported this project with stars(⭐) + +### 🤝 Sponsor My Work + +I am an independent educator and open-source enthusiast who creates meaningful projects to teach programming on my YouTube Channel. **You can support my work by [Sponsoring me on GitHub](https://github.com/sponsors/atapas) or [Buy Me a Cofee](https://buymeacoffee.com/tapasadhikary)**. + +## Video + +Here is the video for you to go through and learn: + +[](https://www.youtube.com/watch?v=jXS0VURNqxA "Video") diff --git a/day-28/banner.png b/day-28/banner.png new file mode 100644 index 0000000..c44e0bd Binary files /dev/null and b/day-28/banner.png differ diff --git a/day-28/country-explorer/.gitignore b/day-28/country-explorer/.gitignore new file mode 100644 index 0000000..4d01621 --- /dev/null +++ b/day-28/country-explorer/.gitignore @@ -0,0 +1,5 @@ +/node_modules +.git +package-lock.json +yarn.lock +dist \ No newline at end of file diff --git a/day-28/country-explorer/LICENSE b/day-28/country-explorer/LICENSE new file mode 100644 index 0000000..30565f8 --- /dev/null +++ b/day-28/country-explorer/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2025 tapaScript + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/day-28/country-explorer/README.md b/day-28/country-explorer/README.md new file mode 100644 index 0000000..35e47f7 --- /dev/null +++ b/day-28/country-explorer/README.md @@ -0,0 +1,9 @@ +# Country Explorer + +To Start the project, + +```bash +npm install + +npm run start +``` diff --git a/day-28/country-explorer/index.html b/day-28/country-explorer/index.html new file mode 100644 index 0000000..bee1898 --- /dev/null +++ b/day-28/country-explorer/index.html @@ -0,0 +1,37 @@ + + + + + + +Country Explorer + + + + + + + + +++ + + + + \ No newline at end of file diff --git a/day-28/country-explorer/package.json b/day-28/country-explorer/package.json new file mode 100644 index 0000000..b277979 --- /dev/null +++ b/day-28/country-explorer/package.json @@ -0,0 +1,24 @@ +{ + "name": "js-base-setup", + "version": "1.0.0", + "description": "javascript setup with tailwindcss and vite", + "main": "main.js", + "scripts": { + "start": "vite", + "build": "vite build", + "preview": "vite preview" + }, + "keywords": [ + "javascript", + "base" + ], + "author": "tapaScript | learn@tapascript.io", + "license": "MIT", + "type": "module", + "dependencies": { + "@tailwindcss/cli": "^4.1.2", + "@tailwindcss/vite": "^4.1.7", + "tailwindcss": "^4.1.7", + "vite": "^6.3.5" + } +} diff --git a/day-28/country-explorer/src/index.css b/day-28/country-explorer/src/index.css new file mode 100644 index 0000000..f1d8c73 --- /dev/null +++ b/day-28/country-explorer/src/index.css @@ -0,0 +1 @@ +@import "tailwindcss"; diff --git a/day-28/country-explorer/src/main.js b/day-28/country-explorer/src/main.js new file mode 100644 index 0000000..746510c --- /dev/null +++ b/day-28/country-explorer/src/main.js @@ -0,0 +1,123 @@ +console.log("Country Explorer"); + +const searchBtn = document.getElementById("searchBtn"); +const searchInput = document.getElementById("searchInput"); +const loader = document.getElementById("loader"); +const error = document.getElementById("error"); +const countryDetails = document.getElementById("countryDetails"); + +let map; + +searchBtn.addEventListener("click", async () => { + const country = searchInput.value.trim(); + + if (!country) return; + + await fetchCountry(country); +}); + +async function fetchCountry(name) { + loader.classList.remove("hidden"); + error.classList.add("hidden"); + + countryDetails.innerHTML = ""; + + try { + const response = await fetch( + `https://restcountries.com/v3.1/name/${name}?fullText=true` + ); + const data = await response.json(); + + const country = data[0]; + + if (!country) { + throw new Error(`Invalid Country Name`); + } + const languages = country.languages + ? Object.values(country.languages).join(",") + : "N/A"; + + countryDetails.innerHTML = ` +++ +Country Explorer
++ + ++ +Loading...+ + + + + +++ `; + + updateTimezones(country.timezones); + drawMap(country.latlng, country.name.common); + } catch (err) { + error.classList.remove("hidden"); + error.textContent = + err.message || "Failed to load the country information"; + console.error(err); + } finally { + loader.classList.add("hidden"); + } +} + +function updateTimezones(timezones) { + const timezoneList = document.getElementById("timezoneList"); + timezoneList.innerHTML = ""; + + timezones.forEach((tz) => { + const li = document.createElement("li"); + const localTime = getTimeUsingIntl(tz); + + li.textContent = `${tz} - ${localTime}`; + timezoneList.appendChild(li); + }); +} + +function getTimeUsingIntl(tz) { + try { + const options = { + timeZone: convertToIANA(tz), + hour: "2-digit", + minute: "2-digit", + hour12: true, + }; + return Intl.DateTimeFormat("en-US", options).format(new Date()); + } catch (err) { + console.warn(`Timezone ${tz} not supported, falling back.`); + return "Unsupported timezone"; + } +} + +function convertToIANA(utcString) { + // Basic support for known UTC formats + if (utcString === "UTC") return "Etc/UTC"; + + const match = utcString.match(/^UTC([+-]\d{2}):(\d{2})$/); + if (match) { + const [, hour, min] = match; + // Convert UTC offset to Etc/GMT format (note: reverse sign for IANA) + const offset = parseInt(hour, 10); + const sign = offset < 0 ? "+" : "-"; + return `Etc/GMT${sign}${Math.abs(offset)}`; // IANA flips signs + } + + return "Etc/UTC"; // fallback +} + +function drawMap(latlang, name) { + const [lat, lng] = latlang; + + if (!map) { + map = L.map("map").setView([lat, lng], 5); + L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png").addTo( + map + ); + } else { + map.setView([lat, lng], 5); + } + + L.marker([lat, lng]).addTo(map).bindPopup(name).openPopup(); +} diff --git a/day-28/country-explorer/vite.config.js b/day-28/country-explorer/vite.config.js new file mode 100644 index 0000000..8089d1d --- /dev/null +++ b/day-28/country-explorer/vite.config.js @@ -0,0 +1,8 @@ +import { defineConfig } from "vite"; +import tailwindcss from "@tailwindcss/vite"; +export default defineConfig({ + plugins: [tailwindcss()], + server: { + port: 3001, + }, +}); diff --git a/day-29/README.md b/day-29/README.md new file mode 100644 index 0000000..e21188a --- /dev/null +++ b/day-29/README.md @@ -0,0 +1,40 @@ +# Day 29 - 40 Days of JavaScript - OOP Concepts + +## **🎯 Goal of This Lesson** + +- ✅ Welcome to Module 5 +- ✅ Things to Learn Today +- ✅ Objects +- ✅ Classes +- ✅ Functions +- ✅ Object Oriented Programming(OOP) +- ✅ Real-world Examples of OOP + - ✅ Abstraction + - ✅ Encapsulation + - ✅ Inheritance + - ✅ Polymorphism + - ✅ Composition +- ✅ Quick Recap + +## 🫶 Support + +Your support means a lot. + +- Please SUBSCRIBE to [tapaScript YouTube Channel](https://youtube.com/tapasadhikary) if not done already. A Big Thank You! +- Liked my work? It takes months of hard work to create quality content and present it to you. You can show your support to me with a STAR(⭐) to this repository. + + > Many Thanks to all the `Stargazers` who have supported this project with stars(⭐) + +### 🤝 Sponsor My Work + +I am an independent educator and open-source enthusiast who creates meaningful projects to teach programming on my YouTube Channel. **You can support my work by [Sponsoring me on GitHub](https://github.com/sponsors/atapas) or [Buy Me a Cofee](https://buymeacoffee.com/tapasadhikary)**. + +## Video + +Here is the video for you to go through and learn: + +[](https://www.youtube.com/watch?v=oRQOiyO-kHg "Video") + +## **👩💻 🧑💻 Assignment Tasks** + +Please find the task assignments in the [Task File](./task.md). diff --git a/day-29/banner.png b/day-29/banner.png new file mode 100644 index 0000000..f97402f Binary files /dev/null and b/day-29/banner.png differ diff --git a/day-29/index.html b/day-29/index.html new file mode 100644 index 0000000..30bcddc --- /dev/null +++ b/day-29/index.html @@ -0,0 +1,13 @@ + + + + + +
+ ${country.name.common}
+Capital: ${country.capital}
+Population: ${country.population.toLocaleString()}
+Languages: ${languages}
+++Local Times
+OOP - The Concept + + + +Welcome to 40 Days of JavaScript
+We are Learning the OOP Concepts today!
+ + \ No newline at end of file diff --git a/day-29/index.js b/day-29/index.js new file mode 100644 index 0000000..754c65a --- /dev/null +++ b/day-29/index.js @@ -0,0 +1,78 @@ + +// 1. What are Objects? +// 2. What are Classes? +// 3. What are Functions? +// 3. How Can you practically think of Classes and Objects? +// 4. What is OOP? +// 5. Why OOP is Important in programming? +// 6. Real-World Use Cases of OOP +// 7. Five key OOP principles: + // a. Abstraction + // b. Encapsulation + // c. Inheritance + // d. Polymorphism + // e. Composition + + /* +city + -> houses + -> roof + -> doors + -> windows + -> cars + -> model + -> brand + -> color + -> wheels + -> people + -> hospitals + -> roads + + */ + + // Game Development => Objects like Player, Enemy, Weapon help structure gameplay logic. + + // E-commerce Website => User, Product, Cart, Order objects each have roles. + + // Mobile Apps => Components like Screen, Button, Notification are objects. + + // Banking Software => Customer, Account, Transaction manage real-world banking processes. + + // Vehicle Management System => Vehicles are objects with types (Truck, Bike) that inherit from a base Vehicle + +// Abstraction + +// Abstraction is the process of hiding the internal complexities of how something works and only exposing what’s necessary for the user to interact with. + +// Encapsulation + +// Encapsulation is the bundling of data and methods that operate on that data into a single unit, usually a class — and restricting direct access to some of the object’s components. + +// Inheritance + +// Inheritance allows one class (child) to reuse the properties and methods of another class (parent), reducing duplication and promoting reusability. + +// Polymorphism + +// Polymorphism means “many forms” — it allows objects of different classes to be treated as if they are of the same type, but behave differently based on their class-specific implementations. + +// Composition + +// Composition is a design principle where one class contains or is composed of one or more objects of other classes to reuse their functionality, instead of inheriting from them. + +// has-a + + +// Abstraction ── Hide complexity, expose interface +// Encapsulation ── Bundle + protect state +// Inheritance ── Share logic across classes +// Polymorphism ── Same method, different behaviors +// Composition. ── Build by combining units + + +{ + "name": "tom", + "isCat": () => { + return true + } +} \ No newline at end of file diff --git a/day-29/task.md b/day-29/task.md new file mode 100644 index 0000000..dbe8435 --- /dev/null +++ b/day-29/task.md @@ -0,0 +1,55 @@ +# Tasks + +Please complete the following tasks and post them on the tapaScript Discord under "40 Days of JavaScript". + +> **DO NOT USE AI to FIND ANSWERS**. If you are stuck, let's discuss it on DISCORD and learn. Also, please note that none of the answers need you to create any UI. Just focus on the logic building and print the output on the browser console. + +## 1. Identify Real-Life Objects with OOP Concepts + +Pick any 3 real-life objects (e.g., smartphone, bicycle, school), and for each: + +- List at least 3 properties (attributes). +- List at least 3 behaviors (methods). +- Write which OOP principle each property or behavior best represents and why. + +## 2. Draw a Diagram of an OOP Modeled System + +Create a diagram (hand-drawn or digital) of a system like: + +- A library system (Books, Members, Staff, etc.) +- Or a fast-food restaurant system (Orders, Menus, Employee) +In the diagram Show classes/objects + +- Arrows to represent relationships like inheritance or composition +- Indicate which class encapsulates what data and methods + +## 3. Explain OOP Principles with Human Analogies + + Write your own analogy (non-code) to explain each of the 5 OOP principles: + +- Abstraction +- Encapsulation +- Inheritance +- Polymorphism +- Composition + +It must be unique (not from the class), and explain how that analogy relates to programming. + +## 4. Compare OOP vs Functional Thinking + +Choose a simple system (e.g., a To-Do app or Alarm Clock) and: + +- Describe how you’d design it using OOP (with objects) +- Describe how you’d design it using Functional Programming (with functions) + +You don’t have to write code — just use words and bullets. + +## 5. Object vs Class vs Function – Explain Like a Teacher + +Imagine you’re teaching a 10-year-old: + +- What is a Class? +- What is an Object? +- What is a Function? + +Use simple language, drawings, or emojis if needed. diff --git a/day-30/README.md b/day-30/README.md new file mode 100644 index 0000000..3cd919c --- /dev/null +++ b/day-30/README.md @@ -0,0 +1,44 @@ +# Day 30 - 40 Days of JavaScript - Classes and OOP + +## **🎯 Goal of This Lesson** + +- ✅ Intro +- ✅ What Will We Learn? +- ✅ What is a Class? +- ✅ ES6 Classes - Syntax +- ✅ Initialize Objects 09:40 - “this” in Classes +- ✅ The Type of Class +- ✅ Class as Expression 19:08 - Class Fields +- ✅ Getters and Setters +- ✅ Static Properties +- ✅ Private and Public Fields +- ✅ Extending Class +- ✅ Abstraction +- ✅ Encapsulation +- ✅ Inheritance +- ✅ Polymorphism +- ✅ Composition +- ✅ What’s Next? + +## 🫶 Support + +Your support means a lot. + +- Please SUBSCRIBE to [tapaScript YouTube Channel](https://youtube.com/tapasadhikary) if not done already. A Big Thank You! +- Liked my work? It takes months of hard work to create quality content and present it to you. You can show your support to me with a STAR(⭐) to this repository. + + > Many Thanks to all the `Stargazers` who have supported this project with stars(⭐) + +### 🤝 Sponsor My Work + +I am an independent educator and open-source enthusiast who creates meaningful projects to teach programming on my YouTube Channel. **You can support my work by [Sponsoring me on GitHub](https://github.com/sponsors/atapas) or [Buy Me a Cofee](https://buymeacoffee.com/tapasadhikary)**. + +## Video + +Here is the video for you to go through and learn: + +[](https://youtu.be/kG5t34ciG9w "Video") + +## **👩💻 🧑💻 Assignment Tasks** + +Please find the task assignments in the [Task File](./task.md). diff --git a/day-30/banner.png b/day-30/banner.png new file mode 100644 index 0000000..b7ee37d Binary files /dev/null and b/day-30/banner.png differ diff --git a/day-30/index.html b/day-30/index.html new file mode 100644 index 0000000..54a9751 --- /dev/null +++ b/day-30/index.html @@ -0,0 +1,13 @@ + + + + + +ES6 Classes + + + +Day 30/40 Days of JavaScript
+Today we are learning about JavaScript Classes
+ + \ No newline at end of file diff --git a/day-30/index.js b/day-30/index.js new file mode 100644 index 0000000..395b1c5 --- /dev/null +++ b/day-30/index.js @@ -0,0 +1,327 @@ + +// What Will We Learn Today? + +// 1. What is a Class +// 2. Syntax +// 3. Initialize the Object +// 4. Class as Expression +// 5. Class Fields +// 6. Getters and Setters +// 7. Static Properties +// 8. Private and Public +// 9. Extending +// 10. OOP with Classes + + + +// 2. Syntax +class AClass { + constructor() {} + method1() {} + method2() {} + method3() {} + method4() {} +} + +const a = new AClass(); // Here we are calling the constructor with the new keyword to create the object instance of the class. + +console.log(a); + +// 3. Initialize the Object + +class Car { + constructor(model) { + this.model = model; + } + + printModel() { + console.log(this.model); + } +} + +const bmwCar = new Car("BMW"); +bmwCar.printModel(); + +console.log(typeof Car); // function +console.log(Car.prototype); +console.log(Car) +console.log(Car.prototype.constructor); +console.log(Car === Car.prototype.constructor); // true + +// 4. Class as Expression + +const Employee = class { + welcome() { + console.log("Hello Employee"); + } +} + +const emp = new Employee(); +emp.welcome(); + +// Named Class +const Dept = class Department { + welcome() { + console.log("Welcome to Department"); + console.debug(Department) + } +} + +const d = new Dept(); +d.welcome(); + +// 5. Class Fields + +class Phone { + brand = "Apple"; + + make() { + console.log(this.brand) + } +}; + +const phone = new Phone(); +console.log(phone.make()); // Apple +console.log(phone); +console.log(Phone.prototype.make()); // undefined + +// 6. Getters and Setters + +class Animal { + + constructor(name) { + this.name = name; + } + + get name() { + return this._name; + } + + set name(value) { + if (!value) { + console.warn("Need a name"); + return; + } + this._name = value; + } +} + +const animal = new Animal("Tiger"); +console.log(animal.name); +console.log(animal) +console.log(Animal.prototype) +animal.name = ""; + +// 7. Static Properties + +class MyClass { + static staticMethod() { + console.log(this); + } +} + +MyClass.staticMethod(); + +class User { + constructor(name, email) { + this.name = name; + this.email = email; + } + + greet() { + console.log(`Hi, I’m ${this.name}`); + } + + // Static utility method + static isValidEmail(email) { + // Very basic check + return email.includes("@") && email.includes("."); + } + + // Static factory method to create guest user + static createGuest() { + return new User("Guest", "guest@example.com"); + } +} + +// Using static method without creating any user +console.log(User.isValidEmail("john@example.com")); // true +console.log(User.isValidEmail("johnexample.com")); // false + +// Creating a guest user using static method +const guestUser = User.createGuest(); +guestUser.greet(); // Hi, I’m Guest + +// Creating a real user +const user1 = new User("John", "john@example.com"); +user1.greet(); // Hi, I’m John + +// 8. Private and Public + +// Public: These fields and methods are accessible from anywhere +// Private: These fields and methods are accessible only from the inside of the class. + +class WashingMachine { + // Public field + brand; + + // Private fields + #powerStatus = false; + #currentCycle = null; + + // Simulated Protected field (naming convention) + _log = []; + + constructor(brand) { + this.brand = brand; + } + + // Public method + start(cycle) { + if (!this.#powerStatus) { + this.#turnOn(); + } + this.#currentCycle = cycle; + console.log(`Starting ${cycle} cycle...`); + this.#spin(); + this.#drain(); + this._log.push(`Cycle ${cycle} completed.`); + this.stop(); + } + + // Public method + stop() { + console.log("Washing machine stopped."); + this.#turnOff(); + } + + // Private method + #turnOn() { + this.#powerStatus = true; + console.log("Power ON"); + } + + // Private method + #turnOff() { + this.#powerStatus = false; + console.log("Power OFF"); + } + + // Private method + #spin() { + console.log("Spinning..."); + } + + // Private method + #drain() { + console.log("Draining..."); + } + + // Simulated protected method + _showLog() { + console.log("Internal Logs:", this._log); + } +} + +const lgWasher = new WashingMachine("LG"); + +lgWasher.start("Quick Wash"); +// Output: +// Power ON +// Starting Quick Wash cycle... +// Spinning... +// Draining... +// Washing machine stopped. +// Power OFF + +console.log(lgWasher.brand); // LG + +// Private access not allowed +// console.log(lgWasher.#powerStatus); // SyntaxError +// lgWasher.#turnOn(); // SyntaxError + +// Public methods +lgWasher.stop(); // Washing machine stopped. Power OFF + +// Accessing protected (not recommended but possible) +lgWasher._showLog(); // Internal Logs: [ 'Cycle Quick Wash completed.' ] + +// 9. Extending + +class Human { + species = "Homo Sapiens"; // Public field + + constructor(name, age) { + this.name = name; + this.age = age; + } + + introduce() { + console.log(`Hi, I'm ${this.name}, and I'm ${this.age} years old.`); + } + + sleep() { + console.log(`${this.name} is sleeping.`); + } +} + +// Subclass: Student + +class Student extends Human { + // Overriding a class field + species = "Homo Sapiens (Student)"; + + constructor(name, age, grade) { + super(name, age); // Calls the constructor of the Human class + this.grade = grade; + } + + // Method overriding + introduce() { + console.log( + `Hey! I'm ${this.name}, ${this.age} years old and I study in grade ${this.grade}.` + ); + } + + study() { + console.log(`${this.name} is studying...`); + } +} + +// Subclass: Teacher + +class Teacher extends Human { + constructor(name, age, subject) { + super(name, age); // Inherit name and age from Human + this.subject = subject; + } + + // Overriding the introduce method + introduce() { + console.log(`Hello, I’m ${this.name}, a ${this.subject} teacher.`); + } + + teach() { + console.log(`${this.name} is teaching ${this.subject}.`); + } +} + +// Usage + +const alice = new Student("Alice", 14, 9); +const bob = new Teacher("Bob", 35, "Mathematics"); + +alice.introduce(); // Overridden method in Student +// "Hey! I'm Alice, 14 years old and I study in grade 9." + +bob.introduce(); // Overridden method in Teacher +// "Hello, I’m Bob, a Mathematics teacher." + +alice.sleep(); // Inherited from Human +// "Alice is sleeping." + +bob.sleep(); // Inherited from Human +// "Bob is sleeping." + +console.log(alice.species); // "Homo Sapiens (Student)" +console.log(bob.species); // "Homo Sapiens" (inherited from Human) \ No newline at end of file diff --git a/day-30/oop/abstraction.js b/day-30/oop/abstraction.js new file mode 100644 index 0000000..3b64b53 --- /dev/null +++ b/day-30/oop/abstraction.js @@ -0,0 +1,22 @@ +// Abstraction + +// Definition: Hiding internal details and showing only essential features. +// In Code: Provide public methods like startEngine() while hiding what happens inside. + +class Car { + startEngine() { + this.#injectFuel(); + this.#ignite(); + console.log("Engine started"); + } + + #injectFuel() { + console.log("Fuel injected"); + } + + #ignite() { + console.log("Spark generated"); + } +} + +// Only startEngine() is visible to users; internal complexity is abstracted. \ No newline at end of file diff --git a/day-30/oop/composition.js b/day-30/oop/composition.js new file mode 100644 index 0000000..4a70ab6 --- /dev/null +++ b/day-30/oop/composition.js @@ -0,0 +1,22 @@ +// Composition + +// Definition: Use of other classes to build functionality. + +class Engine { + start() { + console.log("Engine started"); + } +} + +class Car { + constructor() { + this.engine = new Engine(); + } + + startCar() { + this.engine.start(); + } +} + +const car = new Car(); +car.startCar(); \ No newline at end of file diff --git a/day-30/oop/encapsulation.js b/day-30/oop/encapsulation.js new file mode 100644 index 0000000..619e85c --- /dev/null +++ b/day-30/oop/encapsulation.js @@ -0,0 +1,20 @@ +// Encapsulation + +// Definition: Group related properties and methods, and restrict direct access to internal data. +// In Code: Use # for private fields. + +class Car { + #speed = 0; + + accelerate() { + this.#speed += 10; + } + + getSpeed() { + return this.#speed; + } +} + +const car = new Car(); +car.accelerate(); +console.log(car.getSpeed()); // 10 \ No newline at end of file diff --git a/day-30/oop/inheritance.js b/day-30/oop/inheritance.js new file mode 100644 index 0000000..355d1ea --- /dev/null +++ b/day-30/oop/inheritance.js @@ -0,0 +1,28 @@ +// Inheritance + +// Definition: Child classes inherit behavior from a parent class. + +class Car { + constructor(make, model) { + this.make = make; + this.model = model; + } + drive() { + console.log("Driving on fuel"); + } +} + +class ElectricCar extends Car { + constructor(make, model, batteryLevel) { + super(make, model); + this.batteryLevel = batteryLevel; + } + + charge() { + console.log("Charging battery..."); + } +} + +const tesla = new ElectricCar("Tesla", "Model S", 90); +tesla.drive(); // Inherited from Car +tesla.charge(); // Own method diff --git a/day-30/oop/polymorphism.js b/day-30/oop/polymorphism.js new file mode 100644 index 0000000..2090a22 --- /dev/null +++ b/day-30/oop/polymorphism.js @@ -0,0 +1,19 @@ +// Polymorphism + +// Definition: Methods behave differently based on object type. +// In Code: Override a method in child class. + +class Car { + drive() { + console.log("Driving on fuel"); + } +} + +class ElectricCar extends Car { + drive() { + console.log("Driving on electricity"); + } +} + +const myCars = [new Car(), new ElectricCar()]; +myCars.forEach(car => car.drive()); \ No newline at end of file diff --git a/day-30/task.md b/day-30/task.md new file mode 100644 index 0000000..18a8930 --- /dev/null +++ b/day-30/task.md @@ -0,0 +1,61 @@ +# Tasks + +Please complete the following tasks and post them on the tapaScript Discord under "40 Days of JavaScript". + +> **DO NOT USE AI to FIND ANSWERS**. If you are stuck, let's discuss it on DISCORD and learn. Also, please note that none of the answers need you to create any UI. Just focus on the logic building and print the output on the browser console. + +## 1. Create a Book Class + +- Create a Book class with properties: title, author, pages. +- Add a method describe() that logs: + "Title: [title], Author: [author], Pages: [pages]" +- Create at least two book objects and call the describe() method. + +## 2. Use Getters and Setters with a Temperature Class + +- Create a Temperature class with a private field _celsius. +- Add a getter to return Fahrenheit value. +- Add a setter to set Celsius temperature. +- Test setting temperature and logging Fahrenheit. + +```js +this._celsius * 1.8 + 32; +``` + +## 3. Build a User Class with Public & Private Fields + +- Fields: name, `#password` +- Add a method checkPassword(pw) that checks if it matches #password. +- Show how private fields can’t be accessed directly outside the class. + +## 4. Inheritance — Vehicle and Car + +- Vehicle class has fields: make, model, and method start() +- Car extends Vehicle, adds fuelType +- Override the start() method in Car to print: "Starting [fuelType] car: [make] [model]" + +## 5. Use a Static Method + +- Create a class MathUtils with static methods: + add(a, b), subtract(a, b), randomInt(min, max) +- Call the methods without creating an object. + +## 6. Smart Light Bulb Class with Access Control + +- Create a SmartLightBulb class: + - Public method: turnOn(), turnOff() + - Private method: #connectToWiFi() + - turnOn() first calls #connectToWiFi() and then logs: "Light is ON" + - Static method: info() — logs "SmartLightBulb v1.0 supports remote control and scheduling." +- Try accessing the private method directly and observe the error. + +## 7. Animal Class and Subclasses + +- Base Class: Animal(name, sound) + - Method: makeSound() logs: "The [name] says [sound]" +- Subclass 1: Dog(name) — inherits from Animal + - Overrides makeSound() → "The Dog [name] barks!" +- Subclass 2: Cat(name) + — overrides makeSound() → "The Cat [name] meows!" +- Call super() inside each subclass constructor +- Add a shared method sleep() in Animal and test with both Dog and Cat instances. diff --git a/day-31/README.md b/day-31/README.md new file mode 100644 index 0000000..b8bde56 --- /dev/null +++ b/day-31/README.md @@ -0,0 +1,47 @@ +# Day 31 - 40 Days of JavaScript - Prototype & Prototype Chain + +## **🎯 Goal of This Lesson** + +- ✅ What Can You Expect +- ✅ JavaScript Object Literals Pattern +- ✅ Ways To Extract Values From Objects +- ✅ JavaScript Object and The const Keyword +- ✅ JavaScript Functions vs Methods +- ✅ The Constructor Function Pattern +- ✅ Composing Objects and References +- ✅ Object Prototypes +- ✅ Prototype Chain +- ✅ Constructor Function Visually +- ✅ The "prototype" Property +- ✅ The "prototype" Visually +- ✅ Prototype To Save Memory +- ✅ Prototype Chain(Lookup) Visually +- ✅ JavaScript Class Pattern +- ✅ JavaScript Class Inheritance +- ✅ The Object.create() Pattern +- ✅ How To Get Prototype Of An Object +- ✅ How To Set An Object Prototype +- ✅ The Closing Notes + +## 🫶 Support + +Your support means a lot. + +- Please SUBSCRIBE to [tapaScript YouTube Channel](https://youtube.com/tapasadhikary) if not done already. A Big Thank You! +- Liked my work? It takes months of hard work to create quality content and present it to you. You can show your support to me with a STAR(⭐) to this repository. + + > Many Thanks to all the `Stargazers` who have supported this project with stars(⭐) + +### 🤝 Sponsor My Work + +I am an independent educator and open-source enthusiast who creates meaningful projects to teach programming on my YouTube Channel. **You can support my work by [Sponsoring me on GitHub](https://github.com/sponsors/atapas) or [Buy Me a Cofee](https://buymeacoffee.com/tapasadhikary)**. + +## Video + +Here is the video for you to go through and learn: + +[](https://youtu.be/Uru85QW9zkk "Video") + +## **👩💻 🧑💻 Assignment Tasks** + +Please find the task assignments in the [Task File](./task.md). diff --git a/day-31/banner.png b/day-31/banner.png new file mode 100644 index 0000000..c3d7395 Binary files /dev/null and b/day-31/banner.png differ diff --git a/day-31/task.md b/day-31/task.md new file mode 100644 index 0000000..8ee87d7 --- /dev/null +++ b/day-31/task.md @@ -0,0 +1,41 @@ +# Tasks + +Please complete the following tasks and post them on the tapaScript Discord under "40 Days of JavaScript". + +> **DO NOT USE AI to FIND ANSWERS**. If you are stuck, let's discuss it on DISCORD and learn. Also, please note that none of the answers need you to create any UI. Just focus on the logic building and print the output on the browser console. + +## 1. Create a Simple Prototype Chain + +- Define a base object animal with a method eat. +- Create another object dog that inherits from animal using Object.create. +- Call eat from dog and explain how the prototype chain resolves it. + +## 2. Build a Custom Constructor Function + +- Create a constructor function Book(title, author). +- Add a method getDetails() to the prototype of Book. +- Instantiate two books and show they share the method from the prototype. + +## 3. Compare Object Creation Patterns + +Create three objects using: + +- Object literals +- Constructor functions +- Object.create + +Add similar methods and compare how inheritance works in each pattern. + +## 4. Simulate a Real-World Inheritance Chain + +- Simulate a real-life hierarchy: Person → Student → GraduateStudent. +- Each level should add its own methods or properties using prototypes. +- Show how a GraduateStudent can access methods from both Student and Person. + +## 5. Object.create vs Class vs Constructor Function + +- Implement the same User entity using: + - Constructor Function + - ES6 Class + - Object.create +- Write a summary comparing syntax, readability, and prototype behavior. diff --git a/day-32/README.md b/day-32/README.md new file mode 100644 index 0000000..7d71525 --- /dev/null +++ b/day-32/README.md @@ -0,0 +1,37 @@ +# Day 32 - 40 Days of JavaScript - Modules + +## **🎯 Goal of This Lesson** + +- ✅ What are Modules in JavaScript, and Why to Use? +- ✅ What are Exports and Imports in JavaScript Module? +- ✅ What are Exports and Imports in JavaScript Module? +- ✅ What are Default and Named Module Exports in JavaScript? +- ✅ What are Aliases in JavaScript Module Import? +- ✅ What are Namespaces in JavaScript Module? +- ✅ What is Combined Export in JavaScript Module? +- ✅ What is Dynamic Import in JavaScript Module? +- ✅ How to Handle Multiple Imports Using JavaScript Promise APIs? +- ✅ What is Tree Shaking & How Does It Help? + +## 🫶 Support + +Your support means a lot. + +- Please SUBSCRIBE to [tapaScript YouTube Channel](https://youtube.com/tapasadhikary) if not done already. A Big Thank You! +- Liked my work? It takes months of hard work to create quality content and present it to you. You can show your support to me with a STAR(⭐) to this repository. + + > Many Thanks to all the `Stargazers` who have supported this project with stars(⭐) + +### 🤝 Sponsor My Work + +I am an independent educator and open-source enthusiast who creates meaningful projects to teach programming on my YouTube Channel. **You can support my work by [Sponsoring me on GitHub](https://github.com/sponsors/atapas) or [Buy Me a Cofee](https://buymeacoffee.com/tapasadhikary)**. + +## Video + +Here is the video for you to go through and learn: + +[](https://youtu.be/l50gnBWHmdA "Video") + +## **👩💻 🧑💻 Assignment Tasks** + +Please find the task assignments in the [Task File](./task.md). diff --git a/day-32/banner.png b/day-32/banner.png new file mode 100644 index 0000000..5912ec1 Binary files /dev/null and b/day-32/banner.png differ diff --git a/day-32/task.md b/day-32/task.md new file mode 100644 index 0000000..cc28b3b --- /dev/null +++ b/day-32/task.md @@ -0,0 +1,40 @@ +# Tasks + +Please complete the following tasks and post them on the tapaScript Discord under "40 Days of JavaScript". + +> **DO NOT USE AI to FIND ANSWERS**. If you are stuck, let's discuss it on DISCORD and learn. Also, please note that none of the answers need you to create any UI. Just focus on the logic building and print the output on the browser console. + +## 1. Split a Utility Library + +Create a small utility library (e.g., math functions like add, subtract, multiply, divide) in separate module files and import them into a main index.js file to perform operations. + +## 2. Create a Feature-Based Module Structure + +Create a small blog app where: + +- post.js handles posts +- user.js handles user info +- main.js brings it together via import + +## 3. Use Named vs Default Exports + +Create modules with both named and default exports, and demonstrate: + +- How to import them correctly +- How to rename named exports during import + +## 4. Mock an API Module + +Create api.js that exports functions like fetchUsers, createUser, etc. + +- Simulate network delays using setTimeout +- Use these in a frontend to display mock data + +## 5. Quiz App Modularized + +Modularize a quiz app: + +- questions.js: array of questions +- quizLogic.js: handles quiz flow +- ui.js: handles DOM updates +- main.js: runs everything diff --git a/day-33/README.md b/day-33/README.md new file mode 100644 index 0000000..af1dc65 --- /dev/null +++ b/day-33/README.md @@ -0,0 +1,51 @@ +# Day 33 - 40 Days of JavaScript - Map, Set, WekaMap, WeakSet + +## **🎯 Goal of This Lesson** + +- ✅ Intro & Topics to Learn +- ✅ Objects and Arrays +- ✅ Object & Array Shortcomings +- ✅ Map +- ✅ Create & Initialize Map +- ✅ Adding Map Entries +- ✅ How to Get Map Value? +- ✅ Map Keys +- ✅ Map Properties & Methods +- ✅ MapIterators +- ✅ Convert Object to Map +- ✅ Convert Map to Object +- ✅ Convert Map to Array +- ✅ Map vs Object +- ✅ Set +- ✅ Create & Initialize Set +- ✅ Set Properties & Methods +- ✅ SetIterator +- ✅ Set and Array +- ✅ Set and Objects +- ✅ Set Theories +- ✅ WeakMap +- ✅ WeakSet +- ✅ Tasks + +## 🫶 Support + +Your support means a lot. + +- Please SUBSCRIBE to [tapaScript YouTube Channel](https://youtube.com/tapasadhikary) if not done already. A Big Thank You! +- Liked my work? It takes months of hard work to create quality content and present it to you. You can show your support to me with a STAR(⭐) to this repository. + + > Many Thanks to all the `Stargazers` who have supported this project with stars(⭐) + +### 🤝 Sponsor My Work + +I am an independent educator and open-source enthusiast who creates meaningful projects to teach programming on my YouTube Channel. **You can support my work by [Sponsoring me on GitHub](https://github.com/sponsors/atapas) or [Buy Me a Cofee](https://buymeacoffee.com/tapasadhikary)**. + +## Video + +Here is the video for you to go through and learn: + +[](https://youtu.be/kzuvppEWm88 "Video") + +## **👩💻 🧑💻 Assignment Tasks** + +Please find the task assignments in the [Task File](./task.md). diff --git a/day-33/banner.png b/day-33/banner.png new file mode 100644 index 0000000..db0e24f Binary files /dev/null and b/day-33/banner.png differ diff --git a/day-33/index.html b/day-33/index.html new file mode 100644 index 0000000..922aed9 --- /dev/null +++ b/day-33/index.html @@ -0,0 +1,12 @@ + + + + + +Data Structures + + + +Welcome to Day 33 of 40 Days of JS
+ + \ No newline at end of file diff --git a/day-33/index.js b/day-33/index.js new file mode 100644 index 0000000..14e37dd --- /dev/null +++ b/day-33/index.js @@ -0,0 +1,335 @@ + +// What will we learn today? + +// ✅ Arrays and Objects 2 minutes recap +// ✅ Map in JavaScript +// ✅ How to Add values to a Map +// ✅ How to Get values from a Map in JavaScript +// ✅ All About Map Keys +// ✅ Map Properties and Methods +// ✅ MapIterator: keys(), values(), and entries() +// ✅ How to Iterate Over a Map +// ✅ Convert an Object into a Map +// ✅ Convert a Map into an Object +// ✅ Convert a Map into an Array +// ✅ Map vs. Object: When should you use them? +// ✅ Set in JavaScript +// ✅ How to Create and Initialize a Set +// ✅ Set Properties and Methods +// ✅ How to Iterate Over a Set +// ✅ Convert a Set into an array +// ✅ Unique values from an array using the Set +// ✅ Set and Object +// ✅ Set Theories +// ✅ WeakMap +// ✅ WeakSet +// Tasks and Assignments + + +// Arrays and Objects 2 minutes recap + +/* +let obj = {} +obj.a = ""; +obj.b = "b"; +*/ + +// Map in JavaScript + +// 1. key can be of any type +// 2. Map remembers the original order in which the elements were added to it + +{/* +const map = new Map([ + ['name', 'tapaScript'], + ['type', 'YT'], + ['owner', 'Tapas'] +]); + +console.log(map); +*/} + +// How to Add values to a Map + +// set(key, value) + +// create a map +/* +const map = new Map(); + +map.set("name", "tapaScript"); +map.set('type', 'YT'); +map.set('owner', 'Tapas Adhikary'); +map.set('owner', 'ts'); + +console.log(map); + + +// How to Get values from a Map + +// get(key) +console.log("Type is", map.get('type')); +*/ + +// Map Keys + +const funMap = new Map(); + +funMap.set(560, "My House Number"); +funMap.set(true, "Yes, I love teaching"); + +let obj = {'name': 'tapas'}; +funMap.set(obj, true); + +console.log(funMap); + +// Create an empty object +const funObj = {}; + +funObj[560] = "My House Number"; + +console.log(funObj[560] === funObj['560']); + +console.log(funMap.get(560) === funMap.get("560")); + +// Map Properties and Methods + +console.log(funMap.size); // 3 + +console.log(funMap.has(560)); // true + +console.log(funMap.has(360)); // false + +console.log(funMap.has("560")); // false + +funMap.delete(560); +console.log(funMap); + +funMap.clear(); +console.log(funMap); + +// MapIterator: keys(), values(), and entries() + +const ageMap = new Map([ + ['Jack', 20], + ['Alan', 34], + ['Bill', 10], + ['Sam', 9] +]); + +// Get all the keys + +console.log(ageMap.keys()); + +const mitr = ageMap.keys(); + +mitr.forEach((item) => { + console.log(item) +}) + +console.log(ageMap.values()); + +console.log(ageMap.entries()); + +/* +ageMap.forEach((value, key) => { + console.log(`${key} is ${value} years old!`); +}); +*/ + +for(const [key, value] of ageMap) { + console.log(`${key} is ${value} years old!`); +} + +// Convert an Object into a Map + +const address = { + 'Tapas': 'Bangalore', + 'James': 'Huston', + 'Selva': 'Srilanka' +}; + + +const addressMap = new Map(Object.entries(address)); +console.log(addressMap); + + +// Convert a Map into an Object + +const addre = Object.fromEntries(addressMap); +console.log(addre); + +// Convert a Map into an Array + +const map = new Map(); +map.set('milk', 200); +map.set("tea", 300); +map.set('coffee', 500); + +console.log(Array.from(map)); + +console.log([...map]); + +// Set in JavaScript + + +// A Set is a collection of unique elements + +const set = new Set(); +console.log(set); + +const fruiteSet = new Set(['🍉', '🍎', '🍈', '🍏']); +console.log(fruiteSet); + +console.log(fruiteSet.size); // 4 + +const saladSet = new Set(); + +saladSet.add('🍅'); // tomato +saladSet.add('🥑'); // avocado +saladSet.add('🥕'); // carrot +saladSet.add('🥒'); // cucumber + +console.log(saladSet); // Set(4) {"🍅", "🥑", "🥕", "🥒"} + +saladSet.add('🥒'); + +console.log(saladSet); + +console.log('Does the salad have a carrot?', saladSet.has('🥕')); // true + +console.log('Does the salad have broccoli?', saladSet.has('🥦')); // false + +saladSet.delete('🥑'); + +console.log(saladSet); + +saladSet.clear(); + +// How to Iterate Over a Set + +const houseNos = new Set([360, 567, 101]); + +houseNos.values(); // SetIterator + +houseNos.keys(); // SetIterator + +console.log(houseNos.entries()); // SetIterator + +// How to Convert a Set into an array + +const houseNoArr = [...houseNos]; +console.log(houseNoArr); + +const mixedFruit = ['🍉', '🍎', '🍉', '🍈', '🍏', '🍎', '🍈']; + +const mixedFruitSet = new Set(mixedFruit); + +console.log(mixedFruitSet); + + +// Create a person object +let person = { + 'name': 'Alex', + 'age': 32 + }; + + // Create a set and add the object to it +const pSet = new Set(); +pSet.add(person); +console.log(pSet); + +// person.name = "Bob" + +person = {}; + +pSet.add(person); + + +// Set Theories + +const first = new Set([1, 2, 3]); +const second = new Set([3, 4, 5]); + +// Union +console.log(first.union(second)); + +const union = new Set([...first, ...second]); + +// Intersection +console.log(first.intersection(second)); + +const intersection = new Set([...first].filter(elem => second.has(elem))); + +// Difference +console.log(first.difference(second)); + +const difference = new Set([...first].filter(elem => !second.has(elem))); + + +const numbers = new Set([2, 4, 6, 8, 10, 12, 14, 16, 18]); +const the4Table = new Set([4, 8, 12, 16]); + +console.log(numbers.isSupersetOf(the4Table)); // true + + +// WeakMap + +let user = {'name': 'tapaScript'}; +//const allUsers = [user]; + +const uMap = new Map(); +uMap.set(user, true); + +user = null; + +console.log(uMap); + +let addr = {"country": "India"}; + +const wMap = new WeakMap(); +wMap.set(addr, true); + +addr = null; + +console.log(wMap); + +// set +// get +// has +// delete + +const metadata = new WeakMap(); + +function setMetadata(el, info) { + metadata.set(el, info); +} + +function getMetadata(el) { + return metadata.get(el); +} + +const div = document.createElement('div'); +setMetadata(div, { visible: true }); + +console.log(getMetadata(div)); // { visible: true } + +// If div is removed from the DOM and dereferenced, metadata is GC'd + +// add +//has +// delete + +const onlineUsers = new WeakSet(); + +let user1 = { name: "Alice" }; +let user2 = { name: "Bob" }; + +onlineUsers.add(user1); +onlineUsers.add(user2); +console.log(onlineUsers.has(user1)); + +user1 = null; + +console.log(onlineUsers.has(user1)); + diff --git a/day-33/task.md b/day-33/task.md new file mode 100644 index 0000000..89d8d56 --- /dev/null +++ b/day-33/task.md @@ -0,0 +1,91 @@ +# Tasks + +Please complete the following tasks and post them on the tapaScript Discord under "40 Days of JavaScript". + +> **DO NOT USE AI to FIND ANSWERS**. If you are stuck, let's discuss it on DISCORD and learn. Also, please note that none of the answers need you to create any UI. Just focus on the logic building and print the output on the browser console. + +## 1. Create a Map of Student IDs and Names + +- Add at least 5 students. +- Retrieve a name using a student ID. +- Delete one entry and print the Map. + +## 2. Create a Set of Programming Languages + +- Add duplicate languages to test uniqueness. +- Iterate and print all unique entries. + +## 3. Compare Object vs Map for Key-Value Storage + +- Store the same data in both. +- Compare insertion order and key types (e.g., object keys). + +## 4. Build a Contact List Using Map + +- Use phone numbers as keys and names as values. +- Add, update, delete contacts. +- Search for a contact by number. + +## 5. Remove Duplicates from Array Using Set + +```js +const fruits = ['apple', 'banana', 'apple', 'orange', 'banana']; +``` + +Convert to a Set and back to an array with only unique values. + +## 6. Track User Logins with Set + +- Add user IDs when users log in. +- Remove them on logout. +- Check if a specific user is currently logged in. + +## 7. Create a Map of Book Titles and Authors + +- Add at least 5 entries. +- Update an author. +- Count the number of books. + +## 8. Associate Metadata with DOM Elements Using WeakMap + +- Create fake DOM elements (objects). +- Store related metadata in a WeakMap. +- Demonstrate benefits for garbage collection. + +## 9. Track Instances of a Class with WeakSet + +- Define a `Session` class. +- Add each instance to a WeakSet when created. +- Discuss how it avoids memory leaks. + +## 10. Build a Shopping Cart Using Map + +- Product IDs as keys and quantity as values. +- Add, remove, and update quantities. +- Calculate total items in the cart. + +## 11. Anagram Checker with Set + +- Write a function that checks if two strings are anagrams. +- Use Sets to compare character presence. + +## 12. First Non-Repeating Character with Map + +- Count character frequencies in a string using a Map. +- Return the first character with count 1. + +## 13. Measure Performance: Object vs Map + +- Insert 100,000 key-value pairs into both. +- Use `console.time()` to benchmark speed. + +## 14. Voting App with Set to Prevent Duplicate Votes + +- Track user IDs in a Set. +- Allow each ID to vote only once. + +## 15. Employee Registry Using Object Keys in Map + +- Use employee objects as keys. +- Add and retrieve job-related info. +- Show that Object keys don't work similarly in plain objects. diff --git a/live/lets-code/inventory/.gitignore b/live/lets-code/inventory/.gitignore new file mode 100644 index 0000000..e3f07bd --- /dev/null +++ b/live/lets-code/inventory/.gitignore @@ -0,0 +1,4 @@ +node_modules +.git +package-lock.json +yarn.lock \ No newline at end of file diff --git a/live/lets-code/inventory/LICENSE b/live/lets-code/inventory/LICENSE new file mode 100644 index 0000000..30565f8 --- /dev/null +++ b/live/lets-code/inventory/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2025 tapaScript + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/live/lets-code/inventory/README.md b/live/lets-code/inventory/README.md new file mode 100644 index 0000000..2fe21d0 --- /dev/null +++ b/live/lets-code/inventory/README.md @@ -0,0 +1,34 @@ +# Inventory Dashboard + +Let us create an Invetory Dashboard together. + + + +## Run the API Server + +To run the API server, + +```bash +cd api/inventory +npm install +npm run start +``` + +The API Server will run on `localhost:3001`. + +## Run the UI + +To run the UI, + +```bash +npm install +npm run start +``` + +The UI will run on `localhost:3000`. + +## LIVE Video + +Please find the LIVE CODING video here: + +[](https://www.youtube.com/live/Ub1a28GYMuA "Video") diff --git a/live/lets-code/inventory/banner.png b/live/lets-code/inventory/banner.png new file mode 100644 index 0000000..a46b6a8 Binary files /dev/null and b/live/lets-code/inventory/banner.png differ diff --git a/live/lets-code/inventory/image.png b/live/lets-code/inventory/image.png new file mode 100644 index 0000000..cf140a0 Binary files /dev/null and b/live/lets-code/inventory/image.png differ diff --git a/live/lets-code/inventory/main.js b/live/lets-code/inventory/main.js new file mode 100644 index 0000000..e69de29 diff --git a/live/lets-code/inventory/package.json b/live/lets-code/inventory/package.json new file mode 100644 index 0000000..bf46871 --- /dev/null +++ b/live/lets-code/inventory/package.json @@ -0,0 +1,24 @@ +{ + "name": "js-base-setup", + "version": "1.0.0", + "description": "javascript setup", + "main": "main.js", + "scripts": { + "start": "concurrently \"serve pages -p 3000\" \"npx @tailwindcss/cli -i ./pages/input.css -o ./pages/output.css --watch\"", + "build": "npx @tailwindcss/cli -i ./pages/input.css -o ./pages/output.css" + }, + "keywords": [ + "javascript", + "base" + ], + "author": "tapaScript | learn@tapascript.io", + "license": "MIT", + "devDependencies": { + "concurrently": "^9.1.2", + "serve": "^14.2.4" + }, + "dependencies": { + "@tailwindcss/cli": "^4.1.2", + "tailwindcss": "^4.1.2" + } +} diff --git a/live/lets-code/inventory/pages/index.html b/live/lets-code/inventory/pages/index.html new file mode 100644 index 0000000..234a2be --- /dev/null +++ b/live/lets-code/inventory/pages/index.html @@ -0,0 +1,29 @@ + + + + + + +Inventory Dashboard + + + + + + +++ + + \ No newline at end of file diff --git a/live/lets-code/inventory/pages/input.css b/live/lets-code/inventory/pages/input.css new file mode 100644 index 0000000..f1d8c73 --- /dev/null +++ b/live/lets-code/inventory/pages/input.css @@ -0,0 +1 @@ +@import "tailwindcss"; diff --git a/live/lets-code/inventory/pages/inventory.js b/live/lets-code/inventory/pages/inventory.js new file mode 100644 index 0000000..c8f39ed --- /dev/null +++ b/live/lets-code/inventory/pages/inventory.js @@ -0,0 +1,151 @@ +console.log("Inventory"); + +const container = document.getElementById("productContainer"); +const loading = document.getElementById("loading"); +const errorElem = document.getElementById("error"); +const inventoryChart = document.getElementById("inventoryChart"); + +/** Getting Current Stock Data of a Product */ +async function getCurrentStock(productId) { + const product = await apiRequest( + `http://localhost:3001/products/${productId}` + ); + return product?.stock; +} + +/** Attach All handlers */ +function addRestockListeners() { + const buttons = document.querySelectorAll(".restock-btn"); + buttons.forEach((button) => { + button.addEventListener("click", async () => { + const id = parseInt(button.dataset.id); + await restockItem(id); + }); + }); +} + +/** Restock item by increasing stock */ +async function restockItem(productId) { + const currentStock = await getCurrentStock(productId); + const data = await apiRequest( + `http://localhost:3001/products/${productId}`, + "PATCH", + { stock: currentStock + 5 } + ); + console.log(data); + displayProducts(); +} + +/** Display products */ +async function displayProducts() { + try { + const products = await apiRequest("http://localhost:3001/products"); + + container.innerHTML = ""; + + products.forEach((product) => { + container.innerHTML += ` +Inventory Dashboard
+ + + +Loading...+ + +++Stock vs Sold Chart
+ ++`; + }); + addRestockListeners(); + renderChart(products); + } catch (error) { + const message = error.message; + console.error(message); + errorElem.textContent = message; + } finally { + loading.textContent = ""; + } +} + +/** Render chart showing stock vs sold */ +function renderChart(products) { + const ctx = inventoryChart.getContext("2d"); + const labels = products.map((p) => p.name); + const stockData = products.map((p) => p.stock); + const soldData = products.map((p) => p.sold); + + if ( + window.inventoryChart && + typeof window.inventoryChart.destroy === "function" + ) { + window.inventoryChart.destroy(); // clear existing chart safely + } else if (window.inventoryChart) { + window.inventoryChart = null; // ensure proper reinitialization if chart is not valid + } + + window.inventoryChart = new Chart(ctx, { + type: "bar", + data: { + labels, + datasets: [ + { + label: "Stock", + data: stockData, + backgroundColor: "#3B82F6", + }, + { + label: "Sold", + data: soldData, + backgroundColor: "#10B981", + }, + ], + }, + options: { + responsive: true, + plugins: { + legend: { + position: "top", + }, + }, + }, + }); +} + +displayProducts(); + +async function apiRequest(url, method = "GET", body = null) { + try { + loading.textContent = "Loading..."; + + const options = { + method, + headers: { + "Content-Type": "application/json", + }, + }; + + if (body) { + options.body = JSON.stringify(body); + } + + const response = await fetch(url, options); + + if (!response.ok) { + throw new Error( + `API error: ${response.status} ${response.statusText}` + ); + } + + return await response.json(); // success + } catch (error) { + console.error(error.message); + errorElem.textContent = error.message; + } finally { + loading.textContent = ""; + } +} diff --git a/live/lets-code/inventory/pages/output.css b/live/lets-code/inventory/pages/output.css new file mode 100644 index 0000000..f20fdff --- /dev/null +++ b/live/lets-code/inventory/pages/output.css @@ -0,0 +1,394 @@ +/*! tailwindcss v4.1.7 | MIT License | https://tailwindcss.com */ +@layer properties; +@layer theme, base, components, utilities; +@layer theme { + :root, :host { + --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", + "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", + "Courier New", monospace; + --color-red-500: oklch(63.7% 0.237 25.331); + --color-green-300: oklch(87.1% 0.15 154.449); + --color-blue-500: oklch(62.3% 0.214 259.815); + --color-blue-600: oklch(54.6% 0.245 262.881); + --color-indigo-400: oklch(67.3% 0.182 276.935); + --color-gray-100: oklch(96.7% 0.003 264.542); + --color-gray-600: oklch(44.6% 0.03 256.802); + --color-gray-900: oklch(21% 0.034 264.665); + --color-black: #000; + --color-white: #fff; + --spacing: 0.25rem; + --text-sm: 0.875rem; + --text-sm--line-height: calc(1.25 / 0.875); + --text-lg: 1.125rem; + --text-lg--line-height: calc(1.75 / 1.125); + --text-xl: 1.25rem; + --text-xl--line-height: calc(1.75 / 1.25); + --text-2xl: 1.5rem; + --text-2xl--line-height: calc(2 / 1.5); + --text-3xl: 1.875rem; + --text-3xl--line-height: calc(2.25 / 1.875); + --font-weight-normal: 400; + --font-weight-semibold: 600; + --font-weight-bold: 700; + --default-font-family: var(--font-sans); + --default-mono-font-family: var(--font-mono); + } +} +@layer base { + *, ::after, ::before, ::backdrop, ::file-selector-button { + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0 solid; + } + html, :host { + line-height: 1.5; + -webkit-text-size-adjust: 100%; + tab-size: 4; + font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); + font-feature-settings: var(--default-font-feature-settings, normal); + font-variation-settings: var(--default-font-variation-settings, normal); + -webkit-tap-highlight-color: transparent; + } + hr { + height: 0; + color: inherit; + border-top-width: 1px; + } + abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; + } + h1, h2, h3, h4, h5, h6 { + font-size: inherit; + font-weight: inherit; + } + a { + color: inherit; + -webkit-text-decoration: inherit; + text-decoration: inherit; + } + b, strong { + font-weight: bolder; + } + code, kbd, samp, pre { + font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); + font-feature-settings: var(--default-mono-font-feature-settings, normal); + font-variation-settings: var(--default-mono-font-variation-settings, normal); + font-size: 1em; + } + small { + font-size: 80%; + } + sub, sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; + } + sub { + bottom: -0.25em; + } + sup { + top: -0.5em; + } + table { + text-indent: 0; + border-color: inherit; + border-collapse: collapse; + } + :-moz-focusring { + outline: auto; + } + progress { + vertical-align: baseline; + } + summary { + display: list-item; + } + ol, ul, menu { + list-style: none; + } + img, svg, video, canvas, audio, iframe, embed, object { + display: block; + vertical-align: middle; + } + img, video { + max-width: 100%; + height: auto; + } + button, input, select, optgroup, textarea, ::file-selector-button { + font: inherit; + font-feature-settings: inherit; + font-variation-settings: inherit; + letter-spacing: inherit; + color: inherit; + border-radius: 0; + background-color: transparent; + opacity: 1; + } + :where(select:is([multiple], [size])) optgroup { + font-weight: bolder; + } + :where(select:is([multiple], [size])) optgroup option { + padding-inline-start: 20px; + } + ::file-selector-button { + margin-inline-end: 4px; + } + ::placeholder { + opacity: 1; + } + @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { + ::placeholder { + color: currentcolor; + @supports (color: color-mix(in lab, red, red)) { + color: color-mix(in oklab, currentcolor 50%, transparent); + } + } + } + textarea { + resize: vertical; + } + ::-webkit-search-decoration { + -webkit-appearance: none; + } + ::-webkit-date-and-time-value { + min-height: 1lh; + text-align: inherit; + } + ::-webkit-datetime-edit { + display: inline-flex; + } + ::-webkit-datetime-edit-fields-wrapper { + padding: 0; + } + ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field { + padding-block: 0; + } + :-moz-ui-invalid { + box-shadow: none; + } + button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button { + appearance: button; + } + ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { + height: auto; + } + [hidden]:where(:not([hidden="until-found"])) { + display: none !important; + } +} +@layer utilities { + .container { + width: 100%; + @media (width >= 40rem) { + max-width: 40rem; + } + @media (width >= 48rem) { + max-width: 48rem; + } + @media (width >= 64rem) { + max-width: 64rem; + } + @media (width >= 80rem) { + max-width: 80rem; + } + @media (width >= 96rem) { + max-width: 96rem; + } + } + .mx-auto { + margin-inline: auto; + } + .mt-2 { + margin-top: calc(var(--spacing) * 2); + } + .mb-2 { + margin-bottom: calc(var(--spacing) * 2); + } + .mb-6 { + margin-bottom: calc(var(--spacing) * 6); + } + .grid { + display: grid; + } + .grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + .gap-4 { + gap: calc(var(--spacing) * 4); + } + .rounded { + border-radius: 0.25rem; + } + .bg-blue-500 { + background-color: var(--color-blue-500); + } + .bg-gray-100 { + background-color: var(--color-gray-100); + } + .bg-white { + background-color: var(--color-white); + } + .p-4 { + padding: calc(var(--spacing) * 4); + } + .px-3 { + padding-inline: calc(var(--spacing) * 3); + } + .py-1 { + padding-block: calc(var(--spacing) * 1); + } + .text-center { + text-align: center; + } + .text-3xl { + font-size: var(--text-3xl); + line-height: var(--tw-leading, var(--text-3xl--line-height)); + } + .text-lg { + font-size: var(--text-lg); + line-height: var(--tw-leading, var(--text-lg--line-height)); + } + .text-sm { + font-size: var(--text-sm); + line-height: var(--tw-leading, var(--text-sm--line-height)); + } + .text-xl { + font-size: var(--text-xl); + line-height: var(--tw-leading, var(--text-xl--line-height)); + } + .font-bold { + --tw-font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-bold); + } + .font-semibold { + --tw-font-weight: var(--font-weight-semibold); + font-weight: var(--font-weight-semibold); + } + .text-gray-600 { + color: var(--color-gray-600); + } + .text-gray-900 { + color: var(--color-gray-900); + } + .text-red-500 { + color: var(--color-red-500); + } + .text-white { + color: var(--color-white); + } + .shadow { + --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)); + box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); + } + .hover\:bg-blue-600 { + &:hover { + @media (hover: hover) { + background-color: var(--color-blue-600); + } + } + } + .md\:grid-cols-2 { + @media (width >= 48rem) { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + } + .lg\:grid-cols-3 { + @media (width >= 64rem) { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + } +} +@property --tw-font-weight { + syntax: "*"; + inherits: false; +} +@property --tw-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-shadow-color { + syntax: "*"; + inherits: false; +} +@property --tw-shadow-alpha { + syntax: "${product.name}
+Category: ${product.category}
+Stock: ${ + product.stock + }
+Sold: ${product.sold}
+Price: $${product.price.toFixed(2)}
+Last Updated: ${ + product.lastUpdated + }
+ +"; + inherits: false; + initial-value: 100%; +} +@property --tw-inset-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-inset-shadow-color { + syntax: "*"; + inherits: false; +} +@property --tw-inset-shadow-alpha { + syntax: " "; + inherits: false; + initial-value: 100%; +} +@property --tw-ring-color { + syntax: "*"; + inherits: false; +} +@property --tw-ring-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-inset-ring-color { + syntax: "*"; + inherits: false; +} +@property --tw-inset-ring-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@property --tw-ring-inset { + syntax: "*"; + inherits: false; +} +@property --tw-ring-offset-width { + syntax: " "; + inherits: false; + initial-value: 0px; +} +@property --tw-ring-offset-color { + syntax: "*"; + inherits: false; + initial-value: #fff; +} +@property --tw-ring-offset-shadow { + syntax: "*"; + inherits: false; + initial-value: 0 0 #0000; +} +@layer properties { + @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) { + *, ::before, ::after, ::backdrop { + --tw-font-weight: initial; + --tw-shadow: 0 0 #0000; + --tw-shadow-color: initial; + --tw-shadow-alpha: 100%; + --tw-inset-shadow: 0 0 #0000; + --tw-inset-shadow-color: initial; + --tw-inset-shadow-alpha: 100%; + --tw-ring-color: initial; + --tw-ring-shadow: 0 0 #0000; + --tw-inset-ring-color: initial; + --tw-inset-ring-shadow: 0 0 #0000; + --tw-ring-inset: initial; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-offset-shadow: 0 0 #0000; + } + } +} diff --git a/live/live-one/index.html b/live/live-one/index.html new file mode 100644 index 0000000..67f05f7 --- /dev/null +++ b/live/live-one/index.html @@ -0,0 +1,12 @@ + + + + + + Live 01 + + + +Welcome to the LIVE! - 40 Days of JavaScript by tapaScript
+ + \ No newline at end of file diff --git a/live/live-one/index.js b/live/live-one/index.js new file mode 100644 index 0000000..f97aeb9 --- /dev/null +++ b/live/live-one/index.js @@ -0,0 +1,70 @@ +console.log("Live 01"); + +/* +- [ ] Create a `units` variable. Based on this value you will calculate the total electricity bill for a months. +- [ ] If each day you consume the `units` and each unit cost 150 rupees, how much will you be charged per month? +- [ ] If there is a 20% discount on the annual payment, how much will you be charged for an annual payment? +*/ + +const unitsPerDay = 10; +const costPerUnit = 150; + +const daysInMonth = 30; + +const monthlyBill = daysInMonth * costPerUnit * unitsPerDay; + +const annualBillWithoutDiscount = monthlyBill * 12; + +const discount = annualBillWithoutDiscount * 0.2; + +const annualBillWithDiscount = annualBillWithoutDiscount - discount; + +const a = 10; +const b = 12; +const c = 5; + +if (a === b && b === c) { + return "Equilateral Triangle"; +} else if (a === b || b === c || a === c) { + return "Isosceles Triangle"; +} else { + return "Scalene Triangle"; +} + +let num = 6789; +let reversed = 0; + +while (num > 0) { + let eachDigit = num % 10; // 6 + reversed = reversed * 10 + eachDigit; // 9876 + num = Math.floor(num/10) // 0 +} +reversed // 9876 + + +function createCounter() { + let count = 0; + + return { + increment: function() { + count++; + console.log(`Count: ${count}`); + }, + decrement: function() { + count--; + console.log(`Count: ${count}`); + }, + reset: function() { + count = 0; + console.log(`Count reset to: ${count}`); + } + }; +} + +// Usage +const counter = createCounter(); +counter.increment(); // Count: 1 +counter.increment(); // Count: 2 +counter.decrement(); // Count: 1 +counter.reset(); // Count reset to: 0 + diff --git a/live/live-one/questions.md b/live/live-one/questions.md new file mode 100644 index 0000000..cfb0715 --- /dev/null +++ b/live/live-one/questions.md @@ -0,0 +1,136 @@ +# Live 01 - Questions + +## Q1: Create an Electricity Bill Calculator + +Let's calculate how much you pay for electricity bills per month and annually. + +- [ ] Create a `units` variable. Based on this value you will calculate the total electricity bill for a months. +- [ ] If each day you consume the `units` and each unit cost 150 rupees, how much will you be charged per month? +- [ ] If there is a 20% discount on the annual payment, how much will you be charged for an annual payment? + +## Q2: Which Triangle? + +A triangle has 3 sides. A Triangle type is determined by its sides: + +- All sides equal is called, `Equilateral Triangle`. +- Two sides equal is called, `Isosceles Triangle`. +- All sides different is called, `Scalene Triangle`. + +Take the sides of a triangle as input and write a program to determine the triangle type. Change the inputs everytime manually to see if the output changes correctly. + +## Q3: Reverse Digits of a Number (Using while loop) + +Write a program to reverse the digits of a given number using a while loop. + +Example: + +`Input: 6789 +Output: 9876` + +## Q4: Write a Function to Capitalize the First Letter of Each Word in a Sentence + +Write a function capitalizeWords(sentence) that takes a sentence and capitalizes the first letter of each word. You can use the toUpperCase() method of string to convert the lowercase to uppercase. + +## Q5: Create Call Stack Execution Diagram for this flow + +```js +function f1() {} +function f2() {} +function f3() { + f1(); +} +f2(); +f3(); +f1(); +``` + +## Q6: Draw the Execution Context Diagram of the following code and share as explained below + +```js +const message = "I can do it"; + +fucntion sum(a, b) { + const result = a + b; + return result; +} + +function mul(a, b) { + const result = a * b; + return result; +} +function calc(a, b) { + return (sum(a, b) + mul(a,b))/2; +} + +function getResult(a, b) { + return calc(a, b); +} + +getResult(8, 5); +``` + +## Q7: What will be the output and why? + +```js +let x = "Global"; + +function outer() { + let x = "Outer"; + + function inner() { + let x = "Inner"; + console.log(x); + } + + inner(); +} + +outer(); +``` + +## Q8: Write a function factory of counter to increment, decrement, and reset a counter. Use closure to refer the count value across the functions + +## Q9: Can you attach the car1's describe() method to car2 object? Give all possible solutions that you can think of + +```js +const car1 = { + brand: "Audi", + model: "A8", + describe: function () { + console.log(`This car is a ${this.brand} ${this.model}.`); + }, +}; + +const car2 = { + brand: "BMW", + model: "X1", +}; +``` + +## Q10: In the given user object, inside the greet function, this refers to the user object. The inner function is inside greet, so according to the scope mechanism, it should be able to access this from greet. However, this is not happening as expected. Why does the scope mechanism not work in this case? + +```js +const user = { + name: "Alex", + greet: function () { + console.log("From outer function", this); // user + + const inner = function () { + console.log("From inner function", this); // window + }; + inner(); + }, +}; + +user.greet(); +``` + +## Other Question(Collected from the QA submission form) + +- After a few days, I forget syntax. Is this natural or how to remember? +- Where we can use hoisting and what is temporal dead zone? +- What are the actual steps that we should keep in mind when we start writing a code for a particular project? +- I would like to understand the actual use of "closures"? +- I know if I don't learn properly, the certificate value will not work, but we request us please give us a certificate for valuable memory purposes. +- I am finding difficulties for getting even a single freelancer small project on any of the freelancing portals. Is there any practical approach that would help me finding just one to start with. +- if we are begginers whos learning javascript we have big problem for building logics and how to think like a dev i would like to give advice for this problem also some times we feel lack of confidence and think like we dont know nothing what would you give as and advice for this feeling and problems diff --git a/project-assignment/expense-tracker.md b/project-assignment/expense-tracker.md new file mode 100644 index 0000000..2402c5f --- /dev/null +++ b/project-assignment/expense-tracker.md @@ -0,0 +1,48 @@ +# Expense Tracker Project + +You have just finished the module 2. You have learned many important concepts till the session(day) 16. It is time to put everything together and do a project. + +## Project Requirements + +Create a simple expense tracker where user can add, remove, edit, and categorize expenses. + +> Please Note: This will be a console-based project (no DOM), focusing only on JavaScript logic. + +### Features to Implement + +Create a `createExpenseTracker()` function that takes a username and an initial budget to expose the following functioanlities: + +- Adding Expense +- Removing Expense +- Updating Expense +- Getting total expenses done by the user +- Getting expense by category +- Get the Highest Expense +- Get the Lowest Expense +- Get the user info +- Show all the expenses +- Update User data + +Please make use of the factory function, closure to keep data private and return only the required features/methods. + +## Sample User Data Structure + +```js + user: { + name: "Tapas", + budget: 5000, + }, +``` + +## Sample Expense Data Structure + +```js +expenses: [ + { id: 1, amount: 200, category: "Food", description: "Lunch" }, + { id: 2, amount: 500, category: "Shopping", description: "New Shoes" }, +], +``` + +## Discussion and Follow up + +Once done, submit the GitHub link on [Discord](https://discord.com/invite/ux9BchWEW3). Please feel free to discuss about the tasks, if you need help. Also, help others to complete it. diff --git a/project-assignment/recipe-finder.md b/project-assignment/recipe-finder.md new file mode 100644 index 0000000..2684b07 --- /dev/null +++ b/project-assignment/recipe-finder.md @@ -0,0 +1,57 @@ +# Assignment: Recipe Finder App + +Build a Recipe Finder web app using JavaScript DOM skills to display recipes based on a search keyword. + +This project will NOT use any external API — we’ll use dummy data. + +## TODO + +Use JavaScript DOM to: + +- Display a list of recipes dynamically. +- Filter recipes by title based on user’s search input. +- No frameworks (no React, Vue, etc.) +- Use only HTML, CSS, and Vanilla JavaScript. +- Dummy Data is provided — store it inside your JavaScript file. + +### Dummy Data + +```js +const recipes = [ + { + title: "Spaghetti Carbonara", + ingredients: ["Spaghetti", "Eggs", "Parmesan Cheese", "Bacon"], + instructions: "Cook pasta. Mix with eggs and cheese. Add bacon." + }, + { + title: "Chicken Curry", + ingredients: ["Chicken", "Curry Powder", "Onions", "Tomatoes"], + instructions: "Cook onions, add chicken, spices, and tomatoes." + }, + { + title: "Grilled Cheese Sandwich", + ingredients: ["Bread", "Cheddar Cheese", "Butter"], + instructions: "Butter bread, place cheese between slices, and grill." + }, + { + title: "Veggie Stir Fry", + ingredients: ["Broccoli", "Carrots", "Bell Peppers", "Soy Sauce"], + instructions: "Stir fry vegetables and add soy sauce." + } +]; +``` + +## Expectations + +- A search bar at the top. +- As the user types, filter recipes by title (case insensitive). +- If no recipe found, show a “No recipes found” message. +- Clicking on a recipe title should expand/collapse to show ingredients and instructions. +- Add a clear button to reset the search. +- Add smooth slide animation when expanding/collapsing recipe details. +- Save last search term in localStorage and prefill the input when the page reloads. + +## Deliverables + +- A project on GitHub with all code and clear readme. +- Post the project link on discord's task-assignments channel of 40 days of JavaScript.