-
Notifications
You must be signed in to change notification settings - Fork 405
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added Cyclomatic Complexity Calculator (#1942)
- Loading branch information
Showing
5 changed files
with
488 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| # <p align="center">Cyclomatic Complexity Calculator</p> | ||
|
|
||
| ## Description :- | ||
|
|
||
| Calculates the cyclomatic complexity using three different methods. | ||
|
|
||
| ## Tech Stacks :- | ||
|
|
||
| - HTML | ||
| - CSS | ||
| - JavaScript | ||
|
|
||
| ## Features :- | ||
|
|
||
| - Calculates cyclomatic complexity based on number of nodes, components and edges in graph. | ||
| - Calculates cyclomatic complexity using regions of graph. | ||
| - Calculates cyclomatic complexity using conditional nodes of graph. | ||
| - Gives clear and detailed input instructions. | ||
|
|
||
| ## Screenshots :- | ||
|
|
||
| ### Method 1 | ||
|  | ||
|
|
||
| ### Method 2 | ||
|  | ||
|
|
||
| ### Method 3 | ||
|  |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <link rel="stylesheet" href="style.css"> | ||
| <title>Cyclomatic Complexity Calculator</title> | ||
| </head> | ||
|
|
||
| <body> | ||
| <h1>Cyclomatic Complexity Calculator</h1> | ||
|
|
||
| <section> | ||
| <input type="radio" name="tabs" id="tab1" checked> | ||
| <label for="tab1">Method 1</label> | ||
| <input type="radio" name="tabs" id="tab2"> | ||
| <label for="tab2">Method 2</label> | ||
| <input type="radio" name="tabs" id="tab3"> | ||
| <label for="tab3">Method 3</label> | ||
|
|
||
| <div class="tab-content" id="content1"> | ||
| <h2>Calculation of Cyclomatic calculation using <span>Number of nodes, edges and connected components</span></h2> | ||
| <label class="label-text">No. of components:</label> | ||
| <input type="number" name="components" class="clearable1" id="components"> | ||
| <label class="label-text">No. of Nodes:</label> | ||
| <input type="number" name="nodes" class="clearable1" id="nodes"> | ||
| <label class="label-text">No. of Edges:</label> | ||
| <input type="number" name="edges" class="clearable1" id="edges"> | ||
| <label id="cyc-com" class="label-text">Cyclomatic complexity is:</label> | ||
| <h3 id="output1"></h3> | ||
| <button onclick="method1()">Calculate</button> | ||
| <button onclick="clearInputs1()">Clear</button> | ||
| </div> | ||
|
|
||
| <div class="tab-content" id="content2"> | ||
| <h2>Calculation of Cyclomatic calculation using <span>Number of closed regions in the graph</span></h2> | ||
| <label class="label-text">No. of closed regions present in control flow graph</label> | ||
| <input type="number" name="regions" id="regions" class="clearable2"> | ||
| <label class="label-text">Cyclomatic complexity is:</label> | ||
| <h3 id="output2"></h3> | ||
| <button onclick="method2()">Calculate</button> | ||
| <button onclick="clearInputs2()">Clear</button> | ||
| </div> | ||
|
|
||
| <div class="tab-content" id="content3"> | ||
| <h2>Calculation of Cyclomatic calculation using <span>Number of condition nodes</span></h2> | ||
| <label class="label-text">Is there a switch case in the graph:</label> | ||
| <input type="text" id="switch-case" class="clearable3" onchange="checkSwitchCase()"> | ||
| <label class="label-text" id="case-count-text">No. of cases present in the switch case:</label> | ||
| <i class="note" id="note">Including default case</i> | ||
| <input type="number" id="case-count" class="clearable3"> | ||
| <label class="label-text">No. of condition nodes:</label> | ||
| <i class="note">Excluding switch case node</i> | ||
| <input type="number" id="node-count" class="clearable3"> | ||
| <label class="label-text">Cyclomatic complexity is:</label> | ||
| <h3 class="output" id="output3"></h3> | ||
| <button onclick="method3()">Calculate</button> | ||
| <button onclick="clearInputs3()">Clear</button> | ||
| </div> | ||
| </section> | ||
| <script src="script.js"></script> | ||
| </body> | ||
|
|
||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,117 @@ | ||
| // Method 1 | ||
| // Calculation of Cyclomatic calculation using Number of nodes, edges and connected components | ||
|
|
||
| function method1() { | ||
| let components = document.getElementById("components").value.trim(); | ||
| let nodes = document.getElementById("nodes").value; | ||
| let edges = document.getElementById("edges").value; | ||
| if (components == '' || edges == '' || nodes == '') { | ||
| let output1 = "All fields are mandatory"; | ||
| document.getElementById("output1").innerHTML = output1; | ||
| } else if (components < 0 || nodes < 0 || edges < 0) { | ||
| let output1 = "Enter only positive numbers"; | ||
| document.getElementById("output1").innerHTML = output1; | ||
| } else { | ||
| components = parseInt(components); | ||
| nodes = parseInt(nodes); | ||
| edges = parseInt(edges); | ||
| let output1 = edges - nodes + (2 * components); | ||
| document.getElementById("output1").innerHTML = output1; | ||
| } | ||
| } | ||
|
|
||
| // clear input for method1 | ||
| function clearInputs1() { | ||
| const inputs = document.querySelectorAll('.clearable1'); | ||
| inputs.forEach(input => input.value = ''); | ||
| const output = document.getElementById("output1"); | ||
| output.innerHTML = ''; | ||
| } | ||
|
|
||
| // Method 2 | ||
| // Calculation of Cyclomatic calculation using Number of closed regions in the graph | ||
|
|
||
| function method2() { | ||
| let region_number = document.getElementById("regions").value; | ||
| if (region_number == '') { | ||
| let output2 = "All fields mandatory"; | ||
| document.getElementById("output2").innerHTML = output2; | ||
| } else if (region_number < 0) { | ||
| let output2 = "Enter only positive numbers"; | ||
| document.getElementById("output2").innerHTML = output2; | ||
| } else { | ||
| region_number = parseInt(region_number); | ||
| let output2 = region_number + 1; | ||
| document.getElementById("output2").innerHTML = output2; | ||
|
|
||
| } | ||
| } | ||
|
|
||
| // clear input for method2 | ||
| function clearInputs2() { | ||
| const inputs = document.querySelectorAll('.clearable2'); | ||
| inputs.forEach(input => input.value = ''); | ||
| const output = document.getElementById("output2"); | ||
| output.innerHTML = ''; | ||
| } | ||
|
|
||
| // Method 3 | ||
| // Calculation of Cyclomatic calculation using Number of condition nodes | ||
| function method3() { | ||
| let choice = document.getElementById("switch-case").value.trim(); | ||
| let res = choice.toLowerCase(); | ||
| if (res == "yes") { | ||
| let casecount = document.getElementById("case-count").value; | ||
| let nodecount = document.getElementById("node-count").value; | ||
| if (casecount == '' || nodecount == '') { | ||
| let output3 = "All fields are mandatory"; | ||
| document.getElementById("output3").innerHTML = output3; | ||
| } else if (casecount < 0 || nodecount < 0) { | ||
| let output3 = "Enter only positive numbers"; | ||
| document.getElementById("output3").innerHTML = output3; | ||
| } else { | ||
| nodecount = parseInt(nodecount); | ||
| casecount = parseInt(casecount); | ||
| let output3 = nodecount + (casecount - 1) + 1; | ||
| document.getElementById("output3").innerHTML = output3; | ||
| } | ||
| } else if (res == "no") { | ||
| let nodecount = document.getElementById("node-count").value; | ||
| if (nodecount == '') { | ||
| let output3 = "All fields are mandatory"; | ||
| document.getElementById("output3").innerHTML = output3; | ||
| } else if (nodecount < 0) { | ||
| let output3 = "Enter only positive numbers"; | ||
| document.getElementById("output3").innerHTML = output3; | ||
| } else { | ||
| nodecount = parseInt(nodecount); | ||
| let output3 = nodecount + 1; | ||
| document.getElementById("output3").innerHTML = output3; | ||
| } | ||
| } else { | ||
| let output3 = "Please enter 'yes' or 'no' for the switch case question"; | ||
| document.getElementById("output3").innerHTML = output3; | ||
| } | ||
| } | ||
|
|
||
| // Function to hide input field when switch case condition is false in Method 3 | ||
| function checkSwitchCase() { | ||
| var choice = document.getElementById("switch-case").value.trim(); | ||
| let res = choice.toLowerCase(); | ||
| if (res == "yes" || res == 'y') { | ||
| document.getElementById("case-count").style.display = "block"; | ||
| document.getElementById("case-count-text").style.display = "block"; | ||
| } else { | ||
| document.getElementById("case-count").style.display = "none"; | ||
| document.getElementById("case-count-text").style.display = "none"; | ||
| document.getElementById("note").style.display = "none"; | ||
| } | ||
| } | ||
|
|
||
| // clear input for method3 | ||
| function clearInputs3() { | ||
| const inputs = document.querySelectorAll('.clearable3'); | ||
| inputs.forEach(input => input.value = ''); | ||
| const output = document.getElementById("output3"); | ||
| output.innerHTML = ''; | ||
| } |
Oops, something went wrong.