diff --git a/kamal praneeth/Calculater/index.html b/kamal praneeth/Calculater/index.html new file mode 100644 index 0000000..1390849 --- /dev/null +++ b/kamal praneeth/Calculater/index.html @@ -0,0 +1,59 @@ +pk + + + + + + Calculator + + + +
+

KAMAL'S CALCULATOR

+
+
+ +
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+ + + + + \ No newline at end of file diff --git a/kamal praneeth/Calculater/script.js b/kamal praneeth/Calculater/script.js new file mode 100644 index 0000000..fafa84e --- /dev/null +++ b/kamal praneeth/Calculater/script.js @@ -0,0 +1,35 @@ +const display = document.querySelector("#display"); +const buttons = document.querySelectorAll("button"); + +buttons.forEach((item) => { + item.onclick = () => { + if(item.id == "clear") { + display.innerText = ""; + } + else if (item.id == "backspace") { + let string = display.innerText.toString(); + display.innerText = string.substr(0, string.length - 1); + } + else if(display.innerText != "" && item.id == "equal") { + display.innerText = eval(display.innerText); + + } + else if (display.innerText == "" && item.id == "equal") { + display.innerText = "Empty!"; + setTimeout(() => (display.innerText = ""), 2000); + } + else { + display.innerText += item.id; + } + }; +}); + +const themeToggleBtn = document.querySelector(".theme-toggler"); +const calculator = document.querySelector(".calculator"); +const toggleIcon = document.querySelector(".toggler-icon"); +let isDark = true; +themeToggleBtn.onclick = () => { + calculator.classList.toggle("dark"); + themeToggleBtn.classList.toggle("active"); + isDark = !isDark; +}; \ No newline at end of file diff --git a/kamal praneeth/Calculater/style.css b/kamal praneeth/Calculater/style.css new file mode 100644 index 0000000..f470611 --- /dev/null +++ b/kamal praneeth/Calculater/style.css @@ -0,0 +1,161 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; + outline: 0; + transition: all 0.5s ease; +} + +body { + font-family: sans-serif; +} + +a { + text-decoration: none; + color: #fff; +} + +body { + background: rgb(184, 98, 175); +} + +.container { + height: 100vh; + width: 100vw; + display: grid; + place-items: center; +} + +.calculator { + position: relative; + height: auto; + width: auto; + padding: 20px; + border-radius: 10px; + /* box-shadow: 0 0 30px #000; */ +} + +.theme-toggler { + position: absolute; + top: 30px; + right: 30px; + color: #fff; + cursor: pointer; + z-index: 1; +} + +.theme-toggler.active { + color: #333; +} + +.theme-toggler.active::before { + background-color: #fff; +} + +.theme-toggler::before { + content: ''; + height: 30px; + width: 30px; + position: absolute; + top: 50%; + transform: translate(-50%, -50%); + border-radius: 50%; + background-color: #333; + z-index: -1; +} + +#display { + margin: 0 10px; + height: 150px; + width: auto; + max-width: 270px; + display: flex; + align-items: flex-end; + justify-content: flex-end; + font-size: 30px; + margin-bottom: 20px; + overflow-x: scroll; +} + +#display::-webkit-scrollbar { + display: block; + height: 3px; +} + +button { + height: 60px; + width: 60px; + border: 0; + border-radius: 50%; + margin: 10px; + font-size: 20px; + cursor: pointer; + transition: all 200ms ease; +} + +button:hover { + transform: scale(1.1); +} + +button#equal { + height: 140px; + border-radius: 30px; +} + +/* light theme */ +.calculator { + background-color: #fff; +} + +.calculator #display { + color: #0a1e23; +} + +.calculator button#clear { + background-color: #ffd5d8; + color: #fc4552; +} + +.calculator button.btn-number { + background-color: #c3eaff; + color: #000; +} + +.calculator button.btn-operator { + background-color: #ffd0fd; + color: #f967f3; +} + +.calculator button.btn-equal { + background-color: #adf9e7; + color: #000; +} + +/* Dark theme */ +.calculator.dark { + background-color: #071115; +} + +.calculator.dark #display { + color: #f8fafd; +} + +.calculator.dark button#clear { + background-color: #2d191e; + color: #bd3740; +} + +.calculator.dark button.btn-number { + background-color: #1b2f38; + color: #f8fafd; +} + +.calculator.dark button.btn-operator { + background-color: #2e1f39; + color: #aa00a4; +} + +.calculator.dark button.btn-equal { + background-color: #223323; + color: #fff; +} diff --git a/kamal praneeth/Quiz/.vscode/settings.json b/kamal praneeth/Quiz/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/kamal praneeth/Quiz/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/kamal praneeth/Quiz/index.html b/kamal praneeth/Quiz/index.html new file mode 100644 index 0000000..31d9b42 --- /dev/null +++ b/kamal praneeth/Quiz/index.html @@ -0,0 +1,36 @@ + + + + + + + Quiz App + + +
+
+

Question Text

+ +
+ +
+ + + \ No newline at end of file diff --git a/kamal praneeth/Quiz/script.js b/kamal praneeth/Quiz/script.js new file mode 100644 index 0000000..9689365 --- /dev/null +++ b/kamal praneeth/Quiz/script.js @@ -0,0 +1,83 @@ +const quizData = [ + { + question: "Which language runs in a web browser?", + a: "Java", + b: "C", + c: "Python", + d: "javascript", + correct: "d", + }, + { + question: "What does CSS stand for?", + a: "Central Style Sheets", + b: "Cascading Style Sheets", + c: "Cascading Simple Sheets", + d: "Cars SUVs Sailboats", + correct: "b", + }, + { + question: "What does HTML stand for?", + a: "Hypertext Markup Language", + b: "Hypertext Markdown Language", + c: "Hyperloop Machine Language", + d: "Helicopters Terminals Motorboats Lamborginis", + correct: "a", + }, + { + question: "What year was JavaScript launched?", + a: "1996", + b: "1995", + c: "1994", + d: "none of the above", + correct: "b", + }, +]; +const quiz= document.getElementById('quiz') +const answerEls = document.querySelectorAll('.answer') +const questionEl = document.getElementById('question') +const a_text = document.getElementById('a_text') +const b_text = document.getElementById('b_text') +const c_text = document.getElementById('c_text') +const d_text = document.getElementById('d_text') +const submitBtn = document.getElementById('submit') +let currentQuiz = 0 +let score = 0 +loadQuiz() +function loadQuiz() { + deselectAnswers() + const currentQuizData = quizData[currentQuiz] + questionEl.innerText = currentQuizData.question + a_text.innerText = currentQuizData.a + b_text.innerText = currentQuizData.b + c_text.innerText = currentQuizData.c + d_text.innerText = currentQuizData.d +} +function deselectAnswers() { + answerEls.forEach(answerEl => answerEl.checked = false) +} +function getSelected() { + let answer + answerEls.forEach(answerEl => { + if(answerEl.checked) { + answer = answerEl.id + } + }) + return answer +} +submitBtn.addEventListener('click', () => { + const answer = getSelected() + if(answer) { + if(answer === quizData[currentQuiz].correct) { + score++ + } + currentQuiz++ + if(currentQuiz < quizData.length) { + loadQuiz() + } else { + quiz.innerHTML = ` +

You answered ${score}/${quizData.length} questions correctly

+ + ` + } + } +}) \ No newline at end of file diff --git a/kamal praneeth/Quiz/style.css b/kamal praneeth/Quiz/style.css new file mode 100644 index 0000000..a5b816c --- /dev/null +++ b/kamal praneeth/Quiz/style.css @@ -0,0 +1,59 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500&display=swap'); +*{ + box-sizing: border-box; +} +body{ + background-color: #b8c6db; + background-image: linear-gradient(315deg, #b8c6db 0%, #f5f7f7 100%); + font-family: 'Poppins', sans-serif; + display: flex; + align-items: center; + justify-content: center; + height: 100vh; + overflow: hidden; + margin: 0; +} +.quiz-container{ + background-color: #fff; + border-radius: 10px; + box-shadow: 0 0 10px 2px rgba(100, 100, 100, 0.1); + width: 600px; + overflow: hidden; +} +.quiz-header{ + padding: 4rem; +} +h2{ + padding: 1rem; + text-align: center; + margin: 0; +} +ul{ + list-style-type: none; + padding: 0; +} +ul li{ + font-size: 1.2rem; + margin: 1rem 0; +} +ul li label{ + cursor: pointer; +} +button{ + background-color: #03cae4; + color: #fff; + border: none; + display: block; + width: 100%; + cursor: pointer; + font-size: 1.1rem; + font-family: inherit; + padding: 1.3rem; +} +button:hover{ + background-color: #04adc4; +} +button:focus{ + outline: none; + background-color: #44b927; +} \ No newline at end of file diff --git a/kamal praneeth/To-do/.vscode/settings.json b/kamal praneeth/To-do/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/kamal praneeth/To-do/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/kamal praneeth/To-do/index.html b/kamal praneeth/To-do/index.html new file mode 100644 index 0000000..1a80b91 --- /dev/null +++ b/kamal praneeth/To-do/index.html @@ -0,0 +1,32 @@ + + + + + + + TODO LIST + + + + +
+

Todo List

+
+ + +
+
+
Complete
+
Incomplete
+
Delete All
+
+
+ + +
+
+ + + diff --git a/kamal praneeth/To-do/script.js b/kamal praneeth/To-do/script.js new file mode 100644 index 0000000..737e3be --- /dev/null +++ b/kamal praneeth/To-do/script.js @@ -0,0 +1,98 @@ +const input = document.querySelector("input"); +const addButton = document.querySelector(".add-button"); +const todosHtml = document.querySelector(".todos"); +const emptyImage = document.querySelector(".empty-image"); +let todosJson = JSON.parse(localStorage.getItem("todos")) || []; +const deleteAllButton = document.querySelector(".delete-all"); +const filters = document.querySelectorAll(".filter"); +let filter = ''; + +showTodos(); + +function getTodoHtml(todo, index) { + if (filter && filter != todo.status) { + return ''; + } + let checked = todo.status == "completed" ? "checked" : ""; + return /* html */ ` +
  • + + +
    • + `; +} + +function showTodos() { + if (todosJson.length == 0) { + todosHtml.innerHTML = ''; + emptyImage.style.display = 'block'; + } else { + todosHtml.innerHTML = todosJson.map(getTodoHtml).join(''); + emptyImage.style.display = 'none'; + } +} + +function addTodo(todo) { + input.value = ""; + todosJson.unshift({ name: todo, status: "pending" }); + localStorage.setItem("todos", JSON.stringify(todosJson)); + showTodos(); +} + +input.addEventListener("keyup", e => { + let todo = input.value.trim(); + if (!todo || e.key != "Enter") { + return; + } + addTodo(todo); +}); + +addButton.addEventListener("click", () => { + let todo = input.value.trim(); + if (!todo) { + return; + } + addTodo(todo); +}); + +function updateStatus(todo) { + let todoName = todo.parentElement.lastElementChild; + if (todo.checked) { + todoName.classList.add("checked"); + todosJson[todo.id].status = "completed"; + } else { + todoName.classList.remove("checked"); + todosJson[todo.id].status = "pending"; + } + localStorage.setItem("todos", JSON.stringify(todosJson)); +} + +function remove(todo) { + const index = todo.dataset.index; + todosJson.splice(index, 1); + showTodos(); + localStorage.setItem("todos", JSON.stringify(todosJson)); +} + +filters.forEach(function (el) { + el.addEventListener("click", (e) => { + if (el.classList.contains('active')) { + el.classList.remove('active'); + filter = ''; + } else { + filters.forEach(tag => tag.classList.remove('active')); + el.classList.add('active'); + filter = e.target.dataset.filter; + } + showTodos(); + }); +}); + +deleteAllButton.addEventListener("click", () => { + todosJson = []; + localStorage.setItem("todos", JSON.stringify(todosJson)); + showTodos(); +}); diff --git a/kamal praneeth/To-do/style.css b/kamal praneeth/To-do/style.css new file mode 100644 index 0000000..ec8378b --- /dev/null +++ b/kamal praneeth/To-do/style.css @@ -0,0 +1,204 @@ +*, +*::before, +*::after { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Roboto', sans-serif; + height: 100vh; + display: flex; + align-items: center; + justify-content: center; + background: url(./background.jpg) no-repeat; + background-position: center; + background-size: cover; +} + +.container { + width: 400px; + height: auto; + min-height: 400px; + padding: 30px; + background: transparent; + border: 2px solid #e6b7eca1; + border-radius: 10px; + backdrop-filter: blur(15px); +} + +h1 { + color: #3043f5; + text-align: center; + margin-bottom: 36px; +} + +.input-container { + display: flex; + justify-content: space-between; + margin-bottom: 25px; +} + +.todo-input { + flex: 1; + outline: none; + padding: 10px 10px 10px 20px; + background-color: transparent; + border: 2px solid #0c0c0ca1; + border-radius: 30px; + color: #EC407A; + font-size: 16px; + margin-right: 10px; +} + +.todo-input::placeholder { + color: #991375; +} + +.add-button { + border: none; + outline: none; + background: #e6b7eca1; + color: #0c0b0b; + font-size: 35px; + cursor: pointer; + border-radius: 40px; + width: 40px; + height: 40px; +} + +.empty-image { + margin: 55px auto 0; + display: block; +} + +.todo { + list-style: none; + display: flex; + align-items: center; + justify-content: space-between; + background-color: #463c7b; + border-radius: 5px; + margin: 10px 0; + padding: 10px 12px; + border: 2px solid #090809a1; + transition: all 0.2s ease; +} + +.todo:first-child { + margin-top: 0; +} + +.todo:last-child { + margin-bottom: 0; +} + +.todo:hover { + background-color:#0a0a0aa1; +} + +.todo label { + cursor: pointer; + width: fit-content; + display: flex; + align-items: center; + font-family: 'Roboto', sans-serif; + color: #0c0b0b; +} + +.todo span { + padding-left: 20px; + position: relative; + cursor: pointer; +} + +span::before { + content: ""; + height: 20px; + width: 20px; + position: absolute; + margin-left: -30px; + border-radius: 100px; + border: 2px solid #100f10a1; +} + +input[type='checkbox'] { + visibility: hidden; +} + +input:checked + span { + text-decoration: line-through +} + +.todo:hover input:checked + span::before, input:checked + span::before { + background: url(./check.svg) 50% 50% no-repeat #09bb21; + border-color: #0a0b0b; +} + +.todo:hover span::before { + border-color: #0c0a0a; +} + +.todo .delete-btn { + background-color: transparent; + border: none; + cursor: pointer; + color: #161010; + font-size: 24px; +} + +.todos-container { + height: 300px; + overflow: overlay; +} + +.todos-container::-webkit-scrollbar-track { + background: rgb(21, 14, 14); + border-radius: 20px +} + +.todos-container::-webkit-scrollbar { + width: 0; +} + +.todos-container:hover::-webkit-scrollbar { + width: 7px; +} + +.todos-container::-webkit-scrollbar-thumb { + background: #d5d5d5; + border-radius: 20px; +} + +.filters { + display: flex; + justify-content: space-between; + margin-bottom: 25px; +} + +.filter { + color: #2b28b5; + padding: 5px 15px; + border-radius: 100px; + border: 2px solid #020202a1; + transition: all 0.2s ease; + cursor: pointer; +} + +.filter.active, .filter:hover { + background-color: #050405a1; +} + +.delete-all { + display: flex; + color: #111010; + padding: 7px 15px; + cursor: pointer; + transition: all 0.2s ease; +} + +.delete-all:hover { + border-radius: 5px; + background-color: #100911a1; +}