MLSAKIET0821 · MOHD-ADNAN-123 · Nov 8, 2024
diff --git a/calculator/Simple Calculator - Google Chrome 2024-11-08 19-44-07.mp4 b/calculator/Simple Calculator - Google Chrome 2024-11-08 19-44-07.mp4
diff --git a/calculator/index.html b/calculator/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Simple Calculator</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+    <div class="calculator">
+        <input type="text" id="display" disabled>
+        <div class="buttons">
+            <button onclick="appendNumber('7')">7</button>
+            <button onclick="appendNumber('8')">8</button>
+            <button onclick="appendNumber('9')">9</button>
+            <button onclick="appendOperator('+')">+</button>
+
+            <button onclick="appendNumber('4')">4</button>
+            <button onclick="appendNumber('5')">5</button>
+            <button onclick="appendNumber('6')">6</button>
+            <button onclick="appendOperator('-')">-</button>
+
+            <button onclick="appendNumber('1')">1</button>
+            <button onclick="appendNumber('2')">2</button>
+            <button onclick="appendNumber('3')">3</button>
+            <button onclick="appendOperator('*')">*</button>
+
+            <button onclick="appendNumber('0')">0</button>
+            <button onclick="clearDisplay()">C</button>
+            <button onclick="calculate()">=</button>
+            <button onclick="appendOperator('/')">/</button>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/calculator/script.js b/calculator/script.js
@@ -0,0 +1,24 @@
+// Function to append numbers to the display
+function appendNumber(number) {
+    document.getElementById('display').value += number;
+}
+
+// Function to append operators to the display
+function appendOperator(operator) {
+    document.getElementById('display').value += operator;
+}
+
+// Function to clear the display
+function clearDisplay() {
+    document.getElementById('display').value = '';
+}
+
+// Function to calculate the result
+function calculate() {
+    try {
+        let result = eval(document.getElementById('display').value);
+        document.getElementById('display').value = result;
+    } catch (e) {
+        document.getElementById('display').value = 'Error';
+    }
+}
diff --git a/calculator/style.css b/calculator/style.css
@@ -0,0 +1,51 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f4f4f4;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+}
+
+.calculator {
+    background-color: white;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+#display {
+    width: 100%;
+    height: 40px;
+    text-align: right;
+    margin-bottom: 20px;
+    font-size: 24px;
+    padding: 5px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+
+.buttons {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 10px;
+}
+
+button {
+    font-size: 20px;
+    padding: 20px;
+    background-color: #f0f0f0;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+button:hover {
+    background-color: #ddd;
+}
+
+button:active {
+    background-color: #ccc;
+}
diff --git a/files/Project Report.docx b/files/Project Report.docx
diff --git a/files/Report.pdf b/files/Report.pdf
diff --git a/files/Web Development Projects.pptx b/files/Web Development Projects.pptx
diff --git a/files/ppt.pdf b/files/ppt.pdf
diff --git a/simpleWeb/Mohd. Adnan - Personal Webpage - Google Chrome 2024-11-08 19-46-02.mp4 b/simpleWeb/Mohd. Adnan - Personal Webpage - Google Chrome 2024-11-08 19-46-02.mp4
diff --git a/simpleWeb/index.html b/simpleWeb/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mohd. Adnan - Personal Webpage</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+
+    <header>
+        <div class="profile-container">
+            <!-- Profile picture -->
+            <img src="https://via.placeholder.com/150" alt="Your Name" class="profile-img">
+            <h1>Mohd. Adnan</h1>
+            <p class="bio">A brief bio about yourself. You can talk about your profession, passions, or hobbies.</p>
+        </div>
+    </header>
+
+    <section class="social-links">
+        <h2>Find Me On</h2>
+        <ul>
+            <li><a href="https://twitter.com/yourprofile" target="_blank">Twitter</a></li>
+            <li><a href="https://www.linkedin.com/in/yourprofile" target="_blank">LinkedIn</a></li>
+            <li><a href="https://github.com/yourprofile" target="_blank">GitHub</a></li>
+        </ul>
+    </section>
+
+    <footer>
+        <p>&copy; 2024 Your Name</p>
+    </footer>
+
+</body>
+</html>
diff --git a/simpleWeb/script.js b/simpleWeb/script.js
diff --git a/simpleWeb/style.css b/simpleWeb/style.css
@@ -0,0 +1,83 @@
+/* Reset some default browser styles */
+body, h1, h2, p, ul, li, a {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    text-decoration: none;
+}
+
+body {
+    font-family: Arial, sans-serif;
+    line-height: 1.6;
+    background-color: #f4f4f9;
+    padding: 0 20px;
+    text-align: center;
+}
+
+/* Header and profile container styling */
+header {
+    background-color: #4CAF50;
+    color: white;
+    padding: 40px 0;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    margin-top: 30px;
+}
+
+.profile-container {
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+.profile-img {
+    width: 150px;
+    height: 150px;
+    border-radius: 50%;
+    object-fit: cover;
+    margin-bottom: 20px;
+}
+
+h1 {
+    font-size: 32px;
+    margin-bottom: 10px;
+}
+
+.bio {
+    font-size: 18px;
+    color: #ddd;
+}
+
+/* Social media links section */
+.social-links {
+    margin-top: 40px;
+}
+
+.social-links h2 {
+    font-size: 28px;
+    color: #333;
+    margin-bottom: 10px;
+}
+
+.social-links ul {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+}
+
+.social-links a {
+    color: #4CAF50;
+    font-size: 20px;
+    transition: color 0.3s;
+}
+
+.social-links a:hover {
+    color: #333;
+}
+
+/* Footer styling */
+footer {
+    margin-top: 50px;
+    color: #777;
+    font-size: 14px;
+    padding: 10px 0;
+}