diff --git a/Shaik Ayaz/Meduim-1/app.js b/Shaik Ayaz/Meduim-1/app.js new file mode 100644 index 0000000..eff27a0 --- /dev/null +++ b/Shaik Ayaz/Meduim-1/app.js @@ -0,0 +1,55 @@ +function addTask() { + const taskInput = document.getElementById('new-task'); + const taskText = taskInput.value.trim(); + + if (taskText) { + const taskList = document.getElementById('task-list'); + const li = document.createElement('li'); + + const span = document.createElement('span'); + span.textContent = taskText; + li.appendChild(span); + + const buttons = document.createElement('div'); + buttons.classList.add('task-buttons'); + + const completeButton = document.createElement('button'); + completeButton.textContent = 'Complete'; + completeButton.classList.add('complete'); + completeButton.onclick = () => completeTask(li); + buttons.appendChild(completeButton); + + const editButton = document.createElement('button'); + editButton.textContent = 'Edit'; + editButton.onclick = () => editTask(li); + buttons.appendChild(editButton); + + const deleteButton = document.createElement('button'); + deleteButton.textContent = 'Delete'; + deleteButton.classList.add('delete'); + deleteButton.onclick = () => deleteTask(li); + buttons.appendChild(deleteButton); + + li.appendChild(buttons); + taskList.appendChild(li); + + taskInput.value = ''; + taskInput.focus(); + } +} + +function completeTask(taskItem) { + taskItem.classList.toggle('completed'); +} + +function editTask(taskItem) { + const taskText = taskItem.querySelector('span').textContent; + const newTaskText = prompt('Edit your task:', taskText); + if (newTaskText !== null && newTaskText.trim()) { + taskItem.querySelector('span').textContent = newTaskText.trim(); + } +} + +function deleteTask(taskItem) { + taskItem.remove(); +} \ No newline at end of file diff --git a/Shaik Ayaz/Meduim-1/index.html b/Shaik Ayaz/Meduim-1/index.html new file mode 100644 index 0000000..ff440e7 --- /dev/null +++ b/Shaik Ayaz/Meduim-1/index.html @@ -0,0 +1,21 @@ + + + + + + To-Do List + + + +
+

To-Do List

+
+ + +
+ +
+ + + + \ No newline at end of file diff --git a/Shaik Ayaz/Meduim-1/style.css b/Shaik Ayaz/Meduim-1/style.css new file mode 100644 index 0000000..7bda580 --- /dev/null +++ b/Shaik Ayaz/Meduim-1/style.css @@ -0,0 +1,122 @@ +body { + font-family: Arial, sans-serif; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + flex-direction:column; + background-color: #eee; +} + +.todo-container { + background: #fff; + padding: 20px; + border-radius: 5px; + box-shadow: 0 0 10px rgba(0,0,0,0.1); + width: 300px; + text-align: center; +} + +.input-container { + display: flex; + margin-bottom: 20px; +} + +input { + flex: 1; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; +} +input:hover{ + color:#fff; + background-color: black; + border:1px solid #fff; +} +button { + padding: 10px; + border: none; + background-color:yellow; + border:2px solid black; + color: black; + cursor: pointer; + border-radius: 5px; + margin-left: 10px; +} + +button:hover { + background-color: black; + color:yellow; + border:yellow 2px solid; +} + +ul { + list-style: none; + padding: 0; +} + +li { + background: #f9f9f9; + margin: 5px 0; + padding: 10px; + border-radius: 3px; + display: flex; + justify-content: space-between; + align-items: center; +} + +li.completed { + text-decoration: line-through; + color: #999; +} + +.task-buttons { + display: flex; + gap: 5px; +} + +.task-buttons button { + background: #007bff; + border: none; + color: #fff; + padding: 5px; + border-radius: 5px; + cursor: pointer; + border: 2px solid black; +} + +.task-buttons button:hover{ + color:#007bff; + border:2px solid #007bff; + background-color: black; +} + +footer{ + margin-top:20px; + } + +.task-buttons button.delete { + background: #dc3545; + border-radius: 5px; + border: 2px solid black; +} + +.task-buttons button.delete:hover { + background: black; + color:#dc3545; + border:2px solid #dc3545; +} + +.task-buttons button.complete { + background: #28a745; + border-radius: 5px; + border: 2px solid black; +} + +.task-buttons button.complete:hover{ + color: #28a745; + background-color:black; + border: 2px solid #28a745; + +} \ No newline at end of file diff --git a/Shaik Ayaz/task 2 calculater/index.html b/Shaik Ayaz/task 2 calculater/index.html new file mode 100644 index 0000000..72d8550 --- /dev/null +++ b/Shaik Ayaz/task 2 calculater/index.html @@ -0,0 +1,41 @@ + + + + + + task 2 Calculater + + + + +

Task 2 | CSEdge

+
+
+ + +
+ +
+ + + + + + + + + + + + + + + + +
+ +
+ + + + \ No newline at end of file diff --git a/Shaik Ayaz/task 2 calculater/java.js b/Shaik Ayaz/task 2 calculater/java.js new file mode 100644 index 0000000..c9c283e --- /dev/null +++ b/Shaik Ayaz/task 2 calculater/java.js @@ -0,0 +1,12 @@ +function display(val) { + document.getElementById('text-val').value = document.getElementById('text-val').value + val; +} +function del() { + document.getElementById('text-val').value = ""; +} + +function Calculate() { + let x = document.getElementById('text-val').value; + let y = eval(x); + document.getElementById('text-val').value = y; +} \ No newline at end of file diff --git a/Shaik Ayaz/task 2 calculater/style.css b/Shaik Ayaz/task 2 calculater/style.css new file mode 100644 index 0000000..a5ec33e --- /dev/null +++ b/Shaik Ayaz/task 2 calculater/style.css @@ -0,0 +1,75 @@ +body { + display: flex; + margin: 0; + justify-content: center; + align-items: center; + height: 100vh; + flex-direction: column; + background-color:black; + color:white; + +} + +.Container { + border: 2px solid white; + margin: 20px 15px; + padding: 10px; + background-color:gray; + border-radius:10px; +} + +#text-val { + height: 60px; + width: 240px; + font-size: 20px; + padding-right: 10px; + border-radius:10px; + background-color:powderblue; + border: 2px solid black; +} + +.input { + display: flex; + flex-direction:row; + margin: 0px 0px 5px 0px; + +} + +.clear { + + font-size: 15px; + margin: 0px 0px 0px 5px; + color: black; + padding:8px; + cursor: pointer; + border-radius:10px; + background-color:gary; + border: 2px solid black; +} + +.btn { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; +} + +.btn button { + text-align: center; + margin: 1px; + height: 50px; + font-size: 20px; + cursor: pointer; + color:red; + font-size:28px; + border-radius:10px; + border: 1px solid black; +} + +.btn button:hover { + color: black; + background-color: red; +} + +.clear:hover { + color: white; + background-color: black; +} \ No newline at end of file diff --git a/Shaik Ayaz/task 3 quiz web/index.html b/Shaik Ayaz/task 3 quiz web/index.html new file mode 100644 index 0000000..82b200a --- /dev/null +++ b/Shaik Ayaz/task 3 quiz web/index.html @@ -0,0 +1,28 @@ + + + + + + Quiz Web App + + + +
+
+
+

+
+
+
Time remaining: 30 seconds
+
+ +
+ +
+ + + + \ No newline at end of file diff --git a/Shaik Ayaz/task 3 quiz web/index.js b/Shaik Ayaz/task 3 quiz web/index.js new file mode 100644 index 0000000..ad09581 --- /dev/null +++ b/Shaik Ayaz/task 3 quiz web/index.js @@ -0,0 +1,109 @@ +const questions = [ + { + question: 'What is the capital of France?', + options: ['Paris', 'London', 'Berlin', 'Madrid'], + correctAnswer: 'Paris' + }, + { + question: 'What is 2 + 2?', + options: ['3', '4', '5', '6'], + correctAnswer: '4' + }, + { + question: 'HTML extention ?', + options: ['.html', '.hmtl', '.xml', 'all true'], + correctAnswer: '.html' + }, + { + question: 'How many heading tags html have ?', + options: ['5', '6', '10', '8'], + correctAnswer: '6' + }, + { + question: 'Javascript extention ?', + options: ['index.xml', 'index.html', 'index.js', 'index.jls'], + correctAnswer: 'index.js' + }, + { + question: 'What is the largest ocean on Earth?', + options: ['Atlantic', 'Indian', 'Arctic', 'Pacific'], + correctAnswer: 'Pacific' + } +]; + +let currentQuestionIndex = 0; +let score = 0; +let timer; +let timeLeft = 30; + +function startQuiz() { + document.getElementById('result-container').style.display = 'none'; + document.getElementById('quiz-container').style.display = 'block'; + currentQuestionIndex = 0; + score = 0; + loadQuestion(); +} + +function loadQuestion() { + clearInterval(timer); + timeLeft = 30; + document.getElementById('time').innerText = timeLeft; + timer = setInterval(updateTimer, 1000); + + const currentQuestion = questions[currentQuestionIndex]; + document.getElementById('question').innerText = currentQuestion.question; + + const optionsContainer = document.getElementById('options'); + optionsContainer.innerHTML = ''; + currentQuestion.options.forEach(option => { + const button = document.createElement('button'); + button.innerText = option; + button.onclick = () => selectAnswer(option); + optionsContainer.appendChild(button); + }); + + document.getElementById('feedback').innerText = ''; + document.getElementById('next-btn').style.display = 'none'; +} + +function selectAnswer(selectedOption) { + const currentQuestion = questions[currentQuestionIndex]; + const feedback = document.getElementById('feedback'); + if (selectedOption === currentQuestion.correctAnswer) { + feedback.innerText = 'Correct!'; + feedback.style.color = 'green'; + score++; + } else { + feedback.innerText = `Wrong! The correct answer is ${currentQuestion.correctAnswer}.`; + feedback.style.color = 'red'; + } + document.getElementById('next-btn').style.display = 'block'; + clearInterval(timer); +} + +function nextQuestion() { + currentQuestionIndex++; + if (currentQuestionIndex < questions.length) { + loadQuestion(); + } else { + showResults(); + } +} + +function showResults() { + document.getElementById('quiz-container').style.display = 'none'; + document.getElementById('result-container').style.display = 'block'; + document.getElementById('score').innerText = `${score} / ${questions.length}`; +} + +function updateTimer() { + if (timeLeft > 0) { + timeLeft--; + document.getElementById('time').innerText = timeLeft; + } else { + clearInterval(timer); + selectAnswer(null); // Handle timeout as an incorrect answer + } +} + +window.onload = startQuiz; diff --git a/Shaik Ayaz/task 3 quiz web/style.css b/Shaik Ayaz/task 3 quiz web/style.css new file mode 100644 index 0000000..1908fa1 --- /dev/null +++ b/Shaik Ayaz/task 3 quiz web/style.css @@ -0,0 +1,84 @@ +body { + font-family: Arial, sans-serif; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + flex-direction: column; + background-color: #f0f0f0; + margin: 0; +} + +#quiz-container, #result-container { + background-color: #fff; + padding: 20px; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + width: 400px; + text-align: center; +} + +#options button { + display: block; + width: 100%; + padding: 10px; + margin: 10px 0; + background-color: #007bff; + color: #fff; + border: none; + border-radius: 4px; + cursor: pointer; +} + +footer{ +margin-top: 50px; } + +#options button:hover { + background-color: #0056b3; +} + +#feedback { + margin: 10px 0; +} + +#timer { + margin-top: 20px; +} + +#next-btn { + display: none; + margin-top: 20px; + padding: 10px 20px; + background-color: #28a745; + color: #fff; + border: none; + border-radius: 4px; + cursor: pointer; +} + +#next-btn:hover { + background-color: #218838; +} + +@media (max-width:400px){ + + body{background-color:red; + height: 90vh; + margin:0px 10px} + +#next-btn { + display: none; + margin-top: 20px; + padding: 10px 20px; + background-color: black; + color: #fff; + border: none; + border-radius: 4px; + cursor: pointer; +} + +#next-btn:hover { + background-color: green; + color:black; +} +} \ No newline at end of file