Added the code · codersmiti/30DaysOfJavaScript@3c071d7 · GitHub
Skip to content

Commit 3c071d7

Browse files
ShruthiKartikShruthiKartik
committed
Added the code
1 parent 9202920 commit 3c071d7

5 files changed

Lines changed: 344 additions & 0 deletions

File tree

‎30DaysOfJavaScript/assets/76.png‎

11.4 KB
Loading

‎76-Transpose-Matrix-Calculator/index.html‎

Lines changed: 67 additions & 0 deletions

‎76-Transpose-Matrix-Calculator/script.js‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
2+
button=document.getElementById('button');
3+
button.addEventListener('click',e=>{
4+
let ans=document.createElement('div');
5+
document.getElementById('matrix').appendChild(ans);
6+
7+
const n=3;
8+
let j=0;
9+
let arr=new Array(n);
10+
let input=document.getElementsByName('array[]');
11+
12+
for (let i = 0; i < n; i++) {
13+
arr[i]=[];
14+
for(;j<(i+1)*n;j++){
15+
let a=input[j];
16+
if(a.value==""){
17+
alert("Enter the values in matrix!");
18+
return;
19+
}
20+
arr[i].push(a.value);
21+
22+
}
23+
}
24+
transpose(arr);
25+
ans.innerHTML="Transpose Matrix: ";
26+
ans.classList.add('fontstyle');
27+
let table=document.createElement('table');
28+
let thead=document.createElement('thead');
29+
let tbody=document.createElement('tbody');
30+
31+
table.appendChild(thead);
32+
table.appendChild(tbody);
33+
document.getElementById('body').appendChild(table);
34+
35+
let trRow=document.createElement('tr');
36+
for (let i = 1; i <= n; i++) {
37+
let thRow=document.createElement('th');
38+
thRow.innerHTML="A"+i;
39+
trRow.appendChild(thRow);
40+
}
41+
thead.appendChild(trRow);
42+
let trData1=document.createElement('tr');
43+
for (let i = 0; i <n; i++) {
44+
let num=arr[0][i];
45+
let tdData1=document.createElement('td');
46+
tdData1.innerHTML=""+num;
47+
trData1.appendChild(tdData1);
48+
}
49+
tbody.appendChild(trData1);
50+
let trData2=document.createElement('tr');
51+
for (let i = 0; i <n; i++) {
52+
let num=arr[1][i];
53+
let tdData2=document.createElement('td');
54+
tdData2.innerHTML=""+num;
55+
trData2.appendChild(tdData2);
56+
}
57+
tbody.appendChild(trData2);
58+
let trData3=document.createElement('tr');
59+
for (let i = 0; i <n; i++) {
60+
let num=arr[2][i];
61+
let tdData3=document.createElement('td');
62+
tdData3.innerHTML=""+num;
63+
trData3.appendChild(tdData3);
64+
}
65+
tbody.appendChild(trData3);
66+
table.classList.add('ansTableClass');
67+
68+
});
69+
function transpose(arr){
70+
for (let i = 0; i < arr.length; i++) {
71+
for (let j = 0; j<i; j++) {
72+
const temp=arr[i][j];
73+
arr[i][j]=arr[j][i];
74+
arr[j][i]=temp;
75+
76+
}
77+
78+
}
79+
}

‎76-Transpose-Matrix-Calculator/style.css‎

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Gideon+Roman&family=PT+Serif&display=swap');
2+
*{
3+
margin: 0;
4+
padding: 0;
5+
}
6+
#body{
7+
background-color: rgb(17 1 32);
8+
}
9+
.container{
10+
position: relative;
11+
}
12+
h1{
13+
margin:3vw;
14+
color: white;
15+
text-align: center;
16+
}
17+
.matrixClass{
18+
color: wheat;
19+
position: absolute;
20+
left:39vw;
21+
top:8vw;
22+
}
23+
input[type="text"]{
24+
width:4vw;
25+
background-color: antiquewhite;
26+
transition: background-color,0.3s,linear;
27+
text-align: center;
28+
}
29+
table{
30+
border:2px solid white;
31+
background-color: black;
32+
padding: 2vw 2vw;
33+
margin: 2vw 3vw;
34+
}
35+
#button{
36+
color: wheat;
37+
position: absolute;
38+
top: 22vw;
39+
left: 48.5vw;
40+
cursor: pointer;
41+
background-color: rgb(25, 76, 214);
42+
border: 2px solid purple;
43+
border-radius: 8px;
44+
width: 5vw;
45+
height: 3vw;
46+
font-size: 17px;
47+
font-family: 'Gideon Roman', cursive;
48+
font-family: 'PT Serif', serif;
49+
50+
}
51+
#button:hover{
52+
color:black;
53+
background-color: rgb(231, 224, 221);
54+
}
55+
56+
.fontstyle{
57+
color: white;
58+
position:absolute;
59+
top: 27vw;
60+
left: -16vw;
61+
font-size: 24px;
62+
font-family: 'Gideon Roman', cursive;
63+
font-family: 'PT Serif', serif;
64+
}
65+
.ansTableClass{
66+
color: wheat;
67+
position: absolute;
68+
top:32vw;
69+
left: 41.5vw;
70+
text-align: center;
71+
}
72+
.ansTableClass td{
73+
padding-right: 1vw;
74+
padding-left: 1vw;
75+
}
76+
@media (min-width:1024px) and (max-width:1300px) {
77+
#button{
78+
top: 25vw;
79+
width: 5vw;
80+
height: 3vw;
81+
font-size: 17px;
82+
}
83+
84+
}
85+
@media (min-width:700px) and (max-width:1024px) {
86+
#button{
87+
top: 29vw;
88+
width: 7vw;
89+
height: 4vw;
90+
left: 47vw;
91+
font-size: 17px;
92+
}
93+
.matrixClass {
94+
position: absolute;
95+
left: 35vw;
96+
top: 8vw;
97+
}
98+
.ansTableClass{
99+
top: 43vw;
100+
left: 39vw;
101+
width: 19%;
102+
}
103+
.fontstyle{
104+
font-size: 22px;
105+
}
106+
input[type="text"]{
107+
width:6vw;
108+
}
109+
110+
}
111+
@media (min-width:500px) and (max-width:700px) {
112+
#button{
113+
top: 43vw;
114+
width: 9vw;
115+
height: 5vw;
116+
font-size: 17px;
117+
left: 45vw;
118+
}
119+
.matrixClass{
120+
left:29vw;
121+
top:16vw;
122+
}
123+
.ansTableClass{
124+
top: 65vw;
125+
left: 33vw;
126+
width: 29%;
127+
}
128+
.fontstyle{
129+
font-size: 22px;
130+
top: 38vw;
131+
left: -23vw;
132+
}
133+
input[type="text"]{
134+
width:9vw;
135+
}
136+
137+
}
138+
@media (min-width:300px) and (max-width:500px) {
139+
#button{
140+
top: 69vw;
141+
width: 13vw;
142+
height: 8vw;
143+
font-size: 17px;
144+
left: 44vw;
145+
}
146+
.matrixClass{
147+
left:25.5vw;
148+
top:29vw;
149+
}
150+
.ansTableClass{
151+
top: 91vw;
152+
left: 33vw;
153+
width: 34%;
154+
}
155+
.fontstyle{
156+
font-size: 19px;
157+
top: 50vw;
158+
left: -22vw;
159+
}
160+
input[type="text"]{
161+
width:12vw;
162+
}
163+
164+
}
165+
@media (max-width:300px) {
166+
#button{
167+
top: 73vw;
168+
width: 15vw;
169+
height: 10vw;
170+
font-size: 17px;
171+
left: 44vw;
172+
}
173+
.matrixClass{
174+
left:26vw;
175+
top:30vw;
176+
}
177+
.ansTableClass{
178+
top: 100vw;
179+
left: 35vw;
180+
}
181+
.fontstyle{
182+
font-size: 17px;
183+
top: 56vw;
184+
left: -22vw;
185+
}
186+
input[type="text"]{
187+
width:11vw;
188+
}
189+
190+
}

‎index.html‎

Lines changed: 8 additions & 0 deletions

0 commit comments

Comments
 (0)