Skip to content

Commit def3ad6

Browse files
saketh-05saketh-05
committed
Added EigenValue and Vector Calculator
Added new calculator for Largest Eigen Value and Eigen Vector of a N x N Matrix using Power method. Added project to the index.html website and also in readme.md file.
1 parent d5fb788 commit def3ad6

File tree

7 files changed

+245
-31
lines changed

7 files changed

+245
-31
lines changed

‎128 - Eigen Value and Vector Calculator/index.html

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Eigenvalue and Eigenvector Calculator</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<div class="container">
11+
<h2>Largest Eigen Value and Eigen Vector Calculator</h2>
12+
<form id="matrix-form">
13+
<label for="dimension">Enter matrix dimension (N x N):</label>
14+
<input type="number" id="dimension" min="2" max="10" value="2" />
15+
<button type="button" onclick="generateMatrixInput()">
16+
Generate Matrix Input
17+
</button>
18+
</form>
19+
<div id="matrix-input"></div>
20+
<button id="calculate" style="display: none" onclick="calculateEigen()">
21+
Calculate
22+
</button>
23+
<div id="results"></div>
24+
</div>
25+
<script src="script.js"></script>
26+
</body>
27+
</html>

‎128 - Eigen Value and Vector Calculator/script.js

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
function generateMatrixInput() {
2+
const dimension = document.getElementById("dimension").value;
3+
const matrixInputDiv = document.getElementById("matrix-input");
4+
matrixInputDiv.innerHTML = ""; // Clear previous inputs
5+
6+
for (let i = 0; i < dimension; i++) {
7+
const rowDiv = document.createElement("div");
8+
for (let j = 0; j < dimension; j++) {
9+
const input = document.createElement("input");
10+
input.type = "number";
11+
input.id = `matrix-${i}-${j}`;
12+
input.value = Math.floor(Math.random() * 10); // Default random values for fun
13+
rowDiv.appendChild(input);
14+
}
15+
matrixInputDiv.appendChild(rowDiv);
16+
}
17+
18+
document.getElementById("calculate").style.display = "inline-block";
19+
}
20+
21+
function calculateEigen() {
22+
const dimension = document.getElementById("dimension").value;
23+
const matrix = [];
24+
25+
// Read matrix values from inputs
26+
for (let i = 0; i < dimension; i++) {
27+
const row = [];
28+
for (let j = 0; j < dimension; j++) {
29+
const value = parseFloat(
30+
document.getElementById(`matrix-${i}-${j}`).value
31+
);
32+
row.push(value);
33+
}
34+
matrix.push(row);
35+
}
36+
37+
// Perform power iteration to find largest eigenvalue and eigenvector
38+
let eigenvalue = 0;
39+
let eigenvector = new Array(dimension).fill(1);
40+
const tolerance = 1e-6;
41+
const maxIterations = 1000;
42+
43+
for (let iter = 0; iter < maxIterations; iter++) {
44+
let newEigenvector = multiplyMatrixVector(matrix, eigenvector);
45+
let norm = Math.max(...newEigenvector.map(Math.abs));
46+
newEigenvector = newEigenvector.map((val) => val / norm);
47+
48+
if (Math.abs(norm - eigenvalue) < tolerance) {
49+
eigenvalue = norm;
50+
eigenvector = newEigenvector;
51+
break;
52+
}
53+
54+
eigenvalue = norm;
55+
eigenvector = newEigenvector;
56+
}
57+
58+
displayResults(eigenvalue, eigenvector);
59+
}
60+
61+
function multiplyMatrixVector(matrix, vector) {
62+
const result = [];
63+
for (let i = 0; i < matrix.length; i++) {
64+
let sum = 0;
65+
for (let j = 0; j < vector.length; j++) {
66+
sum += matrix[i][j] * vector[j];
67+
}
68+
result.push(sum);
69+
}
70+
return result;
71+
}
72+
73+
function displayResults(eigenvalue, eigenvector) {
74+
const resultsDiv = document.getElementById("results");
75+
resultsDiv.innerHTML = `<p><strong>Largest Eigenvalue:</strong> ${eigenvalue.toFixed(6)}</p>`;
76+
resultsDiv.innerHTML += `<p class="value"><strong>Corresponding Eigenvector:</strong></br>[${eigenvector
77+
.map((val) => val.toFixed(6))
78+
.join(", ")}]</p>`;
79+
}

‎128 - Eigen Value and Vector Calculator/style.css

+92
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
body {
2+
font-family: "Arial", sans-serif;
3+
background: rgb(29,29,124);
4+
background: linear-gradient(90deg, rgba(29,29,124,0.9641106442577031) 30%, rgba(0,23,28,1) 90%);
5+
display: flex;
6+
justify-content: center;
7+
position: relative;
8+
color: #473434;
9+
}
10+
11+
.container {
12+
background-color: #ffffff;
13+
padding: 30px;
14+
border-radius: 15px;
15+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
16+
width: 500px;
17+
text-align: center;
18+
position: absolute;
19+
top: 85px;
20+
}
21+
22+
h1 {
23+
margin-bottom: 20px;
24+
font-size: 24px;
25+
color: #0056b3;
26+
}
27+
28+
form {
29+
margin-bottom: 20px;
30+
}
31+
32+
label {
33+
font-size: 16px;
34+
color: #333;
35+
}
36+
37+
input[type="number"] {
38+
width: 60px;
39+
padding: 5px;
40+
margin: 10px 5px;
41+
border: 1px solid #ccc;
42+
border-radius: 5px;
43+
font-size: 16px;
44+
}
45+
46+
button {
47+
padding: 10px 15px;
48+
margin-top: 20px;
49+
font-size: 16px;
50+
color: #fff;
51+
background-color: #007bff;
52+
border: none;
53+
border-radius: 5px;
54+
cursor: pointer;
55+
transition: background-color 0.3s ease;
56+
}
57+
#matrix-form {
58+
display: flex;
59+
align-items: center;
60+
flex-direction: column;
61+
justify-content: center;
62+
}
63+
button:hover {
64+
background-color: #0056b3;
65+
}
66+
67+
#matrix-input {
68+
margin-top: 20px;
69+
}
70+
71+
#results {
72+
margin-top: 30px;
73+
background-color: #f9f9f9;
74+
padding: 15px;
75+
border-radius: 10px;
76+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
77+
}
78+
79+
#results p {
80+
font-size: 16px;
81+
margin: 10px 0;
82+
}
83+
.value{
84+
display: flex;
85+
justify-content: space-between;
86+
flex-direction: column;
87+
}
88+
@media screen and (max-width: 530px) {
89+
.container {
90+
width: 70%;
91+
}
92+
}

‎30DaysOfJavaScript/assets/128.png

328 KB
Loading

‎30DaysOfJavaScript/script.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -190,7 +190,8 @@ function search_project() {
190190
{ name: "Minesweeper", url: "./113 - Minesweeper/index.html" },
191191
{ name: "Guess the Country", url: "./115 - Guess The Country/index.html"},
192192
{ name: "2048 Game", url: "./124 - 2048 Game/index.html"},
193-
{ name: "Flappy Bird Game", url: "./125 - Flappy Bird/index.html"}
193+
{ name: "Flappy Bird Game", url: "./125 - Flappy Bird/index.html"},
194+
{ name: "Largest EigenValue and EigenVector Calculator", url: "./128 - Eigen Value and Vector Calculator/index.html"}
194195
];
195196

196197
// Filter suggestions based on input

‎README.md

+32-30
Original file line numberDiff line numberDiff line change
@@ -141,36 +141,38 @@ Repo containing all the projects made in 30 Days while completing the <b>30 Days
141141
<tr><th></th><th></th></tr>
142142
<tr><td>
143143

144-
| Day | Name |
145-
| --- | :--------------------------------------------------------------------------------------------------------------: |
146-
| 91 | [Multiply Math Game](https://30daysofjs.netlify.app/167%20-%20Multiply%20Math%20Game/) |
147-
| 92 | [Casio](https://30daysofjs.netlify.app/92%20-%20Casio/) |
148-
| 93 | [Typer](https://30daysofjs.netlify.app/93%20-%20Typer/) |
149-
| 94 | [Word Guess](https://30daysofjs.netlify.app/168%20-%20Word%20Guess/) |
150-
| 95 | [Whack a Mole Game](https://30daysofjs.netlify.app/95%20-%20Whack%20a%20Mole%20Game/) |
151-
| 96 | [Pomodoro Clock](https://30daysofjs.netlify.app/96%20-%20Pomodoro%20Clock/) |
152-
| 97 | [Captcha Generator](https://30daysofjs.netlify.app/97%20-%20Captcha%20Generator/) |
153-
| 98 | [Math Game](https://30daysofjs.netlify.app/172%20-%20Math%20Game/) |
154-
| 99 | [BlackJack Game](https://30daysofjs.netlify.app/99%20-%20BlackJack%20Game/) |
155-
| 100 | [Coin Game](https://30daysofjs.netlify.app/166%20-%20Coin%20Game/) |
156-
| 101 | [Bomb Throw Game](https://30daysofjs.netlify.app/164%20-%20Bomb%20Throw%20Game/) |
157-
| 102 | [Minesweeper Game](https://30daysofjs.netlify.app/102%20-%20Minesweeper%20Game/) |
158-
| 103 | [Retro Mario Game](https://30daysofjs.netlify.app/162%20-%20Retro%20Mario%20Game/) |
159-
| 104 | [Catch Me If You Can](https://30daysofjs.netlify.app/104%20-%20Catch%20Me%20If%20You%20Can/) |
160-
| 105 | [Word For Alphabet Speak Aloud](https://30daysofjs.netlify.app/154%20-%20Word%20For%20Alphabet%20Speak%20Aloud/) |
161-
| 106 | [Snowy Particle Js](https://30daysofjs.netlify.app/150%20-%20Snowy%20Particle%20Js/) |
162-
| 107 | [Stack Game](https://30daysofjs.netlify.app/134%20-%20Stack%20Game/) |
163-
| 108 | [Maths addition](https://30daysofjs.netlify.app/108%20-%20Maths%20addition/) |
164-
| 109 | [Number Facts](https://30daysofjs.netlify.app/145%20-%20Number%20Facts/) |
165-
| 110 | [Pixel to em Converter](https://30daysofjs.netlify.app/110%20-%20Pixel%20to%20em%20Converter/) |
166-
| 111 | [Luminosity Particle Js](https://30daysofjs.netlify.app/141%20-%20Luminosity%20Particle%20Js/) |
167-
| 112 | [Maze Game](https://30daysofjs.netlify.app/112%20-%20Maze%20Game/) |
168-
| 113 | [Minesweeper](https://30daysofjs.netlify.app/113%20-%20minesweeper/) |
169-
| 114 | [Movie Guessing Game](https://30daysofjs.netlify.app/114%20-%20Movie%20-%20Guessing%20Game/) |
170-
| 116 | [Shell Game](https://30daysofjs.netlify.app/116%20-%20Shell%20-%20Game/) |
171-
| 124 | [2048 Game](https://30daysofjs.netlify.app/124%20-%202048%20Game/) |
172-
| 125 | [Flappy Bird Game](https://30daysofjs.netlify.app/125%20-%20Flappy%20-%20Bird%20Game/) |
173-
| 126 | [Arcade Game](https://30daysofjs.netlify.app/124%20-%Arcade48%20Game/)
144+
| Day | Name |
145+
| --- | :----------------------------------------------------------------------------------------------------------------------------------: |
146+
| 91 | [Multiply Math Game](https://30daysofjs.netlify.app/167%20-%20Multiply%20Math%20Game/) |
147+
| 92 | [Casio](https://30daysofjs.netlify.app/92%20-%20Casio/) |
148+
| 93 | [Typer](https://30daysofjs.netlify.app/93%20-%20Typer/) |
149+
| 94 | [Word Guess](https://30daysofjs.netlify.app/168%20-%20Word%20Guess/) |
150+
| 95 | [Whack a Mole Game](https://30daysofjs.netlify.app/95%20-%20Whack%20a%20Mole%20Game/) |
151+
| 96 | [Pomodoro Clock](https://30daysofjs.netlify.app/96%20-%20Pomodoro%20Clock/) |
152+
| 97 | [Captcha Generator](https://30daysofjs.netlify.app/97%20-%20Captcha%20Generator/) |
153+
| 98 | [Math Game](https://30daysofjs.netlify.app/172%20-%20Math%20Game/) |
154+
| 99 | [BlackJack Game](https://30daysofjs.netlify.app/99%20-%20BlackJack%20Game/) |
155+
| 100 | [Coin Game](https://30daysofjs.netlify.app/166%20-%20Coin%20Game/) |
156+
| 101 | [Bomb Throw Game](https://30daysofjs.netlify.app/164%20-%20Bomb%20Throw%20Game/) |
157+
| 102 | [Minesweeper Game](https://30daysofjs.netlify.app/102%20-%20Minesweeper%20Game/) |
158+
| 103 | [Retro Mario Game](https://30daysofjs.netlify.app/162%20-%20Retro%20Mario%20Game/) |
159+
| 104 | [Catch Me If You Can](https://30daysofjs.netlify.app/104%20-%20Catch%20Me%20If%20You%20Can/) |
160+
| 105 | [Word For Alphabet Speak Aloud](https://30daysofjs.netlify.app/154%20-%20Word%20For%20Alphabet%20Speak%20Aloud/) |
161+
| 106 | [Snowy Particle Js](https://30daysofjs.netlify.app/150%20-%20Snowy%20Particle%20Js/) |
162+
| 107 | [Stack Game](https://30daysofjs.netlify.app/134%20-%20Stack%20Game/) |
163+
| 108 | [Maths addition](https://30daysofjs.netlify.app/108%20-%20Maths%20addition/) |
164+
| 109 | [Number Facts](https://30daysofjs.netlify.app/145%20-%20Number%20Facts/) |
165+
| 110 | [Pixel to em Converter](https://30daysofjs.netlify.app/110%20-%20Pixel%20to%20em%20Converter/) |
166+
| 111 | [Luminosity Particle Js](https://30daysofjs.netlify.app/141%20-%20Luminosity%20Particle%20Js/) |
167+
| 112 | [Maze Game](https://30daysofjs.netlify.app/112%20-%20Maze%20Game/) |
168+
| 113 | [Minesweeper](https://30daysofjs.netlify.app/113%20-%20minesweeper/) |
169+
| 114 | [Movie Guessing Game](https://30daysofjs.netlify.app/114%20-%20Movie%20-%20Guessing%20Game/) |
170+
| 116 | [Shell Game](https://30daysofjs.netlify.app/116%20-%20Shell%20-%20Game/) |
171+
| 124 | [2048 Game](https://30daysofjs.netlify.app/124%20-%202048%20Game/) |
172+
| 125 | [Flappy Bird Game](https://30daysofjs.netlify.app/125%20-%20Flappy%20-%20Bird%20Game/) |
173+
| 126 | [Arcade Game](https://30daysofjs.netlify.app/124%20-%Arcade48%20Game/) |
174+
| 128 | [Largest EigenValue and EigenVector Calculator](https://30daysofjs.netlify.app/128%20-%20Eigen%20Value%20and%20Vector%20Calculator/) |
175+
174176
</td><td>
175177
</td></tr></table>
176178

‎index.html

+13
Original file line numberDiff line numberDiff line change
@@ -1935,6 +1935,19 @@ <h4>Lights Out</h4>
19351935
<a target="_blank" href="122 - Lights Out/index.html"><i class="fa-solid fa-link"></i> </a>
19361936
</a>
19371937
</div>
1938+
<div class="item">
1939+
<img src="30DaysOfJavaScript\assets\128.png" alt="Largest EigenValue and EigenVector Calculator">
1940+
<h4>Largest EigenValue and EigenVector Calculator</h4>
1941+
<a target="_blank"
1942+
href="https://github.com/swapnilsparsh/30DaysOfJavaScript/tree/master/128%20-%20Eigen%20Value%20and%20Vector%20Calculator">
1943+
<i class="fa-brands fa-square-github"></i>
1944+
<a target="_blank" href="128 - Eigen Value and Vector Calculator/index.html"><i class="fa-solid fa-link"></i> </a>
1945+
</a>
1946+
<div class="description">
1947+
<p> Enter the dimension of matrix and insert values of the matrix. Find out Largest EigenValue and EigenVector!
1948+
</p>
1949+
</div>
1950+
</div>
19381951
</div>
19391952

19401953
<div class="item">

0 commit comments

Comments
 (0)