Skip to content

Commit b8b6b06

Browse files
mallikarjun2000mallikarjun2000
authored
Merge branch 'beta' into feature-quick_sort
2 parents af8cb8b + 486ab39 commit b8b6b06

File tree

4 files changed

+122
-92
lines changed

4 files changed

+122
-92
lines changed

‎Logo-removebg.png‎

12.1 KB
Loading

‎README.md‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,20 @@
22

33
<h1 align="center"> Algorithm-Visualizer</h1>
44

5+
6+
A web application, that lets you play with complex algorithms. User's gets to visualize working of algorithms, at different speeds, and different setups.
7+
58
![Issues](https://img.shields.io/github/issues/servermonk/Algorithm-Visualizer)
69
![PRs](https://img.shields.io/github/issues-pr/servermonk/Algorithm-Visualizer)
710
![Maintenance](https://img.shields.io/maintenance/yes/2020)
811
![star](https://img.shields.io/github/stars/servermonk/Algorithm-Visualizer?style=social)
912
![fork](https://img.shields.io/github/forks/servermonk/Algorithm-Visualizer?style=social)
1013

11-
![Hacktober](https://img.shields.io/github/hacktoberfest/2020/servermonk/Algorithm-Visualizer?suggestion_label=help-wanted)
1214

13-
</div>
15+
![Hacktober](https://img.shields.io/github/hacktoberfest/2020/servermonk/Algorithm-Visualizer?suggestion_label=help-wanted) [![chat on slack](https://img.shields.io/badge/chat-on%20slack-brightgreen)](https://join.slack.com/t/algorithmvisu-e2k7997/shared_invite/zt-hvk62rhv-1ysq_VTpavJqhnpfYXdBow)
16+
1417

15-
Understanding becomes sharp when we are able to visualise them, so here we have `Algorithm-Visualizer`, A web application that helps you to see working of standard algorithms, and play with them.
18+
</div>
1619
<hr>
1720

1821
## Algorithms Supported
@@ -28,7 +31,7 @@ Understanding becomes sharp when we are able to visualise them, so here we have
2831
</ul>
2932
</details>
3033
</li>
31-
<li> Soritng Algorihtms
34+
<li> Sorting Algorihtms
3235
<details>
3336
<ul>
3437
<li> Bubble Sort </li>
@@ -40,10 +43,11 @@ Understanding becomes sharp when we are able to visualise them, so here we have
4043
</ul>
4144
</details>
4245
</li>
43-
</ul>
46+
</ul>
47+
4448
## Getting Started
4549

46-
> Click [here](https://servermonk.github.io/Algorithm-Visualizer/) to get directed to the hosted page.
50+
> Click [here](https://vizalgo.netlify.app/) to get directed to the hosted page.
4751
4852
#### GitHub Repository Structure
4953

@@ -54,13 +58,15 @@ Understanding becomes sharp when we are able to visualise them, so here we have
5458

5559
> *Note*: We're not accepting any changes in the `master` branch, make PRs in the `beta` branch only.
5660
61+
> Slack Discussion Channel for contributors: [![chat on slack](https://img.shields.io/badge/chat-on%20slack-brightgreen)](https://join.slack.com/t/algorithmvisu-e2k7997/shared_invite/zt-hvk62rhv-1ysq_VTpavJqhnpfYXdBow)
62+
5763
## Technology Stack Used
5864
<img src="https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white"/> <img src="https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white"/> <img src="https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E"/> <img src="https://img.shields.io/badge/node.js%20-%2343853D.svg?&style=for-the-badge&logo=node.js&logoColor=white"/> <img src="https://img.shields.io/badge/github%20-%23121011.svg?&style=for-the-badge&logo=github&logoColor=white"/>
5965

6066
- <strong> FrontEnd Design: </strong> HTML & CSS
6167
- <strong> Algorithms and animations: </strong> JavaScript
6268
- <strong> Server hosting: </strong> NodeJS
63-
- <strong> Web hosting: </strong> GitHub Pages
69+
- <strong> Web hosting: </strong> Netlify
6470

6571

6672
## Project Setup

‎index.html‎

Lines changed: 30 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -36,42 +36,45 @@
3636
<body>
3737
<div class="navlen">
3838
<div class="navbar">
39-
<box class="element">
40-
<a href="../../index.html">Algorithm Visualizer</a>
39+
<box class="element element-left">
40+
<img src="Logo1.png" alt="logo">
41+
<a href="index.html">Algorithm Visualizer</a>
4142
</box>
4243
<box class="element">
4344
<a href="https://github.com/servermonk/Algorithm-Visualizer" target=_blank>
4445
<i class="fab fa-github-square"></i>Github</a>
4546
</box>
4647
</div>
4748
</div>
48-
<img src="Logo.png" width="80%"
49-
style="margin: auto; margin-top: 20px; margin-bottom: 0px; box-shadow: 3px 3px 5px #666666, -3px -3px 5px white; border-radius: 15px;">
50-
<!-- <img src="https://user-images.githubusercontent.com/26124625/94157470-e811f400-fe9e-11ea-8a7e-d9a08fe1d542.png" width="80%" style="margin: auto; margin-top: 20px; margin-bottom: 0px; box-shadow: 3px 3px 5px #666666, -3px -3px 5px white; border-radius: 15px;"> -->
51-
<div class="flex-cards">
52-
<div class="flex-card-items" onclick="location.href='public/graph/graph.html'">
53-
<heading>Path Algorithms</heading>
54-
<content>
55-
<ul>
56-
<li> Dijkstra's Algorithm </li>
57-
<li> A* Algorithm </li>
58-
<li> Depth First Search (DFS) </li>
59-
<li> Breath First Search (BFS) </li>
60-
</ul>
61-
</content>
49+
<section class="main-content">
50+
<div class="main-content-logo">
51+
<img src="Logo-removebg.png" alt="logo">
6252
</div>
63-
<div class="flex-card-items" onclick="location.href='public/sorting/sorting_page.html'">
64-
<heading>Array Sorting Algorithms</heading>
65-
<content>
66-
<ul>
67-
<li> Bubble Sort </li>
68-
<li> Insertion Sort </li>
69-
<li> Merge Sort Sort </li>
70-
<li> Quick Sort </li>
71-
</ul>
72-
</content>
53+
<div class="flex-cards">
54+
<div class="flex-card-items first-card" onclick="location.href='public/graph/graph.html'">
55+
<heading>Path Algorithms</heading>
56+
<content>
57+
<ul>
58+
<li>Dijkstra's Algorithm</li>
59+
<li>A* Algorithm</li>
60+
<li> Depth First Search (DFS)</li>
61+
<li> Breath First Search (BFS)</li>
62+
</ul>
63+
</content>
64+
</div>
65+
<div class="flex-card-items second-card" onclick="location.href='public/sorting/sorting_page.html'">
66+
<heading>Array Sorting Algorithms</heading>
67+
<content>
68+
<ul>
69+
<li>Bubble Sort</li>
70+
<li>Insertion Sort</li>
71+
<li>Merge Sort Sort</li>
72+
<li>Quick Sort</li>
73+
</ul>
74+
</content>
75+
</div>
7376
</div>
74-
</div>
77+
</section>
7578
</body>
7679

7780
</html>

‎public/styling/style_home.css‎

Lines changed: 79 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -15,16 +15,17 @@ body {
1515
/* ///////////////////////NavBar Styling ///////////////////////// */
1616
.navlen {
1717
width: 100%;
18-
background: #c6d3e7;
18+
background: rgb(50, 50, 50);
1919
box-shadow:
20-
3px 3px 5px #5A5C5E,
21-
-3px -3px 5px #ffffff;
20+
2px 2px 3px #5A5C5E,
21+
-2px -2px 3px #ffffff;
2222
}
2323

2424
.navbar {
25+
height: 5vh;
26+
color: white;
2527
margin-right: auto;
2628
margin-left: auto;
27-
padding: 5px;
2829
display: flex;
2930
flex-wrap: wrap;
3031
justify-content: space-between;
@@ -36,87 +37,106 @@ body {
3637
font-weight: inherit;
3738
background: transparent;
3839
}
40+
.element-left{
41+
display: flex;
42+
flex-direction: row;
43+
justify-content: space-between;
44+
align-items: center;
45+
align-content: center;
46+
}
47+
48+
.element-left img{
49+
height: 30px;
50+
}
51+
3952

4053
.fab {
4154
padding-left: 1px;
4255
padding-right: 5px;
4356
}
4457

45-
.element {
46-
padding-left: 5px;
47-
padding-right: 5px;
48-
background: transparent;
49-
align-items: center;
50-
border-radius: 5px;
58+
/* /////////////////////// Main content of Index ///////////////////////// */
59+
.main-content{
60+
width: 80%;
61+
height: 95vh;
5162
display: flex;
63+
flex-direction: column;
5264
justify-content: center;
53-
border: none;
65+
align-items: center;
66+
align-content: center;
67+
68+
margin-right: 10%;
69+
margin-left: 10%;
5470
}
5571

56-
.element:hover {
57-
box-shadow:
58-
inset 2px 2px 3px #5A5C5E,
59-
inset -2px -2px 3px #ffffff;
72+
.main-content-logo{
73+
align-self: flex-start;
74+
min-width: 50%;
75+
76+
margin-bottom: 30px;
6077
}
6178

62-
a:link,
63-
a:visited {
64-
margin: auto;
65-
background: transparent;
66-
padding: 5px;
67-
color: black;
68-
text-decoration: none;
69-
/* font-size: larger; */
70-
display: inline-flexbox;
71-
border: none;
79+
.main-content-logo img{
80+
height: auto;
81+
width: 100%;
7282
}
7383

74-
/* ///////////////////////NavBar Styling ENDS ///////////////////////// */
84+
.flex-cards{
85+
width: 100%;
7586

76-
.flex-cards {
77-
margin-left: auto;
78-
margin-right: auto;
79-
margin: auto;
80-
width: 80%;
81-
border: none;
8287
display: flex;
83-
flex-wrap: wrap;
84-
align-items: stretch;
85-
justify-content: space-around;
86-
align-items: center;
88+
flex-direction: row;
89+
justify-content: flex-start;
8790
align-content: center;
88-
padding: 5px;
89-
margin-top: 20px;
90-
border: none;
91+
align-items: center;
92+
93+
margin-top: 30px;
94+
margin-bottom: 5%;
9195
}
9296

93-
.flex-card-items {
94-
flex: 1 1 0;
97+
.flex-card-items{
98+
min-width: 40%;
99+
padding: 20px;
100+
color: white;
95101
border-radius: 5px;
96-
margin-left: auto;
97-
margin-right: auto;
98-
padding: 5px;
99-
margin: 10px;
100-
border: none;
101-
align-items: center;
102-
text-align: center;
103-
box-shadow:
104-
3px 3px 5px #5A5C5E,
105-
-3px -3px 5px #ffffff;
102+
transition: 0.3s;
103+
}
104+
105+
.flex-card-items:hover{
106106
cursor: pointer;
107+
transform: scale(0.99);
107108
}
108109

109-
.flex-card-items:hover {
110-
box-shadow:
111-
2px 2px 3px #5A5C5E,
112-
-2px -2px 3px #ffffff;
110+
.flex-card-items heading{
111+
font-size: 2rem;
113112
}
114113

115-
heading {
116-
/* font-size: larger; */
117-
padding: 10px;
114+
.first-card{
115+
background: rgb(50, 50, 50);
118116
}
119117

118+
.second-card{
119+
background: rgb(50, 50, 50);
120+
margin-left: 5%;
121+
}
122+
123+
124+
a:link,
125+
a:visited {
126+
margin: auto;
127+
background: transparent;
128+
padding: 5px;
129+
color: white;
130+
text-decoration: none;
131+
/* font-size: larger; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); */
132+
display: inline-flexbox;
133+
border: none;
134+
}
135+
136+
/* ///////////////////////NavBar Styling ENDS ///////////////////////// */
137+
138+
139+
120140

121141
li {
122142
padding: 5px;
@@ -176,4 +196,5 @@ li {
176196
.navbar {
177197
width: 90%;
178198
}
199+
179200
}

0 commit comments

Comments
 (0)