CSEdgeOfficial · godalakavya · Jun 12, 2024 · Jun 12, 2024 · Jun 12, 2024 · Jun 12, 2024
diff --git a/CALCULATOR/calculator.html b/CALCULATOR/calculator.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Calculator</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="calculator">
+        <input type="text" id="display" readonly>
+        <div class="row">
+            <div class="col clear"><input type="button" value="C" onclick="clearDisplay()"></div>
+            <div class="col operator"><input type="button" value="/" onclick="addToDisplay('/')"></div>
+        </div>
+        <div class="row">
+            <div class="col numeric"><input type="button" value="7" onclick="addToDisplay('7')"></div>
+            <div class="col numeric"><input type="button" value="8" onclick="addToDisplay('8')"></div>
+            <div class="col numeric"><input type="button" value="9" onclick="addToDisplay('9')"></div>
+            <div class="col operator"><input type="button" value="*" onclick="addToDisplay('*')"></div>
+        </div>
+        <div class="row">
+            <div class="col numeric"><input type="button" value="4" onclick="addToDisplay('4')"></div>
+            <div class="col numeric"><input type="button" value="5" onclick="addToDisplay('5')"></div>
+            <div class="col numeric"><input type="button" value="6" onclick="addToDisplay('6')"></div>
+            <div class="col operator"><input type="button" value="-" onclick="addToDisplay('-')"></div>
+        </div>
+        <div class="row">
+            <div class="col numeric"><input type="button" value="1" onclick="addToDisplay('1')"></div>
+            <div class="col numeric"><input type="button" value="2" onclick="addToDisplay('2')"></div>
+            <div class="col numeric"><input type="button" value="3" onclick="addToDisplay('3')"></div>
+            <div class="col operator"><input type="button" value="+" onclick="addToDisplay('+')"></div>
+        </div>
+        <div class="row">
+            <div class="col numeric"><input type="button" value="0" onclick="addToDisplay('0')"></div>
+            <div class="col numeric"><input type="button" value="." onclick="addToDisplay('.')"></div>
+            <div class="col equal"><input type="button" value="=" onclick="calculate()"></div>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/CALCULATOR/script.js 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;
+}
diff --git a/CALCULATOR/styles.css 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;
+}
diff --git a/QUIZWEB/quizweb.html b/QUIZWEB/quizweb.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Quiz</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Quiz</h1>
+        <div class="question" id="question">
+            <!-- Question will be dynamically filled here -->
+        </div>
+        <div class="options" id="options">
+            <!-- Options will be dynamically filled here -->
+        </div>
+        <div class="timer" id="timer">
+            Time Remaining: <span id="time">10</span> seconds
+        </div>
+        <div class="result" id="result">
+            <!-- Result will be shown here -->
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/QUIZWEB/script.js 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 = `<h2>Quiz Ended!</h2>
+                                <p>Your score: ${score}/${questions.length}</p>`;
+
+    clearInterval(timer);
+}
+
+displayQuestion();
diff --git a/QUIZWEB/styles.css 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;
+}
diff --git a/TODO/script.js 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 = `
+                    <span>${task.name} - Due: ${task.dueDate}</span>
+                    <div class="actions">
+                        <button onclick="toggleComplete(${task.id})">${task.completed ? 'Undo' : 'Complete'}</button>
+                        <button onclick="deleteTask(${task.id})">Delete</button>
+                    </div>
+                `;
+
+                taskList.appendChild(li);
+            });
+        }