Template Birthday Coding

Index.
php file
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Birthday Girl/Boy</title> 
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jI
W3" crossorigin="anonymous">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="page-wrap">
<form class='post-form' action='' method='post'>
<div class="form-group">
<label class="col-md-3 control label">Insert your full name: </label> 
<input type="text" name="teka" placeholder="e.g: Rokiah binti Ali" class="form-control"
value=""></input> 
|</div>
<div>
<input class="submit" type="submit" name="submit" value="Submit"></input>
<br><br>
<a href="display.php" class="btn btn-success" type="submit">Bila saya suruh tekan baru
awak tekan butang ni!</a> 
</div>
</form>
<?php
if (isset($_POST['submit'])) {
$teka = $_POST['teka'];
if ($teka == "Your birthday girl/boy name"){ //Insert your birthda girl/boy name here to give
🤩
access to them only
🤔
echo "<script>alert ('Hye Name! ')</script>"; //Can edit this one
🧐
echo "<script>alert ('Text text text ')</script>"; //Can edit this one
😝
🧐
echo "<script>alert ('Text text text')</script>"; //Can edit this one
🥰
echo "<script>alert ('Your warm wishes')</script>"; //Can edit this one
}
😡"; //Can edit this one to appear the statement that if

else {
echo "Awak bukan birthday girl/boy!
they key in wrong name
}
}
?>
<p style="text-align:center; margin-top: 100px; color: black;">The app is created by <a

href="https://www.linkedin.com/in/nursyafiqah-hapiz/" style="color:blue;
text-decoration:none;">SYAFIQAH HAPIZ</a></p> 
</div>
</div>
</body>
</html>
Display.php file
<html>
<body>
<canvas id="confetti"></canvas>
<script src="confetti.js"></script>
<div id="header">
<h1>HAPPY BIRTHDAY YANG KE-!</h1> 
<h2>Wishes <3</h2> 
<style>
#header {
text-align: center;
background-color: #E0AB98;
padding: 30px;
}
#header h1 {
color: #fff;
font-size: 40px;
font-style: italic;
font-weight: 700;
text-transform: uppercase;
margin: 10;
}
#header h2 {
color: black;
font-size: 20px;
font-style: normal;
font-weight: 500;
text-transform: normal;
margin: 0;
}
</style>
</div>
<br>
<img src="https://drive.google.com/uc?id=1mK0g_94Nf1IOZgEzHWyRjjiZlm-ke"
class="center"> 
<style>
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
</style>
<?php
echo '<body style="background-color:pink">'; // Can change the colour to pink or blue or any
hex code color
?>
<p style="text-align:center; margin-top: 100px; color: black;">The app is created by <a

href="https://www.linkedin.com/in/nursyafiqah-hapiz/" style="color:blue;
text-decoration:none;">SYAFIQAH HAPIZ</a></p> 
</div>
</body>
</html>
Style.css file
body {
font: 16px arial;
margin: 0;
padding: 0;
background: #F4C2C2
}
#header {
text-align: center;
background-color: #E0AB98;
padding: 30px;
}
#header h1 {
color: #fff;
font-size: 40px;
font-style: italic;
font-weight: 700;
margin: 10;
}
#wrapper {
width: 500px;
margin: 50px auto 0;
background-color: #fff;
}
#page-wrap {
padding: 25px;
min-height: 100px;
}
#page-wrap .post-form {
width: 100%;
padding: 50px;
margin: 0 auto;
background-color: #F8E4DF
border-radius: 15px;
}
#page-wrap .post-form .form-group {

margin: 10px 0 10px;
}
#page-wrap .post-form .form-group label {

width: 30%;
display: inline-block;
font-weight: 600;
}
#page-wrap .post-form .form-group input,

#page-wrap .post-form .form-group select {
font-size: 16px;
width: 66%;
display: inline-block;
padding: 5px;
margin: 0;
}
#page-wrap .post-form .submit {

font-size: 16px;
letter-spacing: 1px;
padding: 5px 30px;
color: #333;
background-color: #F8F8F8
border: none;
border-radius: 5px;
margin: 0 0 20px 30%;
cursor: pointer;
transition: all 0.3s;
}
#page-wrap .post-form .submit:hover {

box-shadow: 0 0 5px #555;
}
Confetti.js file
let canvas = document.getElementById('confetti');

canvas.width = 1050;
canvas.height = 150;
let ctx = canvas.getContext('2d');

let pieces = [];
let numberOfPieces = 50;
let lastUpdateTime = Date.now();
function randomColor () {
let colors = ['#f00', '#0f0', '#00f', '#0ff', '#f0f', '#ff0'];
return colors[Math.floor(Math.random() * colors.length)];
}
function update () {
let now = Date.now(),
dt = now - lastUpdateTime;
for (let i = pieces.length - 1; i >= 0; i--) {

let p = pieces[i];
if (p.y > canvas.height) {

pieces.splice(i, 1);
continue;
}
p.y += p.gravity * dt;

p.rotation += p.rotationSpeed * dt;
}
while (pieces.length < numberOfPieces) {

pieces.push(new Piece(Math.random() * canvas.width, -20));
}
lastUpdateTime = now;
setTimeout(update, 1);
}
function draw () {
ctx.clearRect(0, 0, canvas.width, canvas.height);
pieces.forEach(function (p) {
ctx.save();
ctx.fillStyle = p.color;
ctx.translate(p.x + p.size / 2, p.y + p.size / 2);

ctx.rotate(p.rotation);
ctx.fillRect(-p.size / 2, -p.size / 2, p.size, p.size);
ctx.restore();
});
requestAnimationFrame(draw);
}
function Piece (x, y) {

this.x = x;
this.y = y;
this.size = (Math.random() * 0.5 + 0.75) * 15;
this.gravity = (Math.random() * 0.5 + 0.75) * 0.1;
this.rotation = (Math.PI * 2) * Math.random();
this.rotationSpeed = (Math.PI * 2) * (Math.random() - 0.5) * 0.001;
this.color = randomColor();
}
while (pieces.length < numberOfPieces) {

pieces.push(new Piece(Math.random() * canvas.width, Math.random() * canvas.height));
}
update();
draw();

Template Birthday Coding

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Template Birthday Coding

Uploaded by

Copyright:

Available Formats

Index.

😡"; //Can edit this one to appear the statement that if

<p style="text-align:center; margin-top: 100px; color: black;">The app is created by <a

<p style="text-align:center; margin-top: 100px; color: black;">The app is created by <a

#page-wrap .post-form .form-group {

#page-wrap .post-form .form-group label {

#page-wrap .post-form .form-group input,

#page-wrap .post-form .submit {

#page-wrap .post-form .submit:hover {

let canvas = document.getElementById('confetti');

let ctx = canvas.getContext('2d');

for (let i = pieces.length - 1; i >= 0; i--) {

if (p.y > canvas.height) {

p.y += p.gravity * dt;

while (pieces.length < numberOfPieces) {

ctx.translate(p.x + p.size / 2, p.y + p.size / 2);

ctx.fillRect(-p.size / 2, -p.size / 2, p.size, p.size);

function Piece (x, y) {

while (pieces.length < numberOfPieces) {

You might also like