Add web-technology-mid-test-yudha556 folder

web-technology-mid-test-yudha556/.babelrc

@@ -0,0 +1,4 @@
+{
+    "presets": ["@babel/preset-env"]
+  }
+

web-technology-mid-test-yudha556/.github/workflows/classroom.yml

@@ -0,0 +1,62 @@
+name: Autograding Tests
+
+on:
+  - push
+  - workflow_dispatch
+
+permissions:
+  checks: write
+  actions: read
+  contents: read
+
+jobs:
+  autograding:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20' 
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run tests
+        run: npm test
+
+      - name: Run tests
+        id: run-tests
+        run: |
+          npm test --reporter mocha-junit-reporter > test-results.xml
+          echo "Test results saved to test-results.xml."
+
+      - name: Install xmlstarlet
+        run: sudo apt-get install -y xmlstarlet
+
+      - name: Parse test results
+        id: parse-results
+        run: |
+          total_tests=$(xmlstarlet sel -t -v 'count(//testcase)' test-results.xml)
+          passed_tests=$(xmlstarlet sel -t -v 'count(//testcase[not(failure)])' test-results.xml)
+          max_score=100
+
+          # Calculate score based on the number of passed tests
+          score=$((passed_tests * max_score / total_tests))
+
+          result_summary="Total tests: $total_tests\nPassed tests: $passed_tests\nScore: $score/$max_score\n"
+
+          # Summary output
+          echo -e "$result_summary"
+
+          # Final summary
+          if [[ $total_tests -gt 0 ]]; then
+            echo "🏆 Grand total tests passed: $passed_tests/$total_tests tests"
+          else
+            echo "🏆 No tests were run."
+          fi

web-technology-mid-test-yudha556/.gitignore

@@ -0,0 +1 @@
+node_modules/

web-technology-mid-test-yudha556/README.md

@@ -0,0 +1,66 @@
+# Assignment: Create a Password Generator
+
+## Overview
+In this assignment, you will create a simple password generator using HTML, CSS, and JavaScript (DOM manipulation). The password generator will allow users to specify the length of the password and whether to include:
+- Uppercase letters
+- Lowercase letters
+- Numbers
+- Special characters
+
+## Assignment Instructions
+1. **Complete the HTML File**:
+   - Create a form where the user can select the password length (between 8-128 characters).
+   - Include checkboxes for options to include uppercase, lowercase, numbers, and special characters.
+   - Add a button to generate the password.
+   - Display the generated password in a text field.
+
+2. **Complete the CSS File**:
+   - Style the form elements to make the application visually appealing. Consider adding padding, margins, colors, and hover effects for buttons.
+
+3. **Implement the JavaScript Logic**:
+   - Create the logic to generate a password based on the user’s selected criteria.
+   - Ensure that the generated password meets the requirements based on the options chosen by the user.
+   - Display the generated password in the designated text field.
+
+4. **Bonus**: 
+   - Add functionality to the "Copy to Clipboard" button to allow users to copy the generated password with a single click.
+
+## Using GitHub Classroom
+GitHub Classroom is a tool that helps educators manage coding assignments efficiently. Here’s how to get started:
+
+1. **Accessing the Assignment**:
+   - You will receive a link to the GitHub Classroom repository for this assignment.
+   - Click on the link to accept the assignment and create a copy in your GitHub account.
+
+2. **Clone the Repository**:
+   - Open your terminal or Git Bash.
+   - Use the command `git clone <repository-url>` to clone your assignment repository to your local machine. Replace `<repository-url>` with the URL of your repository.
+
+3. **Open the Project**:
+   - Navigate to the project folder on your local machine.
+   - Open the project in your preferred code editor (e.g., VSCode, Sublime Text).
+
+4. **Make Your Changes**:
+   - Complete the HTML, CSS, and JavaScript files as outlined in the assignment instructions.
+
+5. **Testing Your Code**:
+   - Use your browser to open the `index.html` file and test your password generator functionality.
+   - Make sure to fix any issues before submitting.
+
+6. **Committing Your Changes**:
+   - After you’ve completed your assignment, use the following commands in your terminal:
+     ```bash
+     git add .
+     git commit -m "Completed password generator assignment"
+     git push origin main
+     ```
+   - Replace `main` with the appropriate branch name if necessary.
+
+7. **Submitting Your Assignment**:
+   - Once you push your changes to GitHub, your assignment will automatically be submitted for grading in GitHub Classroom.
+
+## Additional Resources
+- [GitHub Documentation](https://docs.github.com/en) for more information on using Git and GitHub.
+- [MDN Web Docs](https://developer.mozilla.org/en-US/) for additional resources on HTML, CSS, and JavaScript.
+
+If you have any questions or need assistance, feel free to reach out!

web-technology-mid-test-yudha556/dom.js

@@ -0,0 +1,28 @@
+// Dont change anything in this file
+
+document.getElementById('generateBtn').addEventListener('click', () => {
+    const length = parseInt(document.getElementById('length').value, 10);
+    const options = {
+        includeUppercase: document.getElementById('includeUppercase').checked,
+        includeLowercase: document.getElementById('includeLowercase').checked,
+        includeNumbers: document.getElementById('includeNumbers').checked,
+        includeSpecialChars: document.getElementById('includeSpecialChars').checked,
+    };
+
+    const password = generatePassword(length, options);
+    document.getElementById('passwordOutput').textContent = password;
+});
+
+// Copy to Clipboard functionality
+document.getElementById('copyBtn').addEventListener('click', () => {
+    const passwordOutput = document.getElementById('passwordOutput').textContent;
+    if (passwordOutput) {
+        navigator.clipboard.writeText(passwordOutput).then(() => {
+            alert('Password copied to clipboard!');
+        }).catch(err => {
+            console.error('Could not copy text: ', err);
+        });
+    } else {
+        alert('No password to copy!');
+    }
+});

web-technology-mid-test-yudha556/grade.js

@@ -0,0 +1,12 @@
+// Dont change anything in this file
+const { execSync } = require('child_process');
+
+try {
+    // Run tests
+    execSync('npm test', { stdio: 'inherit' });
+    console.log('All tests passed!');
+
+} catch (error) {
+    console.error('Some tests failed.');
+    process.exit(1); // Exit with failure
+}

web-technology-mid-test-yudha556/index.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Password Generator</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <div class="password-container">
+            <h1>Password Generator</h1>
+            <!-- TODO: Create an input field for password length (between 8-128 characters) -->
+            <label for="length" id="kriteria">PASSWORD LENGHT:</label>
+            <input type="number" id="length" value="12" min="8" max="128" id="Length">
+        </div>
+        <h3>Select criteria:</h3>
+        <!-- TODO: Create checkboxes for including uppercase, lowercase, numbers, and special characters -->
+        <label>
+            <input type="checkbox" id="includeUppercase"> Include Uppercase
+        </label><br>
+        <label>
+            <input type="checkbox" id="includeLowercase"> Include Lowercase
+        </label><br>
+        <label>
+            <input type="checkbox" id="includeNumbers"> Include Numbers
+        </label><br>
+        <label>
+            <input type="checkbox" id="includeSpecialChars"> Include Special Characters
+        </label><br>
+
+        <!-- TODO: Create a button to generate the password -->
+         <div class="button">
+            <button id="generateBtn">Generate Password</button>
+
+            <!-- BONUS: Add a "Copy to Clipboard" button -->
+            <button id="copyBtn">Copy to Clipboard</button>
+        </div>
+     <!-- TODO: Create a text field to display the generated password -->
+
+        <p id="passwordOutput"></p>
+
+    </div>
+
+    <script src="script.js"></script>
+    <script src="dom.js"></script>
+</body>
+</html>