├── README.md ├── Scratch Card ├── index.html ├── style.css └── script.js ├── Drawing App ├── index.html ├── style.css └── script.js ├── Text to Speech Generator ├── index.html ├── script.js └── style.css ├── Captcha Generator ├── index.html ├── style.css └── script.js ├── Calculator ├── style.css ├── script.js └── index.html ├── Tic Tac Toe ├── index.html ├── style.css └── script.js └── Loan EMI Calculator ├── index.html ├── script.js └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # Practice Projects 2 | 3 | A collection of practice projects for learning web development concepts and building coding skills. 4 | ✨ Don't forget to give it a star! 5 | 6 | Follow [@coding_dev_](https://www.instagram.com/coding_dev_) on Instagram for amazing projects like this. 7 | -------------------------------------------------------------------------------- /Scratch Card/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Scratch Card 6 | 7 | 11 | 12 | 13 | 14 | 15 |

16 |

17 |

You Won

18 |

$10

19 |

20 |

21 |

22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /Drawing App/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | The Drawing App 9 | 10 | 11 |

12 |

13 |

14 |

15 |

16 |

17 |

18 | 19 | 20 |

21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /Text to Speech Generator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Text To Speech in JavaScript 6 | 7 | 8 | 9 | 10 |

11 |

Text To Speech

12 | 25 |

26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /Captcha Generator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Captcha Generator 9 | 10 | 11 | 12 | 13 | 14 | 15 |

16 |

Captcha Generator

17 |

18 | 19 | 22 |

23 |

24 | 25 |

26 |

Entered captcha is correct

27 |

28 | 29 |

30 |

31 | 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /Scratch Card/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | body { 7 | height: 100vh; 8 | background: #D1B9F9; 9 | } 10 | .container { 11 | width: 31em; 12 | height: 31em; 13 | position: absolute; 14 | transform: translate(-50%, -50%); 15 | top: 50%; 16 | left: 50%; 17 | border-radius: 0.6em; 18 | } 19 | .base, 20 | #scratch { 21 | height: 200px; 22 | width: 200px; 23 | position: absolute; 24 | transform: translate(-50%, -50%); 25 | top: 50%; 26 | left: 50%; 27 | text-align: center; 28 | cursor: grabbing; 29 | border-radius: 0.3em; 30 | } 31 | .base { 32 | background-color: #ffffff; 33 | font-family: "Poppins", sans-serif; 34 | display: flex; 35 | flex-direction: column; 36 | align-items: center; 37 | justify-content: center; 38 | box-shadow: 0 1.2em 2.5em rgba(16, 2, 96, 0.15); 39 | } 40 | .base h3 { 41 | font-weight: 600; 42 | font-size: 1.5em; 43 | color: #17013b; 44 | } 45 | .base h4 { 46 | font-weight: 400; 47 | color: #746e7e; 48 | } 49 | #scratch { 50 | -webkit-tap-highlight-color: transparent; 51 | -webkit-touch-callout: none; 52 | -webkit-user-select: none; 53 | user-select: none; 54 | } 55 | -------------------------------------------------------------------------------- /Drawing App/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | .nav{ 7 | width: 310px; 8 | height: 50px; 9 | position: fixed; 10 | top: 0; 11 | left: 50%; 12 | padding-top: 50px; 13 | transform: translateX(-50%); 14 | display: flex; 15 | align-items: center; 16 | justify-content: space-around; 17 | transition: opacity .5s; 18 | } 19 | 20 | .clr{ 21 | height: 30px; 22 | width: 30px; 23 | background-color: blue; 24 | border-radius: 50%; 25 | border: 3px solid rgb(214, 214, 214); 26 | transition: transform .5s; 27 | } 28 | .clr:hover{ 29 | transform: scale(1.2); 30 | } 31 | .clr:nth-child(1){ 32 | background-color: #000; 33 | } 34 | .clr:nth-child(2){ 35 | background-color: #EF626C; 36 | } 37 | .clr:nth-child(3){ 38 | background-color: #fdec03; 39 | } 40 | .clr:nth-child(4){ 41 | background-color: #24d102; 42 | } 43 | .clr:nth-child(5){ 44 | background-color: #fff; 45 | } 46 | 47 | button{ 48 | border: none; 49 | outline: none; 50 | padding: .6em 1em; 51 | border-radius: 3px; 52 | background-color: #03bb56; 53 | color: #fff; 54 | cursor: pointer; 55 | } 56 | .save{ 57 | background-color: #0f65d4; 58 | } 59 | -------------------------------------------------------------------------------- /Calculator/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | font-family: "Roboto Mono", monospace; 6 | } 7 | body { 8 | height: 100vh; 9 | background-color: #3BAA80; 10 | } 11 | .calculator { 12 | width: 400px; 13 | background-color: #2E8463; 14 | padding: 50px 30px; 15 | position: absolute; 16 | transform: translate(-50%, -50%); 17 | top: 50%; 18 | left: 50%; 19 | border-radius: 8px; 20 | box-shadow: 0 20px 50px rgb(40,113,85, 0.4); 21 | } 22 | .display { 23 | width: 100%; 24 | } 25 | .display input { 26 | width: 100%; 27 | padding: 15px 10px; 28 | text-align: right; 29 | border: none; 30 | background-color: transparent; 31 | color: #ffffff; 32 | font-size: 35px; 33 | } 34 | .display input::placeholder { 35 | color: #B9B6C8; 36 | } 37 | .buttons { 38 | display: grid; 39 | grid-template-columns: repeat(4, 1fr); 40 | grid-gap: 20px; 41 | margin-top: 40px; 42 | } 43 | .buttons input[type="button"] { 44 | font-size: 20px; 45 | padding: 17px; 46 | border: none; 47 | background-color: transparent; 48 | color: #ffffff; 49 | cursor: pointer; 50 | border-radius: 5px; 51 | } 52 | input[type="button"]#equal { 53 | grid-row: span 2; 54 | background-color: #FA726B; 55 | } 56 | input[type="button"][value="0"] { 57 | grid-column: span 2; 58 | } 59 | -------------------------------------------------------------------------------- /Tic Tac Toe/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Tic-Tac-Toe 12 | 13 | 14 | 15 |

16 |

17 |

Tic Tac Toe

18 |

19 |

20 | Player X's turn 21 |

22 |

23 |

24 |

25 |

26 |

27 |

28 |

29 |

30 |

31 |

32 |

33 | 34 |

35 | 36 |

37 |

38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /Drawing App/script.js: -------------------------------------------------------------------------------- 1 | let canvas = document.getElementById("canvas"); 2 | canvas.height = window.innerHeight; 3 | canvas.width = window.innerWidth; 4 | let ctx = canvas.getContext("2d"); 5 | ctx.lineWidth = 5; 6 | 7 | let prevX = null; 8 | let prevY = null; 9 | 10 | let draw = false; 11 | 12 | let clrs = document.querySelectorAll(".clr"); 13 | clrs = Array.from(clrs); 14 | clrs.forEach(clr => { 15 | clr.addEventListener("click", () => { 16 | ctx.strokeStyle = clr.dataset.clr; 17 | }) 18 | }) 19 | 20 | let clearBtn = document.querySelector(".clear"); 21 | clearBtn.addEventListener("click", () => { 22 | ctx.clearRect(0, 0, canvas.width, canvas.height); 23 | }) 24 | 25 | let saveBtn = document.querySelector(".save"); 26 | saveBtn.addEventListener("click", () => { 27 | let data = canvas.toDataURL("imag/png"); 28 | let a = document.createElement("a"); 29 | a.href = data; 30 | a.download = "sketch.png"; 31 | a.click(); 32 | }) 33 | 34 | window.addEventListener("mousedown", (e) => draw = true); 35 | window.addEventListener("mouseup", (e) => draw = false); 36 | 37 | window.addEventListener("mousemove", function(e){ 38 | if(prevX == null || prevY == null || !draw){ 39 | prevX = e.clientX; 40 | prevY = e.clientY; 41 | return; 42 | } 43 | 44 | let mouseX = e.clientX; 45 | let mouseY = e.clientY; 46 | ctx.beginPath(); 47 | ctx.moveTo(prevX, prevY); 48 | ctx.lineTo(mouseX, mouseY); 49 | ctx.stroke(); 50 | 51 | prevX = e.clientX; 52 | prevY = e.clientY; 53 | }) 54 | -------------------------------------------------------------------------------- /Tic Tac Toe/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | font-family: 'Itim', cursive; 5 | } 6 | 7 | .background { 8 | background-color: #12181B; 9 | height: 100vh; 10 | padding-top: 1px; 11 | } 12 | 13 | .title { 14 | color: white; 15 | text-align: center; 16 | font-size: 40px; 17 | margin-top: 10%; 18 | } 19 | 20 | .display { 21 | color: white; 22 | font-size: 25px; 23 | text-align: center; 24 | margin-top: 1em; 25 | margin-bottom: 1em; 26 | } 27 | 28 | .hide { 29 | display: none; 30 | } 31 | 32 | .container { 33 | margin: 0 auto; 34 | display: grid; 35 | grid-template-columns: 33% 33% 33%; 36 | grid-template-rows: 33% 33% 33%; 37 | max-width: 300px; 38 | 39 | } 40 | 41 | .tile { 42 | border: 1px solid white; 43 | min-width: 100px; 44 | min-height: 100px; 45 | display: flex; 46 | justify-content: center; 47 | align-items: center; 48 | font-size: 50px; 49 | cursor: pointer; 50 | } 51 | 52 | .playerX { 53 | color: #09C372; 54 | } 55 | 56 | .playerO { 57 | color: #498AFB; 58 | } 59 | 60 | .controls { 61 | display: flex; 62 | flex-direction: row; 63 | justify-content: center; 64 | align-items: center; 65 | margin-top: 1em; 66 | } 67 | 68 | .controls button { 69 | color: white; 70 | padding: 8px; 71 | border-radius: 8px; 72 | border: none; 73 | font-size: 20px; 74 | margin-left: 1em; 75 | cursor: pointer; 76 | } 77 | 78 | .restart { 79 | background-color: #498AFB; 80 | } 81 | 82 | #reset { 83 | background-color: #FF3860; 84 | } 85 | -------------------------------------------------------------------------------- /Calculator/script.js: -------------------------------------------------------------------------------- 1 | let equal_pressed = 0; 2 | //Refer all buttons excluding AC and DEL 3 | let button_input = document.querySelectorAll(".input-button"); 4 | //Refer input,equal,clear and erase 5 | let input = document.getElementById("input"); 6 | let equal = document.getElementById("equal"); 7 | let clear = document.getElementById("clear"); 8 | let erase = document.getElementById("erase"); 9 | 10 | window.onload = () => { 11 | input.value = ""; 12 | }; 13 | 14 | //Access each class using forEach 15 | button_input.forEach((button_class) => { 16 | button_class.addEventListener("click", () => { 17 | if (equal_pressed == 1) { 18 | input.value = ""; 19 | equal_pressed = 0; 20 | } 21 | //display value of each button 22 | input.value += button_class.value; 23 | }); 24 | }); 25 | 26 | //Solve the user's input when clicked on equal sign 27 | equal.addEventListener("click", () => { 28 | equal_pressed = 1; 29 | let inp_val = input.value; 30 | try { 31 | //evaluate user's input 32 | let solution = eval(inp_val); 33 | //True for natural numbers 34 | //false for decimals 35 | if (Number.isInteger(solution)) { 36 | input.value = solution; 37 | } else { 38 | input.value = solution.toFixed(2); 39 | } 40 | } catch (err) { 41 | //If user has entered invalid input 42 | alert("Invalid Input"); 43 | } 44 | }); 45 | 46 | //Clear Whole Input 47 | clear.addEventListener("click", () => { 48 | input.value = ""; 49 | }); 50 | //Erase Single Digit 51 | erase.addEventListener("click", () => { 52 | input.value = input.value.substr(0, input.value.length - 1); 53 | }); 54 | -------------------------------------------------------------------------------- /Loan EMI Calculator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Loan EMI Calculator w/ Javascript 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

17 |

Loan EMI Calculator

18 | 19 |

20 |

21 | Loan Amount (Rs.): 22 | 23 |

24 |

25 | Loan Tenure (Year.): 26 | 27 |

28 |

29 | Interest Rate (%): 30 | 31 |

32 |

33 | 34 |

35 |

36 | 37 |

38 | 39 |

40 |

Monthly Loan EMI:
Principle Amount:
Loan on Interest:
Total Amount to be paid:

46 |

47 |

48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /Loan EMI Calculator/script.js: -------------------------------------------------------------------------------- 1 | const loanAmount = document.getElementById("loan_amount"); 2 | const loanTenure = document.getElementById("loan_tenure"); 3 | const loanRate = document.getElementById("loan_interest"); 4 | 5 | const loanEmi = document.querySelector(".loan_emi"); 6 | const loanPrinciple = document.querySelector(".loan_principle"); 7 | const loanTotal = document.querySelector(".loan_total"); 8 | const loanInterest = document.querySelector(".loan_interest_rate"); 9 | 10 | const submitBtn = document.querySelector(".calculator-btn"); 11 | 12 | submitBtn.addEventListener("click", function () { 13 | amount = loanAmount.value; 14 | tenure = loanTenure.value * 12; // 1Year = 12 months 15 | rate = loanRate.value / 12 / 100; // loan rate per year / 100 = loan percentage 16 | 17 | emi = (amount * rate * (1 + rate) ** tenure) / ((1 + rate) ** tenure - 1); 18 | //console.log(emi); 19 | total = emi * tenure; // total amount to be paid including interest 20 | interest = total - amount; // interest = total amount - principle amount 21 | // console.log(total); 22 | //console.log(interest); 23 | 24 | loanEmi.innerHTML = Math.floor(emi); 25 | loanPrinciple.innerHTML = Math.floor(amount); 26 | loanTotal.innerHTML = Math.floor(total); 27 | loanInterest.innerHTML = Math.floor(interest); 28 | 29 | //Loanchart 30 | let xValues = ["Principle", "Interest"]; 31 | let yValues = [amount, Math.floor(interest)]; 32 | 33 | let barColors = ["#961251", "#000000"]; 34 | 35 | new Chart("loanChart", { 36 | type: "pie", 37 | data: { 38 | labels: xValues, 39 | datasets: [ 40 | { 41 | backgroundColor: barColors, 42 | data: yValues 43 | } 44 | ] 45 | }, 46 | options: { 47 | title: { 48 | display: false 49 | } 50 | } 51 | }); 52 | }); 53 | -------------------------------------------------------------------------------- /Text to Speech Generator/script.js: -------------------------------------------------------------------------------- 1 | const textarea = document.querySelector("textarea"), 2 | voiceList = document.querySelector("select"), 3 | speechBtn = document.querySelector("button"); 4 | 5 | let synth = speechSynthesis, 6 | isSpeaking = true; 7 | 8 | voices(); 9 | 10 | function voices(){ 11 | for(let voice of synth.getVoices()){ 12 | let selected = voice.name === "Google US English" ? "selected" : ""; 13 | let option = ``; 14 | voiceList.insertAdjacentHTML("beforeend", option); 15 | } 16 | } 17 | 18 | synth.addEventListener("voiceschanged", voices); 19 | 20 | function textToSpeech(text){ 21 | let utterance = new SpeechSynthesisUtterance(text); 22 | for(let voice of synth.getVoices()){ 23 | if(voice.name === voiceList.value){ 24 | utterance.voice = voice; 25 | } 26 | } 27 | synth.speak(utterance); 28 | } 29 | 30 | speechBtn.addEventListener("click", e =>{ 31 | e.preventDefault(); 32 | if(textarea.value !== ""){ 33 | if(!synth.speaking){ 34 | textToSpeech(textarea.value); 35 | } 36 | if(textarea.value.length > 80){ 37 | setInterval(()=>{ 38 | if(!synth.speaking && !isSpeaking){ 39 | isSpeaking = true; 40 | speechBtn.innerText = "Convert To Speech"; 41 | }else{ 42 | } 43 | }, 500); 44 | if(isSpeaking){ 45 | synth.resume(); 46 | isSpeaking = false; 47 | speechBtn.innerText = "Pause Speech"; 48 | }else{ 49 | synth.pause(); 50 | isSpeaking = true; 51 | speechBtn.innerText = "Resume Speech"; 52 | } 53 | }else{ 54 | speechBtn.innerText = "Convert To Speech"; 55 | } 56 | } 57 | }); 58 | -------------------------------------------------------------------------------- /Calculator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Calculator 6 | 7 | 11 | 12 | 13 | 14 | 15 |

16 |

17 | 18 |

19 |

20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 |

45 |

46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /Captcha Generator/style.css: -------------------------------------------------------------------------------- 1 | /* Import Google font - Poppins */ 2 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap"); 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: "Poppins", sans-serif; 8 | } 9 | body { 10 | height: 100vh; 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | background: #826afb; 15 | } 16 | .container { 17 | position: relative; 18 | max-width: 300px; 19 | width: 100%; 20 | border-radius: 12px; 21 | padding: 15px 25px 25px; 22 | background: #fff; 23 | box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); 24 | } 25 | header { 26 | color: #333; 27 | margin-bottom: 20px; 28 | font-size: 18px; 29 | font-weight: 600; 30 | text-align: center; 31 | } 32 | .input_field { 33 | position: relative; 34 | height: 45px; 35 | margin-top: 15px; 36 | width: 100%; 37 | } 38 | .refresh_button { 39 | position: absolute; 40 | top: 50%; 41 | right: 10px; 42 | transform: translateY(-50%); 43 | background: #826afb; 44 | height: 30px; 45 | width: 30px; 46 | border: none; 47 | border-radius: 4px; 48 | color: #fff; 49 | cursor: pointer; 50 | } 51 | .refresh_button:active { 52 | transform: translateY(-50%) scale(0.98); 53 | } 54 | .input_field input, 55 | .button button { 56 | height: 100%; 57 | width: 100%; 58 | outline: none; 59 | border: none; 60 | border-radius: 8px; 61 | } 62 | .input_field input { 63 | padding: 0 15px; 64 | border: 1px solid rgba(0, 0, 0, 0.1); 65 | } 66 | .captch_box input { 67 | color: #6b6b6b; 68 | font-size: 22px; 69 | pointer-events: none; 70 | } 71 | .captch_input input:focus { 72 | box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); 73 | } 74 | .message { 75 | font-size: 14px; 76 | margin: 14px 0; 77 | color: #826afb; 78 | display: none; 79 | } 80 | .message.active { 81 | display: block; 82 | } 83 | .button button { 84 | background: #826afb; 85 | color: #fff; 86 | cursor: pointer; 87 | user-select: none; 88 | } 89 | .button button:active { 90 | transform: scale(0.99); 91 | } 92 | .button.disabled { 93 | opacity: 0.6; 94 | pointer-events: none; 95 | } 96 | -------------------------------------------------------------------------------- /Captcha Generator/script.js: -------------------------------------------------------------------------------- 1 | // Selecting necessary DOM elements 2 | const captchaTextBox = document.querySelector(".captch_box input"); 3 | const refreshButton = document.querySelector(".refresh_button"); 4 | const captchaInputBox = document.querySelector(".captch_input input"); 5 | const message = document.querySelector(".message"); 6 | const submitButton = document.querySelector(".button"); 7 | 8 | // Variable to store generated captcha 9 | let captchaText = null; 10 | 11 | // Function to generate captcha 12 | const generateCaptcha = () => { 13 | const randomString = Math.random().toString(36).substring(2, 7); 14 | const randomStringArray = randomString.split(""); 15 | const changeString = randomStringArray.map((char) => (Math.random() > 0.5 ? char.toUpperCase() : char)); 16 | captchaText = changeString.join(" "); 17 | captchaTextBox.value = captchaText; 18 | console.log(captchaText); 19 | }; 20 | 21 | const refreshBtnClick = () => { 22 | generateCaptcha(); 23 | captchaInputBox.value = ""; 24 | captchaKeyUpValidate(); 25 | }; 26 | 27 | const captchaKeyUpValidate = () => { 28 | //Toggle submit button disable class based on captcha input field. 29 | submitButton.classList.toggle("disabled", !captchaInputBox.value); 30 | 31 | if (!captchaInputBox.value) message.classList.remove("active"); 32 | }; 33 | 34 | // Function to validate the entered captcha 35 | const submitBtnClick = () => { 36 | captchaText = captchaText 37 | .split("") 38 | .filter((char) => char !== " ") 39 | .join(""); 40 | message.classList.add("active"); 41 | // Check if the entered captcha text is correct or not 42 | if (captchaInputBox.value === captchaText) { 43 | message.innerText = "Entered captcha is correct"; 44 | message.style.color = "#826afb"; 45 | } else { 46 | message.innerText = "Entered captcha is not correct"; 47 | message.style.color = "#FF2525"; 48 | } 49 | }; 50 | 51 | // Add event listeners for the refresh button, captchaInputBox, submit button 52 | refreshButton.addEventListener("click", refreshBtnClick); 53 | captchaInputBox.addEventListener("keyup", captchaKeyUpValidate); 54 | submitButton.addEventListener("click", submitBtnClick); 55 | 56 | // Generate a captcha when the page loads 57 | generateCaptcha(); 58 | -------------------------------------------------------------------------------- /Text to Speech Generator/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); 2 | *{ 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | font-family: 'Poppins', sans-serif; 7 | } 8 | body{ 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | min-height: 100vh; 13 | background: #5256AD; 14 | } 15 | .wrapper{ 16 | width: 370px; 17 | padding: 25px 30px; 18 | border-radius: 7px; 19 | background: #fff; 20 | box-shadow: 7px 7px 20px rgba(0,0,0,0.05); 21 | } 22 | header{ 23 | font-size: 28px; 24 | font-weight: 500; 25 | text-align: center; 26 | } 27 | form{ 28 | margin: 35px 0 20px; 29 | } 30 | .row{ 31 | display: flex; 32 | margin-bottom: 20px; 33 | flex-direction: column; 34 | } 35 | label{ 36 | font-size: 18px; 37 | margin-bottom: 5px; 38 | } 39 | .row:nth-child(2) label{ 40 | font-size: 17px; 41 | } 42 | form :where(textarea, select, button){ 43 | outline: none; 44 | width: 100%; 45 | height: 100%; 46 | border: none; 47 | border-radius: 5px; 48 | } 49 | textarea{ 50 | resize: none; 51 | height: 110px; 52 | font-size: 15px; 53 | padding: 8px 10px; 54 | border: 1px solid #999; 55 | } 56 | textarea::-webkit-scrollbar{ 57 | width: 0px; 58 | } 59 | .outer{ 60 | height: 47px; 61 | display: flex; 62 | padding: 0 10px; 63 | align-items: center; 64 | border-radius: 5px; 65 | justify-content: center; 66 | border: 1px solid #999; 67 | } 68 | select{ 69 | font-size: 14px; 70 | background: none; 71 | } 72 | .row select::-webkit-scrollbar{ 73 | width: 8px; 74 | } 75 | .row select::-webkit-scrollbar-track{ 76 | background: #fff; 77 | } 78 | .row select::-webkit-scrollbar-thumb{ 79 | background: #888; 80 | border-radius: 8px; 81 | border-right: 2px solid #ffffff; 82 | } 83 | form button{ 84 | height: 52px; 85 | color: #fff; 86 | font-size: 17px; 87 | cursor: pointer; 88 | margin-top: 10px; 89 | background: #675AFE; 90 | transition: 0.3s ease; 91 | } 92 | form button:hover{ 93 | background: #4534fe; 94 | } 95 | 96 | @media(max-width: 400px){ 97 | .wrapper{ 98 | max-width: 345px; 99 | width: 100%; 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /Scratch Card/script.js: -------------------------------------------------------------------------------- 1 | let canvas = document.getElementById("scratch"); 2 | let context = canvas.getContext("2d"); 3 | 4 | const init = () => { 5 | let gradientColor = context.createLinearGradient(0, 0, 135, 135); 6 | gradientColor.addColorStop(0, "#c3a3f1"); 7 | gradientColor.addColorStop(1, "#6414e9"); 8 | context.fillStyle = gradientColor; 9 | context.fillRect(0, 0, 200, 200); 10 | }; 11 | 12 | //initially mouse X and mouse Y positions are 0 13 | let mouseX = 0; 14 | let mouseY = 0; 15 | let isDragged = false; 16 | 17 | //Events for touch and mouse 18 | let events = { 19 | mouse: { 20 | down: "mousedown", 21 | move: "mousemove", 22 | up: "mouseup", 23 | }, 24 | touch: { 25 | down: "touchstart", 26 | move: "touchmove", 27 | up: "touchend", 28 | }, 29 | }; 30 | 31 | let deviceType = ""; 32 | 33 | //Detech touch device 34 | const isTouchDevice = () => { 35 | try { 36 | //We try to create TouchEvent. It would fail for desktops and throw error. 37 | document.createEvent("TouchEvent"); 38 | deviceType = "touch"; 39 | return true; 40 | } catch (e) { 41 | deviceType = "mouse"; 42 | return false; 43 | } 44 | }; 45 | 46 | //Get left and top of canvas 47 | let rectLeft = canvas.getBoundingClientRect().left; 48 | let rectTop = canvas.getBoundingClientRect().top; 49 | 50 | //Exact x and y position of mouse/touch 51 | const getXY = (e) => { 52 | mouseX = (!isTouchDevice() ? e.pageX : e.touches[0].pageX) - rectLeft; 53 | mouseY = (!isTouchDevice() ? e.pageY : e.touches[0].pageY) - rectTop; 54 | }; 55 | 56 | isTouchDevice(); 57 | //Start Scratch 58 | canvas.addEventListener(events[deviceType].down, (event) => { 59 | isDragged = true; 60 | //Get x and y position 61 | getXY(event); 62 | scratch(mouseX, mouseY); 63 | }); 64 | 65 | //mousemove/touchmove 66 | canvas.addEventListener(events[deviceType].move, (event) => { 67 | if (!isTouchDevice()) { 68 | event.preventDefault(); 69 | } 70 | if (isDragged) { 71 | getXY(event); 72 | scratch(mouseX, mouseY); 73 | } 74 | }); 75 | 76 | //stop drawing 77 | canvas.addEventListener(events[deviceType].up, () => { 78 | isDragged = false; 79 | }); 80 | 81 | //If mouse leaves the square 82 | canvas.addEventListener("mouseleave", () => { 83 | isDragged = false; 84 | }); 85 | 86 | const scratch = (x, y) => { 87 | //destination-out draws new shapes behind the existing canvas content 88 | context.globalCompositeOperation = "destination-out"; 89 | context.beginPath(); 90 | //arc makes circle - x,y,radius,start angle,end angle 91 | context.arc(x, y, 12, 0, 2 * Math.PI); 92 | context.fill(); 93 | }; 94 | 95 | window.onload = init(); 96 | -------------------------------------------------------------------------------- /Tic Tac Toe/script.js: -------------------------------------------------------------------------------- 1 | window.addEventListener("DOMContentLoaded", () => { 2 | const tiles = Array.from(document.querySelectorAll(".tile")); 3 | const playerDisplay = document.querySelector(".display-player"); 4 | const resetButton = document.querySelector("#reset"); 5 | const announcer = document.querySelector(".announcer"); 6 | 7 | let board = ["", "", "", "", "", "", "", "", ""]; 8 | let currentPlayer = "X"; 9 | let isGameActive = true; 10 | 11 | const PLAYERX_WON = "PLAYERX_WON"; 12 | const PLAYERO_WON = "PLAYERO_WON"; 13 | const TIE = "TIE"; 14 | 15 | const winningConditions = [ 16 | [0, 1, 2], 17 | [3, 4, 5], 18 | [6, 7, 8], 19 | [0, 3, 6], 20 | [1, 4, 7], 21 | [2, 5, 8], 22 | [0, 4, 8], 23 | [2, 4, 6] 24 | ]; 25 | 26 | function handleResultValidation() { 27 | let roundWon = false; 28 | for (let i = 0; i <= 7; i++) { 29 | const winCondition = winningConditions[i]; 30 | const a = board[winCondition[0]]; 31 | const b = board[winCondition[1]]; 32 | const c = board[winCondition[2]]; 33 | if (a === "" || b === "" || c === "") { 34 | continue; 35 | } 36 | if (a === b && b === c) { 37 | roundWon = true; 38 | break; 39 | } 40 | } 41 | 42 | if (roundWon) { 43 | announce(currentPlayer === "X" ? PLAYERX_WON : PLAYERO_WON); 44 | isGameActive = false; 45 | return; 46 | } 47 | 48 | if (!board.includes("")) announce(TIE); 49 | } 50 | 51 | const announce = (type) => { 52 | switch (type) { 53 | case PLAYERO_WON: 54 | announcer.innerHTML = 'Player O Won'; 55 | break; 56 | case PLAYERX_WON: 57 | announcer.innerHTML = 'Player X Won'; 58 | break; 59 | case TIE: 60 | announcer.innerText = "Tie"; 61 | } 62 | announcer.classList.remove("hide"); 63 | }; 64 | 65 | const isValidAction = (tile) => { 66 | return tile.innerText !== "X" && tile.innerText !== "O"; 67 | }; 68 | 69 | const updateBoard = (index) => { 70 | board[index] = currentPlayer; 71 | }; 72 | 73 | const changePlayer = () => { 74 | playerDisplay.classList.remove(`player${currentPlayer}`); 75 | currentPlayer = currentPlayer === "X" ? "O" : "X"; 76 | playerDisplay.innerText = currentPlayer; 77 | playerDisplay.classList.add(`player${currentPlayer}`); 78 | }; 79 | 80 | const userAction = (tile, index) => { 81 | if (isValidAction(tile) && isGameActive) { 82 | tile.innerText = currentPlayer; 83 | tile.classList.add(`player${currentPlayer}`); 84 | updateBoard(index); 85 | handleResultValidation(); 86 | changePlayer(); 87 | } 88 | }; 89 | 90 | const resetBoard = () => { 91 | board = ["", "", "", "", "", "", "", "", ""]; 92 | isGameActive = true; 93 | announcer.classList.add("hide"); 94 | 95 | if (currentPlayer === "O") { 96 | changePlayer(); 97 | } 98 | 99 | tiles.forEach((tile) => { 100 | tile.innerText = ""; 101 | tile.classList.remove("playerX"); 102 | tile.classList.remove("playerO"); 103 | }); 104 | }; 105 | 106 | tiles.forEach((tile, index) => { 107 | tile.addEventListener("click", () => userAction(tile, index)); 108 | }); 109 | 110 | resetButton.addEventListener("click", resetBoard); 111 | }); 112 | -------------------------------------------------------------------------------- /Loan EMI Calculator/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap'); 2 | *{ 3 | padding: 0; 4 | margin: 0; 5 | box-sizing: border-box; 6 | } 7 | 8 | body{ 9 | position: relative; 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | margin: auto; 14 | height: 100vh; 15 | background: #961251; 16 | font-family: 'Poppins', sans-serif; 17 | } 18 | 19 | .wrapper{ 20 | width: 500px; 21 | background: #FFFFFF; 22 | padding: 20px 25px; 23 | border-radius: 10px; 24 | box-shadow: 0 0 60px rgba(1, 0, 5, 0.15); 25 | 26 | } 27 | 28 | .wrapper h2{ 29 | font-size: 28px; 30 | font-weight: 700; 31 | } 32 | 33 | .wrapper .div-bar{ 34 | display: block; 35 | width: 120px; 36 | background: #961251; 37 | height: 6px; 38 | border-radius: 10px; 39 | margin: 10px 0px; 40 | } 41 | 42 | .wrapper .calculator{ 43 | position: relative; 44 | flex-direction: row; 45 | display: flex; 46 | flex-wrap: wrap; 47 | justify-content: space-around; 48 | padding: 10px 0px; 49 | } 50 | 51 | 52 | .calculator .calculator-input{ 53 | position: relative; 54 | width: 50%; 55 | justify-content: space-around; 56 | padding: 5px 10px; 57 | display: block; 58 | } 59 | 60 | .calculator .calculator-input input{ 61 | width: 100%; 62 | height: 40px; 63 | padding: 20px 14px; 64 | font-family: "Poppins",sans-serif; 65 | font-weight: 400; 66 | font-size: 18px; 67 | border: 1px solid #7d7d7d; 68 | border-radius: 4px; 69 | } 70 | 71 | .calculator .calculator-input input:focus{ 72 | outline: none; 73 | border: 1px solid #961251; 74 | } 75 | 76 | 77 | .calculator .calculator-input label{ 78 | color:#961251; 79 | font-size: 16px; 80 | padding: 2px 4px; 81 | font-weight: 500; 82 | } 83 | 84 | .calculator .calculator-input button { 85 | width: 100%; 86 | padding: 14px 16px; 87 | margin-top: 20px; 88 | font-weight: 700; 89 | cursor: pointer; 90 | font-family: "Poppins",sans-serif; 91 | background: #961251; 92 | border: 0; 93 | color: #FFFFFF; 94 | font-size: 14px; 95 | text-transform: uppercase; 96 | border-radius: 4px; 97 | } 98 | 99 | /*chrome, safari, edge, opera*/ 100 | input::-webkit-outer-spin-button, 101 | input::-webkit-inner-spin-button{ 102 | -webkit-appearance: none; 103 | margin: 0; 104 | } 105 | 106 | /*Firefox*/ 107 | 108 | input[type=number]{ 109 | -moz-appearance: textfield; 110 | } 111 | 112 | .wrapper .calculator-result{ 113 | position: relative; 114 | display: block; 115 | padding: 10px; 116 | margin: 20px 0; 117 | } 118 | .wrapper .calculator-result ul{ 119 | width: 100%; 120 | background: #96125110; 121 | padding: 10px 15px; 122 | border-radius: 5px; 123 | } 124 | 125 | .wrapper .calculator-result li{ 126 | list-style: none; 127 | line-height: 28px; 128 | font-weight: 500; 129 | font-size: 18px; 130 | } 131 | 132 | 133 | .calculator-result .loan_emi{ 134 | font-weight: 700; 135 | font-size: 22px; 136 | color: #961251; 137 | } 138 | .calculator-result .loan_principle, 139 | .calculator-result .loan_interest_rate, 140 | .calculator-result .loan_total{ 141 | color: #333332; 142 | font-weight: 700; 143 | font-size: 22px; 144 | } 145 | 146 | .calculator-result canvas{ 147 | padding: 20px; 148 | } 149 | --------------------------------------------------------------------------------