From 6b1dc9209f713be27c3c7b7053121786fd5b3ae4 Mon Sep 17 00:00:00 2001 From: Mihir Date: Fri, 6 Dec 2024 22:50:21 +0530 Subject: [PATCH 1/5] solved issues --- 1-js-basics/solution.md | 103 +++++++++++++++++++ 2-terrarium/solution.md | 101 ++++++++++++++++++ 3-typing-game/solution.md | 204 +++++++++++++++++++++++++++++++++++++ 4-bank-project/solution.md | 189 ++++++++++++++++++++++++++++++++++ 4 files changed, 597 insertions(+) create mode 100644 1-js-basics/solution.md create mode 100644 2-terrarium/solution.md create mode 100644 3-typing-game/solution.md create mode 100644 4-bank-project/solution.md diff --git a/1-js-basics/solution.md b/1-js-basics/solution.md new file mode 100644 index 0000000..cb34e75 --- /dev/null +++ b/1-js-basics/solution.md @@ -0,0 +1,103 @@ +# JavaScript Basics +## Subtopic 1: Data Types + +### Assignment + +Create a product object with the following properties and corresponding data types: +- **Product Name**: String +- **Product ID**: String +- **Price**: Float +- **Quantity**: Float +- **Product Availability**: Boolean +- **Product Category**: Enumerator (use an `enum` or similar structure to define categories such as "Electronics", "Clothing", etc.). + + +### Challenge + +Evaluate the following code snippets and understand the difference between `==` and `===`: + +```javascript +console.log(12 == '12'); // Output: true +console.log(12 === '12'); // Output: false +``` +--- + +## Subtopic-2: Methods and Functions + +### Assignment: +``` +function sum(x,y){ + console.log(x+y); +} +sum(5,3); +``` + +``` +function sum(){ + let a = 2; + let b = 3; + console.log(a+b); +} +sum() +``` +``` +function sum(a,b=1,c=3){ + console.log(a+b+c); +} +sum(2); +sum(2,3,4); +``` +### Challenge: +The difference between function and method is that a method is associated with object whereas function is not associated with object and can take input argument. + +--- + +## Subtopic-3: Making Decisions +### Assignment: +``` +let allStudents = ['A','B-',1,4,5,2]; +let studentsWhoPass = []; +for (let i = 0; i < allStudents.length; i++) { + let grade = allStudents[i]; + if (typeof grade === 'number' && grade >= 3) { + studentsWhoPass.push(grade); + } + else if (typeof grade === 'string' && (grade === 'A' || grade === 'A-' || grade === 'B' || grade === 'B-' || grade === 'C')){ + studentsWhoPass.push(grade); + } +} +``` + +### Challenge: +``` +let a=10; +if (a%2==0 && a%3==0){ + console.log("Divisble by 6"); +} +else{ + console.log("Not divisble by 6"); +} +``` +or +``` +console.log(a%2==0 && a%3==0 ? "Divisible by 6" : "Not divisible by 6"); +``` + +--- + +## Subtopic-4: Array-Loops +### Assignment: +``` +for(let i=3;i<20;i+=3){ + console.log(i); +} +``` + +### Challenge: +Using for-of +``` +let a=[1,2,3,4,5]; +for(let i of a){ + console.log(i); +} +``` \ No newline at end of file diff --git a/2-terrarium/solution.md b/2-terrarium/solution.md new file mode 100644 index 0000000..33e3fe8 --- /dev/null +++ b/2-terrarium/solution.md @@ -0,0 +1,101 @@ +# My Terrarium +## Subtopic 1: Intro to HTML + +### Assignment +``` + +

My terrarium

+ +``` +### Challenge +``` + + + + + + My Website + + +

Info about me

+
+
+

Name

+

P.Mihir

+
+
+

Bday/p> +

02-09-2005

+
+
+

Gender

+

Male

+
+
+

Address

+

Narsapur,W.G District,A.P

+
+

Education

+
+

College

+

Amrita

+
+
+

Branch

+

CSE

+
+
+

Semisterr

+

3

+
+
+ + +``` +--- + +## Subtopic-2: Intro to CSS +## Assignment +![image](https://github.com/user-attachments/assets/4e0672d3-a5a1-459a-9e2d-7b985df4a5d7) + +## Challenge +``` +.jar-glossy-long{ + width: 4%; + height: 25%; + background:#eee; + border-radius: 1rem; + position: absolute; + bottom: 18%; + left: 5%; +} +.jar-glossy-short{ + width: 4%; + height: 7%; + background: white; + border-radius: 1rem; + position: absolute; + bottom: 48%; + left: 5%; +} +``` +--- + +## Subtopic-3: Intro to DOM and Closures +## ASsignment +Event Interface (DOM Element) +Event Interfae is one of the central part of DOM and it represents an event that takes place on event target. It can be triggered by clicking the mouse button, keys on the keyboard, or network change. +we might find that event used in most of websites for capturing and responding to user interactions. It is also commonly used in our daily tasks of designing and developing websites. + +A classic example of where Event interface is used is in Google's Homepage. When you start searching for something the 'input' Event triggers and it will start showing some suggestion regarding the search content. + +## Challenge +``` +terrariumElement.addEventListener("dblclick", (event) => { + let highlightColor = "#FFD700"; + terrariumElement.style.border = "solid black 2px"; + terrariumElement.style.maxWidth = "85%"; + terrariumElement.style.background = highlightColor; + }); +} +``` \ No newline at end of file diff --git a/3-typing-game/solution.md b/3-typing-game/solution.md new file mode 100644 index 0000000..e678a9a --- /dev/null +++ b/3-typing-game/solution.md @@ -0,0 +1,204 @@ +# Typing Game + +### Challenge +1. +``` +typedValueElement.removeEventListener('input'); +``` +It should written in 'if' condition where user completes the quote. + +2. +``` +typedValueElement.disabled = true; +``` +It should written in 'if' condition where user completes the quote. + +3. +HTML +``` + +``` +Javascript +``` +const modal = document.getElementById('modal'); +const msg = document.getElementById('msg'); +const closeBtn = document.getElementById('close'); + +const time = 5000; +const text = `CONGRATULATIONS! You finished in ${time / 1000} seconds.`; +msg.innerText = text; +modal.style.display = 'block'; + +closeBtn.addEventListener('click', () => { + modal.style.display = 'none'; +}); +``` + +4. +``` +const elapsedTime = new Date().getTime() - startTime; +const Score = localStorage.getItem("hs"); +if(Score != null){ + message= `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.Current highscore is ${HighScore}`; +} +if(Score>elapsedTime / 1000 || Score == null){ + message = `CONGRATULATIONS! You finished with a new Highscore of ${elapsedTime / 1000} seconds.`; + localStorage.setItem("hs",elapsedTime/1000); +} +``` + +### Assigment +HTML +``` + + + + + + word scramble + + + +
+

Word Scramble Game

+
+

Word

+

+
+
+ +
+

Result:

+
+ + +
+ +
+ + +``` +--- +CSS +``` +body{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + min-height: 50vh; +} + +.back{ + font-size: x-large; + color: whitesmoke; + background-color: rgb(57, 151, 57); + box-shadow: 0 2px 5px grey; + padding: 0% 5% 1% 5%; + text-align: center; + border-radius: 5px 0; +} + +.title{ + border-bottom: 4px dashed; + border-color: white; +} + +input{ + font-size: 20px; + padding-left: 10px; + outline: 2px grey; +} + + +.end{ + margin-bottom: 0%; + display: flex; + width: 100%; +} + +button{ + width: 48%; + padding: 1%; + margin: 1%; + background-color: rgb(41, 117, 41); + border-radius: 5px; + border-color: rgb(29, 90, 29); + font-size: large; +} +``` +--- +Javascript +``` +const words = [ + "apple", + "mountain", + "library", + "ocean", + "friend", + "dance", + "school", + "guitar", + "chocolate", + "bicycle" + ]; + + const hints = [ + "A popular fruit, often red or green", + "A large, elevated landform", + "A place where you can borrow books", + "A vast body of saltwater", + "Someone you trust and enjoy spending time with", + "A rhythmic movement to music", + "A place for learning and education", + "A stringed musical instrument", + "A sweet treat made from cacao beans", + "A two-wheeled vehicle powered by pedaling" + ]; + +let displayWord = ""; + +function shuffle(str) { + strArray = Array.from(str); + for (let i = 0; i < strArray.length - 1; ++i) { + let j = Math.floor(Math.random() * strArray.length); + let temp = strArray[i]; + strArray[i] = strArray[j]; + strArray[j] = temp; + } + return strArray.join(" "); +} + +function check() { + let input = document.getElementById("input"); + let output = document.getElementById("output"); + if ( + input.value.toLocaleLowerCase() === + displayWord.toLocaleLowerCase() + ) + output.innerHTML = "Result: Correct"; + else output.innerHTML = "Result: Incorrect"; +} + +function refresh() { + index = Math.floor(Math.random() * 5); + displayWord = words[index]; + displayHint = hints[index]; + scrambleWord = + document.getElementById("scrambleWord"); + scrambleWord.innerText = + shuffle(displayWord).toUpperCase(); + let hint = document.getElementById("hint"); + hint.innerHTML = "Hint: " + displayHint; + document.getElementById("output").innerText = "Result:"; +} + +refresh(); +``` diff --git a/4-bank-project/solution.md b/4-bank-project/solution.md new file mode 100644 index 0000000..ca8d3c7 --- /dev/null +++ b/4-bank-project/solution.md @@ -0,0 +1,189 @@ +# Bank-project + +## 1-template-route + +### Challenge +``` + + +const routes = { + '/credits': {templateId:'credits',title:'Bank credits'}, +}; +``` +### Assignment +``` +const routes = { + '/login': { templateId: 'login' ,title:'Bank login'}, + '/dashboard': { templateId: 'dashboard',title:'Bank dashboard', init: refresh }, + '/credits': {templateId:'credits',title:'Bank credits'}, +}; +``` +Set the title elements text to this using the following piece of code in updateroute() +``` +document.getElementById('title').innerText = route.title; +``` +console.log for the printing 'Dashboard is shown'. +``` +function updateRoute() { + const path = window.location.pathname; + const route = routes[path]; + if (!route) { + return navigate('/dashboard'); + } + if(path=='/dashboard'){ + console.log("Dashboard is shown") + } +} +``` + +## 2-forms + +### Challenge +If the account already exists using js it display error messages to the user. +``` + + +const result = await createAccount(jsonData); +if (result.error) { + return updateElement('regerror', result.error); +} +``` + +### Assignment +``` +h1, .title { + text-align: center; + color: hsl(233, 52%, 33%); + font-weight: bold; + margin-bottom: 20px; +} + +.box { + margin: auto; + background-color: #fff; + padding: 20px; + border-radius: 10px; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15); + width: 100%; + max-width: 700px; +} + +form { + display: flex; + flex-direction: column; + gap: 10px; +} + +input { + border-color: azure; + height: 30px; + width: 98%; +} + +button { + border-radius: 10px; + height: 40px; + width: 98%; + background-color: #d6eaf8; + border: 1px solid black; +} + +button:hover { + background-color: #a3e4d7; +} +``` + +## 3-data + +### Challenge +``` +@media (orientation: landscape) { + #table, #btable { + width: 200px; + background-color: #fff; + padding: 20px; + border-radius: 5px; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15); + display: block; + } + + #btable { + background-color: #3d49a3; + } + + #table tr { + display: flex; + flex-direction: column; + margin-bottom: 10px; + } + + #table td { + padding: 5px 0; + } +} +``` + +### Assignment +I have completed the refactoring of the code and added the comments in app.js file. + +## 4-state-management + +### Challenge +I have changed the init function to store only name and transactions +``` +const currentaccount = localStorage.getItem(storageKey); +const data = { + user: state.account.user, + transactions: state.account.transactions, +}; +if (currentaccount) { + updateState('account', JSON.parse(data)); +} +``` + +### Assignment +HTML +``` + +

ADD TRANSACTION

+
+ + + + + + +
+ + +
+
+ +``` + +Javascript +``` +let user = ""; +async function trans(event) { + event.preventDefault(); + const form = new FormData(document.getElementById('transform')); + const jsonData = JSON.stringify(Object.fromEntries(form)); + await confirmtrans(jsonData); + console.log("Transaction done"); + updateState('account', state.account); + updateDashboard(); +} +async function confirmtrans(data) { + await fetch(`http://localhost:5000/api/accounts/${user}/transactions`, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: data + }); +} +document.getElementById('transform').addEventListener('submit', trans); +``` From 2b9681a977caf039edc8aa4739fc0cb226a7a41f Mon Sep 17 00:00:00 2001 From: Mihir Date: Fri, 6 Dec 2024 23:30:41 +0530 Subject: [PATCH 2/5] issue-1 --- 2-terrarium/solution.md | 101 ------------------ 3-typing-game/solution.md | 204 ------------------------------------- 4-bank-project/solution.md | 189 ---------------------------------- 3 files changed, 494 deletions(-) delete mode 100644 2-terrarium/solution.md delete mode 100644 3-typing-game/solution.md delete mode 100644 4-bank-project/solution.md diff --git a/2-terrarium/solution.md b/2-terrarium/solution.md deleted file mode 100644 index 33e3fe8..0000000 --- a/2-terrarium/solution.md +++ /dev/null @@ -1,101 +0,0 @@ -# My Terrarium -## Subtopic 1: Intro to HTML - -### Assignment -``` - -

My terrarium

- -``` -### Challenge -``` - - - - - - My Website - - -

Info about me

-
-
-

Name

-

P.Mihir

-
-
-

Bday/p> -

02-09-2005

-
-
-

Gender

-

Male

-
-
-

Address

-

Narsapur,W.G District,A.P

-
-

Education

-
-

College

-

Amrita

-
-
-

Branch

-

CSE

-
-
-

Semisterr

-

3

-
-
- - -``` ---- - -## Subtopic-2: Intro to CSS -## Assignment -![image](https://github.com/user-attachments/assets/4e0672d3-a5a1-459a-9e2d-7b985df4a5d7) - -## Challenge -``` -.jar-glossy-long{ - width: 4%; - height: 25%; - background:#eee; - border-radius: 1rem; - position: absolute; - bottom: 18%; - left: 5%; -} -.jar-glossy-short{ - width: 4%; - height: 7%; - background: white; - border-radius: 1rem; - position: absolute; - bottom: 48%; - left: 5%; -} -``` ---- - -## Subtopic-3: Intro to DOM and Closures -## ASsignment -Event Interface (DOM Element) -Event Interfae is one of the central part of DOM and it represents an event that takes place on event target. It can be triggered by clicking the mouse button, keys on the keyboard, or network change. -we might find that event used in most of websites for capturing and responding to user interactions. It is also commonly used in our daily tasks of designing and developing websites. - -A classic example of where Event interface is used is in Google's Homepage. When you start searching for something the 'input' Event triggers and it will start showing some suggestion regarding the search content. - -## Challenge -``` -terrariumElement.addEventListener("dblclick", (event) => { - let highlightColor = "#FFD700"; - terrariumElement.style.border = "solid black 2px"; - terrariumElement.style.maxWidth = "85%"; - terrariumElement.style.background = highlightColor; - }); -} -``` \ No newline at end of file diff --git a/3-typing-game/solution.md b/3-typing-game/solution.md deleted file mode 100644 index e678a9a..0000000 --- a/3-typing-game/solution.md +++ /dev/null @@ -1,204 +0,0 @@ -# Typing Game - -### Challenge -1. -``` -typedValueElement.removeEventListener('input'); -``` -It should written in 'if' condition where user completes the quote. - -2. -``` -typedValueElement.disabled = true; -``` -It should written in 'if' condition where user completes the quote. - -3. -HTML -``` - -``` -Javascript -``` -const modal = document.getElementById('modal'); -const msg = document.getElementById('msg'); -const closeBtn = document.getElementById('close'); - -const time = 5000; -const text = `CONGRATULATIONS! You finished in ${time / 1000} seconds.`; -msg.innerText = text; -modal.style.display = 'block'; - -closeBtn.addEventListener('click', () => { - modal.style.display = 'none'; -}); -``` - -4. -``` -const elapsedTime = new Date().getTime() - startTime; -const Score = localStorage.getItem("hs"); -if(Score != null){ - message= `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.Current highscore is ${HighScore}`; -} -if(Score>elapsedTime / 1000 || Score == null){ - message = `CONGRATULATIONS! You finished with a new Highscore of ${elapsedTime / 1000} seconds.`; - localStorage.setItem("hs",elapsedTime/1000); -} -``` - -### Assigment -HTML -``` - - - - - - word scramble - - - -
-

Word Scramble Game

-
-

Word

-

-
-
- -
-

Result:

-
- - -
- -
- - -``` ---- -CSS -``` -body{ - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - min-height: 50vh; -} - -.back{ - font-size: x-large; - color: whitesmoke; - background-color: rgb(57, 151, 57); - box-shadow: 0 2px 5px grey; - padding: 0% 5% 1% 5%; - text-align: center; - border-radius: 5px 0; -} - -.title{ - border-bottom: 4px dashed; - border-color: white; -} - -input{ - font-size: 20px; - padding-left: 10px; - outline: 2px grey; -} - - -.end{ - margin-bottom: 0%; - display: flex; - width: 100%; -} - -button{ - width: 48%; - padding: 1%; - margin: 1%; - background-color: rgb(41, 117, 41); - border-radius: 5px; - border-color: rgb(29, 90, 29); - font-size: large; -} -``` ---- -Javascript -``` -const words = [ - "apple", - "mountain", - "library", - "ocean", - "friend", - "dance", - "school", - "guitar", - "chocolate", - "bicycle" - ]; - - const hints = [ - "A popular fruit, often red or green", - "A large, elevated landform", - "A place where you can borrow books", - "A vast body of saltwater", - "Someone you trust and enjoy spending time with", - "A rhythmic movement to music", - "A place for learning and education", - "A stringed musical instrument", - "A sweet treat made from cacao beans", - "A two-wheeled vehicle powered by pedaling" - ]; - -let displayWord = ""; - -function shuffle(str) { - strArray = Array.from(str); - for (let i = 0; i < strArray.length - 1; ++i) { - let j = Math.floor(Math.random() * strArray.length); - let temp = strArray[i]; - strArray[i] = strArray[j]; - strArray[j] = temp; - } - return strArray.join(" "); -} - -function check() { - let input = document.getElementById("input"); - let output = document.getElementById("output"); - if ( - input.value.toLocaleLowerCase() === - displayWord.toLocaleLowerCase() - ) - output.innerHTML = "Result: Correct"; - else output.innerHTML = "Result: Incorrect"; -} - -function refresh() { - index = Math.floor(Math.random() * 5); - displayWord = words[index]; - displayHint = hints[index]; - scrambleWord = - document.getElementById("scrambleWord"); - scrambleWord.innerText = - shuffle(displayWord).toUpperCase(); - let hint = document.getElementById("hint"); - hint.innerHTML = "Hint: " + displayHint; - document.getElementById("output").innerText = "Result:"; -} - -refresh(); -``` diff --git a/4-bank-project/solution.md b/4-bank-project/solution.md deleted file mode 100644 index ca8d3c7..0000000 --- a/4-bank-project/solution.md +++ /dev/null @@ -1,189 +0,0 @@ -# Bank-project - -## 1-template-route - -### Challenge -``` - - -const routes = { - '/credits': {templateId:'credits',title:'Bank credits'}, -}; -``` -### Assignment -``` -const routes = { - '/login': { templateId: 'login' ,title:'Bank login'}, - '/dashboard': { templateId: 'dashboard',title:'Bank dashboard', init: refresh }, - '/credits': {templateId:'credits',title:'Bank credits'}, -}; -``` -Set the title elements text to this using the following piece of code in updateroute() -``` -document.getElementById('title').innerText = route.title; -``` -console.log for the printing 'Dashboard is shown'. -``` -function updateRoute() { - const path = window.location.pathname; - const route = routes[path]; - if (!route) { - return navigate('/dashboard'); - } - if(path=='/dashboard'){ - console.log("Dashboard is shown") - } -} -``` - -## 2-forms - -### Challenge -If the account already exists using js it display error messages to the user. -``` - - -const result = await createAccount(jsonData); -if (result.error) { - return updateElement('regerror', result.error); -} -``` - -### Assignment -``` -h1, .title { - text-align: center; - color: hsl(233, 52%, 33%); - font-weight: bold; - margin-bottom: 20px; -} - -.box { - margin: auto; - background-color: #fff; - padding: 20px; - border-radius: 10px; - box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15); - width: 100%; - max-width: 700px; -} - -form { - display: flex; - flex-direction: column; - gap: 10px; -} - -input { - border-color: azure; - height: 30px; - width: 98%; -} - -button { - border-radius: 10px; - height: 40px; - width: 98%; - background-color: #d6eaf8; - border: 1px solid black; -} - -button:hover { - background-color: #a3e4d7; -} -``` - -## 3-data - -### Challenge -``` -@media (orientation: landscape) { - #table, #btable { - width: 200px; - background-color: #fff; - padding: 20px; - border-radius: 5px; - box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15); - display: block; - } - - #btable { - background-color: #3d49a3; - } - - #table tr { - display: flex; - flex-direction: column; - margin-bottom: 10px; - } - - #table td { - padding: 5px 0; - } -} -``` - -### Assignment -I have completed the refactoring of the code and added the comments in app.js file. - -## 4-state-management - -### Challenge -I have changed the init function to store only name and transactions -``` -const currentaccount = localStorage.getItem(storageKey); -const data = { - user: state.account.user, - transactions: state.account.transactions, -}; -if (currentaccount) { - updateState('account', JSON.parse(data)); -} -``` - -### Assignment -HTML -``` - -

ADD TRANSACTION

-
- - - - - - -
- - -
-
- -``` - -Javascript -``` -let user = ""; -async function trans(event) { - event.preventDefault(); - const form = new FormData(document.getElementById('transform')); - const jsonData = JSON.stringify(Object.fromEntries(form)); - await confirmtrans(jsonData); - console.log("Transaction done"); - updateState('account', state.account); - updateDashboard(); -} -async function confirmtrans(data) { - await fetch(`http://localhost:5000/api/accounts/${user}/transactions`, { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: data - }); -} -document.getElementById('transform').addEventListener('submit', trans); -``` From 72ded9ab0c0994799af80f6c400e6885c4b43051 Mon Sep 17 00:00:00 2001 From: Mihir Date: Sat, 7 Dec 2024 00:00:50 +0530 Subject: [PATCH 3/5] issue-2 --- 1-js-basics/solution.md | 103 ---------------------------------------- 2-terrarium/solution.md | 101 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 101 insertions(+), 103 deletions(-) delete mode 100644 1-js-basics/solution.md create mode 100644 2-terrarium/solution.md diff --git a/1-js-basics/solution.md b/1-js-basics/solution.md deleted file mode 100644 index cb34e75..0000000 --- a/1-js-basics/solution.md +++ /dev/null @@ -1,103 +0,0 @@ -# JavaScript Basics -## Subtopic 1: Data Types - -### Assignment - -Create a product object with the following properties and corresponding data types: -- **Product Name**: String -- **Product ID**: String -- **Price**: Float -- **Quantity**: Float -- **Product Availability**: Boolean -- **Product Category**: Enumerator (use an `enum` or similar structure to define categories such as "Electronics", "Clothing", etc.). - - -### Challenge - -Evaluate the following code snippets and understand the difference between `==` and `===`: - -```javascript -console.log(12 == '12'); // Output: true -console.log(12 === '12'); // Output: false -``` ---- - -## Subtopic-2: Methods and Functions - -### Assignment: -``` -function sum(x,y){ - console.log(x+y); -} -sum(5,3); -``` - -``` -function sum(){ - let a = 2; - let b = 3; - console.log(a+b); -} -sum() -``` -``` -function sum(a,b=1,c=3){ - console.log(a+b+c); -} -sum(2); -sum(2,3,4); -``` -### Challenge: -The difference between function and method is that a method is associated with object whereas function is not associated with object and can take input argument. - ---- - -## Subtopic-3: Making Decisions -### Assignment: -``` -let allStudents = ['A','B-',1,4,5,2]; -let studentsWhoPass = []; -for (let i = 0; i < allStudents.length; i++) { - let grade = allStudents[i]; - if (typeof grade === 'number' && grade >= 3) { - studentsWhoPass.push(grade); - } - else if (typeof grade === 'string' && (grade === 'A' || grade === 'A-' || grade === 'B' || grade === 'B-' || grade === 'C')){ - studentsWhoPass.push(grade); - } -} -``` - -### Challenge: -``` -let a=10; -if (a%2==0 && a%3==0){ - console.log("Divisble by 6"); -} -else{ - console.log("Not divisble by 6"); -} -``` -or -``` -console.log(a%2==0 && a%3==0 ? "Divisible by 6" : "Not divisible by 6"); -``` - ---- - -## Subtopic-4: Array-Loops -### Assignment: -``` -for(let i=3;i<20;i+=3){ - console.log(i); -} -``` - -### Challenge: -Using for-of -``` -let a=[1,2,3,4,5]; -for(let i of a){ - console.log(i); -} -``` \ No newline at end of file diff --git a/2-terrarium/solution.md b/2-terrarium/solution.md new file mode 100644 index 0000000..33e3fe8 --- /dev/null +++ b/2-terrarium/solution.md @@ -0,0 +1,101 @@ +# My Terrarium +## Subtopic 1: Intro to HTML + +### Assignment +``` + +

My terrarium

+ +``` +### Challenge +``` + + + + + + My Website + + +

Info about me

+
+
+

Name

+

P.Mihir

+
+
+

Bday/p> +

02-09-2005

+
+
+

Gender

+

Male

+
+
+

Address

+

Narsapur,W.G District,A.P

+
+

Education

+
+

College

+

Amrita

+
+
+

Branch

+

CSE

+
+
+

Semisterr

+

3

+
+
+ + +``` +--- + +## Subtopic-2: Intro to CSS +## Assignment +![image](https://github.com/user-attachments/assets/4e0672d3-a5a1-459a-9e2d-7b985df4a5d7) + +## Challenge +``` +.jar-glossy-long{ + width: 4%; + height: 25%; + background:#eee; + border-radius: 1rem; + position: absolute; + bottom: 18%; + left: 5%; +} +.jar-glossy-short{ + width: 4%; + height: 7%; + background: white; + border-radius: 1rem; + position: absolute; + bottom: 48%; + left: 5%; +} +``` +--- + +## Subtopic-3: Intro to DOM and Closures +## ASsignment +Event Interface (DOM Element) +Event Interfae is one of the central part of DOM and it represents an event that takes place on event target. It can be triggered by clicking the mouse button, keys on the keyboard, or network change. +we might find that event used in most of websites for capturing and responding to user interactions. It is also commonly used in our daily tasks of designing and developing websites. + +A classic example of where Event interface is used is in Google's Homepage. When you start searching for something the 'input' Event triggers and it will start showing some suggestion regarding the search content. + +## Challenge +``` +terrariumElement.addEventListener("dblclick", (event) => { + let highlightColor = "#FFD700"; + terrariumElement.style.border = "solid black 2px"; + terrariumElement.style.maxWidth = "85%"; + terrariumElement.style.background = highlightColor; + }); +} +``` \ No newline at end of file From 07b4471c3d81b65fa167074b7d26a6f49de6f48a Mon Sep 17 00:00:00 2001 From: Mihir Date: Sat, 7 Dec 2024 02:06:14 +0530 Subject: [PATCH 4/5] issue-3 --- 2-terrarium/solution.md | 101 ------------------- 3-typing-game/solution.md | 204 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 204 insertions(+), 101 deletions(-) delete mode 100644 2-terrarium/solution.md create mode 100644 3-typing-game/solution.md diff --git a/2-terrarium/solution.md b/2-terrarium/solution.md deleted file mode 100644 index 33e3fe8..0000000 --- a/2-terrarium/solution.md +++ /dev/null @@ -1,101 +0,0 @@ -# My Terrarium -## Subtopic 1: Intro to HTML - -### Assignment -``` - -

My terrarium

- -``` -### Challenge -``` - - - - - - My Website - - -

Info about me

-
-
-

Name

-

P.Mihir

-
-
-

Bday/p> -

02-09-2005

-
-
-

Gender

-

Male

-
-
-

Address

-

Narsapur,W.G District,A.P

-
-

Education

-
-

College

-

Amrita

-
-
-

Branch

-

CSE

-
-
-

Semisterr

-

3

-
-
- - -``` ---- - -## Subtopic-2: Intro to CSS -## Assignment -![image](https://github.com/user-attachments/assets/4e0672d3-a5a1-459a-9e2d-7b985df4a5d7) - -## Challenge -``` -.jar-glossy-long{ - width: 4%; - height: 25%; - background:#eee; - border-radius: 1rem; - position: absolute; - bottom: 18%; - left: 5%; -} -.jar-glossy-short{ - width: 4%; - height: 7%; - background: white; - border-radius: 1rem; - position: absolute; - bottom: 48%; - left: 5%; -} -``` ---- - -## Subtopic-3: Intro to DOM and Closures -## ASsignment -Event Interface (DOM Element) -Event Interfae is one of the central part of DOM and it represents an event that takes place on event target. It can be triggered by clicking the mouse button, keys on the keyboard, or network change. -we might find that event used in most of websites for capturing and responding to user interactions. It is also commonly used in our daily tasks of designing and developing websites. - -A classic example of where Event interface is used is in Google's Homepage. When you start searching for something the 'input' Event triggers and it will start showing some suggestion regarding the search content. - -## Challenge -``` -terrariumElement.addEventListener("dblclick", (event) => { - let highlightColor = "#FFD700"; - terrariumElement.style.border = "solid black 2px"; - terrariumElement.style.maxWidth = "85%"; - terrariumElement.style.background = highlightColor; - }); -} -``` \ No newline at end of file diff --git a/3-typing-game/solution.md b/3-typing-game/solution.md new file mode 100644 index 0000000..e678a9a --- /dev/null +++ b/3-typing-game/solution.md @@ -0,0 +1,204 @@ +# Typing Game + +### Challenge +1. +``` +typedValueElement.removeEventListener('input'); +``` +It should written in 'if' condition where user completes the quote. + +2. +``` +typedValueElement.disabled = true; +``` +It should written in 'if' condition where user completes the quote. + +3. +HTML +``` + +``` +Javascript +``` +const modal = document.getElementById('modal'); +const msg = document.getElementById('msg'); +const closeBtn = document.getElementById('close'); + +const time = 5000; +const text = `CONGRATULATIONS! You finished in ${time / 1000} seconds.`; +msg.innerText = text; +modal.style.display = 'block'; + +closeBtn.addEventListener('click', () => { + modal.style.display = 'none'; +}); +``` + +4. +``` +const elapsedTime = new Date().getTime() - startTime; +const Score = localStorage.getItem("hs"); +if(Score != null){ + message= `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.Current highscore is ${HighScore}`; +} +if(Score>elapsedTime / 1000 || Score == null){ + message = `CONGRATULATIONS! You finished with a new Highscore of ${elapsedTime / 1000} seconds.`; + localStorage.setItem("hs",elapsedTime/1000); +} +``` + +### Assigment +HTML +``` + + + + + + word scramble + + + +
+

Word Scramble Game

+
+

Word

+

+
+
+ +
+

Result:

+
+ + +
+ +
+ + +``` +--- +CSS +``` +body{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + min-height: 50vh; +} + +.back{ + font-size: x-large; + color: whitesmoke; + background-color: rgb(57, 151, 57); + box-shadow: 0 2px 5px grey; + padding: 0% 5% 1% 5%; + text-align: center; + border-radius: 5px 0; +} + +.title{ + border-bottom: 4px dashed; + border-color: white; +} + +input{ + font-size: 20px; + padding-left: 10px; + outline: 2px grey; +} + + +.end{ + margin-bottom: 0%; + display: flex; + width: 100%; +} + +button{ + width: 48%; + padding: 1%; + margin: 1%; + background-color: rgb(41, 117, 41); + border-radius: 5px; + border-color: rgb(29, 90, 29); + font-size: large; +} +``` +--- +Javascript +``` +const words = [ + "apple", + "mountain", + "library", + "ocean", + "friend", + "dance", + "school", + "guitar", + "chocolate", + "bicycle" + ]; + + const hints = [ + "A popular fruit, often red or green", + "A large, elevated landform", + "A place where you can borrow books", + "A vast body of saltwater", + "Someone you trust and enjoy spending time with", + "A rhythmic movement to music", + "A place for learning and education", + "A stringed musical instrument", + "A sweet treat made from cacao beans", + "A two-wheeled vehicle powered by pedaling" + ]; + +let displayWord = ""; + +function shuffle(str) { + strArray = Array.from(str); + for (let i = 0; i < strArray.length - 1; ++i) { + let j = Math.floor(Math.random() * strArray.length); + let temp = strArray[i]; + strArray[i] = strArray[j]; + strArray[j] = temp; + } + return strArray.join(" "); +} + +function check() { + let input = document.getElementById("input"); + let output = document.getElementById("output"); + if ( + input.value.toLocaleLowerCase() === + displayWord.toLocaleLowerCase() + ) + output.innerHTML = "Result: Correct"; + else output.innerHTML = "Result: Incorrect"; +} + +function refresh() { + index = Math.floor(Math.random() * 5); + displayWord = words[index]; + displayHint = hints[index]; + scrambleWord = + document.getElementById("scrambleWord"); + scrambleWord.innerText = + shuffle(displayWord).toUpperCase(); + let hint = document.getElementById("hint"); + hint.innerHTML = "Hint: " + displayHint; + document.getElementById("output").innerText = "Result:"; +} + +refresh(); +``` From ed72c084718ef40b2220425911e7314cbdaebdf9 Mon Sep 17 00:00:00 2001 From: Mihir Date: Sat, 7 Dec 2024 03:30:22 +0530 Subject: [PATCH 5/5] issue-4 --- 3-typing-game/solution.md | 204 ------------------------------------- 4-bank-project/solution.md | 189 ++++++++++++++++++++++++++++++++++ 2 files changed, 189 insertions(+), 204 deletions(-) delete mode 100644 3-typing-game/solution.md create mode 100644 4-bank-project/solution.md diff --git a/3-typing-game/solution.md b/3-typing-game/solution.md deleted file mode 100644 index e678a9a..0000000 --- a/3-typing-game/solution.md +++ /dev/null @@ -1,204 +0,0 @@ -# Typing Game - -### Challenge -1. -``` -typedValueElement.removeEventListener('input'); -``` -It should written in 'if' condition where user completes the quote. - -2. -``` -typedValueElement.disabled = true; -``` -It should written in 'if' condition where user completes the quote. - -3. -HTML -``` - -``` -Javascript -``` -const modal = document.getElementById('modal'); -const msg = document.getElementById('msg'); -const closeBtn = document.getElementById('close'); - -const time = 5000; -const text = `CONGRATULATIONS! You finished in ${time / 1000} seconds.`; -msg.innerText = text; -modal.style.display = 'block'; - -closeBtn.addEventListener('click', () => { - modal.style.display = 'none'; -}); -``` - -4. -``` -const elapsedTime = new Date().getTime() - startTime; -const Score = localStorage.getItem("hs"); -if(Score != null){ - message= `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.Current highscore is ${HighScore}`; -} -if(Score>elapsedTime / 1000 || Score == null){ - message = `CONGRATULATIONS! You finished with a new Highscore of ${elapsedTime / 1000} seconds.`; - localStorage.setItem("hs",elapsedTime/1000); -} -``` - -### Assigment -HTML -``` - - - - - - word scramble - - - -
-

Word Scramble Game

-
-

Word

-

-
-
- -
-

Result:

-
- - -
- -
- - -``` ---- -CSS -``` -body{ - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - min-height: 50vh; -} - -.back{ - font-size: x-large; - color: whitesmoke; - background-color: rgb(57, 151, 57); - box-shadow: 0 2px 5px grey; - padding: 0% 5% 1% 5%; - text-align: center; - border-radius: 5px 0; -} - -.title{ - border-bottom: 4px dashed; - border-color: white; -} - -input{ - font-size: 20px; - padding-left: 10px; - outline: 2px grey; -} - - -.end{ - margin-bottom: 0%; - display: flex; - width: 100%; -} - -button{ - width: 48%; - padding: 1%; - margin: 1%; - background-color: rgb(41, 117, 41); - border-radius: 5px; - border-color: rgb(29, 90, 29); - font-size: large; -} -``` ---- -Javascript -``` -const words = [ - "apple", - "mountain", - "library", - "ocean", - "friend", - "dance", - "school", - "guitar", - "chocolate", - "bicycle" - ]; - - const hints = [ - "A popular fruit, often red or green", - "A large, elevated landform", - "A place where you can borrow books", - "A vast body of saltwater", - "Someone you trust and enjoy spending time with", - "A rhythmic movement to music", - "A place for learning and education", - "A stringed musical instrument", - "A sweet treat made from cacao beans", - "A two-wheeled vehicle powered by pedaling" - ]; - -let displayWord = ""; - -function shuffle(str) { - strArray = Array.from(str); - for (let i = 0; i < strArray.length - 1; ++i) { - let j = Math.floor(Math.random() * strArray.length); - let temp = strArray[i]; - strArray[i] = strArray[j]; - strArray[j] = temp; - } - return strArray.join(" "); -} - -function check() { - let input = document.getElementById("input"); - let output = document.getElementById("output"); - if ( - input.value.toLocaleLowerCase() === - displayWord.toLocaleLowerCase() - ) - output.innerHTML = "Result: Correct"; - else output.innerHTML = "Result: Incorrect"; -} - -function refresh() { - index = Math.floor(Math.random() * 5); - displayWord = words[index]; - displayHint = hints[index]; - scrambleWord = - document.getElementById("scrambleWord"); - scrambleWord.innerText = - shuffle(displayWord).toUpperCase(); - let hint = document.getElementById("hint"); - hint.innerHTML = "Hint: " + displayHint; - document.getElementById("output").innerText = "Result:"; -} - -refresh(); -``` diff --git a/4-bank-project/solution.md b/4-bank-project/solution.md new file mode 100644 index 0000000..ca8d3c7 --- /dev/null +++ b/4-bank-project/solution.md @@ -0,0 +1,189 @@ +# Bank-project + +## 1-template-route + +### Challenge +``` + + +const routes = { + '/credits': {templateId:'credits',title:'Bank credits'}, +}; +``` +### Assignment +``` +const routes = { + '/login': { templateId: 'login' ,title:'Bank login'}, + '/dashboard': { templateId: 'dashboard',title:'Bank dashboard', init: refresh }, + '/credits': {templateId:'credits',title:'Bank credits'}, +}; +``` +Set the title elements text to this using the following piece of code in updateroute() +``` +document.getElementById('title').innerText = route.title; +``` +console.log for the printing 'Dashboard is shown'. +``` +function updateRoute() { + const path = window.location.pathname; + const route = routes[path]; + if (!route) { + return navigate('/dashboard'); + } + if(path=='/dashboard'){ + console.log("Dashboard is shown") + } +} +``` + +## 2-forms + +### Challenge +If the account already exists using js it display error messages to the user. +``` + + +const result = await createAccount(jsonData); +if (result.error) { + return updateElement('regerror', result.error); +} +``` + +### Assignment +``` +h1, .title { + text-align: center; + color: hsl(233, 52%, 33%); + font-weight: bold; + margin-bottom: 20px; +} + +.box { + margin: auto; + background-color: #fff; + padding: 20px; + border-radius: 10px; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15); + width: 100%; + max-width: 700px; +} + +form { + display: flex; + flex-direction: column; + gap: 10px; +} + +input { + border-color: azure; + height: 30px; + width: 98%; +} + +button { + border-radius: 10px; + height: 40px; + width: 98%; + background-color: #d6eaf8; + border: 1px solid black; +} + +button:hover { + background-color: #a3e4d7; +} +``` + +## 3-data + +### Challenge +``` +@media (orientation: landscape) { + #table, #btable { + width: 200px; + background-color: #fff; + padding: 20px; + border-radius: 5px; + box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15); + display: block; + } + + #btable { + background-color: #3d49a3; + } + + #table tr { + display: flex; + flex-direction: column; + margin-bottom: 10px; + } + + #table td { + padding: 5px 0; + } +} +``` + +### Assignment +I have completed the refactoring of the code and added the comments in app.js file. + +## 4-state-management + +### Challenge +I have changed the init function to store only name and transactions +``` +const currentaccount = localStorage.getItem(storageKey); +const data = { + user: state.account.user, + transactions: state.account.transactions, +}; +if (currentaccount) { + updateState('account', JSON.parse(data)); +} +``` + +### Assignment +HTML +``` + +

ADD TRANSACTION

+
+ + + + + + +
+ + +
+
+ +``` + +Javascript +``` +let user = ""; +async function trans(event) { + event.preventDefault(); + const form = new FormData(document.getElementById('transform')); + const jsonData = JSON.stringify(Object.fromEntries(form)); + await confirmtrans(jsonData); + console.log("Transaction done"); + updateState('account', state.account); + updateDashboard(); +} +async function confirmtrans(data) { + await fetch(`http://localhost:5000/api/accounts/${user}/transactions`, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: data + }); +} +document.getElementById('transform').addEventListener('submit', trans); +```