skill_gap_analyzer_mini_project/script.js at main · keitaop/skill_gap_analyzer_mini_project · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
function scrollToAnalyzer() {
    document.getElementById("analyzer").scrollIntoView({ behavior: "smooth" });
}

let chart; // to control graph

function analyzeSkills() {

    let role = document.getElementById("role").value;
    let input = document.getElementById("skills").value.toLowerCase();

    let userSkills = input.split(",").map(s => s.trim());

    let roles = {

        data: ["excel","sql","python","statistics","powerbi","communication","data cleaning","visualization","analysis","reporting"],

        ai: ["python","machine learning","deep learning","nlp","statistics","tensorflow","pandas","data preprocessing","math","communication"],

        web: ["html","css","javascript","react","node","mongodb","git","api","responsive design","debugging"],

        dev: ["c","java","python","dsa","oop","git","problem solving","debugging","algorithms","communication"],

        cyber: ["networking","security","cryptography","ethical hacking","linux","firewalls","risk analysis","incident response","python","communication"],

        cloud: ["aws","azure","gcp","docker","kubernetes","networking","linux","security","monitoring","automation"],

        ml: ["python","machine learning","data","statistics","tensorflow","pytorch","feature engineering","model tuning","math","communication"],

        ui: ["figma","design","wireframe","prototype","ux research","usability","color theory","typography","creativity","communication"],

        mobile: ["java","kotlin","flutter","react native","api","firebase","ui","debugging","testing","git"],

        game: ["c++","unity","unreal","physics","animation","graphics","math","logic","debugging","creativity"]
    };

    let required = roles[role];

    let match = 0;
    let missing = [];

    for (let skill of required) {
        if (userSkills.includes(skill)) {
            match++;
        } else {
            missing.push(skill);
        }
    }

    let percent = Math.round((match / required.length) * 100);

    // show loader
    document.getElementById("loader").classList.remove("hidden");

    setTimeout(() => {

        document.getElementById("loader").classList.add("hidden");

        // RESULT OUTPUT
        document.getElementById("result").innerHTML = `
            <h3>Match Score: ${percent}%</h3>
            <p><b>Matched Skills:</b> ${match}</p>

            <p><b>Missing Skills:</b></p>
            <ul>${missing.map(s => `<li>${s}</li>`).join("")}</ul>

            <p><b>Learning Path:</b> Start with ${missing.slice(0,3).join(", ")}</p>
        `;

        // GRAPH DATA (based on role)
        let demand = {
            data: [30, 45, 60, 75, 90],
            ai: [20, 35, 55, 70, 95],
            web: [40, 55, 65, 80, 92],
            dev: [50, 60, 70, 85, 95],
            cyber: [25, 40, 60, 80, 93],
            cloud: [35, 50, 70, 85, 97],
            ml: [20, 40, 65, 85, 98],
            ui: [30, 45, 55, 70, 85],
            mobile: [25, 40, 55, 70, 88],
            game: [20, 30, 45, 60, 75]
        };

        let ctx = document.getElementById("skillChart");

        // destroy old graph
        if (chart) {
            chart.destroy();
        }

        chart = new Chart(ctx, {
            type: "line",
            data: {
                labels: ["2020", "2021", "2022", "2023", "2024"],
                datasets: [{
                    label: "Skill Demand in India (%)",
                    data: demand[role],
                    borderWidth: 3,
                    tension: 0.4
                }]
            },
            options: {
                responsive: true
            }
        });

    }, 1200);
}