diff --git a/week-2/week-2-async-js/easy/1-counter.js b/week-2/week-2-async-js/easy/1-counter.js new file mode 100644 index 000000000..9501d6736 --- /dev/null +++ b/week-2/week-2-async-js/easy/1-counter.js @@ -0,0 +1,4 @@ +let count = 1; +setInterval(() => { + console.log(`${count++}`); +}, 1000); \ No newline at end of file diff --git a/week-2/week-2-async-js/easy/2-counter.js b/week-2/week-2-async-js/easy/2-counter.js new file mode 100644 index 000000000..ed79a7740 --- /dev/null +++ b/week-2/week-2-async-js/easy/2-counter.js @@ -0,0 +1,7 @@ +let count = 1; +function counter(){ + console.log(`${count++}`); + setTimeout(counter, 1000); +} + +counter() diff --git a/week-2/week-2-async-js/easy/3-read-from-file.js b/week-2/week-2-async-js/easy/3-read-from-file.js new file mode 100644 index 000000000..aaf216069 --- /dev/null +++ b/week-2/week-2-async-js/easy/3-read-from-file.js @@ -0,0 +1,12 @@ +const fs = require("fs"); + +const content = fs.readFile('a.txt', 'utf-8', (err, data) => { + console.log(`File Content:\n${data}`); +}) + +console.log("Expensive Operation ongoing..."); +for(i=0; i<1000000000; i++){ + +} +console.log("Expensive Operation done.\n"); + diff --git a/week-2/week-2-async-js/easy/4-write-to-file.js b/week-2/week-2-async-js/easy/4-write-to-file.js new file mode 100644 index 000000000..11513e884 --- /dev/null +++ b/week-2/week-2-async-js/easy/4-write-to-file.js @@ -0,0 +1,7 @@ +const fs = require("fs"); + +fs.writeFile("a.txt", "Hey this is just another follow up!", "utf-8", () => { + console.log("Done."); +}); + +console.log("Writing to file ..."); \ No newline at end of file diff --git a/week-2/week-2-async-js/easy/a.txt b/week-2/week-2-async-js/easy/a.txt new file mode 100644 index 000000000..3057b31ff --- /dev/null +++ b/week-2/week-2-async-js/easy/a.txt @@ -0,0 +1 @@ +Hey this is just another follow up! \ No newline at end of file diff --git a/week-2/week-2-async-js/hard (promises)/1-promisify-setTimeout.js b/week-2/week-2-async-js/hard (promises)/1-promisify-setTimeout.js index 32a99c83f..a62fc882a 100644 --- a/week-2/week-2-async-js/hard (promises)/1-promisify-setTimeout.js +++ b/week-2/week-2-async-js/hard (promises)/1-promisify-setTimeout.js @@ -3,6 +3,9 @@ */ function wait(n) { + return new Promise((resolve, reject) => { + setTimeout( resolve, n * 1000); + }); } module.exports = wait; diff --git a/week-2/week-2-async-js/hard (promises)/2-sleep-completely.js b/week-2/week-2-async-js/hard (promises)/2-sleep-completely.js index a171170b0..6c61ce9bc 100644 --- a/week-2/week-2-async-js/hard (promises)/2-sleep-completely.js +++ b/week-2/week-2-async-js/hard (promises)/2-sleep-completely.js @@ -5,6 +5,12 @@ */ function sleep(milliseconds) { + return new Promise((resolve, reject) => { + const startTime = new Date().getTime(); + while (new Date().getTime() < startTime + milliseconds) { + resolve(); + } + }); } module.exports = sleep; diff --git a/week-2/week-2-async-js/hard (promises)/3-promise-all.js b/week-2/week-2-async-js/hard (promises)/3-promise-all.js index a57838ade..aab256393 100644 --- a/week-2/week-2-async-js/hard (promises)/3-promise-all.js +++ b/week-2/week-2-async-js/hard (promises)/3-promise-all.js @@ -5,19 +5,21 @@ */ function wait1(t) { - + return new Promise((resolve) => setTimeout(resolve, t * 1000)); } function wait2(t) { - + return new Promise((resolve) => setTimeout(resolve, t * 1000)); } function wait3(t) { - + return new Promise((resolve) => setTimeout(resolve, t * 1000)); } -function calculateTime(t1, t2, t3) { - +async function calculateTime(t1, t2, t3) { + const startTime = Date.now(); + await Promise.all([wait1(t1), wait2(t2), wait3(t3)]); + return Date.now() - startTime; } module.exports = calculateTime; diff --git a/week-2/week-2-async-js/hard (promises)/4-promise-chain.js b/week-2/week-2-async-js/hard (promises)/4-promise-chain.js index 6044e241f..77a2dfaac 100644 --- a/week-2/week-2-async-js/hard (promises)/4-promise-chain.js +++ b/week-2/week-2-async-js/hard (promises)/4-promise-chain.js @@ -6,19 +6,33 @@ */ function wait1(t) { - + return new Promise((resolve) => setTimeout(resolve, t * 1000)); } function wait2(t) { - + return new Promise((resolve) => setTimeout(resolve, t * 1000)); } function wait3(t) { - + return new Promise((resolve) => setTimeout(resolve, t * 1000)); } function calculateTime(t1, t2, t3) { + const startTime = Date.now(); + + return call(t1, t2, t3).then(() => { + return Date.now() - startTime; + }); +} +function call(t1, t2, t3) { + return wait1(t1) + .then(() => { + return wait2(t2); + }) + .then(() => { + return wait3(t3); + }); } module.exports = calculateTime; diff --git a/week-2/week-2-async-js/medium/1-file-cleaner.js b/week-2/week-2-async-js/medium/1-file-cleaner.js new file mode 100644 index 000000000..4e598903d --- /dev/null +++ b/week-2/week-2-async-js/medium/1-file-cleaner.js @@ -0,0 +1,17 @@ +const fs = require('fs'); + +fs.readFile('a.txt', 'utf-8', (err, data) => { + console.log(`Before clening: \n${data}`); + cleanFile(data); +}) + +function cleanFile(content){ + content = content.replace(/\s{2,}/g, ' ') + fs.writeFile('a.txt', content, 'utf-8', () => { + console.log('File cleaned!'); + fs.readFile("a.txt", "utf-8", (err, data) => { + console.log(data); + }); + + }) +} \ No newline at end of file diff --git a/week-2/week-2-async-js/medium/2-clock.js b/week-2/week-2-async-js/medium/2-clock.js new file mode 100644 index 000000000..44ece8f19 --- /dev/null +++ b/week-2/week-2-async-js/medium/2-clock.js @@ -0,0 +1,34 @@ +const date = new Date(); +setInterval(() => { + console.log( + `24 Hour Format - ${date + .getHours() + .toString() + .padStart(2, "0")}:${date + .getMinutes() + .toString() + .padStart(2, "0")}:${date + .getSeconds() + .toString() + .padStart(2, "0")}` + ); + //12 hour format + const hour = + date.getHours() - 12 < 0 + ? date.getHours() == 0 + ? 12 + : date.getHours() + : date.getHours() - 12; + const flag = date.getHours() > 11 ? "PM" : "AM"; + console.log( + `12 Hour Format - ${hour + .toString() + .padStart(2, "0")}:${date + .getMinutes() + .toString() + .padStart(2, "0")}:${date + .getSeconds() + .toString() + .padStart(2, "0")} ${flag}` + ); +}, 1000); diff --git a/week-2/week-2-async-js/medium/a.txt b/week-2/week-2-async-js/medium/a.txt new file mode 100644 index 000000000..5350a71cc --- /dev/null +++ b/week-2/week-2-async-js/medium/a.txt @@ -0,0 +1 @@ +Hi this is TankCodes. \ No newline at end of file diff --git a/week-2/week-2-js/easy/anagram.js b/week-2/week-2-js/easy/anagram.js index 8184c8308..b186d3ee1 100644 --- a/week-2/week-2-js/easy/anagram.js +++ b/week-2/week-2-js/easy/anagram.js @@ -5,7 +5,14 @@ */ function isAnagram(str1, str2) { - + function sortString(str) { + return str.toLowerCase().split("").sort().join("").replace(/\s/g, ""); + } + return (sortString(str1) === sortString(str2)) } +console.log(isAnagram("spar", "raps")); //true +console.log(isAnagram("spar", "rpas")); //true +console.log(isAnagram("new york times", "monkeys write")); //true + module.exports = isAnagram; diff --git a/week-2/week-2-js/easy/expenditure-analysis.js b/week-2/week-2-js/easy/expenditure-analysis.js index 09c401304..60926ddf2 100644 --- a/week-2/week-2-js/easy/expenditure-analysis.js +++ b/week-2/week-2-js/easy/expenditure-analysis.js @@ -12,9 +12,144 @@ } Output - [{ category: 'Food', totalSpent: 10 }] // Can have multiple categories, only one example is mentioned here */ +//Brute force +/* function calculateTotalSpentByCategory(transactions) { + let totalSpent = [] + for (const transaction of transactions) { + let flag = true; + for(const category of totalSpent){ + if (transaction.category === category.category){ + category.totalSpent += transaction.price + flag = false + } + } + if (flag){ + const newCategory = { + category: transaction.category, + totalSpent: transaction.price + } + totalSpent.push(newCategory); + } + } + return totalSpent; +} */ -function calculateTotalSpentByCategory(transactions) { - return []; +//Optimized +function calculateTotalSpentByCategory(transactions){ + const categoryTotals = {} + for(const transaction of transactions){ + categoryTotals[transaction.category] = (categoryTotals[transaction.category] || 0) + transaction.price + } + const result = []; + for(const category in categoryTotals){ + result.push({ + category: category, + totalSpent: categoryTotals[category] + }) + } + return result } +const transactions = [ + { + id: 1, + timestamp: 1656076800000, + price: 149, + category: "Food", + itemName: "Dinner", + }, + { + id: 2, + timestamp: 1656076800000, + price: 110, + category: "Food", + itemName: "Lunch", + }, + { + id: 3, + timestamp: 1656076800000, + price: 459, + category: "Entertainment", + itemName: "Movie", + }, + { + id: 4, + timestamp: 1656076800000, + price: 30, + category: "Food", + itemName: "Snacks", + }, + { + id: 5, + timestamp: 1656076800000, + price: 20, + category: "Transport", + itemName: "Train", + }, + { + id: 6, + timestamp: 1656076800000, + price: 200, + category: "Food", + itemName: "Dinner", + }, + { + id: 7, + timestamp: 1656076800000, + price: 50, + category: "Food", + itemName: "Lunch", + }, + { + id: 8, + timestamp: 1656076800000, + price: 340, + category: "Food", + itemName: "Pizza", + }, + { + id: 9, + timestamp: 1656076800000, + price: 200, + category: "Entertainment", + itemName: "Movie", + }, + { + id: 10, + timestamp: 1656076800000, + price: 15, + category: "Transport", + itemName: "Train", + }, + { + id: 11, + timestamp: 1656076800000, + price: 15, + category: "Transport", + itemName: "Bus", + }, + { + id: 12, + timestamp: 1656076800000, + price: 249, + category: "Entertainment", + itemName: "Netflix", + }, + { + id: 13, + timestamp: 1656076800000, + price: 30, + category: "Transport", + itemName: "Auto", + }, + { + id: 14, + timestamp: 1656076800000, + price: 100, + category: "Food", + itemName: "Momos", + }, +]; +console.log(calculateTotalSpentByCategory(transactions)); + module.exports = calculateTotalSpentByCategory; diff --git a/week-2/week-2-js/easy/findLargestElement.js b/week-2/week-2-js/easy/findLargestElement.js index 33278de43..8ea883a5b 100644 --- a/week-2/week-2-js/easy/findLargestElement.js +++ b/week-2/week-2-js/easy/findLargestElement.js @@ -6,7 +6,16 @@ */ function findLargestElement(numbers) { - + let result = numbers[0]; + for(const number of numbers){ + if (number > result){ + result = number; + } + } + return result } +const numbers = [1, 2, 3, 4, 5, 6, 1, 3, 99, 1, 3, 4234, 5, 2]; +console.log(findLargestElement(numbers)); + module.exports = findLargestElement; \ No newline at end of file diff --git a/week-2/week-2-js/hard/calculator.js b/week-2/week-2-js/hard/calculator.js index fb60142b7..9b316986a 100644 --- a/week-2/week-2-js/hard/calculator.js +++ b/week-2/week-2-js/hard/calculator.js @@ -16,6 +16,52 @@ Once you've implemented the logic, test your code by running */ -class Calculator {} +class Calculator { + constructor(result = 0) { + this.result = result; + } + add(num) { + this.result += num; + } + subtract(num) { + this.result -= num; + } + multiply(num) { + this.result *= num; + } + divide(num) { + if (num === 0) throw new Error("Division by Zero"); + this.result /= num; + } + clear() { + this.result = 0; + } + getResult() { + return this.result; + } + calculate(expression) { + if (expression.match(/[a-zA-Z!@#$^&~`|:;'",\?\\<>{}\[\]]/g)) { + throw new Error("Invalid Expression"); + } + expression = expression.replace(/\s/g, ""); + + const result = eval(expression); + if (typeof result !== "number" || !isFinite(result)) { + throw new Error("Invalid Expression"); + } + this.result = result + } +} +const calculator = new Calculator() +calculator.add(5); +console.log(calculator.getResult()); +calculator.subtract(2); +console.log(calculator.getResult()); +calculator.multiply(3); +console.log(calculator.getResult()); +calculator.divide(9); +console.log(calculator.getResult()); +calculator.calculate('10 + 2 * (6 - (4 + 1) / 2) + 7'); +console.log(calculator.getResult()); module.exports = Calculator; diff --git a/week-2/week-2-js/hard/todo-list.js b/week-2/week-2-js/hard/todo-list.js index 381d6d075..852771721 100644 --- a/week-2/week-2-js/hard/todo-list.js +++ b/week-2/week-2-js/hard/todo-list.js @@ -11,7 +11,57 @@ */ class Todo { - + constructor() { + this.todo = []; + } + add(task) { + this.todo.push(task); + } + remove(indexOfTodo) { + this.todo = this.todo.filter((task) => task !== this.todo[indexOfTodo]); + } + update(index, task) { + if (index >= 0 && index < this.todo.length) { + this.todo[index] = task; + } + } + getAll() { + return this.todo; + } + get(indexOfTodo) { + if (indexOfTodo >= 0 && indexOfTodo < this.todo.length) { + return this.todo[indexOfTodo]; + }else{ + return null + } + } + clear() { + this.todo = []; + } } +const todo = new Todo(); + +//add +todo.add("Complete Week 3 assignment"); +todo.add("Complete Week 4 assignment"); +todo.add("Complete Week 5 assignment"); +todo.add("Complete Week 6 assignment"); +console.log(todo.getAll()); + +//remove +todo.remove(1); +console.log(todo.getAll()); + +//update +todo.update(2, "Watch Cohort videos"); +console.log(todo.getAll()); + +//get task +console.log(todo.get(2)); + +//clear todo +todo.clear(); +console.log(todo.getAll()); + module.exports = Todo; diff --git a/week-2/week-2-js/medium/countVowels.js b/week-2/week-2-js/medium/countVowels.js index 49db425d6..19ab270fd 100644 --- a/week-2/week-2-js/medium/countVowels.js +++ b/week-2/week-2-js/medium/countVowels.js @@ -5,8 +5,25 @@ Once you've implemented the logic, test your code by running */ -function countVowels(str) { +/* function countVowels(str) { // Your code here + const vowels = {"a": 1, "e" : 1, "i" : 1, "o" : 1, "u" : 1}; + let count = 0; + for(let character of str){ + character = character.toLowerCase(); + if (vowels[character]){ + count += 1; + } + } + return count +} */ + +//using regex +const countVowels = str => { + return (str.match(/[aioue]/gi) || []).length; } +console.log(countVowels("abcdefg")); + + module.exports = countVowels; \ No newline at end of file diff --git a/week-2/week-2-js/medium/palindrome.js b/week-2/week-2-js/medium/palindrome.js index 3f3b9adad..c9f1f515b 100644 --- a/week-2/week-2-js/medium/palindrome.js +++ b/week-2/week-2-js/medium/palindrome.js @@ -4,7 +4,10 @@ */ function isPalindrome(str) { - return true; + return str.toLowerCase().replace(/[!?,.\s]/g, '') === str.split('').reverse().join('').toLowerCase().replace(/[!?,.\s]/g, ''); } +console.log(isPalindrome('naman')); + + module.exports = isPalindrome; diff --git a/week-2/week-2-js/medium/times.js b/week-2/week-2-js/medium/times.js index ea2d4c170..72e8d8b38 100644 --- a/week-2/week-2-js/medium/times.js +++ b/week-2/week-2-js/medium/times.js @@ -7,7 +7,19 @@ Try running it for Hint - use Date class exposed in JS There is no automated test for this one, this is more for you to understand time goes up as computation goes up */ - +function sum (num){ + let total = 0 + for (i = 1; i <= num; i++){ + total += i + } + return total +} function calculateTime(n) { - return 0.01; -} \ No newline at end of file + const currentTime = new Date(); + sum(n); + return new Date() - currentTime; +} + +console.log(calculateTime(100)); +console.log(calculateTime(100000)); +console.log(calculateTime(1000000000)); diff --git a/week-3/easy/bg-color-changer/index.html b/week-3/easy/bg-color-changer/index.html new file mode 100644 index 000000000..771411846 --- /dev/null +++ b/week-3/easy/bg-color-changer/index.html @@ -0,0 +1,64 @@ + + + + + + Bg Color Changer + + + +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+
+ Add Colors + Delete Colors + +
+
+
+ + + + diff --git a/week-3/easy/bg-color-changer/script.js b/week-3/easy/bg-color-changer/script.js new file mode 100644 index 000000000..4f99c7caf --- /dev/null +++ b/week-3/easy/bg-color-changer/script.js @@ -0,0 +1,81 @@ +const buttonContainer = document.querySelector(".button-container"); +const changeBgButtons = document.querySelectorAll(".change-bg-button"); +const addColorButton = document.querySelector(".add-color"); +const deleteColorBtn = document.querySelector(".delete-color"); +const modalContainer = document.querySelector(".modal-container"); +const saveDisplay = document.querySelector(".save-display"); + +changeBgButtons.forEach((button) => { + button.addEventListener("click", (e) => { + const body = document.body; + const color = e.target.dataset.color; + body.style.backgroundColor = color; + }); +}); + +addColorButton.addEventListener("click", (e) => { + modalContainer.classList.remove("hidden"); +}); + +deleteColorBtn.addEventListener("click", (e) => { + document + .querySelectorAll(".remove-color-button") + .forEach((btn) => btn.classList.remove("hidden")); + saveDisplay.classList.remove("hidden"); +}); + +buttonContainer.addEventListener("click", (e) => { + if (e.target.classList.contains("remove-color-button")) { + const colorButton = e.target.closest(".color-button"); + if (colorButton) { + colorButton.remove(); + } + } +}); + +saveDisplay.addEventListener("click", (e) => { + document + .querySelectorAll(".remove-color-button") + .forEach((btn) => btn.classList.add("hidden")); + saveDisplay.classList.add("hidden"); +}); + +function addColor() { + const colorName = document.querySelector("#color-name"); + const colorShade = document.querySelector("#color-shade"); + + const nameValue = colorName.value; + const shadeValue = colorShade.value; + + addButton(nameValue, shadeValue); + closeModal(); +} + +function closeModal() { + modalContainer.classList.add("hidden"); +} + +function addButton(color, shade) { + const colorButton = document.createElement("div"); + colorButton.classList.add("color-button"); + + const changeBgButton = document.createElement("button"); + changeBgButton.classList.add("change-bg-button"); + changeBgButton.textContent = color; + changeBgButton.style.backgroundColor = shade + changeBgButton.setAttribute("data-color", shade); + + changeBgButton.addEventListener("click", (e) => { + document.body.style.backgroundColor = e.target.dataset.color; + }); + + const removeColorButton = document.createElement("button"); + removeColorButton.classList.add("remove-color-button"); + removeColorButton.textContent = "❌"; + removeColorButton.classList.add("hidden"); + + colorButton.appendChild(changeBgButton); + colorButton.appendChild(removeColorButton); + + buttonContainer.appendChild(colorButton); +} diff --git a/week-3/easy/bg-color-changer/style.css b/week-3/easy/bg-color-changer/style.css new file mode 100644 index 000000000..0723d4741 --- /dev/null +++ b/week-3/easy/bg-color-changer/style.css @@ -0,0 +1,108 @@ +body { + margin: 0; + font-family: Arial, Helvetica, sans-serif; + font-size: 18px; +} +.container { + height: 100vh; + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: center; + z-index: 0; +} + +.main-container { + margin: 80px; + padding: 10px; + border: 1px solid black; + border-radius: 10px; + max-width: 70%; + height: max-content; + width: max-content; + background-color: aliceblue; +} + +.button-container { + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; +} + +.color-button { + position: relative; + margin: 5px; +} + +.change-bg-button:hover, +.remove-color-button:hover, +.modal-container button:hover, +.add-color, +.delete-color, +.save-display { + cursor: pointer; +} + +.change-bg-button { + border-radius: 10px; + padding: 10px; +} + +.remove-color-button { + font-size: 10px; + padding: 0px; + border-radius: 50%; + background-color: white; + border: none; + position: absolute; + left: -10%; + top: -10%; +} + +.function-container span { + margin: 10px; + color: rgb(62, 62, 62); + text-decoration: underline; + text-align: left; + font-size: 12px; +} + +.save-display{ + background-color: transparent; + border: none; +} + +.modal-container { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + display: flex; + flex-direction: column; + justify-content: center; + z-index: 5; + border: 1px solid black; + background-color: white; + padding: 20px; + border-radius: 10px; +} + +.modal-container label, +input, +button { + margin-top: 10px; +} +.modal-container button { + padding: 10px; + border-radius: 10px; + border: none; +} + +.modal-container input { + padding: 5px; + border-radius: 10px; +} + +.hidden{ + display: none; +} \ No newline at end of file diff --git a/week-3/medium/Form-Builder/index.html b/week-3/medium/Form-Builder/index.html new file mode 100644 index 000000000..134b497e6 --- /dev/null +++ b/week-3/medium/Form-Builder/index.html @@ -0,0 +1,89 @@ + + + + + + Dynamic Form Builder + + + +
+
+
+

+ Form Components +

+
+
Text Input
+
Checkbox
+
Radio Button
+
Submit Button
+
+
+
+
+
+
+
+ +
+ +
+
+ +
+
+ +
+ + + diff --git a/week-3/medium/Form-Builder/script.js b/week-3/medium/Form-Builder/script.js new file mode 100644 index 000000000..42975bd9c --- /dev/null +++ b/week-3/medium/Form-Builder/script.js @@ -0,0 +1,154 @@ +const textInput = document.querySelector("#text-input"); +const checkbox = document.querySelector("#checkbox"); +const radioButton = document.querySelector("#radio-button"); +const submitButton = document.querySelector("#submit-button"); +const addTextInputButton = document.querySelector(".add-text-input-button"); +const addCheckbox = document.querySelector(".add-checkbox"); +const formPreview = document.querySelector(".form-preview"); +const textInputModel = document.querySelector(".text-input-model"); +const checkboxModel = document.querySelector(".checkbox-model"); +const addCheckboxLabel = document.querySelector(".add-checkbox-label"); +const radioButtonModel = document.querySelector(".radio-button-model"); +const addRadioLabel = document.querySelector(".add-radio-label"); +const addRadioButton = document.querySelector(".add-radio-button"); + +textInput.addEventListener("click", (e) => { + textInputModel.classList.remove("hidden"); +}); + +checkbox.addEventListener("click", (e) => { + checkboxModel.classList.remove("hidden"); +}); + +addTextInputButton.addEventListener("click", (e) => { + const textLabel = document.querySelector("#text-label").value; + const textOption = document.querySelector("#text-options").value; + const textInputDivision = document.createElement("div"); + const textInputLabel = document.createElement("label"); + textInputLabel.textContent = textLabel; + const textInputType = document.createElement("input"); + textInputType.setAttribute("type", textOption); + + textInputDivision.appendChild(textInputLabel); + textInputDivision.appendChild(textInputType); + + textInputDivision.classList.add("text-input-division"); + formPreview.appendChild(textInputDivision); + + document.querySelector("#text-label").value = ""; + document.querySelector("#text-options").value = "text"; + + textInputModel.classList.add("hidden"); +}); + +addCheckbox.addEventListener("click", (e) => { + const checkboxDivision = document.createElement("div"); + checkboxDivision.classList.add("checkbox-input-division"); + + const checkboxLabel = document.querySelector("#checkbox-label").value; + const checkboxItems = document.querySelector(".checkbox-items").children; + + const checkboxTitle = document.createElement("label"); + checkboxTitle.textContent = checkboxLabel; + + checkboxDivision.appendChild(checkboxTitle); + + for (let i = 0; i < checkboxItems.length; i++) { + const element = checkboxItems[i]; + + const checkboxOption = document.createElement("div"); + checkboxOption.classList.add("checkbox-option"); + + const checkboxInput = document.createElement("input"); + checkboxInput.setAttribute("type", "checkbox"); + checkboxInput.setAttribute("value", element.value); + + const checkboxOptionLabel = document.createElement("label"); + checkboxOptionLabel.textContent = element.value; + + checkboxOption.appendChild(checkboxInput); + checkboxOption.appendChild(checkboxOptionLabel); + + checkboxDivision.appendChild(checkboxOption); + } + formPreview.appendChild(checkboxDivision); + + document.querySelector("#checkbox-label").value = ""; + document.querySelector( + ".checkbox-items" + ).innerHTML = ``; + + checkboxModel.classList.add("hidden"); +}); + +addCheckboxLabel.addEventListener("click", (e) => { + const checkboxItems = document.querySelector(".checkbox-items"); + + const newInput = document.createElement("input"); + newInput.setAttribute("type", "text"); + + checkboxItems.appendChild(newInput); +}); + +radioButton.addEventListener("click", (e) => { + radioButtonModel.classList.remove("hidden"); +}); + +addRadioLabel.addEventListener("click", (e) => { + const radioItems = document.querySelector(".radio-items"); + + const newInput = document.createElement("input"); + newInput.setAttribute("type", "text"); + + radioItems.appendChild(newInput); +}); + +addRadioButton.addEventListener("click", (e) => { + const radioDivision = document.createElement("div"); + radioDivision.classList.add("radio-input-division"); + + const radioLabel = document.querySelector("#radio-label").value; + const radioItems = document.querySelector(".radio-items").children; + + const radioTitle = document.createElement("label"); + radioTitle.textContent = radioLabel; + + radioDivision.appendChild(radioTitle); + + for (let i = 0; i < radioItems.length; i++) { + const element = radioItems[i]; + + const radioOption = document.createElement("div"); + radioOption.classList.add("radio-option"); + + const radioInput = document.createElement("input"); + radioInput.setAttribute("type", "radio"); + radioInput.setAttribute("value", element.value); + + const radioOptionLabel = document.createElement("label"); + radioOptionLabel.textContent = element.value; + + radioOption.appendChild(radioInput); + radioOption.appendChild(radioOptionLabel); + + radioDivision.appendChild(radioOption); + } + formPreview.appendChild(radioDivision); + + document.querySelector("#radio-label").value = ""; + document.querySelector(".radio-items").innerHTML = ``; + + radioButtonModel.classList.add("hidden"); +}); + +submitButton.addEventListener("click", (e) => { + const addSubmitButton = document.createElement("input"); + addSubmitButton.setAttribute("type", "submit"); + addSubmitButton.textContent = "Submit"; + + const submitButtonDivision = document.createElement("div"); + submitButtonDivision.classList.add("submit-button-division"); + + submitButtonDivision.appendChild(addSubmitButton); + formPreview.appendChild(submitButtonDivision); +}); diff --git a/week-3/medium/Form-Builder/style.css b/week-3/medium/Form-Builder/style.css new file mode 100644 index 000000000..f904b8ef3 --- /dev/null +++ b/week-3/medium/Form-Builder/style.css @@ -0,0 +1,169 @@ +body { + padding: 0; + margin: 0; + font-family: sans-serif; +} + +button:hover, .submit-button-division input:hover { + cursor: pointer; +} + +.container { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + border-radius: 10px; + padding: 0; + margin: 0; + z-index: 0; +} + +.main-container { + background-color: #f7f8fa; + display: flex; + border-radius: 10px; +} + +.form-components-container { + display: flex; + flex-direction: column; + background-color: #e7e9ed; + padding: 20px; +} + +.form-components-container h2 { + font-size: 14px; + height: fit-content; + color: #292d3a; +} + +.form-components { + display: grid; + grid-auto-columns: 1fr; + grid-template-areas: "a a"; + height: min-content; +} + +.form-components div { + background-color: white; + padding: 10px; + margin: 5px; + height: 80px; + width: 80px; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + border-radius: 10px; + border: 1px solid white; +} + +.form-components div:hover { + cursor: pointer; + border: 1px solid #292d3a; +} + +.form-preview { + display: flex; + flex-direction: column; + align-items: left; + justify-content: flex-start; + padding: 20px; + min-width: 400px; +} + +.text-input-division, +.checkbox-input-division, +.radio-input-division, +.submit-button-division { + background-color: white; + padding: 20px; + border-radius: 10px; + font-size: 14px; + margin-bottom: 10px; +} + +.text-input-division label, +.checkbox-input-division label, +.radio-input-division label { + display: block; + margin-bottom: 10px; +} + +.text-input-division input { + width: 90%; + padding: 8px; + border-radius: 10px; + border: 1px solid #292d3a; +} + +.checkbox-option { + padding: 0; +} + +.checkbox-option label { + display: inline; +} +.radio-option label { + display: inline; +} + +.text-input-model, +.checkbox-model, +.radio-button-model { + display: flex; + flex-direction: column; + padding: 20px; + height: fit-content; + border-radius: 10px; + width: 50vh; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); + background-color: white; +} + +.text-input-model label, +.text-input-model input, +.text-input-model select, +.checkbox-model label, +.checkbox-model input, +.checkbox-model select, +.radio-button-model label, +.radio-button-model input, +.radio-button-model select { + margin-bottom: 10px; +} +.text-input-model input, +.text-input-model select, +.checkbox-model input, +.checkbox-model select, +.radio-button-model input, +.radio-button-model select { + padding: 8px; + border-radius: 10px; + border: 1px solid #292d3a; +} + +.text-input-model button, +.checkbox-model button, +.radio-button-model button, +.submit-button-division input { + background-color: #043faa; + color: white; + border: none; + padding: 10px; + border-radius: 10px; + margin-top: 10px; +} + +.model-container { + position: absolute; + z-index: 2; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.hidden { + display: none; +}