-
Notifications
You must be signed in to change notification settings - Fork 841
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
23 changed files
with
624 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| # QR Code Generator | ||
|
|
||
| ## About The Project | ||
|
|
||
| A simple web application which will generate a QR Code. | ||
|
|
||
| ## Tech Stacks Used | ||
|
|
||
|
|
||
|  | ||
|  | ||
|  | ||
|
|
||
| ## API Used | ||
|
|
||
| Visit Website: https://goqr.me/api/ | ||
|
|
||
| ## Screenshot | ||
|  |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <link rel="stylesheet" href="style.css"> | ||
| <title>QR Code Generator</title> | ||
| </head> | ||
|
|
||
| <body> | ||
| <h1>GANESH QR MAKER</h1> | ||
| <div class="main"> | ||
| <input type="text" name="" id="" class="input" placeholder="Enter text here..."> | ||
| <button class="btn">Generate</button> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTgdnbx19IIBKvSAwARaGMfbl06_CnXNcV63g&usqp=CAU" alt="qrcode" class="code"> | ||
| <p id="note">Made with ♥ by Ganesh </p> | ||
| </div> | ||
| <div id="toast">Successfully Generated!!!</div> | ||
| <script src="script.js"></script> | ||
| </body> | ||
|
|
||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| const btn = document.querySelector('.btn'); | ||
| const code = document.querySelector('.code'); | ||
| const input = document.querySelector('.input'); | ||
| const toast = document.querySelector('#toast'); | ||
|
|
||
| btn.addEventListener('click', generate); | ||
|
|
||
| function generate() { | ||
| const data = input.value; | ||
| const URL = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${data}`; | ||
| code.src = URL; | ||
|
|
||
| toastDiv(); | ||
| } | ||
|
|
||
| function toastDiv() { | ||
| toast.className = "show"; | ||
| setTimeout(function() { | ||
| toast.className = toast.className.replace("show", ""); | ||
| }, 2000) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,94 @@ | ||
| * { | ||
| margin: 0; | ||
| padding: 0; | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| body { | ||
| width: 100%; | ||
| height: 100vh; | ||
| background: linear-gradient(to right top, #ff0f7b, #f89b29); | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } | ||
|
|
||
| h1 { | ||
| font-size: 55px; | ||
| text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, | ||
| 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), | ||
| 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), | ||
| 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), | ||
| 0 20px 20px rgba(0, 0, 0, 0.15); | ||
| } | ||
|
|
||
| .main { | ||
| width: 25%; | ||
| height: 70%; | ||
| padding: 50px 15px; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| flex-direction: column; | ||
| background: #fff; | ||
| box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.5); | ||
| border-radius: 5px; | ||
| margin-top: 25px; | ||
| margin-bottom: 40px; | ||
| } | ||
|
|
||
| .main .input { | ||
| width: 90%; | ||
| padding: 8px 25px; | ||
| border: 3px solid #9e9e9e; | ||
| outline: none; | ||
| margin: 15px 0; | ||
| } | ||
| .main .input:focus { | ||
| border: 3px solid #f89b29; | ||
| } | ||
| .btn, | ||
| .input { | ||
| font-size: 1.1rem; | ||
| border-radius: 5px; | ||
| } | ||
| .main .btn { | ||
| width: 90%; | ||
| padding: 12px 0; | ||
| outline: none; | ||
| border: none; | ||
| border-radius: 5px; | ||
| background: #f89b29; | ||
| color: #fff; | ||
| transition: 0.3s; | ||
| } | ||
| .main .code { | ||
| margin: 10px 0; | ||
| } | ||
|
|
||
| .main .btn:hover { | ||
| box-shadow: 0 10px 25px -10px #f89b29; | ||
| } | ||
|
|
||
| #toast { | ||
| position: absolute; | ||
| bottom: 0; | ||
| border-radius: 5px; | ||
| padding: 10px 50px; | ||
| background: #07f49e; | ||
| opacity: 0; | ||
| visibility: hidden; | ||
| box-shadow: 0 10px 25px -10px #07f49e; | ||
| transition: 0.3s; | ||
|
|
||
| font-size: 20px; | ||
| } | ||
|
|
||
| #toast.show { | ||
| visibility: visible; | ||
| opacity: 1; | ||
| bottom: 50px; | ||
| } | ||
|
|
||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| ## Spirograph Simulator | ||
|
|
||
| This code simulates a Spirograph, a fun tool for drawing intricate curves. | ||
|
|
||
| **How to Play:** | ||
|
|
||
| 1. **Open the HTML file:** Double-click the `index.html` file in your web browser. | ||
| 2. **Adjust settings:** | ||
| - Change gear sizes (r1, r2, r3) and frequency values (f1, f2, f3) to modify the curve's shape (sliders or input boxes). | ||
| 3. **Start drawing:** Click the "Play" button. The spirograph will come alive! | ||
| 4. **Pause/Resume:** Click "Pause" to stop the animation and "Play" to resume. | ||
| 5. **Reset:** Click "Reset" to clear the drawing and start fresh with the current settings. | ||
| 6. **Save your artwork:** Click "Save" to download the current drawing as a PNG image. | ||
|
|
||
|
|
||
| **Getting Started:** | ||
|
|
||
| 1. Clone or download the repository. | ||
| 2. Open `index.html` in your browser. | ||
|
|
||
| **Enjoy the world of spirograph curves!** | ||
|
|
||
|  |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Document</title> | ||
| <link rel="stylesheet" href="style.css"> | ||
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script> | ||
|
|
||
| </head> | ||
| <body> | ||
| <div id="canvasContainer"></div> | ||
| <div id="inputContainer"> | ||
| <div> | ||
| <label for="f1Input">f1:</label><input id="f1Input" type="number"/> | ||
| <label for="f2Input">f2:</label><input id="f2Input" type="number"/> | ||
| <label for="f3Input">f3:</label><input id="f3Input" type="number"/> | ||
| </div> | ||
| <div> | ||
| <label for="r1Input">r1:</label><input id="r1Input" type="number"/> | ||
| <label for="r2Input">r2:</label><input id="r2Input" type="number"/> | ||
| <label for="r3Input">r3:</label><input id="r3Input" type="number"/> | ||
| </div> | ||
| <div> | ||
| <button id="pausePlayButton">Play</button> | ||
| <button id="resetButton">Reset</button> | ||
| <button id="saveButton">Save</button> | ||
| <label for="speedInput">Speed:</label><input id="speedInput" type="number"/> | ||
| <label for="radial">Radial:</label><input id="radial" type="checkbox"/> | ||
| </div> | ||
| </div> | ||
|
|
||
|
|
||
| <script src="main.js"></script> | ||
| </body> | ||
| </html> | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
Oops, something went wrong.