Skip to content

Commit 6eee58b

Browse files
kaal-coderkaal-coder
authored
Merge pull request #219 from AyusGup/AyusGup
Added QR-Generator Project
2 parents 26ca5e5 + d777822 commit 6eee58b

File tree

8 files changed

+1450
-0
lines changed

8 files changed

+1450
-0
lines changed

‎Full Stack Projects/QR-Generator/package-lock.json

+1,329
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Full Stack Projects/QR-Generator/package.json

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"type": "module",
3+
"dependencies": {
4+
"body-parser": "^1.20.2",
5+
"ejs": "^3.1.9",
6+
"express": "^4.18.2",
7+
"inquirer": "^9.2.7",
8+
"qr-image": "^3.2.0"
9+
},
10+
"name": "qr-generator",
11+
"version": "1.0.0",
12+
"main": "server.js",
13+
"scripts": {
14+
"test": "echo \"Error: no test specified\" && exit 1"
15+
},
16+
"author": "",
17+
"license": "ISC",
18+
"description": ""
19+
}

‎Full Stack Projects/QR-Generator/public/background.jpg

31.2 KB
Loading

‎Full Stack Projects/QR-Generator/qr-images/alt.jpg

18.3 KB
Loading

‎Full Stack Projects/QR-Generator/qr-images/qr_img.png

337 Bytes
Loading

‎Full Stack Projects/QR-Generator/solution.js

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import express from "express";
2+
import body_parser from "body-parser";
3+
import qr from "qr-image";
4+
import fs from "fs";
5+
6+
// <----- qr generator using express,ejs and qr-image ----->
7+
8+
const app = express();
9+
app.use(body_parser.urlencoded({extended:true}));
10+
app.use( express.static( "qr-images" ) );
11+
app.use(express.static("public"));
12+
app.set('view engine','ejs');
13+
14+
app.listen(3000, (req,res)=>{
15+
console.log("Server started on port:3000");
16+
});
17+
18+
app.get('/', async (req,res)=>{
19+
res.render('form',{imageUrl:"/alt.jpg"});
20+
});
21+
22+
app.post('/', (req,res)=>{
23+
var url= req.body.url;
24+
var qr_svg = qr.image(url);
25+
if(url === ""){
26+
res.render('form',{imageUrl: "/alt.jpg"})
27+
}
28+
else{
29+
qr_svg.pipe(fs.createWriteStream("./qr-images/qr_img.png"));
30+
31+
fs.writeFile("./urls/URL.txt", url, (err) => {
32+
if (err) throw err;
33+
console.log("The file has been saved!");
34+
});
35+
res.render('form',{imageUrl: "/qr_img.png"})
36+
}
37+
})
38+

‎Full Stack Projects/QR-Generator/urls/URL.txt

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
www.yahoo.com

‎Full Stack Projects/QR-Generator/views/form.ejs

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>QR generator</title>
5+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
6+
</head>
7+
8+
<style>
9+
#block{
10+
width: 100vw;
11+
height: 70vh;
12+
display: flex;
13+
align-items: center;
14+
justify-content: center;
15+
flex-direction: column;
16+
}
17+
body{
18+
background-image: url(/background.jpg);
19+
}
20+
</style>
21+
22+
<body>
23+
<!-- As a link -->
24+
<nav class="navbar navbar-light bg-dark">
25+
<div class="container-fluid">
26+
<a class="navbar-brand" style="color: aliceblue;">QR Encoder</a>
27+
</div>
28+
</nav>
29+
30+
<div id="block">
31+
<form action="/" method="post">
32+
<div class="mb-3">
33+
<label for="text" class="form-label">Enter Here:</label>
34+
<input type="text" name="url" id="text" placeholder="Enter your text or url here">
35+
</div>
36+
37+
<button type="submit" id="toggleButton">GO</button>
38+
</form>
39+
40+
<div id="myDiv" style="margin-top: 20px;">
41+
<img src= "<%= imageUrl %>" alt="not found" width="300" height="200" id="imageId">
42+
</div>
43+
</div>
44+
45+
46+
<script>
47+
document.getElementById('toggleButton').addEventListener('click', function() {
48+
var div = document.getElementById('myDiv');
49+
var text = document.getElementById("text");
50+
var image = document.getElementById("imageId");
51+
52+
if( text.value === ""){
53+
image.setAttribute("src", "/alt.jpg");
54+
}
55+
else{
56+
if (div.style.display === 'none') {
57+
text.value = "";
58+
}
59+
}
60+
});
61+
</script>
62+
</body>
63+
</html>

0 commit comments

Comments
 (0)