Feedback

README.md

@@ -1,3 +1,4 @@
+[![Open in Visual Studio Code](https://classroom.github.com/assets/open-in-vscode-718a45dd9cf7e7f842a935f5ebbe5719a5e09af4491e668f4dbf3b35d5cca122.svg)](https://classroom.github.com/online_ide?assignment_repo_id=15110808&assignment_repo_type=AssignmentRepo)
 # Developer Kickstart: Introduction to Lightning Web Components (LWC)
 This repository is a foundational pillar of the Developer Kickstart curriculum at Cloud Code Academy. Crafted specifically for budding Salesforce developers, this module introduces the groundbreaking world of Lightning Web Components. LWC opens a new dimension in Salesforce front-end development, emphasizing modern JavaScript techniques, Salesforce data integration, and interactive user interfaces.
 

force-app/main/default/lwc/platformDevCertCalculator/__tests__/platformDevCertCalculator.test.js

@@ -0,0 +1,25 @@
+import { createElement } from 'lwc';
+import PlatformDevCertCalculator from 'c/platformDevCertCalculator';
+
+describe('c-platform-dev-cert-calculator', () => {
+    afterEach(() => {
+        // The jsdom instance is shared across test cases in a single file so reset the DOM
+        while (document.body.firstChild) {
+            document.body.removeChild(document.body.firstChild);
+        }
+    });
+
+    it('TODO: test case generated by CLI command, please fill in test logic', () => {
+        // Arrange
+        const element = createElement('c-platform-dev-cert-calculator', {
+            is: PlatformDevCertCalculator
+        });
+
+        // Act
+        document.body.appendChild(element);
+
+        // Assert
+        // const div = element.shadowRoot.querySelector('div');
+        expect(1).toBe(1);
+    });
+});

force-app/main/default/lwc/platformDevCertCalculator/platformDevCertCalculator.css

@@ -0,0 +1,7 @@
+.green-text { 
+    color: green; 
+} 
+
+.red-text { 
+    color: rgb(142, 3, 15); 
+}

force-app/main/default/lwc/platformDevCertCalculator/platformDevCertCalculator.html

@@ -0,0 +1,92 @@
+<template>
+    <lightning-card title="PD1 Calculator" class="slds-grid slds-grid_align-center">
+        <!-- Process -->
+        <template lwc:if={isFieldValueTooHigh}>
+            <lightning-button variant="brand" label="Calculate" slot="actions" disabled class="slds-var-m-left_x-small"></lightning-button>
+        </template>
+        <template lwc:else>
+            <lightning-button variant="brand" label="Calculate" slot="actions" onclick={calculateScore}></lightning-button>
+        </template>
+        <!-- Input information -->
+        <div class="slds-var-p-horizontal_medium">
+            <lightning-input 
+                type="number" 
+                name="devFundamentals" 
+                label="Developer Fundamentals 23%" 
+                value={devFundamentalsScore} 
+                max={maxFieldValue}
+                onchange={handleChange}
+            ></lightning-input>
+            <lightning-input 
+                type="number" 
+                name="processAutomation" 
+                label="Process Automation and Logic 30%" 
+                value={processAutomationScore} 
+                max={maxFieldValue}
+                onchange={handleChange}
+            ></lightning-input>
+            <lightning-input 
+                type="number" 
+                name="userInterface" 
+                label="User Interface 25%" 
+                value={userInterfaceScore} 
+                max={maxFieldValue}
+                onchange={handleChange}
+            ></lightning-input>
+            <lightning-input 
+                type="number" 
+                name="testDebugDeploy" 
+                label="Testing, Debugging, and Deployment 22%" 
+                value={testDebugDeployScore} 
+                max={maxFieldValue}
+                onchange={handleChange}
+            ></lightning-input>
+        </div>
+        <!-- Display results -->
+        <div slot="footer">
+            <h1 class="slds-text-heading_large">Certification Exam Result</h1>
+            <div class="slds-text-heading_small">Certification Score: <span class={scoreClass}>{certificationScore}%</span></div>
+            <template lwc:if={passExam}>
+                <div class="slds-text-color_success">Congratulations, YOU PASSED!</div>
+            </template>
+            <template lwc:elseif={showResources}>
+                <div class="slds-text-color_destructive">Unfortunately, you did not make the passing score...</div>
+            </template>
+            <div>
+                <h1 class="slds-text-heading_large">Previous Attempt</h1>
+                <lightning-tabset variant="scoped">
+                    <template for:each={attemptHistory} for:item="attempt">
+                        <lightning-tab label={attempt.Id} key={attempt.Id} value={attempt.Id}>
+                            <c-score-information
+                                score={attempt.Score}
+                                attempt-id={attempt.Id}
+                                number-of-questions={numberOfQuestions}
+                                ondeleteattempt={deleteAttemptHandler}
+                            ></c-score-information>
+                        </lightning-tab>
+                    </template>
+                </lightning-tabset>
+            </div>
+            <template lwc:if={showResources}>
+                <lightning-vertical-navigation-section label="Resources">
+                    <lightning-vertical-navigation-item
+                        label="PD1 Exam Guide"
+                        name="pdexamguide"
+                        href="https://trailhead.salesforce.com/content/learn/trails/platform-developer-i-certification-study-guide">
+                    </lightning-vertical-navigation-item>
+                    <lightning-vertical-navigation-item
+                        label="Focus on Force"
+                        name="focusonforce"
+                        href="https://focusonforce.com/salesforce-platform-developer-1-certification-practice-exams/">
+                    </lightning-vertical-navigation-item>
+                    <lightning-vertical-navigation-item
+                        label="Salesforce Mentor"
+                        name="salesforcementor"
+                        href="https://courses.salesforcementor.com/p/salesforce-development-apex-fundamentals">
+                    </lightning-vertical-navigation-item>
+                </lightning-vertical-navigation-section>
+            </template>
+            <p>Press <strong>Calculate</strong> to see your score. Max field value: {maxFieldValue}</p>
+        </div>
+    </lightning-card>
+</template>

force-app/main/default/lwc/platformDevCertCalculator/platformDevCertCalculator.js

@@ -0,0 +1,97 @@
+import { LightningElement } from 'lwc';
+const devFundamentalsWeight = 0.23;
+const processAutomationWeight = 0.3;
+const userInterfaceWeight = 0.25;
+const testDebugDeployWeight = 0.22;
+const passingScore = 68;
+
+export default class PlatformDevCertCalculator extends LightningElement {
+
+    maxFieldValue = 100;
+    isFieldValueTooHigh = false;
+    devFundamentalsScore = 50;
+    processAutomationScore = 50;
+    userInterfaceScore = 50;
+    testDebugDeployScore = 50;
+    certificationScore = 50;
+    numberOfQuestions = 60;
+
+    showResources = false;
+    passExam = false;
+    attemptHistory = [];
+    currentHistoryId = 0;
+
+    get scoreClass() { 
+        return this.passExam ? 'green-text' : 'red-text';
+    }
+
+    handleChange(event) {
+        let value = Number(event.target.value);
+        switch (event.target.name) {
+            case 'devFundamentals':
+                this.devFundamentalsScore = value;
+                break;
+            case 'processAutomation':
+                this.processAutomationScore = value;
+                break;
+            case 'userInterface':
+                this.userInterfaceScore = value;
+                break;
+            case 'testDebugDeploy':
+                this.testDebugDeployScore = value;
+                break;
+        }
+        this.valudateFieldValues();
+    }
+
+    calculateScore() {
+        if (!this.isFieldValueTooHigh) {
+            let devFundWeightedScore = this.devFundamentalsScore * devFundamentalsWeight;
+            let procAutomWeightedScore = this.processAutomationScore * processAutomationWeight;
+            let userIntWeightedScore = this.userInterfaceScore * userInterfaceWeight;
+            let testDebWeightedScore = this.testDebugDeployScore * testDebugDeployWeight;
+            this.certificationScore = Math.round(devFundWeightedScore + procAutomWeightedScore + userIntWeightedScore + testDebWeightedScore);
+            this.showResourcesIfFailed();
+            this.addAttemptHistory(this.certificationScore);
+        }
+    }
+
+    showResourcesIfFailed() {
+        if (this.certificationScore < passingScore) {
+            this.showResources = true;
+        } else {
+            this.showResources = false;
+        }
+        this.passExam = !this.showResources;
+    }
+
+    addAttemptHistory(Score) {
+        this.currentHistoryId++;
+        const attempt = {
+            Id: this.currentHistoryId,
+            Score
+        };
+        this.attemptHistory = [...this.attemptHistory, attempt];
+    }
+
+    deleteAttemptHandler(event) {
+        let attemptId = event.detail;
+        this.attemptHistory = this.attemptHistory.filter(attempt => attempt.Id != attemptId);
+    }
+
+    connectedCallback() {
+        this.currentHistoryId = this.attemptHistory.length;
+    }
+
+    valudateFieldValues() {
+        if (this.devFundamentalsScore > this.maxFieldValue ||
+            this.processAutomationScore > this.maxFieldValue ||
+            this.userInterfaceScore > this.maxFieldValue ||
+            this.testDebugDeployScore > this.maxFieldValue
+        ) {
+            this.isFieldValueTooHigh = true;
+        } else {
+            this.isFieldValueTooHigh = false;
+        }
+    }
+}

force-app/main/default/lwc/platformDevCertCalculator/platformDevCertCalculator.js-meta.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion>59.0</apiVersion>
+    <isExposed>true</isExposed>
+    <masterLabel>Platform Developer I Certification Calculator</masterLabel>
+    <description>Salesforce Platform Developer I Certification Score Checker helps to understand Certification results.</description>
+    <targets>
+        <target>lightning__AppPage</target>
+    </targets>
+</LightningComponentBundle>

force-app/main/default/lwc/scoreInformation/__tests__/scoreInformation.test.js

@@ -0,0 +1,25 @@
+import { createElement } from 'lwc';
+import ScoreInformation from 'c/scoreInformation';
+
+describe('c-score-information', () => {
+    afterEach(() => {
+        // The jsdom instance is shared across test cases in a single file so reset the DOM
+        while (document.body.firstChild) {
+            document.body.removeChild(document.body.firstChild);
+        }
+    });
+
+    it('TODO: test case generated by CLI command, please fill in test logic', () => {
+        // Arrange
+        const element = createElement('c-score-information', {
+            is: ScoreInformation
+        });
+
+        // Act
+        document.body.appendChild(element);
+
+        // Assert
+        // const div = element.shadowRoot.querySelector('div');
+        expect(1).toBe(1);
+    });
+});

force-app/main/default/lwc/scoreInformation/scoreInformation.html

@@ -0,0 +1,33 @@
+<template>
+    <lightning-layout>
+        <lightning-layout-item padding="around-small">
+            <div class="header-column">
+                <p class="field-title" title="Score">Score</p>
+                <p>{score}%</p>
+            </div>
+        </lightning-layout-item>
+        <lightning-layout-item padding="around-small">
+            <div class="header-column">
+                <p class="field-title" title="Score">Correct Questions</p>
+                <p>{numberOfQuestionsCorrect}</p>
+            </div>
+        </lightning-layout-item>
+        <lightning-layout-item padding="around-small">
+            <div class="header-column">
+                <p class="field-title" title="Score">Incorrect Questions</p>
+                <p>{numberOfQuestionsIncorrect}</p>
+            </div>
+        </lightning-layout-item>
+        <lightning-layout-item padding="around-small">
+            <div class="header-column">
+                <lightning-button-icon 
+                    icon-name="utility:delete" 
+                    alternative-text="Delete" 
+                    class="slds-m-left_xx-small" 
+                    title="Delete"
+                    onclick={handleDeleteAttempt}
+                ></lightning-button-icon>
+            </div>
+        </lightning-layout-item>
+    </lightning-layout>
+</template>

force-app/main/default/lwc/scoreInformation/scoreInformation.js

@@ -0,0 +1,23 @@
+import { LightningElement, api } from 'lwc';
+
+export default class ScoreInformation extends LightningElement {
+
+    @api score;
+    @api attemptId;
+    @api numberOfQuestions;
+
+    get numberOfQuestionsCorrect() {
+        return Math.floor((this.score / 100) * this.numberOfQuestions);
+    }
+
+    get numberOfQuestionsIncorrect() {
+        return this.numberOfQuestions - this.numberOfQuestionsCorrect;
+    }
+
+    handleDeleteAttempt() {
+        const deleteEvent = new CustomEvent('deleteattempt', {
+            detail: this.attemptId
+        });
+        this.dispatchEvent(deleteEvent);
+    }
+}

force-app/main/default/lwc/scoreInformation/scoreInformation.js-meta.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion>59.0</apiVersion>
+    <isExposed>false</isExposed>
+</LightningComponentBundle>