From 3331bb7e4b846e38867840fe670b7ebb6668f620 Mon Sep 17 00:00:00 2001 From: Shariq <109452033+Shariq2003@users.noreply.github.com> Date: Sat, 12 Oct 2024 21:49:23 +0530 Subject: [PATCH 1/7] Update README.md --- Vanilla-JS-Projects/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/Vanilla-JS-Projects/README.md b/Vanilla-JS-Projects/README.md index a7fb612f3..1eba26898 100644 --- a/Vanilla-JS-Projects/README.md +++ b/Vanilla-JS-Projects/README.md @@ -123,6 +123,7 @@ | 96 | [Github-Profile-Viewer](./Intermediate/Github-Profile-Viewer/) | ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) | | 97 | [Qr-Code-Generator](./Basic/Qr-Code-Generator/) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) | | 98 | [Amazon-Clone](./Intermediate/Amazon-Clone/) | ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) | +| 99 | [N-Queen-Visualizer](./Intermediate/N-Queen-Visualizer/) | ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) | From a316558641818bd07c522da348222a3513c279bf Mon Sep 17 00:00:00 2001 From: Shariq <109452033+Shariq2003@users.noreply.github.com> Date: Sat, 12 Oct 2024 21:51:21 +0530 Subject: [PATCH 2/7] Added N-Queen Visualizer --- .../Intermediate/N-Queen-Visualizer/README.md | 58 +++ .../Intermediate/N-Queen-Visualizer/chess.js | 250 +++++++++++++ .../Intermediate/N-Queen-Visualizer/index.css | 339 ++++++++++++++++++ .../N-Queen-Visualizer/index.html | 63 ++++ 4 files changed, 710 insertions(+) create mode 100644 Vanilla-JS-Projects/Intermediate/N-Queen-Visualizer/README.md create mode 100644 Vanilla-JS-Projects/Intermediate/N-Queen-Visualizer/chess.js create mode 100644 Vanilla-JS-Projects/Intermediate/N-Queen-Visualizer/index.css create mode 100644 Vanilla-JS-Projects/Intermediate/N-Queen-Visualizer/index.html diff --git a/Vanilla-JS-Projects/Intermediate/N-Queen-Visualizer/README.md b/Vanilla-JS-Projects/Intermediate/N-Queen-Visualizer/README.md new file mode 100644 index 000000000..6bad7a149 --- /dev/null +++ b/Vanilla-JS-Projects/Intermediate/N-Queen-Visualizer/README.md @@ -0,0 +1,58 @@ +# N-Queens Visualiser + +Welcome to the **N-Queens Visualiser**! This web application allows you to visualize the classic N-Queens problem, where the objective is to place N queens on an N x N chessboard such that no two queens threaten each other. This is achieved by ensuring that no two queens share the same row, column, or diagonal. + +## Table of Contents + +- [Features](#features) +- [Technologies Used](#technologies-used) +- [Getting Started](#getting-started) +- [How to Use](#how-to-use) +- [Contributing](#contributing) +- [License](#license) + +## Features + +- Interactive visualization of the N-Queens problem +- Ability to input the number of queens (up to 8) +- Slider for controlling the speed of visualization +- Displays all possible arrangements of queens for the given input +- Responsive design for both desktop and mobile + +## Technologies Used + +- HTML +- CSS +- JavaScript +- [Font Awesome](https://fontawesome.com/) for icons + +## Getting Started + +To get a local copy up and running follow these simple steps: + +1. Clone the repository: + + ```bash + git clone https://github.com/yourusername/N-Queens-Visualiser.git + ``` +2. Navigate to the project directory: + ```bash + cd N-Queens-Visualiser + ``` +3. Open index.html in your web browser. + +## How to Use +1. Enter the number of queens you want to place on the chessboard in the input field. +2. Use the slider to adjust the speed of the visualization. +3. Click the Play button to start the visualization. +4. You can stop the visualization at any time. + + +## Contributing +Contributions are welcome! Please follow these steps to contribute to this project: + +1. Fork the repository. +2. Create a new branch (git checkout -b feature/YourFeature). +3. Commit your changes (git commit -m 'Add some feature'). +4. Push to the branch (git push origin feature/YourFeature). +5. Open a Pull Request. diff --git a/Vanilla-JS-Projects/Intermediate/N-Queen-Visualizer/chess.js b/Vanilla-JS-Projects/Intermediate/N-Queen-Visualizer/chess.js new file mode 100644 index 000000000..f3abbb66c --- /dev/null +++ b/Vanilla-JS-Projects/Intermediate/N-Queen-Visualizer/chess.js @@ -0,0 +1,250 @@ +const numberbox = document.getElementById("numberbox"); +const slider = document.getElementById("slider"); +const progressBar = document.getElementById("progress-bar") +const playButton = document.getElementById('play-button'); +const pauseButton = document.getElementById("pause-button"); +const queen = ''; + +let isMainContainerVisible = false; + +function toggleVisibility() { + const landingPage = document.querySelector('.landing-div'); + const mainContainer = document.querySelector('.n-queen'); + + if (isMainContainerVisible) { + landingPage.style.display = 'none'; + mainContainer.style.display = 'flex'; + } else { + landingPage.style.display = 'block'; + mainContainer.style.display = 'none'; + } +} +window.onload = toggleVisibility; +document.getElementById('start-button').onclick = function () { + isMainContainerVisible = true; + toggleVisibility(); +}; + + +let n, speed, tempSpeed, q, Board = 0; +let array = [0, 2, 1, 1, 3, 11, 5, 41, 93]; + +// Used to store the state of the boards; +let pos = {}; + +speed = (100 - slider.value) * 10; +tempSpeed = speed; +slider.oninput = function () { + progressBar.style.width = this.value + "%"; + const sliderValue = parseInt(this.value, 10); + if (sliderValue <= 25) { + progressBar.style.backgroundColor = "green"; + slider.className = 'slider green'; + } else if (sliderValue > 25 && sliderValue <= 75) { + progressBar.style.backgroundColor = "#ffd200"; + slider.className = 'slider yellow'; + } else { + progressBar.style.backgroundColor = "red"; + slider.className = 'slider red'; + } + + speed = sliderValue; + speed = (100 - speed) * 10; +}; + + + +class Queen { + constructor() { + this.position = Object.assign({}, pos); + this.uuid = []; + } + + nQueen = async () => { + Board = 0; + this.position[`${Board}`] = {}; + numberbox.disabled = true; + await q.solveQueen(Board, 0, n); + await q.clearColor(Board); + numberbox.disabled = false; + } + + isValid = async (board, r, col, n) => { + //Setting the current box color to orange + const table = document.getElementById(`table-${this.uuid[board]}`); + const currentRow = table.firstChild.childNodes[r]; + const currentColumn = currentRow.getElementsByTagName("td")[col]; + currentColumn.innerHTML = queen; + await q.delay(); + + // Checking the queen in the same column + for (let i = r - 1; i >= 0; --i) { + const row = table.firstChild.childNodes[i]; + const column = row.getElementsByTagName("td")[col]; + const value = column.innerHTML; + + if (value == queen) { + column.style.backgroundColor = "#ff0000"; + currentColumn.innerHTML = "-" + return false; + } + column.style.backgroundColor = "#ddff00"; + await q.delay(); + } + + //Checking the upper left diagonal + for (let i = r - 1, j = col - 1; i >= 0 && j >= 0; --i, --j) { + const row = table.firstChild.childNodes[i]; + const column = row.getElementsByTagName("td")[j]; + const value = column.innerHTML; + + if (value == queen) { + column.style.backgroundColor = "#fb5607"; + currentColumn.innerHTML = "-" + return false; + } + column.style.backgroundColor = "#ffca3a"; + await q.delay(); + } + + // Checking the upper right diagonal + for (let i = r - 1, j = col + 1; i >= 0 && j < n; --i, ++j) { + const row = table.firstChild.childNodes[i]; + const column = row.getElementsByTagName("td")[j]; + + const value = column.innerHTML; + + if (value == queen) { + column.style.backgroundColor = "#FB5607"; + currentColumn.innerHTML = "-" + return false; + } + column.style.backgroundColor = "#ffca3a"; + await q.delay(); + } + return true; + } + + clearColor = async (board) => { + for (let j = 0; j < n; ++j) { + const table = document.getElementById(`table-${this.uuid[board]}`); + const row = table.firstChild.childNodes[j]; + for (let k = 0; k < n; ++k) + (j + k) & 1 + ? (row.getElementsByTagName("td")[k].style.backgroundColor = "#03852e") + : (row.getElementsByTagName("td")[k].style.backgroundColor = "#ffffff"); + } + } + + delay = async () => { + await new Promise((done) => setTimeout(() => done(), speed)); + } + + solveQueen = async (board, r, n) => { + if (r == n) { + ++Board; + let table = document.getElementById(`table-${this.uuid[Board]}`); + for (let k = 0; k < n; ++k) { + let row = table.firstChild.childNodes[k]; + row.getElementsByTagName("td")[this.position[board][k]].innerHTML = queen; + } + this.position[Board] = this.position[board]; + return; + } + + for (let i = 0; i < n; ++i) { + await q.delay(); + // console.log("outside:" + board); + await q.clearColor(board); + if (await q.isValid(board, r, i, n)) { + await q.delay(); + // console.log("inside:" + board) + await q.clearColor(board); + let table = document.getElementById(`table-${this.uuid[board]}`); + let row = table.firstChild.childNodes[r]; + row.getElementsByTagName("td")[i].innerHTML = queen; + + this.position[board][r] = i; + + if (await q.solveQueen(board, r + 1, n)) + await q.clearColor(board); + + await q.delay(); + board = Board; + // console.log(this.Board) + table = document.getElementById(`table-${this.uuid[board]}`); + // console.log(JSON.parse(JSON.stringify(table))); + row = table.firstChild.childNodes[r]; + row.getElementsByTagName("td")[i].innerHTML = "-"; + + delete this.position[`${board}`][`${r}`]; + } + } + } +} + +playButton.onclick = async function visualise() { + const chessBoard = document.getElementById("n-queen-board"); + const arrangement = document.getElementById("queen-arrangement"); + + n = numberbox.value; + q = new Queen(); + + if (n > 8) { + numberbox.value = ""; + alert("Queen value is too large"); + return; + } else if (n < 1) { + numberbox.value = ""; + alert("Queen value is too small"); + return; + } + + // Removing all the of previous execution context + while (chessBoard.hasChildNodes()) { + chessBoard.removeChild(chessBoard.firstChild); + } + if (arrangement.hasChildNodes()) { + arrangement.removeChild(arrangement.lastChild) + } + + const para = document.createElement("p"); + para.setAttribute("class", "queen-info"); + para.innerHTML = `For ${n}x${n} board, ${array[n] - 1} arrangements are possible.`; + arrangement.appendChild(para); + + //Adding boards to the Div + if (chessBoard.childElementCount === 0) { + for (let i = 0; i < array[n]; ++i) { + q.uuid.push(Math.random()); + let div = document.createElement('div'); + let table = document.createElement('table'); + let header = document.createElement('h4'); + // div.setAttribute("id", `div-${100 + uuid[i]}`) + header.innerHTML = `Board ${i + 1} ` + table.setAttribute("id", `table-${q.uuid[i]}`); + header.setAttribute("id", `paragraph-${i}`); + chessBoard.appendChild(div); + div.appendChild(header); + div.appendChild(table); + } + } + + for (let k = 0; k < array[n]; ++k) { + let table = document.getElementById(`table-${q.uuid[k]}`); + for (let i = 0; i < n; ++i) { + const row = table.insertRow(i); // inserting ith row + row.setAttribute("id", `Row${i} `); + for (let j = 0; j < n; ++j) { + const col = row.insertCell(j); // inserting jth column + (i + j) & 1 + ? (col.style.backgroundColor = "#FF9F1C") + : (col.style.backgroundColor = "#FCCD90"); + col.innerHTML = "-"; + col.style.border = "0.3px solid #373f51"; + } + } + await q.clearColor(k); + } + await q.nQueen(); +}; \ No newline at end of file diff --git a/Vanilla-JS-Projects/Intermediate/N-Queen-Visualizer/index.css b/Vanilla-JS-Projects/Intermediate/N-Queen-Visualizer/index.css new file mode 100644 index 000000000..1082b62d7 --- /dev/null +++ b/Vanilla-JS-Projects/Intermediate/N-Queen-Visualizer/index.css @@ -0,0 +1,339 @@ +* { + box-sizing: border-box; +} +::-webkit-scrollbar { + width: 10px; +} + +::-webkit-scrollbar-track { + background: #f1f1f1; +} + +::-webkit-scrollbar-thumb { + background: #888; +} + +::-webkit-scrollbar-thumb:hover { + background: #555; +} + +body { + margin: 0; + padding: 0; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + font-family: "Arial", sans-serif; + background-color: #011627; +} + +.header { + width: 100%; + background-color: #00464f; + color: #fdfffc; + position: absolute; + top: 0; +} + +.header h2 { + padding: 0.5em; + text-align: center; +} +.landing-div { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + /* padding: 20px; */ + /* border-radius: 15px; */ + max-width: 800px; + font-weight: bold; + text-align: center; + word-wrap: break-word; + overflow-wrap: break-word; + margin: 0 auto; + padding: 0 10px; +} +.justified-text { + text-align: justify; +} +.landing-div h1 { + font-size: 2.5em; + margin-bottom: 20px; + text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); +} + +#start-button { + margin-top: 20px; + padding: 15px 30px; + border: none; + background: linear-gradient(90deg, #f72585, #ff006e); + color: #fdfffc; + border-radius: 8px; + cursor: pointer; + font-size: 20px; + transition: transform 0.2s, background-color 0.2s; +} + +#start-button:hover { + transform: scale(1.05); + background: linear-gradient(90deg, #ff006e, #f72585); +} + +.container { + min-width: 50%; + max-width: 1500px; + height: 80%; + background: linear-gradient(135deg, #ffffff, #e2e2e2); + margin-top: 5rem; + padding: 30px; + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2); + border-radius: 12px; + overflow-y: auto; +} + +div.n-queen { + width: 100%; + display: none; + flex-direction: column; + align-items: center; + justify-content: center; +} + +/* .inputbox { + position: relative; + margin-bottom: 2em; + width: 100%; +} */ + +.inputbox { + width: 100%; + font-size: 16px; + padding: 10px; + background: #f9f9f9; + border-radius: 35px; + outline: none; + position: relative; + z-index: 1; + box-shadow: inset 0 0 0 4px transparent; + transition: box-shadow 0.3s ease-in-out; + margin-bottom: 25px; +} + +.inputbox:before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border-radius: 25px; + z-index: -1; + background: linear-gradient(45deg, #f72585, #ff006e, #fa7921, #2ec4b6); + padding: 4px; + animation: rotateGradient 1s ease-in infinite; +} + +@keyframes rotateGradient { + 0% { + background: linear-gradient(45deg, #f72585, #ff006e, #fa7921, #2ec4b6); + } + 15% { + background: linear-gradient(315deg, #2ec4b6, #f72585, #ff006e, #fa7921); + } + 25% { + background: linear-gradient(135deg, #ff006e, #fa7921, #2ec4b6, #f72585); + } + 35% { + background: linear-gradient(315deg, #2ec4b6, #f72585, #ff006e, #fa7921); + } + 50% { + background: linear-gradient(225deg, #fa7921, #2ec4b6, #f72585, #ff006e); + } + 65% { + background: linear-gradient(45deg, #f72585, #ff006e, #fa7921, #2ec4b6); + } + 75% { + background: linear-gradient(135deg, #ff006e, #fa7921, #2ec4b6, #f72585); + } + 85% { + background: linear-gradient(315deg, #2ec4b6, #f72585, #ff006e, #fa7921); + } + 100% { + background: linear-gradient(315deg, #2ec4b6, #f72585, #ff006e, #fa7921); + } +} + +.numberbox { + width: 100%; + font-size: 16px; + padding: 10px; + border: none; + border-radius: 35px; + outline: none; + transition: border-color 0.3s; + background-color: #f9f9f9; +} + +.numberbox:focus { + border-color: #f72585; +} + +.inputbox label { + position: absolute; + top: 23px; + left: 25px; + color: #2ec4b6; + font-size: 14px; + pointer-events: none; + transition: 0.3s; +} + +.inputbox input:focus ~ label, +.inputbox input:disabled ~ label, +.inputbox input:valid ~ label { + top: -18px; + font-size: 12px; + font-weight: 400; +} + +.slider-container { + position: relative; + width: 100%; + margin-top: 2em; +} + +.slider { + -webkit-appearance: none; + width: 100%; + height: 8px; + border-radius: 10px; + background: #d1d1d1; + outline: none; + transition: background 0.3s; +} + +.slider:hover { + background: #b0b0b0; +} + +.slider::after { + content: "SLOW"; + position: absolute; + top: -25px; + font-size: 18px; + font-weight: 700; + color: #fa7921; +} + +.slider::before { + content: "FAST"; + position: absolute; + top: -25px; + right: 0px; + font-size: 18px; + font-weight: 700; + color: #fa7921; +} + +.slider::-webkit-slider-thumb { + -webkit-appearance: none; + width: 24px; + height: 24px; + background-color: #ffd200; + border-radius: 50%; + cursor: pointer; + transition: background-color 0.3s ease; /* Smooth transition */ +} +.slider.green::-webkit-slider-thumb { + background-color: green; +} + +.slider.yellow::-webkit-slider-thumb { + background-color: #ffd200; +} + +.slider.red::-webkit-slider-thumb { + background-color: red; +} +.slider::-moz-range-thumb { + width: 24px; + height: 24px; + background-color: #fa7921; + cursor: pointer; + border-radius: 50%; +} + +#progress-bar { + width: 40%; + height: 8px; + background: #ffd200; + border-radius: 10px; + position: absolute; + top: 7px; + transition: background-color 0.3s ease; /* Smooth transition */ +} + +.play-button { + margin-top: 20px; + padding: 15px 30px; + border: none; + background: linear-gradient(90deg, #0162ff, #ff006e); + color: #fdfffc; + border-radius: 8px; + cursor: pointer; + font-size: 20px; + transition: transform 0.2s, background-color 0.2s; +} + +.play-button:hover { + transform: scale(1.05); + background: linear-gradient(90deg, #ff006e, #0162ff); +} +.queen-arrangement { + margin-top: 20px; + text-align: center; + font-size: 18px; + font-weight: 500; + color: #247ba0; +} + +#n-queen-board { + display: flex; + width: 100%; + margin: 20px auto; + flex-wrap: wrap; + justify-content: center; +} + +#n-queen-board div { + display: flex; + justify-content: center; + flex-direction: column; + margin: 0 10px; + border-radius: 3px; + bottom: 10px; +} + +table { + border-collapse: collapse; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 2); + margin: 0 auto; +} + +td { + width: 35px; + height: 35px; + text-align: center; + border: 1px solid #000; +} + +h4 { + padding: 8px; + background-color: #0582ca; + color: #fdfffc; + text-align: center; + border-radius: 4px; +} \ No newline at end of file diff --git a/Vanilla-JS-Projects/Intermediate/N-Queen-Visualizer/index.html b/Vanilla-JS-Projects/Intermediate/N-Queen-Visualizer/index.html new file mode 100644 index 000000000..8fada0d4a --- /dev/null +++ b/Vanilla-JS-Projects/Intermediate/N-Queen-Visualizer/index.html @@ -0,0 +1,63 @@ + + + + + + N-Queen-Visualiser + + + + +
+

+ N-Queens Visualiser + +

+
+
+
+

Welcome to the Chess Visualiser

+

Objective

+

+ The objective of the N-Queens problem is to place N queens on an N x N chessboard so that no two queens can attack each other. This means that no two queens can share the same row, column, or diagonal. The problem has been around since the 19th century and has fascinated mathematicians, computer scientists, and puzzle enthusiasts for decades. + The problem is considered a classic example of a problem that can be solved using recursion and backtracking. You can formulate the problem recursively by:

+ 1. Simplifying the problem to the most trivial case
+ 2. Generating all possible permutations of the queens' positions
+ 3. Checking if each permutation is a valid placement. +

+ +
+
+
+ + +
+
+ +
+
+ +
+
+
+
+ + + \ No newline at end of file From 39863b94736e50c2521a20e4dcca7c97477b4e47 Mon Sep 17 00:00:00 2001 From: Shariq <109452033+Shariq2003@users.noreply.github.com> Date: Mon, 14 Oct 2024 02:00:38 +0530 Subject: [PATCH 3/7] Update README.md --- .../Intermediate/N-Queen-Visualizer/README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/Vanilla-JS-Projects/Intermediate/N-Queen-Visualizer/README.md b/Vanilla-JS-Projects/Intermediate/N-Queen-Visualizer/README.md index 6bad7a149..9128a87ac 100644 --- a/Vanilla-JS-Projects/Intermediate/N-Queen-Visualizer/README.md +++ b/Vanilla-JS-Projects/Intermediate/N-Queen-Visualizer/README.md @@ -56,3 +56,14 @@ Contributions are welcome! Please follow these steps to contribute to this proje 3. Commit your changes (git commit -m 'Add some feature'). 4. Push to the branch (git push origin feature/YourFeature). 5. Open a Pull Request. + +## Screenshots + +![image](https://github.com/user-attachments/assets/b8187f8d-c9dc-4aba-8d60-70a3ff21f03e) + +![image](https://github.com/user-attachments/assets/31fddb61-90e7-4639-8d33-66dd552bdd75) + +https://github.com/user-attachments/assets/158578b8-81c2-46b8-bc90-c52e23d20c5b + + + From ff84ebca397291d98b0897836026f8bf6af7311d Mon Sep 17 00:00:00 2001 From: Shariq Date: Mon, 14 Oct 2024 17:23:40 +0530 Subject: [PATCH 4/7] Fixes --- .../N-Queen-Visualizer/README.md | 0 .../N-Queen-Visualizer/chess.js | 0 .../N-Queen-Visualizer/index.css | 0 .../N-Queen-Visualizer/index.html | 0 .../N-Queen-Visualizer/screenshot.webp | Bin Vanilla-JS-Projects/README.md | 11 +++++------ 6 files changed, 5 insertions(+), 6 deletions(-) rename Vanilla-JS-Projects/{Intermediate => Advanced}/N-Queen-Visualizer/README.md (100%) rename Vanilla-JS-Projects/{Intermediate => Advanced}/N-Queen-Visualizer/chess.js (100%) rename Vanilla-JS-Projects/{Intermediate => Advanced}/N-Queen-Visualizer/index.css (100%) rename Vanilla-JS-Projects/{Intermediate => Advanced}/N-Queen-Visualizer/index.html (100%) rename Vanilla-JS-Projects/{Intermediate => Advanced}/N-Queen-Visualizer/screenshot.webp (100%) diff --git a/Vanilla-JS-Projects/Intermediate/N-Queen-Visualizer/README.md b/Vanilla-JS-Projects/Advanced/N-Queen-Visualizer/README.md similarity index 100% rename from Vanilla-JS-Projects/Intermediate/N-Queen-Visualizer/README.md rename to Vanilla-JS-Projects/Advanced/N-Queen-Visualizer/README.md diff --git a/Vanilla-JS-Projects/Intermediate/N-Queen-Visualizer/chess.js b/Vanilla-JS-Projects/Advanced/N-Queen-Visualizer/chess.js similarity index 100% rename from Vanilla-JS-Projects/Intermediate/N-Queen-Visualizer/chess.js rename to Vanilla-JS-Projects/Advanced/N-Queen-Visualizer/chess.js diff --git a/Vanilla-JS-Projects/Intermediate/N-Queen-Visualizer/index.css b/Vanilla-JS-Projects/Advanced/N-Queen-Visualizer/index.css similarity index 100% rename from Vanilla-JS-Projects/Intermediate/N-Queen-Visualizer/index.css rename to Vanilla-JS-Projects/Advanced/N-Queen-Visualizer/index.css diff --git a/Vanilla-JS-Projects/Intermediate/N-Queen-Visualizer/index.html b/Vanilla-JS-Projects/Advanced/N-Queen-Visualizer/index.html similarity index 100% rename from Vanilla-JS-Projects/Intermediate/N-Queen-Visualizer/index.html rename to Vanilla-JS-Projects/Advanced/N-Queen-Visualizer/index.html diff --git a/Vanilla-JS-Projects/Intermediate/N-Queen-Visualizer/screenshot.webp b/Vanilla-JS-Projects/Advanced/N-Queen-Visualizer/screenshot.webp similarity index 100% rename from Vanilla-JS-Projects/Intermediate/N-Queen-Visualizer/screenshot.webp rename to Vanilla-JS-Projects/Advanced/N-Queen-Visualizer/screenshot.webp diff --git a/Vanilla-JS-Projects/README.md b/Vanilla-JS-Projects/README.md index 5e98403c7..5140e7910 100644 --- a/Vanilla-JS-Projects/README.md +++ b/Vanilla-JS-Projects/README.md @@ -225,12 +225,6 @@ | [Zomato Clone](./Intermediate/Zomato-Clone) | | | -#### :zap: Row 19 - -| | | | -|:--:|:--:|:--:| -| [N Queen Visualizer](./Intermediate/N-Queen-Visualizer/) | | | - --- @@ -261,6 +255,11 @@ |:--:|:--:|:--:| | [Vocabulary Builder](./Advanced/Vocabulary-Builder) | | | +#### :zap: Row 5 + +| | | | +|:--:|:--:|:--:| +| [N Queen Visualizer](./Advanced/N-Queen-Visualizer/) | | | From 75449ff93cdaf951fa67859f0ca53309c09bce5a Mon Sep 17 00:00:00 2001 From: Shariq Date: Tue, 15 Oct 2024 14:36:08 +0530 Subject: [PATCH 5/7] Fixes --- Vanilla-JS-Projects/README.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/Vanilla-JS-Projects/README.md b/Vanilla-JS-Projects/README.md index 5140e7910..1067fd925 100644 --- a/Vanilla-JS-Projects/README.md +++ b/Vanilla-JS-Projects/README.md @@ -251,15 +251,16 @@ #### :zap: Row 4 -| | | | +| | | | |:--:|:--:|:--:| -| [Vocabulary Builder](./Advanced/Vocabulary-Builder) | | | +| [N Queen Visualizer](./Advanced/N-Queen-Visualizer/) | | | #### :zap: Row 5 -| | | | +| | | | |:--:|:--:|:--:| -| [N Queen Visualizer](./Advanced/N-Queen-Visualizer/) | | | +| [Vocabulary Builder](./Advanced/Vocabulary-Builder) | | | + From 4374729d603fcd084c40714a51f1209ae29ac5f3 Mon Sep 17 00:00:00 2001 From: Shariq Date: Tue, 15 Oct 2024 15:53:41 +0530 Subject: [PATCH 6/7] Fixes --- .../Advanced/N-Queen-Visualizer/README.md | 90 +++++++++---------- 1 file changed, 44 insertions(+), 46 deletions(-) diff --git a/Vanilla-JS-Projects/Advanced/N-Queen-Visualizer/README.md b/Vanilla-JS-Projects/Advanced/N-Queen-Visualizer/README.md index 9128a87ac..582e7596a 100644 --- a/Vanilla-JS-Projects/Advanced/N-Queen-Visualizer/README.md +++ b/Vanilla-JS-Projects/Advanced/N-Queen-Visualizer/README.md @@ -1,69 +1,67 @@ -# N-Queens Visualiser +

đŸ’Ĩ N-Queens Visualiser đŸ’Ĩ

-Welcome to the **N-Queens Visualiser**! This web application allows you to visualize the classic N-Queens problem, where the objective is to place N queens on an N x N chessboard such that no two queens threaten each other. This is achieved by ensuring that no two queens share the same row, column, or diagonal. + -## Table of Contents +

Tech Stack Used 🎮

+ -- [Features](#features) -- [Technologies Used](#technologies-used) -- [Getting Started](#getting-started) -- [How to Use](#how-to-use) -- [Contributing](#contributing) -- [License](#license) +
-## Features + ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white) ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white) ![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white) -- Interactive visualization of the N-Queens problem -- Ability to input the number of queens (up to 8) -- Slider for controlling the speed of visualization -- Displays all possible arrangements of queens for the given input -- Responsive design for both desktop and mobile +
-## Technologies Used -- HTML -- CSS -- JavaScript -- [Font Awesome](https://fontawesome.com/) for icons +![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847) -## Getting Started + -To get a local copy up and running follow these simple steps: +## :zap: Description 📃 -1. Clone the repository: +
+ +

Welcome to the **N-Queens Visualiser**! This web application allows you to visualize the classic N-Queens problem, where the objective is to place N queens on an N x N chessboard such that no two queens threaten each other. This is achieved by ensuring that no two queens share the same row, column, or diagonal.

+
- ```bash - git clone https://github.com/yourusername/N-Queens-Visualiser.git - ``` -2. Navigate to the project directory: - ```bash - cd N-Queens-Visualiser - ``` -3. Open index.html in your web browser. -## How to Use -1. Enter the number of queens you want to place on the chessboard in the input field. -2. Use the slider to adjust the speed of the visualization. -3. Click the Play button to start the visualization. -4. You can stop the visualization at any time. + +## :zap: How to run it? 🕹ī¸ -## Contributing -Contributions are welcome! Please follow these steps to contribute to this project: + +To run this project locally, follow these steps: 1. Fork the repository. -2. Create a new branch (git checkout -b feature/YourFeature). -3. Commit your changes (git commit -m 'Add some feature'). -4. Push to the branch (git push origin feature/YourFeature). -5. Open a Pull Request. -## Screenshots +2. Clone the repository to your local computer: + git clone https://github.com/Shariq2003/N-Queen-Visualiser.git -![image](https://github.com/user-attachments/assets/b8187f8d-c9dc-4aba-8d60-70a3ff21f03e) +3. Open the project folder in your preferred code editor, now you can view website in live. -![image](https://github.com/user-attachments/assets/31fddb61-90e7-4639-8d33-66dd552bdd75) -https://github.com/user-attachments/assets/158578b8-81c2-46b8-bc90-c52e23d20c5b + +## :zap: Screenshots 📸 + + + + +![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847) + + + +

Developed By Shariq đŸ‘Ļ

+

+ + + + + + +

+ +

Happy Coding 🧑‍đŸ’ģ

+ +

Show some  â¤ī¸  by  đŸŒŸ  this repository!

From 06d7c7cc7d4556b28ca5317fad4f066d6c1a4c22 Mon Sep 17 00:00:00 2001 From: Avdhesh <114330097+Avdhesh-Varshney@users.noreply.github.com> Date: Wed, 16 Oct 2024 18:38:48 +0530 Subject: [PATCH 7/7] enlisting-fixes --- Vanilla-JS-Projects/README.md | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/Vanilla-JS-Projects/README.md b/Vanilla-JS-Projects/README.md index 1067fd925..1c1da4b15 100644 --- a/Vanilla-JS-Projects/README.md +++ b/Vanilla-JS-Projects/README.md @@ -251,15 +251,9 @@ #### :zap: Row 4 -| | | | +| | | | |:--:|:--:|:--:| -| [N Queen Visualizer](./Advanced/N-Queen-Visualizer/) | | | - -#### :zap: Row 5 - -| | | | -|:--:|:--:|:--:| -| [Vocabulary Builder](./Advanced/Vocabulary-Builder) | | | +| [Vocabulary Builder](./Advanced/Vocabulary-Builder) | [N Queen Visualizer](./Advanced/N-Queen-Visualizer/) | | |