diff --git a/2darray.html b/2darray.html new file mode 100644 index 0000000..399ea59 --- /dev/null +++ b/2darray.html @@ -0,0 +1,17 @@ + + + + + + Document + + + +
+ + +
+ + + + \ No newline at end of file diff --git a/arrayFunction.html b/arrayFunction.html new file mode 100644 index 0000000..e6cfa86 --- /dev/null +++ b/arrayFunction.html @@ -0,0 +1,12 @@ + + + + + + Document + + + + + + \ No newline at end of file diff --git a/budget2.html b/budget2.html new file mode 100644 index 0000000..a2d5ccf --- /dev/null +++ b/budget2.html @@ -0,0 +1,82 @@ + + + + + Budget App + + + + + + + + +
+
+
+ +
+

Budget

+

+ Value cannot be empty or negative +

+ + +
+ + +
+

Expenses

+

+ Values cannot be empty +

+ + + +
+
+ +
+
+

Total Budget

+ 0 +
+
+

Expenses

+ 0 +
+
+

Balance

+ 0 +
+
+
+ +
+

Expense List

+
+
+
+ + + + \ No newline at end of file diff --git a/budgetapp.html b/budgetapp.html new file mode 100644 index 0000000..ef94bb7 --- /dev/null +++ b/budgetapp.html @@ -0,0 +1,84 @@ + + + + + + + + Document + + + + + + +
+

BUDGET APP

+
+ +
+
+
+

Please Enter Your Budget

+ + + +
+
+ +
+
+
+

BUDGET

+ +

$

+ 0 +
+ +
+

EXPENSES

+ +

$

+ 0 +
+
+

BALANCE

+ +

$

+ 0 +
+
+
+
+
+
+
+

Please Enter Your Expense

+ + +

Please Enter Expense Amount

+ + + +
+
+ +
+
+
+
Ecpenses Title
+
Expense Value
+
Action
+
+ +
+
+ + + + + + \ No newline at end of file diff --git a/css/budget2.css b/css/budget2.css new file mode 100644 index 0000000..753b18e --- /dev/null +++ b/css/budget2.css @@ -0,0 +1,144 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: "Poppins", sans-serif; + } + body { + background-color: #004761; + } + .wrapper { + width: 90%; + font-size: 16px; + max-width: 43.75em; + margin: 1em auto; + } + .container { + width: 100%; + } + .sub-container { + width: 100%; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 3em; + } + .flex { + display: flex; + align-items: center; + } + .flex-space { + display: flex; + justify-content: space-between; + align-items: center; + } + .wrapper h3 { + color: #363d55; + font-weight: 500; + margin-bottom: 0.6em; + } + .container input { + display: block; + width: 100%; + padding: 0.6em 0.3em; + border: 1px solid #d0d0d0; + border-radius: 0.3em; + color: #414a67; + outline: none; + font-weight: 400; + margin-bottom: 0.6em; + } + .container input:focus { + border-color: #587ef4; + } + .total-amount-container, + .user-amount-container { + background-color: #ffffff; + padding: 1.25em 0.9em; + border-radius: 0.3em; + box-shadow: 0 0.6em 1.2em rgba(28, 0, 80, 0.06); + } + .output-container { + background-color: #587ef4; + color: #ffffff; + border-radius: 0.3em; + box-shadow: 0 0.6em 1.2em rgba(28, 0, 80, 0.06); + margin: 2em 0; + padding: 1.2em; + } + .output-container p { + font-weight: 500; + margin-bottom: 0.6em; + } + .output-container span { + display: block; + text-align: center; + font-weight: 400; + color: #e5e5e5; + } + .submit { + font-size: 1em; + margin-top: 0.8em; + background-color: #587ef4; + border: none; + outline: none; + color: #ffffff; + padding: 0.6em 1.2em; + border-radius: 0.3em; + cursor: pointer; + } + .list { + background-color: #ffffff; + padding: 1.8em 1.2em; + box-shadow: 0 0.6em 1.2em rgba(28, 0, 80, 0.06); + border-radius: 0.6em; + } + .sublist-content { + width: 100%; + border-left: 0.3em solid #587ef4; + margin-bottom: 0.6em; + padding: 0.5em 1em; + display: grid; + grid-template-columns: 3fr 2fr 1fr 1fr; + } + .product { + font-weight: 500; + color: #363d55; + } + .amount { + color: #414a67; + margin-left: 20%; + } + .icons-container { + width: 5em; + margin: 1.2em; + align-items: center; + } + .product-title { + margin-bottom: 1em; + } + .hide { + display: none; + } + .error { + color: #ff465a; + } + .edit { + margin-left: auto; + } + .edit, + .delete { + background: transparent; + cursor: pointer; + margin-right: 1.5em; + border: none; + color: #587ef4; + } + @media screen and (max-width: 600px) { + .wrapper { + font-size: 14px; + } + .sub-container { + grid-template-columns: 1fr; + gap: 1em; + } + } \ No newline at end of file diff --git a/css/budgetapp.css b/css/budgetapp.css new file mode 100644 index 0000000..26f48bb --- /dev/null +++ b/css/budgetapp.css @@ -0,0 +1,151 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.budget{ + font-size: 30px; + margin-top: 20px; + margin-left: 130px; +} +.row{ + display: flex; +} +.col-5{ + margin-top: 20px; + margin-left: px; +} +#button{ + border: 2px solid green; + border-radius: 10px; + margin-left: 20px; + font-size: 21px; +} +#enter{ + display: block; + margin-top: 20px; + margin-left: 20px; + font-size: 20px; +} +#bud{ + border-radius: 9px; + padding: 10px; + width: 465px; + height: 46px; + margin-top: 20px; + margin-left: 20px; + font-size: 20px; + border-color: green; +} +#error{ + display: block; + margin-top: 20px; +} +.btn{ + width: 200px; + height: 50px; + /* display: block; */ + margin-top: 20px; + margin-left: 20px; + font-size: 21px; + border-color: green; + margin-bottom: 25px; + +} +.col-4{ + font-size: 25px; + justify-content: space-between; +} +.fa-money-bill { + width: 75px; + background-image: url(../img/money-check-dollar-solid.svg); + position: relative; + background-repeat: no-repeat; + background-size: 100%; + margin-right: 20px; + +} +#buton{ + width: 100%; + height: 395px; + border: 2px solid red; + border-radius: 10px; + margin-left: 20px; + font-size: 21px; +} +#budget{ + margin-left: 30px; + margin-top: 25px; +} +#expenses{ + border-radius: 9px; + padding: 10px; + width: 450px; + height: 46px; + margin-left: 30px; + margin-top: 25px; + border-color: red; +} +.error{ + margin-left: 30px; + color: red; +} +.error1{ + margin-left: 30px; +} +.error2{ + margin-left: 30px; + display: block; +} +.amo{ + margin-left: 30px; + margin-top: 15px; + border-color: red; +} +#expenses{ + display: block; +} +#input{ + color: green; +} +#get{ + color: red; +} + +.col-4 span { + margin-left: 100px; +} +.btn{ + margin-left: 30px; + border-color: red; +} +#amount{ + padding: 10px; + width: 450px; + height: 46px; + margin-left: 30px; + margin-top: 25px; + display: block; + border-color: red; +} +#img{ + width: 40px; + margin-left: 120px; + display: block; +} +.button{ + display: flex; +} +.col-4 p{ + margin-left: 100px; + display: flex; +} +.col-6{ + display: flex; +} +.d-flex h5{ + display: flex; + justify-content: space-between; + margin-left: 100px; +} \ No newline at end of file diff --git a/css/hotelbill.css b/css/hotelbill.css new file mode 100644 index 0000000..60f07b3 --- /dev/null +++ b/css/hotelbill.css @@ -0,0 +1,89 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + background-image: url(/image/restaurant-interior.jpg); + background-size: cover; +} + +.box { + margin: auto; + margin-top: 2%; + padding: 2%; + background-image: url(/image/Screenshot\ 2023-10-08\ 124757.png); + background-size: cover; + background-position: center center; + width: 30%; + /* background-color: rgb(0, 202, 114); */ + border-radius: 20px; +} + +h1 { + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + font-style: italic; + font-size: larger; + color: rgb(28, 163, 48); + padding: 9px; +} + +label { + color: red; + font-size: small; + font-family: serif; + padding: 4px; +} + +input { + padding: 7px; + border-radius: 10px; + border-style: none; + background-color: rgb(246, 255, 0); + color: rgb(0, 142, 26); +} + +select { + background-color: rgb(246, 255, 0); + color: rgb(0, 142, 26); + padding: 7px; + border-radius: 10px; + border-style: none; +} + +#submit { + color: rgb(0, 103, 43); + background-color: rgb(0, 255, 68); +} + +table { + background-color: rgb(248, 149, 0); + border-radius: 10px; + border-style: none; +} + +th { + color: rgb(31, 116, 87); + background-color: rgb(109, 210, 0); + border-radius: 10px; + padding: 5px; + border-style: none; + +} + +td { + color: rgb(31, 116, 87); + background-color: rgb(109, 210, 0); + border-radius: 10px; + padding: 5px; + border-style: none; +} + +button { + color: rgb(185, 194, 191); + background-color: rgb(210, 25, 0); + border-radius: 10px; + padding: 5px; + border-style: none; +} \ No newline at end of file diff --git a/dom.html b/dom.html new file mode 100644 index 0000000..26377aa --- /dev/null +++ b/dom.html @@ -0,0 +1,22 @@ + + + + + + Document + + + + +
+ + + +
+
+ +
+ + + + \ No newline at end of file diff --git a/h2.html b/h2.html new file mode 100644 index 0000000..7bbf6e3 --- /dev/null +++ b/h2.html @@ -0,0 +1,99 @@ + + + + + + + Document + + + + + + + +
+
+

Hotel Reservation Form

+
+
+ + + +
+

+ +
+ + + +
+ +

+ +
+ + + +
+ +

+ +
+

No. of persons:

+ + +
+ +

+ +
+ +
+
+ +

+ + + + + + + + + + + + + + +
DateTableFoodPerson NoTotalAction
+
+ +
+ + + + + + + + \ No newline at end of file diff --git a/hotelbill.html b/hotelbill.html new file mode 100644 index 0000000..5ebf456 --- /dev/null +++ b/hotelbill.html @@ -0,0 +1,75 @@ + + + + + + + Hotel Bill + + + + +
+
+

Hotel Bill Collection System

+ +
+ + +

+ +

Select Table

+ + +

+ +

Select Food

+ + +

+ +

Select No Of Person

+ + +

+ + +
+ +

+ + + + + + + + + + +
Sr.noDateTableFoodNo.Of PersonTotalBillAction
+ +
+ +
+ + + \ No newline at end of file diff --git a/image/2307-w064-n002-541B-p1-541.jpg b/image/2307-w064-n002-541B-p1-541.jpg new file mode 100644 index 0000000..f565c85 Binary files /dev/null and b/image/2307-w064-n002-541B-p1-541.jpg differ diff --git a/image/427230-PDYP34-121.jpg b/image/427230-PDYP34-121.jpg new file mode 100644 index 0000000..d781993 Binary files /dev/null and b/image/427230-PDYP34-121.jpg differ diff --git a/image/Screenshot 2023-10-08 124757.png b/image/Screenshot 2023-10-08 124757.png new file mode 100644 index 0000000..a3039ed Binary files /dev/null and b/image/Screenshot 2023-10-08 124757.png differ diff --git a/image/restaurant-interior.jpg b/image/restaurant-interior.jpg new file mode 100644 index 0000000..47b4f25 Binary files /dev/null and b/image/restaurant-interior.jpg differ diff --git a/img/money-check-dollar-solid.svg b/img/money-check-dollar-solid.svg new file mode 100644 index 0000000..e69de29 diff --git a/js/2darray.js b/js/2darray.js new file mode 100644 index 0000000..43314f2 --- /dev/null +++ b/js/2darray.js @@ -0,0 +1,21 @@ +let arr = [ + [1,'meet',21] + [2,'dixit',20] + [3,'dhruvil',22] +] + +const display = (arr) => { + + let print = '' + + + for (let i=0; i { // console.log(index + '--' + value); // }); -//3. +// 3. // data.map((value,index) => { // console.log(index + '--' + value); // }) -//4. +// 4. // data.map((v,i) => console.log(i + '--' + v)) @@ -145,7 +145,7 @@ // --Update-- -//1. +// 1. // data[3] = 50 // console.log(data); @@ -157,19 +157,19 @@ // --Add-- -//1. +// 1. // data.push(100); // console.log(data); -//2. +// 2. // data.unshift(100); // console.log(data); -//3. +// 3. // data.splice(5,0,87) // console.log(data); @@ -179,65 +179,65 @@ // --Remove-- -//1. +// 1. // data.pop() // console.log(data); -//2. +// 2. // data.shift() // console.log(data); -//3. +// 3. // data.splice(2,3) // console.log(data); -//------------- +// ------------- // let data = [ 30, 5, 'MISTRY', 80, 60, 'Surti', 50 ]; // let data1 = [88,188]; -//------------- +// ------------- // --Array's Function's-- -//1. +// 1. // let ans = Array.isArray(data); // console.log(ans); -//2. +// 2. // let ans = data.concat(data1) // console.log(ans); -//3. +// 3. // let ans = data.some((v) => v > 50); // console.log(ans); -//4. +// 4. // let ans = data.find((v) => v > 20); // console.log(ans); -//5. +// 5. // let fullname = "MEET NILESHBHAI MISTRY"; // let ans = fullname.split(" "); // console.log(ans); -//6. +// 6. // let ans = data.slice(2,4 ); // console.log(ans); @@ -247,7 +247,7 @@ // -------TASK------- // ------------------ -//1. filter() +// 1. filter() // const Age = [25, 64, 16, 15, 34]; @@ -261,7 +261,7 @@ -//2. reduse() +// 2. reduse() // let arr = [200, 50, 25]; @@ -276,7 +276,7 @@ // callTask() //Ans: 125 - //or +// or @@ -298,7 +298,7 @@ -//3. indexOf() +// 3. indexOf() // function task() { @@ -318,7 +318,7 @@ -//4. lastindexOf +// 4. lastindexOf // function task() { // let lindexOf = 'mistrymeetteem'; @@ -353,17 +353,17 @@ // console.log(ans); -//2.filter +// 2.filter // let ans = data.filter((v,i) => v > 15 && v < 90) // console.log(ans); -//3. reduse +// 3. reduse // let ans = data1.reduce((acc,v,i) => acc + v,0) // console.log(ans); -//4. reverse +// 4. reverse // let ans = data.reverse() // console.log(ans); @@ -371,58 +371,131 @@ -//5. sort +// 5. sort -//1 +// 1 // let ans = data2.sort() // console.log(ans); //asc -//2 +// 2 // let ans = data1.sort((a,b) => a - b) // console.log(ans); -//3 +// 3 // let ans = data1.sort((a,b) => b - a) // console.log(ans); -//6.fill +// 6.fill // let ans = data.fill(10000,2,5) // console.log(ans); -//7.findIndex +// 7.findIndex // let ans = data1.findIndex((v) => v === 56) // console.log(ans); -let data = [ 10, 8, 50, 'meet', 40, 80, 90, 'meet' ]; +// let data = [ 10, 8, 50, 'meet', 40, 80, 90, 'meet' ]; -let data1 = [55, 8, 9, 877, 56, 99, 140]; +// let data1 = [55, 8, 9, 877, 56, 99, 140]; + +// let data2 = ['Mistry','Meet','Surati','Gujarati']; + + +// //8.includes + +// // let ans = data1.includes(55) +// // console.log(ans); + +// //9.every + +// // let ans = data1.every((v) => v > 0) +// // console.log(ans); + + +// //10. indexOf + +// // let ans = data.indexOf("meet") +// // console.log(ans); + + +// let ans = data.lastIndexOfayyays("meet") +// console.log(ans); + + + + + +// -----arrays task--------- +// ------------------------- + + + +// let data = [20, 49, 10, 'meet', 58, 79]; + +// let data1 = [39, 58, 88, 19, 95, 68] + +// let data2 = ['surat','mumbai','panjab','tamilnadu'] -let data2 = ['Mistry','Meet','Surati','Gujarati']; +// // 1. Finding the maximum element in an array. +// let ans = data.filter((v, i) => v > 40) +// console.log(ans); + +// or + +// let ans1 = data.filter((v, i) => { +// if (v > 15) { +// console.log(v); +// } +// }) + + + + +// 2. Finding the minimum element in an array. + + +// let ans = data.filter((v, i) => v < 50) +// console.log(ans); -//8.includes -// let ans = data1.includes(55) +// or + + +// let ans1 = data.filter((v, i) => { +// if (v < 15) { +// console.log(v); +// } +// }) + + + +// 3. Sorting an array in ascending order + +// let ans = data2.sort() // console.log(ans); -//9.every +// or -// let ans = data1.every((v) => v > 0) +// let ans = data2.sort((v,i) => v - i ) // console.log(ans); -//10. indexOf -// let ans = data.indexOf("meet") + + +// 4. Sorting an array in descending order. + +// let ans = data1.sort((v,i) => i - v) // console.log(ans); +// or -let ans = data.lastIndexOfayyays("meet") -console.log(ans); +// let ans = data.sort() +// console.log(ans); \ No newline at end of file diff --git a/js/arrayFunction.js b/js/arrayFunction.js new file mode 100644 index 0000000..1f09a70 --- /dev/null +++ b/js/arrayFunction.js @@ -0,0 +1,181 @@ +// let array1 = [15, 84, 65, 22, 45, 170, 54] + +//1. + +// const maxArr = (array1) => { +// let max = array1[0] + +// for (let i=1; i max) { +// max = array1[i] +// } +// } +// console.log(max); +// } +// maxArr(array1) + + + +//2. + +// const maxArr = (array1) => { +// let max = array1[0] + +// for (let i=1; i { +// let = newArr =[] +// for (let i=array1.length-1; i>=0; i--) { +// newArr.push(array1[i]); +// } +// console.log(newArr); +// } + +// ReversArr(array1) + +//6. Finding the sum of all elements in an array. + +// const SumArr = () => { +// sum = 0 +// for (let i=0; i { +// sum = 0 +// for (let i=0; i { +// let temp; +// for (let i=0; i { +// let uniqeArr = [] + +// arr.map((v) => { +// if (!uniqeArr === v) { +// newArr.push(v) +// } +// }) +// console.log(uniqeArr); +// } + +// dupliArr(arr2) + + + + + + +//10. Merging two arrays into a new array. + +// const mergeArr = (arr1,arr2) => { +// let newArr = [] + +// for (let i=0; i { + + +// } +// splitArr(arr1, aar2) + +//13. Rotating an array by a given number of positions. + +// const rotatingArr = (arr,n) => { +// for (let i=0; i { + +// let ans = arr.sort((a,b) => b-a) +// console.log(ans[1]); +// } + +// seclargArr(arr1) + +// 15. Finding the k-th smallest element in an array. + +// const ksmallArr = (arr, elem) => { +// let ans = arr.sort((a, b) =>a - b) +// console.log(ans[elem - 1]); +// } +// ksmallArr(arr1, 2) + diff --git a/js/budget2.js b/js/budget2.js new file mode 100644 index 0000000..82bc1d8 --- /dev/null +++ b/js/budget2.js @@ -0,0 +1,103 @@ +let totalAmount = document.getElementById("total-amount"); +let userAmount = document.getElementById("user-amount"); +const checkAmountButton = document.getElementById("check-amount"); +const totalAmountButton = document.getElementById("total-amount-button"); +const productTitle = document.getElementById("product-title"); +const errorMessage = document.getElementById("budget-error"); +const productTitleError = document.getElementById("product-title-error"); +const productCostError = document.getElementById("product-cost-error"); +const amount = document.getElementById("amount"); +const expenditureValue = document.getElementById("expenditure-value"); +const balanceValue = document.getElementById("balance-amount"); +const list = document.getElementById("list"); +let tempAmount = 0; + +//Set Budget Part +totalAmountButton.addEventListener("click", () => { + tempAmount = totalAmount.value; + //empty or negative input + if (tempAmount === "" || tempAmount < 0) { + errorMessage.classList.remove("hide"); + } else { + errorMessage.classList.add("hide"); + //Set Budget + amount.innerHTML = tempAmount; + //Set Balance + balanceValue.innerText = tempAmount - expenditureValue.innerText; + //Clear Input Box + totalAmount.value = ""; + } +}); + +//Function To Disable Edit and Delete Button +const disableButtons = (bool) => { + let editButtons = document.getElementsByClassName("edit"); + Array.from(editButtons).forEach((element) => { + element.disabled = bool; + }); +}; + +//Function To Modify List Elements +const modifyElement = (element, edit = false) => { + let parentDiv = element.parentElement; + let currentBalance = balanceValue.innerText; + let currentExpense = expenditureValue.innerText; + let parentAmount = parentDiv.querySelector(".amount").innerText; + if (edit) { + let parentText = parentDiv.querySelector(".product").innerText; + productTitle.value = parentText; + userAmount.value = parentAmount; + disableButtons(true); + } + balanceValue.innerText = parseInt(currentBalance) + parseInt(parentAmount); + expenditureValue.innerText = + parseInt(currentExpense) - parseInt(parentAmount); + parentDiv.remove(); +}; + +//Function To Create List +const listCreator = (expenseName, expenseValue) => { + let sublistContent = document.createElement("div"); + sublistContent.classList.add("sublist-content", "flex-space"); + list.appendChild(sublistContent); + sublistContent.innerHTML = `

${expenseName}

${expenseValue}

`; + let editButton = document.createElement("button"); + editButton.classList.add("fa-solid", "fa-pen-to-square", "edit"); + editButton.style.fontSize = "1.2em"; + editButton.addEventListener("click", () => { + modifyElement(editButton, true); + }); + let deleteButton = document.createElement("button"); + deleteButton.classList.add("fa-solid", "fa-trash-can", "delete"); + deleteButton.style.fontSize = "1.2em"; + deleteButton.addEventListener("click", () => { + modifyElement(deleteButton); + }); + sublistContent.appendChild(editButton); + sublistContent.appendChild(deleteButton); + document.getElementById("list").appendChild(sublistContent); +}; + +//Function To Add Expenses +checkAmountButton.addEventListener("click", () => { + //empty checks + if (!userAmount.value || !productTitle.value) { + productTitleError.classList.remove("hide"); + return false; + } + //Enable buttons + disableButtons(false); + //Expense + let expenditure = parseInt(userAmount.value); + //Total expense (existing + new) + let sum = parseInt(expenditureValue.innerText) + expenditure; + expenditureValue.innerText = sum; + //Total balance(budget - total expense) + const totalBalance = tempAmount - sum; + balanceValue.innerText = totalBalance; + //Create list + listCreator(productTitle.value, userAmount.value); + //Empty inputs + productTitle.value = ""; + userAmount.value = ""; +}); \ No newline at end of file diff --git a/js/budgetapp.js b/js/budgetapp.js new file mode 100644 index 0000000..1b4a384 --- /dev/null +++ b/js/budgetapp.js @@ -0,0 +1,18 @@ +class Budget { + constructor () { + + } + + submitBudget() { + console.log("submit thaigyu la"); + } + + submitExpense() { + console.log("tara bo kharcha che bhai"); + } +} + +let b = new Budget(); + +b.submitBudget() +b.submitExpense() \ No newline at end of file diff --git a/js/dom.js b/js/dom.js new file mode 100644 index 0000000..8c7e86d --- /dev/null +++ b/js/dom.js @@ -0,0 +1,54 @@ +// const handlClick = () => { +// console.log("Click!!"); +// } +// let divElem = document.getElementById("disp"); +// let h1Elem = document.createElement("h1"); +// let h1Text = document.createTextNode("Hello"); + +// h1Elem.appendChild(h1Text); + +// divElem.appendChild(h1Elem); + +// let aElem = document.createElement("a"); +// aElem.setAttribute("href","#"); +// aElem.setAttribute("onclick","handlClick()") +// let aText = document.createTextNode("home"); + +// aElem.appendChild(aText); +// divElem.appendChild(aElem); + + +const handlRemove = (id) => { + let div = document.getElementById("div-", + id) + console.log("remove"); + div.remove() + +} +const handlSubmit = () => { + event.preventDefault() + + let name = document.getElementById("name").value; + console.log("ok"); + + let id = Math.floor(Math.random() * 1000); + console.log(id); + + + let parentDiv = document.getElementById("disp"); + let divElem = document.createElement("div"); + divElem.setAttribute("id","div-" + id); + let divText = document.createTextNode(name); + + let btnElem = document.createElement("button"); + btnElem.setAttribute("onclick","handlRemove("+ id +")"); + + let btnText = document.createTextNode("X"); + + divElem.appendChild(divText); + parentDiv.appendChild(divElem); + + btnElem.appendChild(btnText); + parentDiv.appendChild(btnElem); + + +} \ No newline at end of file diff --git a/js/encapsulation.js b/js/encapsulation.js new file mode 100644 index 0000000..a2631f2 --- /dev/null +++ b/js/encapsulation.js @@ -0,0 +1,63 @@ +class Student { + id; + name; + #fees; + + constructor(i,n,f) { + this.id = i; + this.name = n; + this.#fees = f; + } + + displayInfo () { + console.log(this.id,this.name); + } + + + #displayFees () { + console.log(this.#fees); + } + + + displayAll () { + this.displayInfo() + this.#displayFees() + } +} + +// let s1 = new student(101,'meet',70000) + +// s1.displayAll() + +class Cource extends Student { + cource_name; + duration; + #scholership; + + constructor (i,n,f,c,d) { + super(i,n,f); + this.cource_name = c; + this.duration = d; + } + + setSutudentInfo() { + this.displayAll(); + console.log(this.cource_name,this.duration); + } + + //setter method :- Using Setter Method we can set privet data out side if the class + + + set scholership (s) { + this.#scholership = s; + } + + get scholership () { + console.log(this.#scholership); + } +} + +let c1 = new Cource(101,'meet',70000,'Full Stack','13 Months'); +c1.scholership = 17000; //setter call +c1.setSutudentInfo() +c1.scholership; //getter call \ No newline at end of file diff --git a/js/h2.js b/js/h2.js new file mode 100644 index 0000000..9b63628 --- /dev/null +++ b/js/h2.js @@ -0,0 +1,190 @@ +let updetIndex = null; +const handlesubmit = () => { + //console.log("ok"); + // event.preventDefault(); + let id = Math.floor(Math.random() * 1000); + + let date = document.getElementById("date").value; + let table = document.getElementById("table").value; + let food = document.getElementById("food").value; + let Number = document.getElementById("pnumber").value; + + let price = ""; + + if (food === "Panjabi") { + price = 250 + } else if (food === "Chinees") { + price = 150 + } else if (food === "South-Indian") { + price = 200 + } + + let total = price * Number; + + // let dateE = true; + // let tableE = true; + // let foodE = true; + // let NumberE = true; + + // if(date === '0'){ + // document.getElementById("tableerror").innerHTML = + // "Please select date"; + // }else{ + // document.getElementById("tableerror").innerHTML = ""; + // dateE = false; + + // } + + // if ( table === "0") { + // document.getElementById("tableerror").innerHTML = + // "Please select your table no"; + // } else { + // document.getElementById("tableerror").innerHTML = ""; + // tableE = false; + // } + // if (food === "0") { + // document.getElementById("fooderror").innerHTML = + // "Please select your food"; + // } else { + // document.getElementById("fooderror").innerHTML = ""; + // foodE = false; + // } + // if (Number === " ") { + // document.getElementById("personerror").innerHTML = + // "Please Enter your number"; + // } else { + // document.getElementById("personerror").innerHTML = ""; + // NumberE = false; + // } + + // if (dateE || tableE || foodE || NumberE) { + // return false; + // } else { + // return true; + // } + + + + + let tabledata = JSON.parse(localStorage.getItem("hotel")); + + if (updetIndex !== null) { + + let updatedObj = { + id: updetIndex, + date, + table, + food, + Number, + total + } + + //console.log(updatedObj); + tabledata[updetIndex] = updatedObj; + localStorage.setItem("hotel", JSON.stringify(tabledata)); + updetIndex = null; + + } else { + + let obj = { + id, + date, + table, + food, + Number, + } + if (tabledata) { + tabledata.push(obj); + localStorage.setItem("hotel", JSON.stringify(tabledata)); + + } else { + localStorage.setItem("hotel", JSON.stringify([obj])); + } + } + + window.location.reload(); +} + +const handleremove = (id) => { + //console.log(id); + let tabledata = JSON.parse(localStorage.getItem("hotel")); + + let fdata = tabledata.filter((item) => item.id != id); + localStorage.setItem("hotel", JSON.stringify(fdata)); + + window.location.reload(); +} +const handleedit = (id) => { + //console.log(id); + let tabledata = JSON.parse(localStorage.getItem("hotel")); + //console.log(tabledata); + + let index = tabledata.findIndex((item) => item.id === id); + + + document.getElementById("date").value = tabledata[index].date; + document.getElementById("table").value = tabledata[index].table; + document.getElementById("food").value = tabledata[index].food; + document.getElementById("pnumber").value = tabledata[index].Number; + + + updetIndex = index; + + // window.location.reload(); +} +const Display = () => { + let tabledata = JSON.parse(localStorage.getItem("hotel")); + let tableref = document.getElementById("disp"); + + if (tabledata) { + tabledata.map((item) => { + let newRow = document.createElement("tr"); + + let dateCell = document.createElement("td"); + let dateCellTxt = document.createTextNode(item.date); + dateCell.appendChild(dateCellTxt); + newRow.appendChild(dateCell); + tableref.appendChild(newRow); + + let tableNumberCell = document.createElement("td"); + let tableNumberCellTxt = document.createTextNode(item.table); + tableNumberCell.appendChild(tableNumberCellTxt); + newRow.appendChild(tableNumberCell); + tableref.appendChild(newRow); + + let foodCell = document.createElement("td"); + let foodCellTxt = document.createTextNode(item.food); + foodCell.appendChild(foodCellTxt); + newRow.appendChild(foodCell); + tableref.appendChild(newRow); + + let personNumberCell = document.createElement("td"); + let personNumberCellTxt = document.createTextNode(item.Number); + personNumberCell.appendChild(personNumberCellTxt); + newRow.appendChild(personNumberCell); + tableref.appendChild(newRow); + + let totalCell = document.createElement("td"); + let totalCellTxt = document.createTextNode(item.food * item.Number); + totalCell.appendChild(totalCellTxt); + newRow.appendChild(totalCell); + tableref.appendChild(newRow); + + let btnElem = document.createElement("button"); + btnElem.setAttribute("onclick", "handleremove(" + item.id + ")"); + let btnText = document.createTextNode("X"); + btnElem.appendChild(btnText); + newRow.appendChild(btnElem); + tableref.appendChild(newRow); + + let btnEdit = document.createElement("button"); + btnEdit.setAttribute("onclick", "handleedit(" + item.id + ")"); + let btneditText = document.createTextNode("E"); + btnEdit.appendChild(btneditText); + newRow.appendChild(btnEdit); + tableref.appendChild(newRow); + }) + } +} + +Display(); \ No newline at end of file diff --git a/js/hotelbill.js b/js/hotelbill.js new file mode 100644 index 0000000..8f856d7 --- /dev/null +++ b/js/hotelbill.js @@ -0,0 +1,162 @@ +let updetIndex = null; +const handleSubmit = () => { + let id = Math.floor(Math.random() * 1000); + + let date = document.getElementById("date").value; + let table = document.getElementById("table").value; + let food = document.getElementById("food").value; + let Person = document.getElementById("person").value; + + let foodName; + let rate; + + if (date === " " || table === "0" || Person === "") { + document.getElementById("d-error").innerHTML = "" + } else { + if (food === "250") { + foodName = 'Punjabi'; + rate = 250; + } else if (food === "150") { + foodName = 'chinees'; + rate = 150; + } else if (food === "200") { + foodName = 'south - indian'; + rate = 200; + } + + let total = rate * Person + let obj = { + + "Date": date, + "Table": table, + "Food": foodName, + "Parson": Person, + "TotalBill": total, + } + + + let localHotel = JSON.parse(localStorage.getItem("hoteldata")); + + if (localHotel == null) { + + } else { + localHotel.push(obj); + localStorage.setItem("hoteldata", JSON.stringify(localHotel)); + } + + } + display(); +} + + +const display = () => { + let localHotel = JSON.parse(localStorage.getItem("hoteldata")); + + let dispElem = document.getElementById("disp"); + + let finalBill = localHotel.reduce((acc, v) => acc + v.TotalBill, 0); + console.log(finalBill); + + localHotel.map((v, i) => { + // console.log(v); + let id = Math.floor(Math.random() * 1000); + + let trElem = document.createElement("tr"); + trElem.setAttribute("id", id) + + let tdElem = document.createElement("td"); + let tdTxt = document.createTextNode(i + 1) + tdElem.appendChild(tdTxt); + trElem.appendChild(tdElem); + + + let tdElem1 = document.createElement("td"); + let tdTxt1 = document.createTextNode(v.Date) + tdElem1.appendChild(tdTxt1); + trElem.appendChild(tdElem1); + + let tdElem2 = document.createElement("td"); + let tdTxt2 = document.createTextNode(v.Table) + tdElem2.appendChild(tdTxt2); + trElem.appendChild(tdElem2); + + let tdElem3 = document.createElement("td"); + let tdTxt3 = document.createTextNode(v.Food) + tdElem3.appendChild(tdTxt3); + trElem.appendChild(tdElem3); + + let tdElem4 = document.createElement("td"); + let tdTxt4 = document.createTextNode(v.Parson); + tdElem4.appendChild(tdTxt4); + trElem.appendChild(tdElem4); + + let tdElem5 = document.createElement("td"); + let tdTxt5 = document.createTextNode(v.TotalBill); + tdElem5.appendChild(tdTxt5); + trElem.appendChild(tdElem5); + + let tdElemX = document.createElement("button"); + console.log("ok"); + let tdTxtX = document.createTextNode("Delete"); + tdElemX.setAttribute("onclick", "handleremove(" + v.id + ")"); + tdElemX.appendChild(tdTxtX); + trElem.appendChild(tdElemX); + + dispElem.appendChild(trElem); + // dispElem.appendChild(divElem); + + }) + + + let trFelem = document.createElement("tr"); + + let thFelem = document.createElement("th"); + thFelem.setAttribute("colspan", "5"); + let thFTxt = document.createTextNode("Total Bill"); + + let tdFelem = document.createElement("td"); + let tdFTxt = document.createTextNode(finalBill); + + thFelem.appendChild(thFTxt); + trFelem.appendChild(thFelem); + + tdFelem.appendChild(tdFTxt); + trFelem.appendChild(tdFelem); + + dispElem.appendChild(trFelem); +} + +display(); + +const handleremove = (id) => { + console.log(id); + let localHotel = JSON.parse(localStorage.getItem("hoteldata")); + let fdata = localHotel.filter((v) => v.id != id); + + console.log(fdata); + + // localStorage.setItem("hoteldata", JSON.stringify(fdata)); + + window.location.reload(); + +} + + +const handleedit = (id) => { + //console.log(id); + let tabledata = JSON.parse(localStorage.getItem("hotel")); + //console.log(tabledata); + + let index = tabledata.findIndex((item) => item.id === id); + + + document.getElementById("date").value = tabledata[index].date; + document.getElementById("tnumber").value = tabledata[index].table; + document.getElementById("food").value = tabledata[index].food; + document.getElementById("pnumber").value = tabledata[index].Number; + + + updetIndex = index; + + // window.location.reload(); +} \ No newline at end of file diff --git a/js/object.js b/js/object.js new file mode 100644 index 0000000..e69de29 diff --git a/js/oops.js b/js/oops.js new file mode 100644 index 0000000..8a51a43 --- /dev/null +++ b/js/oops.js @@ -0,0 +1,120 @@ +// class employee { +// id; +// name; +// salary; + +// constructor(i,n,s) { +// this.is = i; +// this.name = n; +// this.salary = s; +// } + +// getAllInfo = () => { +// console.log(this.id , this.name , this.salary); +// } +// } + +// class bouns extends employee { +// bounsAmt; +// Per; + +// constructor(id,name,salary,per) { +// super(id,name,salary,per) + +// this.per = per +// } + +// calculatBouns = () => { +// let b = this.salary * this.Per; +// console.log("Your Bouns Is:",b); +// } +// } + +// let b1 = new bouns (102,'dhruvil',40000,0.10 ) + +// b1.getAllInfo() +// b1.calculatBouns() + + +// // e1.getAllInfo() + + +// class computer { +// name; +// price = 70000; +// company; + +// constructor (name,company) { +// this.name = name; +// this.company = company +// } +// basic_detail = () => { +// console.log("computer name is: ",this.name); +// console.log("computer Company is: ",this.company); +// console.log("computer price is:" ,this.price); +// } +// } +// class processor extends computer { +// proname; +// version; + +// constructor (name,company,proname,version) { +// super(name,company) +// this.proname = proname; +// this.version = version; + +// } +// allDedail = () => { +// console.log("computer Company is: ",this.company); +// console.log("computer name is: ",this.name); +// console.log("computer price is:" ,this.price); +// console.log("processor Is:",this.proname); +// console.log("version is",this.version); +// } +// } +// let c1 = new processor('pavilion','hp','i5','13th'); +// // console.log(detail); + +// c1.allDedail() + +// class Car { +// model_name; +// company; +// man_year = 2020; +// price = 2500000; + +// constructor(model_name, company) { +// this.model_name = model_name; +// this.company = company +// } + +// displayInfo = () => { +// console.log("Your Model Name:", this.model_name); +// console.log("Your Company Name Is:", this.company); +// console.log("Your Manufacturing Year", this.man_year); +// console.log("Your Price:", this.price); +// } +// } + + + +// class Model extends Car { +// name; +// expiry; + +// constructor(model_name, company, name, expiry) { +// super(model_name, company) +// this.name = name; +// this.expiry = expiry; +// } + +// alldisplayInfo = () => { +// this.displayInfo() +// console.log("Your Name Is:", this.name); +// console.log("Your Expiry Year:", this.expiry); +// } +// } + + +// let m1 = new Model('charger', 'dodge', 'meet', 2045) +// m1.alldisplayInfo(); \ No newline at end of file diff --git a/js/storage.js b/js/storage.js new file mode 100644 index 0000000..a1d7ff9 --- /dev/null +++ b/js/storage.js @@ -0,0 +1,53 @@ +// localStorage.setItem('firstname','meet') +// localStorage.setItem('lastname','mistry') +// // console.log(localStorage.getItem('firstname')); +// localStorage.removeItem('lastname') + + + +// // sessionStorage.setItem('location','surat') +// // sessionStorage.removeItem('location') + +// // console.log(sessionStorage.getItem('location')); + + + +const handlSubmit = () => { + + + let localdata = JSON.parse(localStorage.getItem("name")); + + let name = document.getElementById("name").value; + + console.log(name); + + if (localdata) { + localdata.push(name); + + localStorage.setItem("name", JSON.stringify(localdata)); + } else { + + localStorage.setItem("name", JSON.stringify([name])); + } + + + // arr.push(name); + +} + +const Display = () => { + let data = JSON.parse(localStorage.getItem("name")); + let disElem = document.getElementById("disp") + disElem.innerHTML = "" + + + data.map((l) => { + let liElem = document.createElement("li"); + let liText = document.createTextNode(l) + + liElem.appendChild(liText); + disElem.appendChild(liElem); + }); +} + +Display() \ No newline at end of file diff --git a/js/todo.js b/js/todo.js new file mode 100644 index 0000000..ebe1c4f --- /dev/null +++ b/js/todo.js @@ -0,0 +1,42 @@ +let array = []; +let update = null; + +const handleremove = (i) => { + + array.splice(i , 1); + + display(); +} +const handleEdit = (i) => { + update = i; + document.getElementById("name").value = array[i]; + +} + +const display = () => { + let ulElem = document.getElementById("disp"); + + let liElem = document.createElement("li"); + let liText = document.createTextNode("100"); + + liElem.appendChild(liText); + ulElem.appendChild(liElem); + + + +} + +const handledetail = () => { + event.preventDefault(); + let name = document.getElementById("name").value; + + if (update !== null || update == 0) { + array[update] = name; + } else { + array.push(name); + } + update = null; + document.getElementById("name").value = ""; + + display(); +} \ No newline at end of file diff --git a/objects.html b/objects.html new file mode 100644 index 0000000..712e43a --- /dev/null +++ b/objects.html @@ -0,0 +1,12 @@ + + + + + + Document + + + + + + \ No newline at end of file diff --git a/oops.html b/oops.html new file mode 100644 index 0000000..42cd706 --- /dev/null +++ b/oops.html @@ -0,0 +1,18 @@ + + + + + + Document + + + + +

oops

+ + + + + + + \ No newline at end of file diff --git a/storage.html b/storage.html new file mode 100644 index 0000000..9c38e22 --- /dev/null +++ b/storage.html @@ -0,0 +1,20 @@ + + + + + + Document + + +
+ + + + +
    + +
+ + + + \ No newline at end of file diff --git a/todo.html b/todo.html new file mode 100644 index 0000000..19d8f0f --- /dev/null +++ b/todo.html @@ -0,0 +1,21 @@ + + + + + + Document + + + +
+ + + + + +
    + +
+ + + \ No newline at end of file
sr nonameage