Skip to content

Commit 00de1fa

Browse files
danielvikidanielviki
committed
major update
1 parent f973794 commit 00de1fa

File tree

8 files changed

+303
-208
lines changed

8 files changed

+303
-208
lines changed

‎frontend/package.json

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "sorting-visualizer",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"preview": "vite preview"
10+
},
11+
"dependencies": {
12+
"vue": "^3.3.4",
13+
"axios": "^1.6.2"
14+
},
15+
"devDependencies": {
16+
"@vitejs/plugin-vue": "^4.5.0",
17+
"vite": "^5.0.0"
18+
}
19+
}

‎frontend/script.js

Lines changed: 0 additions & 66 deletions
This file was deleted.

‎frontend/src/App.vue

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
<template>
2+
<div class="container">
3+
<h1>Sorting Visualizer</h1>
4+
5+
<div class="input-section">
6+
<div class="method-selector">
7+
<label for="sortMethod">Select Sorting Method:</label>
8+
<select v-model="sortMethod">
9+
<option value="bubble">Bubble Sort</option>
10+
<option value="insertion">Insertion Sort</option>
11+
<option value="selection">Selection Sort</option>
12+
<option value="merge">Merge Sort</option>
13+
<option value="quick">Quick Sort</option>
14+
<option value="shell">Shell Sort</option>
15+
<option value="heap">Heap Sort</option>
16+
</select>
17+
</div>
18+
19+
<div class="numbers-input">
20+
<label>Enter 5 Numbers:</label>
21+
<div class="input-group">
22+
<input
23+
v-for="(num, index) in numbers"
24+
:key="index"
25+
type="number"
26+
v-model="numbers[index]"
27+
:placeholder="`Number ${index + 1}`"
28+
class="number-input"
29+
>
30+
</div>
31+
</div>
32+
33+
<button @click="sortNumbers" :disabled="isLoading">
34+
{{ isLoading ? 'Sorting...' : 'Sort Numbers' }}
35+
</button>
36+
</div>
37+
38+
<div class="output-section">
39+
<div class="steps-container">
40+
<h2>Sorting Steps:</h2>
41+
<div id="sortingSteps" class="steps-list">
42+
<div v-for="(step, index) in sortingSteps"
43+
:key="index"
44+
class="step-item">
45+
{{ step }}
46+
</div>
47+
</div>
48+
</div>
49+
<div class="result-container">
50+
<h2>Final Result:</h2>
51+
<div id="sortingResult" class="result">{{ result }}</div>
52+
</div>
53+
</div>
54+
</div>
55+
</template>
56+
57+
<script>
58+
import { ref } from 'vue'
59+
60+
export default {
61+
name: 'App',
62+
setup() {
63+
const sortMethod = ref('bubble')
64+
const numbers = ref(Array(5).fill(''))
65+
const sortingSteps = ref([])
66+
const result = ref('')
67+
const isLoading = ref(false)
68+
69+
const sortNumbers = async () => {
70+
// Validate inputs
71+
if (numbers.value.some(n => n === '')) {
72+
alert('Please enter all numbers')
73+
return
74+
}
75+
76+
try {
77+
// Clear previous results
78+
sortingSteps.value = []
79+
result.value = ''
80+
isLoading.value = true
81+
82+
// Send request to backend
83+
const response = await fetch('http://localhost:5000/api/sort', {
84+
method: 'POST',
85+
headers: {
86+
'Content-Type': 'application/json',
87+
},
88+
body: JSON.stringify({
89+
method: sortMethod.value,
90+
numbers: numbers.value.map(n => parseInt(n))
91+
})
92+
})
93+
94+
const data = await response.json()
95+
96+
if (data.error) {
97+
throw new Error(data.error)
98+
}
99+
100+
sortingSteps.value = data.steps
101+
result.value = `[${data.sorted.join(', ')}]`
102+
} catch (error) {
103+
result.value = `Error: ${error.message}`
104+
} finally {
105+
isLoading.value = false
106+
}
107+
}
108+
109+
return {
110+
sortMethod,
111+
numbers,
112+
sortingSteps,
113+
result,
114+
isLoading,
115+
sortNumbers
116+
}
117+
}
118+
}
119+
</script>
120+
121+
<style scoped>
122+
.container {
123+
max-width: 800px;
124+
margin: 0 auto;
125+
padding: 20px;
126+
}
127+
128+
.input-section {
129+
margin: 20px 0;
130+
}
131+
132+
.method-selector, .numbers-input {
133+
margin-bottom: 20px;
134+
}
135+
136+
.input-group {
137+
display: flex;
138+
gap: 10px;
139+
}
140+
141+
.number-input {
142+
width: 80px;
143+
padding: 5px;
144+
}
145+
146+
.steps-list {
147+
max-height: 300px;
148+
overflow-y: auto;
149+
border: 1px solid #ddd;
150+
padding: 10px;
151+
margin: 10px 0;
152+
}
153+
154+
.step-item {
155+
padding: 5px 0;
156+
border-bottom: 1px solid #eee;
157+
}
158+
159+
.result {
160+
padding: 10px;
161+
background-color: #f5f5f5;
162+
border-radius: 4px;
163+
}
164+
</style>

‎frontend/src/assets/main.css

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
:root {
2+
font-family: Arial, sans-serif;
3+
line-height: 1.5;
4+
font-weight: 400;
5+
}
6+
7+
body {
8+
margin: 0;
9+
min-height: 100vh;
10+
}
11+
12+
.container {
13+
max-width: 800px;
14+
margin: 0 auto;
15+
padding: 20px;
16+
}
17+
18+
.input-section {
19+
background-color: #f5f5f5;
20+
padding: 20px;
21+
border-radius: 8px;
22+
margin: 20px 0;
23+
}
24+
25+
.method-selector, .numbers-input {
26+
margin-bottom: 20px;
27+
}
28+
29+
.input-group {
30+
display: flex;
31+
gap: 10px;
32+
flex-wrap: wrap;
33+
}
34+
35+
.number-input {
36+
width: 80px;
37+
padding: 8px;
38+
border: 1px solid #ddd;
39+
border-radius: 4px;
40+
}
41+
42+
button {
43+
background-color: #4CAF50;
44+
color: white;
45+
padding: 10px 20px;
46+
border: none;
47+
border-radius: 4px;
48+
cursor: pointer;
49+
}
50+
51+
button:disabled {
52+
background-color: #cccccc;
53+
cursor: not-allowed;
54+
}
55+
56+
select {
57+
padding: 8px;
58+
margin: 5px 0;
59+
width: 200px;
60+
border-radius: 4px;
61+
border: 1px solid #ddd;
62+
}
63+
64+
.output-section {
65+
background-color: #fff;
66+
padding: 20px;
67+
border-radius: 8px;
68+
border: 1px solid #ddd;
69+
margin-top: 20px;
70+
}
71+
72+
.steps-list {
73+
max-height: 300px;
74+
overflow-y: auto;
75+
padding: 10px;
76+
background-color: #f9f9f9;
77+
border-radius: 4px;
78+
margin: 10px 0;
79+
}
80+
81+
.step-item {
82+
padding: 8px;
83+
border-bottom: 1px solid #eee;
84+
animation: fadeIn 0.5s ease-in-out;
85+
}
86+
87+
.result {
88+
padding: 10px;
89+
background-color: #e8f5e9;
90+
border-radius: 4px;
91+
margin-top: 10px;
92+
}
93+
94+
@keyframes fadeIn {
95+
from { opacity: 0; transform: translateY(-10px); }
96+
to { opacity: 1; transform: translateY(0); }
97+
}

‎frontend/src/main.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { createApp } from 'vue'
2+
import App from './App.vue'
3+
import './assets/main.css'
4+
5+
// Mount Vue app
6+
const app = createApp(App)
7+
app.mount('#app')

0 commit comments

Comments
 (0)