MLSAKIET0821 · tonmoy-cpu · Oct 29, 2024 · Oct 29, 2024
diff --git a/Calculator-Intermediate.mp4 b/Calculator-Intermediate.mp4
diff --git a/Easy/to-do list application/index.html b/Easy/to-do list application/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>To-Do List</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="container">
+    <h1>To-Do List</h1>
+    <div class="input-container">
+      <input type="text" id="taskInput" placeholder="Add a new task...">
+      <button onclick="addTask()">Add Task</button>
+      <button onclick="clearAllTasks()">Clear All</button>
+    </div>
+    <ul id="taskList"></ul>
+  </div>
+
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/Easy/to-do list application/script.js b/Easy/to-do list application/script.js
@@ -0,0 +1,47 @@
+let tasks = [];
+
+function addTask() {
+  const taskInput = document.getElementById('taskInput');
+  const task = taskInput.value.trim();
+
+  if (task) {
+    tasks.push({ task: task, completed: false });
+    taskInput.value = '';
+    renderTasks();
+  }
+}
+
+function removeTask(index) {
+  tasks.splice(index, 1);
+  renderTasks();
+}
+
+function toggleTaskCompletion(index) {
+  tasks[index].completed = !tasks[index].completed;
+  renderTasks();
+}
+
+function clearAllTasks() {
+  tasks = [];
+  renderTasks();
+}
+
+function renderTasks() {
+  const taskList = document.getElementById('taskList');
+  taskList.innerHTML = '';
+
+  tasks.forEach((taskObj, index) => {
+    const listItem = document.createElement('li');
+    listItem.classList.toggle('completed', taskObj.completed);
+    listItem.innerHTML = `
+      ${taskObj.task}
+      <div>
+        <button onclick="toggleTaskCompletion(${index})">${
+      taskObj.completed ? 'Undo' : 'Complete'
+    }</button>
+        <button onclick="removeTask(${index})">Remove</button>
+      </div>
+    `;
+    taskList.appendChild(listItem);
+  });
+}
diff --git a/Easy/to-do list application/style.css b/Easy/to-do list application/style.css
@@ -0,0 +1,128 @@
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: url("./utils/sethmaughan-UI1SFTkGKNw-unsplash.jpg");
+    background-size: 100%;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+  }
+
+  .container {
+    width: 500px;
+    padding: 20px;
+    background: rgba(72, 72, 72, 0.4);
+    border-radius: 16px;
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(3.5px);
+    -webkit-backdrop-filter: blur(8.5px);
+    border: none;
+    text-align: center;
+  }
+
+  h1 {
+    color: #fff;
+    font-size: 36px;
+    margin-bottom: 20px;
+  }
+
+  .input-container {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 20px;
+  }
+
+  input[type="text"] {
+    width: 65%;
+    padding: 15px;
+    font-size: 18px;
+    border-radius: 8px;
+    border: none;
+    outline: none;
+  }
+
+  button {
+    padding: 15px 20px;
+    background-color: #28a745;
+    color: white;
+    font-size: 18px;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+  }
+
+  button:hover {
+    background-color: #218838;
+  }
+
+  button:nth-child(3) {
+    background-color: #dc3545;
+  }
+
+  button:nth-child(3):hover {
+    background-color: #c82333;
+  }
+
+  ul {
+    list-style: none;
+    padding: 0;
+  }
+
+  li {
+    background-color: #444;
+    padding: 15px;
+    margin: 10px 0;
+    font-size: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-radius: 8px;
+    color: #fff;
+    transition: transform 0.3s ease;
+  }
+
+  li:hover {
+    transform: scale(1.02);
+  }
+
+  li.completed {
+    text-decoration: line-through;
+    opacity: 0.6;
+  }
+
+  li button {
+    background-color: #ffc107;
+    color: white;
+    border: none;
+    border-radius: 6px;
+    padding: 10px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+  }
+
+  li button:hover {
+    background-color: #e0a800;
+  }
+
+  li.completed button {
+    background-color: #6c757d;
+  }
+
+  @media screen and (max-width: 600px) {
+    .container {
+      width: 90%;
+    }
+
+    input[type="text"] {
+      width: 100%;
+      margin-bottom: 10px;
+    }
+
+    .input-container {
+      flex-direction: column;
+    }
+  }
+
diff --git a/Easy/to-do list application/utils/sethmaughan-UI1SFTkGKNw-unsplash.jpg b/Easy/to-do list application/utils/sethmaughan-UI1SFTkGKNw-unsplash.jpg
diff --git a/Intermediate/index.html b/Intermediate/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
+    <title>Calculator</title>
+</head>
+<body>
+    <div class="calculator">
+        <input type="text" placeholder="0" id="inputBox">
+        <div>
+            <button>AC</button>
+            <button>DEL</button>
+            <button class="operators">%</button>
+            <button class="operators">/</button>
+        </div>
+        <div>
+            <button>7</button>
+            <button>8</button>
+            <button>9</button>
+            <button class="operators">*</button>
+        </div>
+        <div>
+            <button>4</button>
+            <button>5</button>
+            <button>6</button>
+            <button class="operators">-</button>
+        </div>
+        <div>
+            <button>1</button>
+            <button>2</button>
+            <button>3</button>
+            <button class="operators">+</button>
+        </div>
+            <button>00</button>
+            <button>0</button>
+            <button>.</button>
+            <button class="btnEqual">=</button>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Intermediate/script.js b/Intermediate/script.js
@@ -0,0 +1,42 @@
+let input = document.getElementById("inputBox");
+let buttons = document.querySelectorAll("button");
+
+let string = "";
+let arr = Array.from(buttons);
+arr.forEach(button=>{
+    button.addEventListener('click',(e) => {
+        if(e.target.innerHTML == '=') {
+            string = eval(string);
+            input.value = string;
+        }
+        else if(e.target.innerHTML == "AC") {
+            string = "";
+            input.value = string;
+        }
+        else if(e.target.innerHTML == "DEL") {
+            string = string.substring(0,string.length-1);
+            input.value = string;
+        }
+        else {
+            string += e.target.innerHTML;
+            input.value = string;
+        }
+    })
+})
+document.addEventListener("keypress",function(event) {
+    calculate(event.key);
+})
+function calculate(key) {
+    switch(key) {
+        case '=': {
+        string = eval(string);
+        input.value = string;
+        break;
+        }
+        default: {
+            string += key;
+            input.value = string;
+            break;
+        }
+    }
+}
diff --git a/Intermediate/style.css b/Intermediate/style.css
@@ -0,0 +1,52 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+}
+body {
+    display: flex;
+    width: 100%;
+    height: 100vh;
+    justify-content: center;
+    align-items: center;
+    background: linear-gradient(45deg,#252525,#3a4452);
+}
+.calculator {
+    border: 1px solid gray;
+    width: 24%;
+    border-radius: 10%;
+    padding: 15px;
+    box-shadow: 0px 3px 15px rgba(113, 115, 119, 0.5);
+}
+input {
+    width: 100%;
+    border: none;
+    padding: 24px;
+    background: transparent;
+    box-shadow: 0px 3px 15px rgba(84, 84, 84, 0.1);
+    font-size: 40px;
+    text-align: right;
+    cursor: pointer;
+    color: white;
+}
+input::placeholder {
+    color: white;
+}
+button {
+    border: none;
+    width: 60px;
+    height: 60px;
+    margin: 10px;
+    border-radius: 50%;
+    background: transparent;
+    color: white;
+    font-size: 20px;
+    box-shadow: -8px -8px 15px rgba(255, 255, 255, 0.1);
+}
+.btnEqual {
+    background-color: orange;
+}
+.operators {
+    color: greenyellow;
+}
diff --git a/Presentation.pptx b/Presentation.pptx