Skip to content

Commit 0bcf38a

Browse files
blindaksblindaks
authored
Merge branch 'thinkswell:master' into master
2 parents 9ba1482 + 0e82858 commit 0bcf38a

File tree

9 files changed

+311
-0
lines changed

9 files changed

+311
-0
lines changed

‎RandomColorPaletteGenerator/HarshitVashisht11/README.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
## Random Color Palette Generator
2+
3+
screenshot:
4+
5+
![Alt text](<Screenshot (113).png>)

‎RandomColorPaletteGenerator/HarshitVashisht11/Screenshot (113).png‎

38.4 KB
Loading

‎RandomColorPaletteGenerator/HarshitVashisht11/index.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
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+
<link rel="stylesheet" href="style.css">
7+
<title>Random Color Palette Generator</title>
8+
</head>
9+
<body>
10+
<div class="palette">
11+
<!-- Color cards will be added dynamically here -->
12+
</div>
13+
<button id="generateButton">Generate Colors</button>
14+
<script src="script.js"></script>
15+
</body>
16+
</html>

‎RandomColorPaletteGenerator/HarshitVashisht11/script.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
const palette = document.querySelector('.palette');
2+
const generateButton = document.getElementById('generateButton');
3+
4+
function getRandomColor() {
5+
const letters = '0123456789ABCDEF';
6+
let color = '#';
7+
for (let i = 0; i < 6; i++) {
8+
color += letters[Math.floor(Math.random() * 16)];
9+
}
10+
return color;
11+
}
12+
13+
function createColorCard() {
14+
const colorCard = document.createElement('div');
15+
colorCard.classList.add('color-card');
16+
const hexCode = getRandomColor();
17+
colorCard.style.backgroundColor = hexCode;
18+
colorCard.innerHTML = `
19+
<div class="hex-code">${hexCode}</div>
20+
`;
21+
palette.appendChild(colorCard);
22+
23+
colorCard.addEventListener('click', () => {
24+
const tempInput = document.createElement('input');
25+
tempInput.value = hexCode;
26+
document.body.appendChild(tempInput);
27+
tempInput.select();
28+
document.execCommand('copy');
29+
document.body.removeChild(tempInput);
30+
alert(`Hex code ${hexCode} copied to clipboard!`);
31+
});
32+
}
33+
34+
function generatePalette(numColors) {
35+
palette.innerHTML = '';
36+
for (let i = 0; i < numColors; i++) {
37+
createColorCard();
38+
}
39+
}
40+
41+
generateButton.addEventListener('click', () => {
42+
const numColors = Math.floor(Math.random() * 4 + 1) * 2 * 2; // 10, 12, 14, or 16 colors
43+
generatePalette(numColors);
44+
});
45+
46+
generatePalette(10);

‎RandomColorPaletteGenerator/HarshitVashisht11/style.css‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
body {
2+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
3+
text-align: center;
4+
display: flex;
5+
flex-direction: column;
6+
align-items: center;
7+
justify-content: center;
8+
height: 100vh;
9+
margin: 0;
10+
}
11+
12+
.palette {
13+
display: flex;
14+
flex-wrap: wrap;
15+
justify-content: center;
16+
gap: 10px;
17+
}
18+
19+
.color-card {
20+
width: 100px;
21+
height: 100px;
22+
border: 2px solid #000;
23+
text-align: center;
24+
display: flex;
25+
flex-direction: column;
26+
justify-content: center;
27+
}
28+
29+
.hex-code {
30+
font-size: 16px;
31+
}
32+
33+
#generateButton {
34+
margin-top: 20px;
35+
padding: 10px 20px;
36+
font-size: 18px;
37+
}

‎SortingVisualizer/Abhineshjha/README.md‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
# Sorting Visualizer Project Readme
2+
3+
## Overview
4+
5+
This Sorting Visualizer project is a JavaScript-based web application that allows users to visualize various sorting algorithms in action. Sorting algorithms are fundamental in computer science and understanding how they work can be both educational and fun. This project provides a visual representation of sorting algorithms, helping users grasp their inner workings through interactive animations.
6+
7+
![Sorting Visualizer Demo](demo.gif)
8+
9+
## Table of Contents
10+
11+
- [Features](#features)
12+
- [Demo](#demo)
13+
- [Getting Started](#getting-started)
14+
- [Usage](#usage)
15+
- [Available Sorting Algorithms](#available-sorting-algorithms)
16+
- [Contributing](#contributing)
17+
- [License](#license)
18+
19+
## Features
20+
21+
- Visualize sorting algorithms such as Bubble Sort, Merge Sort, Quick Sort, and more.
22+
- Adjustable array size to demonstrate sorting with different data sets.
23+
- Customizable sorting speed for better visualization.
24+
- Clear visualization of the sorting process with color-coded bars.
25+
- Step-by-step animation of the sorting algorithms.
26+
- Easy-to-use interface for users to interact with the visualization.
27+
28+
## Demo
29+
30+
Check out the live demo of the Sorting Visualizer: [Sorting Visualizer Demo](https://example.com)
31+
32+
## Getting Started
33+
34+
To get started with this Sorting Visualizer project on your local machine, follow these steps:
35+
36+
1. Clone the repository:
37+
38+
```bash
39+
git clone https://github.com/your-username/sorting-visualizer.git

‎SortingVisualizer/Abhineshjha/index.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<link rel="stylesheet" href="./style.css" />
9+
<title>Sorting Visualizer</title>
10+
</head>
11+
12+
<body>
13+
<div class="main_container">
14+
<button class="title_btn">🌟 Sorting Visualizer 🌟</button>
15+
<div id="container"></div>
16+
<div>
17+
<button class="btn" onClick="init()">Generate Array ✨</button>
18+
<button class="btn" onClick="play()">Sort 🔥</button>
19+
</div>
20+
</div>
21+
<script src="./script.js"></script>
22+
</body>
23+
24+
</html>

‎SortingVisualizer/Abhineshjha/script.js‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
const n = 9; //number of bars to sort
2+
const array = [];
3+
init();
4+
5+
//generate random numbers
6+
function init() {
7+
for (let i = 0; i < n; i++) {
8+
array[i] = Math.floor(Math.random() * (11 - 1) + 1);
9+
}
10+
showBars();
11+
}
12+
13+
function play() {
14+
const copy = [...array];
15+
const moves = bubbleSort(copy);
16+
animate(moves);
17+
}
18+
19+
//function for animating the bars
20+
function animate(moves) {
21+
if (moves.length == 0) {
22+
showBars();
23+
return;
24+
}
25+
const move = moves.shift();
26+
const [i, j] = move.indices;
27+
if (move.type == 'swap') {
28+
[array[i], array[j]] = [array[j], array[i]];
29+
}
30+
showBars(move);
31+
setTimeout(function () {
32+
animate(moves);
33+
}, 200);
34+
}
35+
36+
//implement the bubble sort function
37+
function bubbleSort(array) {
38+
const moves = [];
39+
do {
40+
var swapped = false;
41+
for (let i = 1; i < array.length; i++) {
42+
moves.push({ indices: [i - 1, i], type: 'comp' }); //we require type swap because we need to differentiate when we are comparing and when we are swapping to show respective move color.
43+
if (array[i - 1] > array[i]) {
44+
swapped = true;
45+
moves.push({ indices: [i - 1, i], type: 'swap' }); //we require type swap because we need to differentiate when we are comparing and when we are swapping to show respective move color.
46+
[array[i - 1], array[i]] = [array[i], array[i - 1]];
47+
}
48+
}
49+
} while (swapped);
50+
return moves;
51+
}
52+
53+
//render the bars dynamically in the index html file
54+
function showBars(move) {
55+
container.innerHTML = '';
56+
for (let i = 0; i < array.length; i++) {
57+
const bar = document.createElement('div');
58+
bar.style.height = array[i] * 10 + '%';
59+
bar.classList.add('bar');
60+
bar.innerHTML = Math.floor(array[i] * 10);
61+
if (move && move.indices.includes(i)) {
62+
bar.style.backgroundColor = move.type == 'swap' ? 'red' : 'green'; //red if swapping green if comparing
63+
}
64+
container.appendChild(bar);
65+
}
66+
}

‎SortingVisualizer/Abhineshjha/style.css‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
.bar {
2+
padding: 10px 12px;
3+
display: flex;
4+
justify-content: center;
5+
width: 25px;
6+
background: rgb(224, 81, 172);
7+
margin: 3px;
8+
border: 3.5px solid rgb(23, 23, 24);
9+
color: whitesmoke;
10+
}
11+
12+
* {
13+
margin: 0;
14+
padding: 0;
15+
box-sizing: border-box;
16+
}
17+
18+
body {
19+
background-color: rgb(70, 68, 68);
20+
font-family: 'Montserrat', sans-serif;
21+
}
22+
body .main_container {
23+
padding: 3rem;
24+
height: 100vh;
25+
width: 100%;
26+
display: flex;
27+
align-items: center;
28+
flex-direction: column;
29+
}
30+
body .main_container #container {
31+
padding: 5rem 0rem;
32+
height: 80%;
33+
display: flex;
34+
align-items: flex-end;
35+
justify-content: center;
36+
}
37+
38+
.btn {
39+
border-radius: 30px;
40+
font-size: 17px;
41+
font-weight: 400;
42+
padding: 1rem;
43+
margin: 0rem 1rem;
44+
border: 0;
45+
cursor: pointer;
46+
transition: ease-in 0.2s;
47+
box-shadow: 0.3rem 0.35rem 0 rgb(23, 23, 24);
48+
border: 3.5px solid rgb(23, 23, 24);
49+
}
50+
51+
.btn:hover {
52+
font-size: 15px;
53+
color: whitesmoke;
54+
background-color: rgb(224, 81, 172);
55+
padding: 1rem;
56+
box-shadow: 0rem 0rem 0 rgb(23, 23, 24);
57+
border: 3.5px solid rgb(23, 23, 24);
58+
}
59+
60+
.title_btn {
61+
border-radius: 30px;
62+
font-size: 25px;
63+
font-weight: 700;
64+
padding: 1rem 4rem;
65+
margin: 0rem 1rem;
66+
border: 0;
67+
transition: ease-in 0.2s;
68+
box-shadow: 0.3rem 0.35rem 0 rgb(23, 23, 24);
69+
border: 3.5px solid rgb(23, 23, 24);
70+
background-color: white;
71+
}
72+
73+
@media screen and (width <= 400px) {
74+
.title_btn {
75+
padding: 0.6rem 2rem;
76+
font-size: 18px;
77+
}
78+
}

0 commit comments

Comments
 (0)