Skip to content

Modified Game Development Landing #76

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Muhammad-Ramees wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Modified Game Development Landing #76

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
102 changes: 78 additions & 24 deletions challenge/game/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,12 @@
<!--
Author: W3layouts
Author URL: http://w3layouts.com
-->
<!DOCTYPE html>
<html lang="en">

<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="Learn Python in Malayalam with tutorials and clear your doubts 24/7 for FREE" />
<meta name="description"
content="Learn Game Development in Malayalam with tutorials and clear your doubts 24/7 for FREE" />
<title>Brototype Game Development Challenge</title>

<!-- Google fonts -->
Expand Down Expand Up @@ -49,7 +46,7 @@ <h1 class="mt-4 textColor title-text">
</h1>
<h5 class="subtitle-banner pt-5">Create Your Own Games with Us Even if you don’t have coding skill and
Jumpstart Your Career to a High Paying Job.
</h5 class="pt-5">
</h5>
<div class="py-3">
<button class="btn btn-style btn-primary mt-2 mt-md-5" data-bs-toggle="modal"
data-bs-target="#staticBackdrop">Register Now</button>
Expand All @@ -69,15 +66,17 @@ <h2 class="title">Registration Form</h2>
</div>
<div class="col-2">
<div class="input-group">
<input class="input--style-2" type="text" placeholder="Email" name="Email" required>
<input class="input--style-2" type="email" placeholder="Email" name="Email" required>
</div>
</div>
</div>
<div class="row row-space">
<div class="col-2">
<div class="input-group">
<input class="input--style-2" type="text" placeholder="Mobile" name="Mobile" required>
<input id="mobileInput" class="input--style-2" type="text" placeholder="Mobile"
name="Mobile" required>
</div>
<div class="text-danger" id="error"></div>
</div>
<div class="col-2">
<div class="input-group">
Expand Down Expand Up @@ -244,15 +243,18 @@ <h2 class="title">Registration Form</h2>
</div>
<div class="col-2">
<div class="input-group">
<input class="input--style-2" type="text" placeholder="Email" name="Email" required>
<input class="input--style-2" type="email" placeholder="Email" name="Email" required>
</div>
</div>
</div>
<div class="row row-space">
<div class="col-2">
<div class="input-group">
<input class="input--style-2" type="text" placeholder="Mobile" name="Mobile" required>
<input id="mobileInputt" class="input--style-2" type="text" placeholder="Mobile" name="Mobile"
required>
</div>
<div class="text-danger" id="errorr"></div>

</div>
<div class="col-2">
<div class="input-group">
Expand Down Expand Up @@ -372,15 +374,18 @@ <h2 class="title">Registration Form</h2>
</div>
<div class="col-2">
<div class="input-group">
<input class="input--style-2" type="text" placeholder="Email" name="Email" required>
<input class="input--style-2" type="email" placeholder="Email" name="Email" required>
</div>
</div>
</div>
<div class="row row-space">
<div class="col-2">
<div class="input-group">
<input class="input--style-2" type="text" placeholder="Mobile" name="Mobile" required>
<input id="mobileInputtt" class="input--style-2" type="text" placeholder="Mobile" name="Mobile"
required>
</div>
<div class="text-danger" id="errorrr"></div>

</div>
<div class="col-2">
<div class="input-group">
Expand Down Expand Up @@ -452,17 +457,62 @@ <h2 class="title">Registration Form</h2>
<button onclick="topFunction()" id="movetop" title="Go to top">
<span>⇪</span>
</button>
<script src="./assets/js/jquery-3.3.1.min.js"></script>
<script src="assets/js/jquery-3.3.1.min.js"></script>
<script>
const form1 = document.querySelector("#registration-form-1");
const form2 = document.querySelector("#registration-form-2");
const form3 = document.querySelector("#registration-form-3");
const formButton1 = document.querySelector("#form-submit-1");
const formButton2 = document.querySelector("#form-submit-2");
const formButton3 = document.querySelector("#form-submit-3");

const postToSheet = (formButton, data) => {
const url = "https://script.google.com/macros/s/AKfycbyVNQ4S_KG1_cHhhhVyprZOsAwi8ltt4MOIJXusmNshIvF3LWNzxCfa3QrsKnJNTFsZYw/exec";
document.getElementById('mobileInput').addEventListener("keyup", (e) => {
if (form1.elements['Mobile'].value.length != 10) {
document.getElementById("error").innerText =
"Mobile number must contain 10 numbers";
} else {
document.getElementById("error").innerText = "";
}
})
document.getElementById('mobileInputt').addEventListener("keyup", (e) => {
if (form2.elements['Mobile'].value.length != 10) {
document.getElementById("errorr").innerText =
"Mobile number must contain 10 numbers";
} else {
document.getElementById("errorr").innerText = "";
}
})
document.getElementById('mobileInputtt').addEventListener("keyup", (e) => {
if (form3.elements['Mobile'].value.length != 10) {
document.getElementById("errorrr").innerText =
"Mobile number must contain 10 numbers";
} else {
document.getElementById("errorrr").innerText = "";
}
})
const postToSheet = (formButton, data, f) => {
if (f == 1) {
if (data.Mobile.length !== 10) {
return (document.getElementById("error").innerText =
"Mobile number must contain 10 numbers");
} else {
document.getElementById("error").innerText = "";
}
} else if (f == 2) {
if (data.Mobile.length !== 10) {
return (document.getElementById("errorr").innerText =
"Mobile number must contain 10 numbers");
} else {
document.getElementById("errorr").innerText = "";
}
} else if (f == 3) {
if (data.Mobile.length !== 10) {
return (document.getElementById("errorrr").innerText =
"Mobile number must contain 10 numbers");
} else {
document.getElementById("errorrr").innerText = "";
}
}
const url = "https://script.google.com/macros/s/AKfycbyLjY-nrTQ5HRjEKSbdZMYmM5qraeBuAXdKLPgyniIkcKklT1vENkl-A81ootpVqtG2Cw/exec";

formButton.innerText = "SUBMITING PLEASE WAIT";
formButton.setAttribute("disabled", true);
Expand All @@ -471,10 +521,13 @@ <h2 class="title">Registration Form</h2>
data: data,
method: "post",
success: function (response) {
location.href = "https://t.me/+Lxul8-bGI5o0MWM1";
location.href = "../game/registered";
$("#staticBackdrop").modal("hide");
formButton.innerText = "SUBMIT";
formButton.setAttribute("disabled", false);
form.reset();
form1.reset();
form2.reset();
form3.reset();
},
error: function (err) {
alert("Something went wrong please try again.");
Expand All @@ -484,23 +537,23 @@ <h2 class="title">Registration Form</h2>

form1.addEventListener("submit", (e) => {
e.preventDefault();

f = 1;
const data = Object.fromEntries(new FormData(e.target).entries());
postToSheet(formButton1, data);
postToSheet(formButton1, data, f);
});

form2.addEventListener("submit", (e) => {
e.preventDefault();

f = 2;
const data = Object.fromEntries(new FormData(e.target).entries());
postToSheet(formButton2, data);
postToSheet(formButton2, data, f);
});

form3.addEventListener("submit", (e) => {
e.preventDefault();

f = 3;
const data = Object.fromEntries(new FormData(e.target).entries());
postToSheet(formButton3, data);
postToSheet(formButton3, data, f);
});
</script>
<script>
Expand Down Expand Up @@ -569,6 +622,7 @@ <h2 class="title">Registration Form</h2>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/select2.min.js"></script>
<script src="assets/js/global.js"></script>
<!-- <script src="assets/js/form.js"></script> -->
</body>

</html>
31 changes: 31 additions & 0 deletions challenge/game/registered/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!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">
<title>Registered</title>
<link rel="stylesheet" href="./style.css">
</head>

<body>
<div class="js-container container" style="top:0px !important;"></div>

<div
style="text-align:center;margin-top:30px;position:fixed;padding-top:25vh;width:100vw;height:100vh;top:0px;left:0px;">
<div class="checkmark-circle">
<div class="background"></div>
<div class="checkmark draw"></div>
</div>
<h1>Well done!</h1>
<p>You are one step away from joining <b>Game development</b> Learning club</p>
<button class="submit-btn" onclick="location.href='http://t.me/brototype_game_development'">Join Telegram
group</button>
</div>

<script src="./script.js"></script>

</body>

</html>
68 changes: 68 additions & 0 deletions challenge/game/registered/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
const Confettiful = function (el) {
this.el = el;
this.containerEl = null;

this.confettiFrequency = 3;
this.confettiColors = ["#EF2964", "#00C09D", "#2D87B0", "#48485E", "#EFFF1D"];
this.confettiAnimations = ["slow", "medium", "fast"];

this._setupElements();
this._renderConfetti();
};

Confettiful.prototype._setupElements = function () {
const containerEl = document.createElement("div");
const elPosition = this.el.style.position;

if (elPosition !== "relative" || elPosition !== "absolute") {
this.el.style.position = "relative";
}

containerEl.classList.add("confetti-container");

this.el.appendChild(containerEl);

this.containerEl = containerEl;
};

Confettiful.prototype._renderConfetti = function () {
this.confettiInterval = setInterval(
() => {
const confettiEl = document.createElement("div");
const confettiSize = Math.floor(Math.random() * 3) + 7 + "px";
const confettiBackground =
this.confettiColors[
Math.floor(Math.random() * this.confettiColors.length)
];
const confettiLeft =
Math.floor(Math.random() * this.el.offsetWidth) + "px";
const confettiAnimation =
this.confettiAnimations[
Math.floor(Math.random() * this.confettiAnimations.length)
];

confettiEl.classList.add(
"confetti",
"confetti--animation-" + confettiAnimation
);
confettiEl.style.left = confettiLeft;
confettiEl.style.width = confettiSize;
confettiEl.style.height = confettiSize;
confettiEl.style.backgroundColor = confettiBackground;

confettiEl.removeTimeout = setTimeout(
function () {
confettiEl.parentNode.removeChild(confettiEl);
},

3000
);

this.containerEl.appendChild(confettiEl);
},

25
);
};

window.confettiful = new Confettiful(document.querySelector(".js-container"));
Loading