diff --git a/Divakar/.DS_Store b/Divakar/.DS_Store new file mode 100644 index 0000000..a2ca94a Binary files /dev/null and b/Divakar/.DS_Store differ diff --git a/Divakar/Calculator/.DS_Store b/Divakar/Calculator/.DS_Store new file mode 100644 index 0000000..7e224a8 Binary files /dev/null and b/Divakar/Calculator/.DS_Store differ diff --git a/Divakar/Calculator/index.html b/Divakar/Calculator/index.html new file mode 100644 index 0000000..1b9ca41 --- /dev/null +++ b/Divakar/Calculator/index.html @@ -0,0 +1,52 @@ + + + + + + + Calculate me! - A calculator made my me + + + + + +

Welcome to Calculate me!

+
+
+ +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + \ No newline at end of file diff --git a/Divakar/Calculator/script.js b/Divakar/Calculator/script.js new file mode 100644 index 0000000..d698a28 --- /dev/null +++ b/Divakar/Calculator/script.js @@ -0,0 +1,19 @@ +let string = ""; +let buttons = document.querySelectorAll('.button'); +Array.from(buttons).forEach((button)=>{ + button.addEventListener('click', (e)=>{ + if(e.target.innerHTML == '='){ + string = eval(string); + document.querySelector('input').value = string; + } + else if(e.target.innerHTML == 'C'){ + string = "" + document.querySelector('input').value = string; + } + else{ + console.log(e.target) + string = string + e.target.innerHTML; + document.querySelector('input').value = string; + } + }) +}) \ No newline at end of file diff --git a/Divakar/Calculator/style.css b/Divakar/Calculator/style.css new file mode 100644 index 0000000..d02d464 --- /dev/null +++ b/Divakar/Calculator/style.css @@ -0,0 +1,27 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&family=Ubuntu:wght@300&display=swap'); +html, body { + height: 100%; + width: 100%; + font-family: 'Roboto', sans-serif; +} + +.button{ + width: 66px; + padding: 20px; + margin: 0 3px; + border: 2px solid black; + border-radius: 9px; + cursor: pointer; +} + +.row{ + margin: 8px 0; +} +.row input{ + width: 291px; + font-size: 20px; + margin: 0; + padding: 10px 0px; + border: 2px solid black; + border-radius: 5px; +} \ No newline at end of file diff --git a/Divakar/Calculator/utils.css b/Divakar/Calculator/utils.css new file mode 100644 index 0000000..09a45d8 --- /dev/null +++ b/Divakar/Calculator/utils.css @@ -0,0 +1,22 @@ +.text-center{ + text-align: center; + } + + .bg-red{ + background: red; + } + + .mx-auto{ + margin: auto; + } + + .flex{ + display:flex; + } + .flex-col{ + flex-direction: column; + } + + .items-center{ + align-items: center; + } \ No newline at end of file diff --git a/Divakar/Quiz app/.DS_Store b/Divakar/Quiz app/.DS_Store new file mode 100644 index 0000000..c598e23 Binary files /dev/null and b/Divakar/Quiz app/.DS_Store differ diff --git a/Divakar/Quiz app/index.html b/Divakar/Quiz app/index.html new file mode 100644 index 0000000..00caafe --- /dev/null +++ b/Divakar/Quiz app/index.html @@ -0,0 +1,36 @@ + + + + + + + Quiz App + + +
+
+

Question Text

+ +
+ +
+ + + \ No newline at end of file diff --git a/Divakar/Quiz app/script.js b/Divakar/Quiz app/script.js new file mode 100644 index 0000000..10b0534 --- /dev/null +++ b/Divakar/Quiz app/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/Divakar/Quiz app/style.css b/Divakar/Quiz app/style.css new file mode 100644 index 0000000..20866c7 --- /dev/null +++ b/Divakar/Quiz app/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/Divakar/Todo List/index.html b/Divakar/Todo List/index.html new file mode 100644 index 0000000..164c7d7 --- /dev/null +++ b/Divakar/Todo List/index.html @@ -0,0 +1,32 @@ + + + + + + + TODO LIST + + + + +
+

Todo List

+
+ + +
+
+
Complete
+
Incomplete
+
Delete All
+
+
+ + +
+
+ + + diff --git a/Divakar/Todo List/script.js b/Divakar/Todo List/script.js new file mode 100644 index 0000000..6a5284f --- /dev/null +++ b/Divakar/Todo List/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/Divakar/Todo List/style.css b/Divakar/Todo List/style.css new file mode 100644 index 0000000..5611db2 --- /dev/null +++ b/Divakar/Todo List/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: #eee; + 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 #e6b7eca1; + border-radius: 30px; + color: #eee; + font-size: 16px; + margin-right: 10px; +} + +.todo-input::placeholder { + color: #bfbfbf; +} + +.add-button { + border: none; + outline: none; + background: #e6b7eca1; + color: #fff; + 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 #e6b7eca1; + transition: all 0.2s ease; +} + +.todo:first-child { + margin-top: 0; +} + +.todo:last-child { + margin-bottom: 0; +} + +.todo:hover { + background-color:#e6b7eca1; +} + +.todo label { + cursor: pointer; + width: fit-content; + display: flex; + align-items: center; + font-family: 'Roboto', sans-serif; + color: #eee; +} + +.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 #e6b7eca1; +} + +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: #09bb21; +} + +.todo:hover span::before { + border-color: #eee; +} + +.todo .delete-btn { + background-color: transparent; + border: none; + cursor: pointer; + color: #eee; + font-size: 24px; +} + +.todos-container { + height: 300px; + overflow: overlay; +} + +.todos-container::-webkit-scrollbar-track { + background: rgb(247, 247, 247); + 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: #eee; + padding: 5px 15px; + border-radius: 100px; + border: 2px solid #e6b7eca1; + transition: all 0.2s ease; + cursor: pointer; +} + +.filter.active, .filter:hover { + background-color: #e6b7eca1; +} + +.delete-all { + display: flex; + color: #eee; + padding: 7px 15px; + cursor: pointer; + transition: all 0.2s ease; +} + +.delete-all:hover { + border-radius: 5px; + background-color: #e6b7eca1; +}