diff --git a/JS Projects/Budgetry - Expense Tracker App/budget.js b/JS Projects/Budgetry - Expense Tracker App/budget.js new file mode 100644 index 00000000..a895a987 --- /dev/null +++ b/JS Projects/Budgetry - Expense Tracker App/budget.js @@ -0,0 +1,102 @@ +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 +totalAmountButton.addEventListener("click",()=>{ + tempAmount= totalAmount.value; + + if(tempAmount=="" || tempAmount<0){ + errorMessage.classList.remove("hide"); + } + else + { + errorMessage.classList.add("hide"); + + amount.innerHTML=tempAmount; + //set balance + balanceValue.innerText= tempAmount-expenditureValue.innerText; + //clear input box + totalAmount.value=""; + } +}); + //disable edit and delete button + const disableButtons = (bool)=> { + let editButtons = document.getElementsByClassName("edit"); + Array.from(editButtons).forEach(element =>{ + element.disabled = bool; + }); + }; + //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(); + }; + + + //create Expense 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 ="24px"; + editButton.addEventListener("click", ()=>{ + modifyElement(editButton,true); + }); + let deleteButton = document.createElement("button"); + deleteButton.classList.add("fa-solid","fa-trash-can","delete"); + deleteButton.style.fontSize= "24px"; + deleteButton.addEventListener("click", ()=>{ + modifyElement(deleteButton); + }); + subListContent.appendChild(editButton); + subListContent.appendChild(deleteButton); + document.getElementById("list").appendChild(subListContent); + }; + + //adding expenses + checkAmountButton.addEventListener("click",()=>{ + + if(!userAmount.value || !productTitle.value){ + productTitleError.classList.remove("hide"); + return false; + } + //enable buttons + disableButtons(false); + //total expense + let expenditure = parseInt(userAmount.value); + let sum = parseInt(expenditureValue.innerText)+expenditure; + expenditureValue.innerText=sum; + //balance + const totalBalance = tempAmount-sum; + balanceValue.innerText = totalBalance; + //add to list + listCreator(productTitle.value, userAmount.value); + + productTitle.value=""; + userAmount.value=""; + }); \ No newline at end of file diff --git a/JS Projects/Budgetry - Expense Tracker App/index.html b/JS Projects/Budgetry - Expense Tracker App/index.html new file mode 100644 index 00000000..0dd7a0b9 --- /dev/null +++ b/JS Projects/Budgetry - Expense Tracker App/index.html @@ -0,0 +1,58 @@ + + + + + + + + + + Expense Tracker + + +
+
Your Inventory
+
+
+
+
+ +
+

Budget

+

Value cannot be empty or negative

+ + +
+ +
+

Expenses

+

Value cannot be empty or negative

+ + + +
+
+ +
+
+

Total Budget

+ 0 +
+
+

Expenses

+ 0 +
+
+

Balance

+ 0 +
+
+
+
+

Expense List

+
+
+
+ + + \ No newline at end of file diff --git a/JS Projects/Budgetry - Expense Tracker App/style.css b/JS Projects/Budgetry - Expense Tracker App/style.css new file mode 100644 index 00000000..e84585cd --- /dev/null +++ b/JS Projects/Budgetry - Expense Tracker App/style.css @@ -0,0 +1,158 @@ +*{ + padding:0; + margin:0; + box-sizing: border-box; + font-family: 'Varela Round', sans-serif; +} +body{ + background-color: #9a9b9c7a; +} +.header{ + display: flex; + align-items: center; + justify-content: center; + margin-top: 2.5em; + margin-bottom: 1em; + font-size: 28px; + font-weight: bold; +} +.wrapper{ + width:90%; + font-size:15px; + max-width: 45rem; + margin: 1rem 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: bold; + margin-bottom: 0.7em; +} +.container input{ + display: block; + width:100%; + padding: 0.8em; + font-size: 14px; + border: 1px solid #d0d0d0; + border-radius: 0.3em; + color:#414a67; + outline: none; + font-weight: 400; + margin-bottom: 0.9em; +} +.container input:focus{ + border-color:rgb(36, 127, 212); +} +.total-amount-container, .user-amount-container{ + background-color: #ffffff; + padding: 1.5em; + border-radius: 0.4em; + box-shadow: 0 0.6em 1.2em rgba(28,0,80,0.06); +} + +.output-container{ + background-color: rgb(36, 127, 212); + color: #ffffff; + border-radius: 0.3em; + box-shadow: 0 0.6em 1.2em rgba(28,0,80,0.06); + font-weight: 500; + margin: 2em 0; + padding:1.2em; +} +.output-container p{ + font-weight: 500; + margin-bottom:0.5em; +} +.output-container span{ + display: block; + text-align: center; + font-weight: 400; +} +.submit{ + font-size: 1em; + margin-top: 0.8em; + background-color:rgb(36, 127, 212) ; + border:none; + outline: none; + color: #ffffff; + border-radius: 0.4em; + padding: 0.5em 0.8em; + cursor:pointer; +} +.submit:hover{ + background-color: rgb(14, 71, 124) ; +} +.list{ + background-color: #ffffff; + padding: 1.5em; + box-shadow: 0 0.6em 1.2em rgba(28,0,80,0.06); + border-radius: 0.3em; +} +.sublist-content{ + width:100%; + border-left: 0.3em solid rgb(36, 127, 212); + margin-bottom:0.6em; + padding: 0.5em 0; +} +.product{ + font-weight: 500; + margin-left: 1.5em; + color: #363d55; +} +.amount{ + color: #363d55; + margin-left: 20%; +} +.icons-container{ + width: 5em; + margin: 1.2em; + align-items: center; +} +.product-title{ + margin-bottom: 1em; +} +.hide{ + display:none; +} +.error{ + color:rgb(231, 52, 52) +} +.edit{ + margin-left: auto; +} +.edit, .delete{ + background: transparent; + cursor:pointer; + margin-right: 1.5em; + border:none; + color:rgb(36, 127, 212); +} +.edit:hover, .delete:hover{ + color:rgb(14, 71, 124); +} +@media screen and (max-width:600px){ + .wrapper{ + font-size: 14px; + } + .sub-container{ + grid-template-columns: 1fr; + } +} \ No newline at end of file diff --git a/JS Projects/Quizzzeerrrrrr Quiz Web App/images/correct.png b/JS Projects/Quizzzeerrrrrr Quiz Web App/images/correct.png new file mode 100644 index 00000000..3e44c246 Binary files /dev/null and b/JS Projects/Quizzzeerrrrrr Quiz Web App/images/correct.png differ diff --git a/JS Projects/Quizzzeerrrrrr Quiz Web App/images/logo.png b/JS Projects/Quizzzeerrrrrr Quiz Web App/images/logo.png new file mode 100644 index 00000000..12f043c7 Binary files /dev/null and b/JS Projects/Quizzzeerrrrrr Quiz Web App/images/logo.png differ diff --git a/JS Projects/Quizzzeerrrrrr Quiz Web App/images/qimg1.jpg b/JS Projects/Quizzzeerrrrrr Quiz Web App/images/qimg1.jpg new file mode 100644 index 00000000..2e2bee00 Binary files /dev/null and b/JS Projects/Quizzzeerrrrrr Quiz Web App/images/qimg1.jpg differ diff --git a/JS Projects/Quizzzeerrrrrr Quiz Web App/images/qimg2.jpg b/JS Projects/Quizzzeerrrrrr Quiz Web App/images/qimg2.jpg new file mode 100644 index 00000000..18fa5404 Binary files /dev/null and b/JS Projects/Quizzzeerrrrrr Quiz Web App/images/qimg2.jpg differ diff --git a/JS Projects/Quizzzeerrrrrr Quiz Web App/images/qimg3.jpg b/JS Projects/Quizzzeerrrrrr Quiz Web App/images/qimg3.jpg new file mode 100644 index 00000000..73e69859 Binary files /dev/null and b/JS Projects/Quizzzeerrrrrr Quiz Web App/images/qimg3.jpg differ diff --git a/JS Projects/Quizzzeerrrrrr Quiz Web App/images/wrong.png b/JS Projects/Quizzzeerrrrrr Quiz Web App/images/wrong.png new file mode 100644 index 00000000..5efb3a5f Binary files /dev/null and b/JS Projects/Quizzzeerrrrrr Quiz Web App/images/wrong.png differ diff --git a/JS Projects/Quizzzeerrrrrr Quiz Web App/index.html b/JS Projects/Quizzzeerrrrrr Quiz Web App/index.html new file mode 100644 index 00000000..c526c83f --- /dev/null +++ b/JS Projects/Quizzzeerrrrrr Quiz Web App/index.html @@ -0,0 +1,80 @@ + + + + + + + + + Quizzzeerrrrrr + + +
+
Quizzzeerrrrrr +
+
+
+

Instructions

+

Total number of questions:

+

Correct Answer: 1 Point

+

Wrong Answer: 0 Point

+

Once you move to the next question, you won't be able to come back to previous questions. So attempt carefully.

+

You can attempt the quiz any number of times. After the end of each attempt your results will show up.

+ +
+ +
+
+
+
Time Left
+
10
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+

Thank You for taking the Quiz!

+

Your Result

+ + + + + + + + + + + + + + + + + + + + + + + + + +
Total Questions
Attempt
Correct
Wrong
Percentage
Your Total Score
+ + +
+ + + + \ No newline at end of file diff --git a/JS Projects/Quizzzeerrrrrr Quiz Web App/js/app.js b/JS Projects/Quizzzeerrrrrr Quiz Web App/js/app.js new file mode 100644 index 00000000..30cee2b3 --- /dev/null +++ b/JS Projects/Quizzzeerrrrrr Quiz Web App/js/app.js @@ -0,0 +1,206 @@ +const questionNumber = document.querySelector(".question-number"); +const questionText = document.querySelector(".question-text"); +const optionContainer = document.querySelector(".option-container"); +const answersIndicatorContainer = document.querySelector(".answers-indicator"); +const homeBox = document.querySelector(".home-box"); +const quizBox = document.querySelector(".quiz-box"); +const resultBox = document.querySelector(".result-box"); +const timeCount = document.querySelector(".timer .timer_sec"); + +let questionLimit= 15; //quiz.length if you want all questions +let questionCounter = 0; +let currentQuestion; +let availableQuestions=[]; +let availableOptions=[]; +let correctAnswer =0; +let attempts=0; +let counter; +let timeValue=10; + +// push the questions into availableQuestions Array +function setAvailableQuestions(){ + const totalQuestion = quiz.length; + for(let i=0; i< totalQuestion;i++){ + availableQuestions.push(quiz[i]); + } +} +//set new question no, question and options +function getNewQuestion(){ + console.log(availableQuestions); + console.log(quiz.length); + //question number + questionNumber.innerHTML = "Question " + (questionCounter+1)+" of " + questionLimit; + + const questionIndex = availableQuestions[Math.floor(Math.random() *availableQuestions.length)] + currentQuestion=questionIndex; + questionText.innerHTML = currentQuestion.q; + const index1 = availableQuestions.indexOf(questionIndex);//get position of 'questionIndex' + + availableQuestions.splice(index1,1);//removes the question already shown to avoid repetition + console.log(questionIndex); + console.log(availableQuestions); + if(currentQuestion.hasOwnProperty("img")){ + const img = document.createElement("img"); + img.src = currentQuestion.img; + questionText.appendChild(img); + } + //length of options array + const optionLen = currentQuestion.options.length; + for(let i=0;i