7 | {participant["Student Name"]}
8 | {participant["Total Completions of both Pathways"] == "Yes"?'🏅':''}
9 |
10 |
11 | {/* {participant["Student Email"]} */}
12 |
13 |
14 |
20 | {participant["Redemption Status"] == "Yes" ? "Done" : "Error !"}
21 |
22 |
23 |
24 |
25 |
32 | {participant["Institution"] ==
33 | "U. V. Patel College of Engineering - Mehsana"
34 | ? "UVPCE"
35 | : "Other"}
36 |
37 |
38 |
39 |
40 |
41 |
47 | {participant["Total Completions of both Pathways"] == "Yes"
48 | ? "Yes"
49 | : "No !"}
50 |
51 |
52 |
53 |
54 | {participant["# of Courses Completed"]}
55 |
56 |
57 |
58 | {participant["# of Skill Badges Completed"]}
59 |
60 |
61 |
62 | {participant["# of GenAI Game Completed"]}
63 |
64 |
65 |
66 | {/*
67 | {participant["Enrolment Date & Time"]}
68 | */}
69 |
70 | {/* {participant["Enrolment Status"]} */}
71 |
72 | {/*
73 | {participant["Google Cloud Skills Boost Profile URL"]}
74 | */}
75 |
76 |
77 |
78 |
79 | );
80 | }
81 |
82 | export default TableRow;
83 |
--------------------------------------------------------------------------------
/src/components/BadgeComponent.js:
--------------------------------------------------------------------------------
1 | // components/BadgeComponent.js
2 |
3 | import React, { Component } from 'react';
4 | import gdgImage from '@/assets/img/badge.png';
5 |
6 |
7 | class BadgeComponent extends Component {
8 | constructor(props) {
9 | super(props);
10 | this.state = {
11 | downloadbtn: false,
12 | canvas: null,
13 | shape: "original",
14 | image: "",
15 | shapeData: "original",
16 | ctx: null,
17 | banner: null
18 | };
19 | }
20 |
21 | componentDidMount() {
22 | document.title = "Badges | DevFest India 2023";
23 | this.canvas = document.querySelector("canvas");
24 | this.ctx = this.canvas.getContext("2d");
25 | this.image = "";
26 | this.shape = "original";
27 | this.setState({ downloadbtn: false });
28 | document.getElementById("download").style.visibility = "hidden";
29 | this.banner = new Image();
30 | this.banner.src = gdgImage;
31 | this.banner.onload = () => {
32 | this.draw();
33 | };
34 | }
35 |
36 | upload = (e) => {
37 | if (e && e.target.files && e.target.files[0]) {
38 | const reader = new FileReader();
39 | reader.onload = (event) => {
40 | const img = new Image();
41 | img.onload = () => {
42 | this.setState({ image: img });
43 | this.draw();
44 | };
45 | img.src = event.target.result;
46 | };
47 | reader.readAsDataURL(e.target.files[0]);
48 | }
49 | };
50 |
51 | uploadImage = () => {
52 | document.querySelector("input.profile-input").click();
53 | this.setState({ downloadbtn: true });
54 | document.getElementById("download").style.visibility = "visible";
55 | };
56 |
57 | changeShape = (type) => {
58 | this.setState({ shape: type });
59 | this.draw();
60 | };
61 |
62 | draw = () => {
63 | const { image, shape, canvas, ctx, banner } = this.state;
64 | if (image) {
65 | switch (shape) {
66 | case "original": {
67 | canvas.width = image.width;
68 | canvas.height = image.height;
69 | ctx.drawImage(image, 0, 0);
70 | break;
71 | }
72 | default: {
73 | canvas.width = 2500;
74 | canvas.height = 2500;
75 | const hRatio = canvas.width / image.width;
76 | const vRatio = canvas.height / image.height;
77 | const ratio = Math.max(hRatio, vRatio);
78 | const x = (canvas.width - image.width * ratio) / 2;
79 | const y = (canvas.height - image.height * ratio) / 2;
80 | ctx.drawImage(
81 | image,
82 | 0,
83 | 0,
84 | image.width,
85 | image.height,
86 | x,
87 | y,
88 | image.width * ratio,
89 | image.height * ratio
90 | );
91 | break;
92 | }
93 | }
94 | } else {
95 | ctx.canvas.width = 2500;
96 | ctx.canvas.height = 2500;
97 | ctx.fillStyle = "#fff";
98 | ctx.fillRect(0, 0, canvas.width, canvas.height);
99 | }
100 | const height = (banner.height / banner.width) * canvas.width;
101 | const y = canvas.height - height;
102 | const fontSize = canvas.width / 17.2;
103 | ctx.drawImage(
104 | banner,
105 | 0,
106 | 0,
107 | banner.width,
108 | banner.height,
109 | 0,
110 | y,
111 | canvas.width,
112 | height
113 | );
114 | ctx.fillStyle = "#757575";
115 | ctx.textAlign = "center";
116 | ctx.textBaseline = "middle";
117 | ctx.font = `${fontSize}px Google Sans, sans-serif`;
118 | if (shape === "circle") {
119 | ctx.globalCompositeOperation = "destination-in";
120 | ctx.beginPath();
121 | ctx.arc(canvas.width / 2, canvas.height / 2, canvas.height / 2, 0, Math.PI * 2);
122 | ctx.closePath();
123 | ctx.fill();
124 | }
125 | };
126 |
127 | download = () => {
128 | const a = document.createElement("a");
129 | const { canvas } = this.state;
130 | const url = canvas.toDataURL("image/png;base64");
131 | a.download = "#DevFestIndia_badge.png";
132 | a.href = url;
133 | a.click();
134 | };
135 |
136 | render() {
137 | return (
138 |
22 | {Download &&
Downloading ...
}
23 |
24 |
25 |
26 | {!Adjustment &&
{Username}
}
27 |
28 |
29 |
30 | {!Adjustment &&
}
37 |
38 |
39 |
40 |
41 |
42 |
98 |
99 |
100 |
101 | {/*
Choose Your Badge
102 |
103 |
104 |
105 |
114 |
115 |
*/}
116 |
117 |
118 |
16 |
17 |
18 |
19 |
20 | Google Cloud STUDY JAMS 23 - 24
21 |
22 |
23 |
24 |
25 | {!(Progress === 100) &&
35 | }
36 | {
37 | (Progress === 100) &&
44 | }
45 |
46 |
47 |
48 | {!(Progress === 100) &&
49 |
50 |
51 |
56 |
59 |
60 |
62 |
63 |
64 |
}
65 |
Devloped By Arpan Das
66 |
67 |
3 |
4 | ## Getting Started
5 |
6 | To start developing or running this project locally, follow these steps:
7 |
8 | 1. Clone the repository to your local machine:
9 |
10 | ```bash
11 | git clone https://github.com/GDSC-UVPCE/Google-Cloud-Study-Jams.git
12 | ```
13 |
14 | 2. Navigate to the project directory:
15 |
16 | ```bash
17 | cd Google-Cloud-Study-Jams
18 | ```
19 |
20 | 3. Initialize npm:
21 |
22 | ```bash
23 | npm install
24 | ```
25 |
26 | 4. Start the project locally:
27 |
28 | ```bash
29 | npm run dev
30 | ```
31 |
32 | 
33 |
34 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
35 |
36 | ## Updating Data
37 |
38 | To update the data used by your project, follow these steps:
39 |
40 | 1. Locate the `public/data.json` file in your project directory. You can access it [here](https://github.com/GDSC-UVPCE/GCCP-Jams/blob/main/public/data.json).
41 |
42 | 2. Replace the contents of `data.json` with your own JSON data. You can manually edit the file or use a tool to generate the JSON data from other sources.
43 |
44 | 3. Save the changes to `data.json`.
45 |
46 | That's it! Your project should now use the updated data.
47 |
48 | ### how to convert CSV data to JSON
49 | 1. Download file in CSV format
50 |
51 |
52 | 
53 | 2. upload file CSV to this website
54 |
55 | [https://csvjson.com/csv2json]
56 | 
57 | 3. Convert data
58 |
59 |
60 | 
61 | 7. Copy all converted JSON data
62 |
63 |
64 | 
65 | 9. paste JSON data into public/data.json file
66 |
67 |
68 | ## Contributors
69 |
70 | Contributions are welcome!
71 | 
}
37 |
38 |