diff --git a/CALCULATOR/calculator.html b/CALCULATOR/calculator.html new file mode 100644 index 0000000..6153df0 --- /dev/null +++ b/CALCULATOR/calculator.html @@ -0,0 +1,43 @@ + + + + + + Calculator + + + +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/CALCULATOR/script.js b/CALCULATOR/script.js new file mode 100644 index 0000000..b83dd01 --- /dev/null +++ b/CALCULATOR/script.js @@ -0,0 +1,12 @@ +function addToDisplay(value) { + document.getElementById('display').value += value; +} + +function clearDisplay() { + document.getElementById('display').value = ''; +} + +function calculate() { + var result = eval(document.getElementById('display').value); + document.getElementById('display').value = result; +} \ No newline at end of file diff --git a/CALCULATOR/styles.css b/CALCULATOR/styles.css new file mode 100644 index 0000000..6df7b93 --- /dev/null +++ b/CALCULATOR/styles.css @@ -0,0 +1,72 @@ +body { + font-family: Arial, sans-serif; + background-color: #f2f2f2; + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.calculator { + background-color: #fff; + border-radius: 10px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + padding: 20px; + width: 300px; +} + +.calculator input[type="button"] { + width: 50px; + height: 50px; + font-size: 18px; + margin: 5px; + border: none; + border-radius: 5px; + cursor: pointer; +} + +.calculator input[type="text"] { + width: calc(100% - 10px); + height: 50px; + font-size: 24px; + margin-bottom: 10px; + padding: 5px; + border: none; + border-radius: 5px; + text-align: right; +} + +.calculator .row { + display: flex; + justify-content: space-between; +} + +.calculator .row .col { + width: 25%; +} + +.calculator .row .col.clear { + width: 50%; +} + +.calculator .row .col.clear input[type="button"] { + background-color: #ff6347; + color: #fff; +} + +.calculator .row .col.operator input[type="button"] { + background-color: #008080; + color: #fff; +} + +.calculator .row .col.equal input[type="button"] { + background-color: #4caf50; + color: #fff; +} + +.calculator .row .col.numeric input[type="button"] { + background-color: #f0f8ff; + color: #000; +} \ No newline at end of file diff --git a/QUIZWEB/quizweb.html b/QUIZWEB/quizweb.html new file mode 100644 index 0000000..2513580 --- /dev/null +++ b/QUIZWEB/quizweb.html @@ -0,0 +1,28 @@ + + + + + + Quiz + + + +
+

Quiz

+
+ +
+
+ +
+
+ Time Remaining: 10 seconds +
+
+ +
+
+ + + + diff --git a/QUIZWEB/script.js b/QUIZWEB/script.js new file mode 100644 index 0000000..79d6254 --- /dev/null +++ b/QUIZWEB/script.js @@ -0,0 +1,87 @@ +// Quiz Data +const questions = [ + { + question: "What is the capital of France?", + options: ["Paris", "London", "Berlin", "Rome"], + answer: "Paris" + }, + { + question: "What is 2 + 2?", + options: ["3", "4", "5", "6"], + answer: "4" + }, + { + question: "Who wrote 'To Kill a Mockingbird'?", + options: ["Harper Lee", "Ernest Hemingway", "J.K. Rowling", "F. Scott Fitzgerald"], + answer: "Harper Lee" + } +]; + +let currentQuestion = 0; +let score = 0; +let timeLeft = 10; +let timer; + +function displayQuestion() { + const questionElement = document.getElementById("question"); + const optionsElement = document.getElementById("options"); + + if (currentQuestion >= questions.length) { + endQuiz(); + return; + } + + questionElement.textContent = questions[currentQuestion].question; + optionsElement.innerHTML = ""; + + questions[currentQuestion].options.forEach(option => { + const optionElement = document.createElement("div"); + optionElement.classList.add("option"); + optionElement.textContent = option; + optionElement.addEventListener("click", () => checkAnswer(option)); + optionsElement.appendChild(optionElement); + }); + + startTimer(); +} + +function checkAnswer(selectedOption) { + clearInterval(timer); + + if (selectedOption === questions[currentQuestion].answer) { + score++; + } + + currentQuestion++; + displayQuestion(); +} + +function startTimer() { + timeLeft = 10; + updateTimerDisplay(); + + timer = setInterval(() => { + if (timeLeft > 0) { + timeLeft--; + updateTimerDisplay(); + } else { + clearInterval(timer); + currentQuestion++; + displayQuestion(); + } + }, 1000); +} + +function updateTimerDisplay() { + document.getElementById("time").textContent = timeLeft; +} + +function endQuiz() { + const resultElement = document.getElementById("result"); + resultElement.innerHTML = `

Quiz Ended!

+

Your score: ${score}/${questions.length}

`; + + clearInterval(timer); +} + +displayQuestion(); \ No newline at end of file diff --git a/QUIZWEB/styles.css b/QUIZWEB/styles.css new file mode 100644 index 0000000..ec3f833 --- /dev/null +++ b/QUIZWEB/styles.css @@ -0,0 +1,63 @@ +body { + font-family: Arial, sans-serif; + background-color: #f2f2f2; + margin: 0; + padding: 0; +} + +.container { + max-width: 800px; + margin: 50px auto; + padding: 20px; + background-color: #fff; + border-radius: 10px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +h1, h2 { + text-align: center; + color: #333; +} + +.question { + margin-bottom: 20px; +} + +.options { + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +.option { + width: 48%; + margin-bottom: 10px; + padding: 10px; + background-color: #f0f8ff; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.option:hover { + background-color: #add8e6; +} + +.result { + margin-top: 20px; + text-align: center; +} + +.result h2 { + color: #007bff; +} + +.timer { + text-align: center; + margin-bottom: 20px; +} + +.timer span { + font-size: 24px; + color: #007bff; +} \ No newline at end of file diff --git a/TODO/script.js b/TODO/script.js new file mode 100644 index 0000000..ba47432 --- /dev/null +++ b/TODO/script.js @@ -0,0 +1,59 @@ +let tasks = []; + + function addTask() { + const taskInput = document.getElementById("taskInput"); + const dueDate = document.getElementById("dueDate").value; + const priority = document.getElementById("priority").value; + + if (taskInput.value.trim() === "") { + alert("Please enter a task!"); + return; + } + + const task = { + id: Date.now(), + name: taskInput.value, + dueDate: dueDate, + priority: priority, + completed: false + }; + + tasks.push(task); + renderTasks(); + taskInput.value = ""; + dueDate.value = ""; + } + + function deleteTask(id) { + tasks = tasks.filter(task => task.id !== id); + renderTasks(); + } + + function toggleComplete(id) { + const task = tasks.find(task => task.id === id); + task.completed = !task.completed; + renderTasks(); + } + + function renderTasks() { + const taskList = document.getElementById("taskList"); + taskList.innerHTML = ""; + + tasks.forEach(task => { + const li = document.createElement("li"); + li.classList.add("priority-" + task.priority); + if (task.completed) { + li.classList.add("completed"); + } + + li.innerHTML = ` + ${task.name} - Due: ${task.dueDate} +
+ + +
+ `; + + taskList.appendChild(li); + }); + } \ No newline at end of file diff --git a/TODO/styles.css b/TODO/styles.css new file mode 100644 index 0000000..475f4ec --- /dev/null +++ b/TODO/styles.css @@ -0,0 +1,62 @@ +body { + font-family: Arial, sans-serif; + background-color: #f4f4f4; +} +.container { + max-width: 600px; + margin: 20px auto; + padding: 20px; + background-color: #fff; + border-radius: 10px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} +h2 { + text-align: center; +} +ul { + list-style-type: none; + padding: 0; +} +li { + background-color: #f9f9f9; + padding: 10px; + margin-bottom: 5px; + border-radius: 5px; + display: flex; + align-items: center; +} +.priority-high { + border-left: 5px solid #ff0000; +} +.priority-medium { + border-left: 5px solid #ff9900; +} +.priority-low { + border-left: 5px solid #33cc33; +} +.completed { + text-decoration: line-through; + opacity: 0.5; +} +.actions { + margin-left: auto; +} +button { + cursor: pointer; + background-color: #007bff; + color: #fff; + border: none; + padding: 5px 10px; + border-radius: 5px; +} +input[type="text"] { + padding: 5px; + width: 70%; + border-radius: 5px; + border: 1px solid #ccc; +} +input[type="date"] { + padding: 5px; + border-radius: 5px; + border: 1px solid #ccc; +} \ No newline at end of file diff --git a/TODO/todo.html b/TODO/todo.html new file mode 100644 index 0000000..16371eb --- /dev/null +++ b/TODO/todo.html @@ -0,0 +1,25 @@ + + + + + + To-Do List + + + +
+

To-Do List

+ + + + + +
+ + + + \ No newline at end of file