diff --git a/2300290120166.pptx b/2300290120166.pptx new file mode 100644 index 00000000..8d4cd826 Binary files /dev/null and b/2300290120166.pptx differ diff --git a/Project PDF.pdf b/Project PDF.pdf new file mode 100644 index 00000000..e814d7f7 Binary files /dev/null and b/Project PDF.pdf differ diff --git a/Recording 2024-10-30 201132.mp4 b/Recording 2024-10-30 201132.mp4 new file mode 100644 index 00000000..8d9264b5 Binary files /dev/null and b/Recording 2024-10-30 201132.mp4 differ diff --git a/project1/AC.png b/project1/AC.png new file mode 100644 index 00000000..c934479b Binary files /dev/null and b/project1/AC.png differ diff --git a/project1/index.html b/project1/index.html new file mode 100644 index 00000000..3f417579 --- /dev/null +++ b/project1/index.html @@ -0,0 +1,33 @@ + + + + + + Attendance Calculator + + + + +
+

Attendance Calculator

+
+ + +
+ + +
+ + +
+ +
+
+
+ + + \ No newline at end of file diff --git a/project1/script.js b/project1/script.js new file mode 100644 index 00000000..9277394c --- /dev/null +++ b/project1/script.js @@ -0,0 +1,32 @@ +const form = document.querySelector('form'); + +form.addEventListener('submit', function (e) { + e.preventDefault(); + + const attended = parseInt(document.querySelector('#attended').value); + const total = parseInt(document.querySelector('#total').value); + const desiredPercentage = parseInt(document.querySelector('#desiredPercentage').value); + const results = document.querySelector('#results'); + + if (isNaN(attended) || attended < 0) { + results.innerHTML = `Please enter a valid number of attended classes: ${attended}`; + } else if (isNaN(total) || total <= 0) { + results.innerHTML = `Please enter a valid total number of classes: ${total}`; + } else if (isNaN(desiredPercentage) || desiredPercentage <= 0 || desiredPercentage > 100) { + results.innerHTML = `Please enter a valid desired percentage: ${desiredPercentage}`; + } else { + const currentPercentage = ((attended / total) * 100).toFixed(2); + + if (currentPercentage > desiredPercentage) { + const classesBunk = Math.round(Math.ceil((100*attended)- (desiredPercentage*total)) / (100+desiredPercentage)); + results.innerHTML = `Your current attendance is ${currentPercentage} and You can bunk ${classesBunk} number of classes`; + } + else if(currentPercentage == desiredPercentage){ + results.innerHTML = `Your current attendance is ${currentPercentage} and You cannot bunk any class as you already have desired percentage`; + } + else { + const classesNeeded = Math.ceil((total*desiredPercentage - (100*attended)) / (100-desiredPercentage)); + results.innerHTML = `Your current attendance is ${currentPercentage} and You need to attend ${classesNeeded} more classes to reach the desired percentage of ${desiredPercentage}`; + } + } +}); diff --git a/project1/style.css b/project1/style.css new file mode 100644 index 00000000..43d85884 --- /dev/null +++ b/project1/style.css @@ -0,0 +1,141 @@ +body { + font-family: Arial, sans-serif; + background-color: #f4f4f4; + margin: 0; + padding: 20px; +} + +.navbar { + background-color: #333; + color: #fff; + padding: 1em; + text-align: center; + position: fixed; + top: 0; + left: 0; + width: 100%; + z-index: 1; +} + +.navbar-brand { + font-size: 1.5em; + font-weight: bold; + margin-right: 1em; +} + +.navbar-nav { + list-style: none; + margin: 0; + padding: 0; + display: flex; + justify-content: space-between; +} + +.nav-item { + margin-right: 2em; +} + +.nav-link { + color: #fff; + text-decoration: none; + transition: color 0.2s ease; +} + +.nav-link:hover { + color: #ccc; +} + +.navbar-toggle { + background-color: #333; + border: none; + color: #fff; + cursor: pointer; + font-size: 1.5em; + padding: 0.5em; + position: absolute; + right: 1em; + top: 1em; + border-radius: 4px; /* Add border radius for better appearance */ +} + +.container { + max-width: 400px; + margin: auto; + background: white; + padding: 20px; + border-radius: 5px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + margin-top: 60px; /* Add margin to account for navbar height */ +} + +h1 { + text-align: center; + color: #333; +} + +label { + display: block; + margin: 10px 0 5px; +} + +input[type="number"] { + width: 100%; + padding: 10px; + margin-bottom: 10px; + border: 1px solid #ccc; + border-radius: 4px; +} + +button { + width: 100%; + padding: 10px; + background-color: #28a745; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; +} + +button:hover { + background-color: #218838; +} + +#results { + margin-top: 20px; + padding: 10px; + border: 1px solid #ccc; + border-radius: 4px; + background-color: #e9ecef; +} + +/* Responsive design */ +@media (max-width: 768px) { + .navbar-nav { + flex-direction: column; + align-items: center; + display: none; /* Hide the navbar items by default on small screens */ + } + + .navbar-nav.active { + display: flex; /* Show navbar items when active */ + } + + .nav-item { + margin-right: 0; + margin-bottom: 1em; + } + + .navbar-toggle { + display: block; /* Show the toggle button */ + } +} + +@media (max-width: 480px) { + .navbar-brand { + font-size: 1em; + } + + .nav-link { + font-size: 0.8em; + } +} \ No newline at end of file diff --git a/project2/Calculator.js b/project2/Calculator.js new file mode 100644 index 00000000..6fd1dbc5 --- /dev/null +++ b/project2/Calculator.js @@ -0,0 +1,16 @@ +function addToDisplay(value) { + document.getElementById('display').value += value; +} + +function resetDisplay() { + document.getElementById('display').value = ''; +} + +function computeResult() { + const displayField = document.getElementById('display'); + try { + displayField.value = eval(displayField.value) || ''; + } catch (error) { + displayField.value = 'Error'; + } +} diff --git a/project2/calculator.css b/project2/calculator.css new file mode 100644 index 00000000..ee11f651 --- /dev/null +++ b/project2/calculator.css @@ -0,0 +1,83 @@ +* { + box-sizing: border-box; +} + +body { + font-family: 'Arial', sans-serif; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + background: linear-gradient(to right, #4facfe, #00f2fe); +} + +.calculator-container { + background: #ffffff; + border-radius: 15px; + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2); + padding: 20px; + width: 100%; + max-width: 400px; +} + +#display { + width: 100%; + height: 70px; + font-size: 32px; + text-align: right; + margin-bottom: 15px; + border: 1px solid #dcdcdc; + border-radius: 8px; + padding: 10px; + background-color: #f9f9f9; + color: #333; +} + +.keypad { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 10px; +} + +.btn { + height: 60px; + font-size: 24px; + background-color: #4a4a4a; + color: #fff; + border: none; + border-radius: 8px; + cursor: pointer; + transition: background-color 0.3s; +} + +.btn:hover { + background-color: #575757; +} + +.operator { + background-color: #ff6347; /* Tomato */ +} + +.operator:hover { + background-color: #e5533d; /* Darker Tomato */ +} + +.equal { + grid-column: span 2; /* Make equal button span two columns */ + background-color: #28a745; /* Green */ +} + +.equal:hover { + background-color: #218838; /* Darker Green */ +} + +/* Responsive Design */ +@media (max-width: 600px) { + #display { + font-size: 28px; /* Slightly smaller font for smaller screens */ + } + .btn { + font-size: 20px; /* Adjust button font size */ + } +} diff --git a/project2/calculator.html b/project2/calculator.html new file mode 100644 index 00000000..c9e565bd --- /dev/null +++ b/project2/calculator.html @@ -0,0 +1,33 @@ + + + + + + Calculator + + + +
+ +
+ + + + + + + + + + + + + + + + +
+
+ + +