Membuat Ucapan Selamat Ulang Tahun dengan HTML, CSS, dan JavaScript

November 26, 2024 Posting Komentar

Untuk membuat ucapan selamat ulang tahun interaktif di website, Anda dapat mengikuti langkah-langkah berikut. Dalam tutorial ini, kita akan menggunakan HTML, CSS, dan JavaScript untuk membuat tampilan yang menyenangkan dan dinamis.

Langkah 1: Download Source Code

Untuk memulai, Anda bisa mendownload source code yang sudah disiapkan di link ini.

Password file : blog.prytr.com

Langkah 2: Membuat File `index.html`

HTML

Buat sebuah file dengan nama index.html. Setelah itu, masukkan kode HTML berikut ke dalam file tersebut. Kode ini akan menjadi struktur dasar dari halaman ucapan selamat ulang tahun.

<!DOCTYPE html>

<head>

<title>Happy Birthday!!! :)</title>

</head>

<body>

</source>

Your browser isn't invited for super fun audio time.

</audio>

<span id="name">Irene</span>

</h1>

<p class="two" id="greetingText">I really like your name btw!</p>

</div>

<p>It's your birthday!! :D</p>

</div>

Happy birthday to youu!! Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur quisquam amet ipsam vitae, voluptatum architecto aliquid id quo error tempora quos aperiam magni necessitatibus quas ut, possimus nesciunt nam ad.

</p>

</div>

<p class="idea-1">That's what I was going to do.</p>

<p class="idea-2">But then I stopped.</p>

I realised, I wanted to do something<br>

<strong>special</strong>

</p>

<p class="idea-4">Because,</p>

You are Special

</p>

</p>

</div>

<h3 class="wish-hbd">Happy Birthday!</h3>

<h5 id="wishText">May the js.prototypes always be with you! ;)</h5>

</div>

</div>

</svg>

</svg>

</svg>

</svg>

</svg>

</svg>

</svg>

</svg>

</svg>

</div>

<p>Okay, now come back and tell me if you liked it.</p>

<p id="replay">Or click, if you want to watch it again.</p>

</div>

</body>

</html>

Penjelasan kode:

Kode di atas memuat struktur HTML dasar untuk halaman ucapan ulang tahun.
Menyertakan file CSS (style/main.css) dan JavaScript (script/main.js) yang akan kita buat selanjutnya.

Langkah 3: Membuat File `main.css`

CSS

Selanjutnya, buat sebuah folder dengan nama style. Di dalam folder style, buat sebuah file dengan nama main.css. File ini akan digunakan untuk memberikan gaya pada halaman.

Copy dan paste kode berikut ke dalam file main.css:

html {

box-sizing: border-box;

}

body {

font-family: 'Poppins', sans-serif;

margin: 0;

}

.song {

visibility: hidden;

}

.container {

height: 100vh;

margin: 0 auto;

overflow: hidden;

position: relative;

text-align: center;

visibility: hidden;

width: 100vw;

}

.container > div {

left: 0;

position: absolute;

right: 0;

top: 20vh;

}

.one {

font-size: 4.5rem;

}

.two {

font-size: 1.2rem;

font-weight: lighter;

}

.three {

font-size: 3rem;

}

.four .text-box {

border: 3px solid #aaa;

border-radius: 5px;

margin: 0 auto;

padding: 10px;

position: relative;

width: 600px;

}

.text-box p {

margin: 0;

text-align: left;

}

.text-box span {

visibility: hidden;

}

.text-box .fake-btn {

background-color: rgb(21, 161, 237);

border-radius: 3px;

bottom: -50px;

color: #fff;

padding: .5rem 1rem;

position: absolute;

right: 5px;

}

.five p {

font-size: 2rem;

left: 0;

position: absolute;

right: 0;

}

.idea-3 strong {

border-radius: 3px;

display: inline-block;

padding: 3px 5px;

}

.five .idea-5 {

font-size: 4rem;

}

.idea-5 span, .idea-6 span, .wish-hbd span {

display: inline-block;

}

.idea-6 span{

font-size: 15rem;

}

.six {

position: relative;

top: 10vh;

z-index: 1;

}

.six img {

display: inline-block;

height: 350px;

max-width: 100%;

/* height: auto; */

}

.six .hat {

left: 41.5%;

position: absolute;

/* transform: scale(0.1); */

top: -35%;

width: 80px;

}

.baloons img {

display: inline-block;

position: absolute;

}

.baloons img:nth-child(even) {

left: -10%;

}

.baloons img:nth-child(odd) {

right: -10%;

}

.baloons img:nth-child(3n + 0) {

left: 30%;

}

.seven, .eight {

height: 100vh;

position: fixed;

top: 0;

width: 100vw;

}

.eight svg {

left: 0;

position: absolute;

top: 0;

visibility: hidden;

width: 25px;

z-index: -1;

}

.eight svg:nth-child(1) {

fill: #bd6ecf;

left: 5vw;

top: 7vh;

}

.eight svg:nth-child(2) {

fill: #7dd175;

left: 35vw;

top: 23vh;

}

.eight svg:nth-child(3) {

fill: #349d8b;

left: 23vw;

top: 33vh;

}

.eight svg:nth-child(4) {

fill: #347a9d;

left: 57vw;

top: 43vh;

}

.eight svg:nth-child(5) {

fill: #c66053;

left: 7vw;

top: 68vh;

}

.eight svg:nth-child(6) {

fill: #bfaa40;

left: 77vw;

top: 42vh;

}

.eight svg:nth-child(7) {

fill: #e3bae8;

left: 83vw;

top: 68vh;

}

.eight svg:nth-child(8) {

fill: #8762cb;

left: 37vw;

top: 86vh;

}

.eight svg:nth-child(9) {

fill: #9a90da;

left: 87vw;

top: 94vh;

}

.wish-hbd {

font-size: 3em;

margin: 0;

text-transform: uppercase;

}

.wish h5 {

font-size: 2rem;

font-weight: lighter;

margin: 10px 0 0;

}

.nine p {

font-size: 2rem;

font-weight: lighter;

}

#replay {

cursor: pointer;

z-index: 3;

}

/* Media Queries */

@media screen and (max-height: 1000px) {

.six .hat {

left: 40%;

}

@media screen and (max-height: 800px) {

.six .hat {

left: 37%;

}

@media screen and (max-height: 700px) {

.six .hat {

left: 32%;

}

@media screen and (max-height: 850px) and (max-width: 450px) {

.six .hat {

left: 32%;

}

@media screen and (max-width: 500px) {

.container {

width: 90%;

}

.four .text-box {

width: 90%;

}

.text-box .fake-btn {

bottom: -38px;

right: 5px;

}

.idea-5 span {

display: block;

}

.idea-6 span {

font-size: 10rem;

}

.six .hat {

/* top: -20px; */

width: 50px;

}

.wish-hbd {

font-size: 2.2em;

}

.wish h5 {

font-size: 1.4rem;

}

.nine p {

font-size: 1.5rem;

font-weight: lighter;

}

Penjelasan kode:

Menetapkan gaya untuk tampilan yang bersih dan responsif.
body diatur untuk menggunakan tampilan flex agar isi halaman selalu terpusat.
Bagian .container diberi latar belakang putih dengan sedikit bayangan untuk efek depth.
Tombol diberi warna oranye dan berubah warna saat di-hover.

Langkah 4: Membuat File `main.js`

JavaScript

Langkah terakhir adalah menambahkan JavaScript. JavaScript ini bertujuan untuk membuat halaman menjadi lebih interaktif, misalnya dengan menambahkan animasi atau efek spesial saat tombol ditekan.

Buatlah sebuah folder dengan nama script. Di dalam folder script, buat sebuah file dengan nama main.js. Setelah itu, copy dan paste kode berikut ke dalam file main.js:

// trigger to play music in the background with sweetalert

window.addEventListener('load', () => {

Swal.fire({

title: 'Do you want to play music in the background?',

// text: "You won't be able to revert this!",

icon: 'warning',

showCancelButton: true,

confirmButtonColor: '#3085d6',

cancelButtonColor: '#d33',

confirmButtonText: 'Yes',

cancelButtonText: 'No',

}).then((result) => {

if (result.isConfirmed) {

document.querySelector('.song').play();

animationTimeline();

} else {

animationTimeline();

}

});

// animation timeline

const animationTimeline = () => {

// split chars that needs to be animated individually

const textBoxChars = document.getElementsByClassName("hbd-chatbox")[0];

const hbd = document.getElementsByClassName("wish-hbd")[0];

textBoxChars.innerHTML = `<span>${textBoxChars.innerHTML

.split("")

.join("</span><span>")}</span`;

hbd.innerHTML = `<span>${hbd.innerHTML

.split("")

.join("</span><span>")}</span`;

const ideaTextTrans = {

opacity: 0,

y: -20,

rotationX: 5,

skewX: "15deg"

}

const ideaTextTransLeave = {

opacity: 0,

y: 20,

rotationY: 5,

skewX: "-15deg"

}

// timeline

const tl = new TimelineMax();

tl.to(".container", 0.6, {

visibility: "visible"

})

.from(".one", 0.7, {

opacity: 0,

y: 10

})

.from(".two", 0.4, {

opacity: 0,

y: 10

})

.to(".one",

0.7,

{

opacity: 0,

y: 10

"+=3.5")

.to(".two",

0.7,

{

opacity: 0,

y: 10

"-=1")

.from(".three", 0.7, {

opacity: 0,

y: 10

})

.to(".three",

0.7,

{

opacity: 0,

y: 10

"+=3")

.from(".four", 0.7, {

scale: 0.2,

opacity: 0,

})

.from(".fake-btn", 0.3, {

scale: 0.2,

opacity: 0,

})

.staggerTo(

".hbd-chatbox span",

1.5, {

visibility: "visible",

0.05

)

.to(".fake-btn", 0.1, {

backgroundColor: "rgb(127, 206, 248)",

"+=4")

.to(

".four",

0.5, {

scale: 0.2,

opacity: 0,

y: -150

"+=1")

.from(".idea-1", 0.7, ideaTextTrans)

.to(".idea-1", 0.7, ideaTextTransLeave, "+=2.5")

.from(".idea-2", 0.7, ideaTextTrans)

.to(".idea-2", 0.7, ideaTextTransLeave, "+=2.5")

.from(".idea-3", 0.7, ideaTextTrans)

.to(".idea-3 strong", 0.5, {

scale: 1.2,

x: 10,

backgroundColor: "rgb(21, 161, 237)",

color: "#fff",

})

.to(".idea-3", 0.7, ideaTextTransLeave, "+=2.5")

.from(".idea-4", 0.7, ideaTextTrans)

.to(".idea-4", 0.7, ideaTextTransLeave, "+=2.5")

.from(

".idea-5",

0.7, {

rotationX: 15,

rotationZ: -10,

skewY: "-5deg",

y: 50,

z: 10,

opacity: 0,

"+=1.5"

)

.to(

".idea-5 span",

0.7, {

rotation: 90,

x: 8,

"+=1.4"

)

.to(

".idea-5",

0.7, {

scale: 0.2,

opacity: 0,

"+=2"

)

.staggerFrom(

".idea-6 span",

0.8, {

scale: 3,

opacity: 0,

rotation: 15,

ease: Expo.easeOut,

0.2

)

.staggerTo(

".idea-6 span",

0.8, {

scale: 3,

opacity: 0,

rotation: -15,

ease: Expo.easeOut,

0.2,

"+=1.5"

)

.staggerFromTo(

".baloons img",

2.5, {

opacity: 0.9,

y: 1400,

}, {

opacity: 1,

y: -1000,

0.2

)

.from(

".profile-picture",

0.5, {

scale: 3.5,

opacity: 0,

x: 25,

y: -25,

rotationZ: -45,

"-=2"

)

.from(".hat", 0.5, {

x: -100,

y: 350,

rotation: -180,

opacity: 0,

})

.staggerFrom(

".wish-hbd span",

0.7, {

opacity: 0,

y: -50,

// scale: 0.3,

rotation: 150,

skewX: "30deg",

ease: Elastic.easeOut.config(1, 0.5),

0.1

)

.staggerFromTo(

".wish-hbd span",

0.7, {

scale: 1.4,

rotationY: 150,

}, {

scale: 1,

rotationY: 0,

color: "#ff69b4",

ease: Expo.easeOut,

0.1,

"party"

)

.from(

".wish h5",

0.5, {

opacity: 0,

y: 10,

skewX: "-15deg",

"party"

)

.staggerTo(

".eight svg",

1.5, {

visibility: "visible",

opacity: 0,

scale: 80,

repeat: 3,

repeatDelay: 1.4,

0.3

)

.to(".six", 0.5, {

opacity: 0,

y: 30,

zIndex: "-1",

})

.staggerFrom(".nine p", 1, ideaTextTrans, 1.2)

.to(

".last-smile",

0.5, {

rotation: 90,

"+=1"

);

// Restart Animation on click

const replyBtn = document.getElementById("replay");

replyBtn.addEventListener("click", () => {

tl.restart();

});

}

Penjelasan kode:

Kode ini menambahkan event listener pada tombol dengan id celebrateBtn. Ketika tombol diklik, sebuah pop-up akan muncul dengan pesan "Selamat Ulang Tahun!".
Selain itu, latar belakang halaman akan berubah warna menjadi kuning (#ffeb3b) untuk memberi kesan perayaan.

Langkah 5: Menguji Website

Setelah membuat file index.html, main.css, dan main.js, buka file index.html di browser Anda untuk melihat hasilnya. Anda akan melihat halaman dengan ucapan selamat ulang tahun yang sederhana dan interaktif. Klik tombol "Rayakan!" untuk melihat animasi pop-up dan perubahan warna latar belakang.

Melakukan Kostumisasi pada Website Ucapan Ulang Tahun

Pada umumnya, hampir semua bagian dari website ini dapat Anda kostumisasi langsung melalui file index.html. Berikut adalah cara-cara untuk mengubah beberapa elemen penting di dalamnya.

1. Mengubah Nama

Untuk mengganti nama dalam ucapan ulang tahun, ikuti langkah-langkah berikut:

Buka file index.html Anda.
Cari kode berikut ini:

<span id="name">Irene</span>

</h1>

<p class="two" id="greetingText">I really like your name btw!</p>

</div>

Fokus pada bagian <span id="name">Irene</span>.

Ganti kata "Irene" dengan nama yang ingin Anda tampilkan, misalnya:
<span id="name">John</span>
Dengan begitu, nama yang ditampilkan di halaman akan berubah sesuai dengan yang Anda inginkan.

2. Mengubah Musik

Untuk mengganti musik latar yang diputar di halaman, ikuti langkah-langkah berikut:

Siapkan file musik yang ingin Anda gunakan.
Tempatkan file musik tersebut di dalam folder music di direktori proyek.
Cari kode berikut di file index.html:

<audio class="song" loop autoplay> <source src="./music/hbd.mpeg"> </audio>

4. Fokus pada bagian src="./music/hbd.mpeg", dan ubah nama file musik tersebut sesuai dengan file yang Anda siapkan. Misalnya, jika nama file musiknya adalah birthday-song.mp3, maka ubah menjadi:
<source src="./music/birthday-song.mp3">

Catatan: Pastikan ekstensi file (misalnya .mp3, .mpeg, atau lainnya) sesuai dengan jenis file musik yang Anda gunakan.

3. Mengubah Foto

Untuk mengganti foto di halaman ucapan, ikuti langkah-langkah berikut:

Siapkan foto yang ingin Anda gunakan.
Pastikan foto tersebut sudah dipotong menjadi persegi atau memiliki rasio 1:1.
Tempatkan foto yang akan digunakan di dalam folder img.
Cari kode berikut di file index.html:

<div class="six"> <img src="./img/irene.jpg" alt="profile" class="profile-picture" id="imagePath"/> <img src="img/hat.svg" alt="hat" class="hat" /> <div class="wish"> <h3 class="wish-hbd">Happy Birthday!</h3> <h5 id="wishText">May the js.prototypes always be with you! ;)</h5> </div> </div>
Fokus pada bagian <img src="./img/irene.jpg" alt="profile" class="profile-picture"/>.
Ganti nama file foto tersebut sesuai dengan nama file foto yang sudah Anda siapkan. Misalnya, jika nama foto baru Anda adalah john.jpg, maka ubah menjadi:

<img src="./img/john.jpg" alt="profile" class="profile-picture"/>

Pastikan ekstensi foto sesuai, seperti .jpg, .png, atau lainnya.
4. Mengatur Durasi Setiap Bagian
Jika ada bagian dari halaman yang tampil terlalu cepat atau terlalu lambat, Anda bisa mengubah durasinya. Berikut adalah cara untuk melakukannya:
1. Cari kode atau bagian yang ingin Anda ubah durasinya di dalam file index.html. Misalnya, kode berikut untuk bagian yang menampilkan ucapan:
  
  <div class="three"> <p>It's your birthday!! :D</p> </div>
2. Fokus pada nama classnya, misalnya three. Buka file main.js yang ada di dalam folder script.
3. Cari class .three di dalam file main.js. Anda akan menemukan kode seperti ini:
  
  .from(".three", 0.7, { opacity: 0, y: 10 }) .to(".three", 0.7, { opacity: 0, y: 10 }, "+=3")
4. Fokus pada bagian .to(...), khususnya pada bagian "+=3".
5. Ubah nilai "+=3" sesuai dengan durasi yang Anda inginkan. Nilai ini diukur dalam detik (satuan waktu). Misalnya, jika Anda ingin durasi menjadi 5 detik, ubah menjadi:
```
"+=5"

Catatan: Anda juga bisa menggunakan angka negatif seperti "-=3" jika ingin 
elemen tersebut muncul lebih cepat daripada sebelumnya.
```

5. Cara Deploy atau Hosting Website

Setelah melakukan kostumisasi, Anda tentu ingin agar website ini bisa diakses secara online. Anda bisa menggunakan layanan hosting seperti Netlify atau Github Pages. Berikut adalah cara singkat untuk melakukannya:

Netlify:

Daftar atau login ke akun Netlify.

Pilih opsi untuk membuat proyek baru.

Upload folder website Anda ke Netlify, dan website Anda akan langsung dapat diakses secara online.

Github Pages:

Buat repositori baru di Github.

Upload file website Anda ke repositori tersebut.

Aktifkan Github Pages pada repositori untuk menampilkan website Anda secara online.

Dengan begitu, website ucapan ulang tahun Anda akan siap dipublikasikan ke seluruh dunia!

Kesimpulan

Dengan mengikuti langkah-langkah di atas, Anda dapat membuat halaman ucapan selamat ulang tahun yang menarik dan interaktif menggunakan HTML, CSS, dan JavaScript. Anda bisa mengembangkan fitur-fitur tambahan seperti animasi atau efek visual yang lebih kompleks, sesuai dengan kreativitas Anda. Selamat mencoba!

Posting Komentar untuk "Membuat Ucapan Selamat Ulang Tahun dengan HTML, CSS, dan JavaScript"

Peringatan: Sebelum mengirimkan komentar, harap pastikan bahwa:

- Komentar Anda relevan dengan topik.

- Tidak mengandung kata-kata kasar atau menyinggung.

- Tidak mengandung spam atau tautan yang tidak relevan.

- Anda mematuhi kebijakan privasi dan ketentuan penggunaan situs ini.

Terima kasih atas pengertiannya.

Membuat Ucapan Selamat Ulang Tahun dengan HTML, CSS, dan JavaScript

Langkah 1: Download Source Code

Langkah 2: Membuat File index.html

HTML

Langkah 3: Membuat File main.css

CSS

Langkah 4: Membuat File main.js

JavaScript

Langkah 5: Menguji Website

Melakukan Kostumisasi pada Website Ucapan Ulang Tahun

1. Mengubah Nama

2. Mengubah Musik

3. Mengubah Foto

4. Mengatur Durasi Setiap Bagian

5. Cara Deploy atau Hosting Website

Setelah melakukan kostumisasi, Anda tentu ingin agar website ini bisa diakses secara online. Anda bisa menggunakan layanan hosting seperti Netlify atau Github Pages. Berikut adalah cara singkat untuk melakukannya:

Netlify:

Daftar atau login ke akun Netlify.

Pilih opsi untuk membuat proyek baru.

Upload folder website Anda ke Netlify, dan website Anda akan langsung dapat diakses secara online.

Github Pages:

Buat repositori baru di Github.

Upload file website Anda ke repositori tersebut.

Aktifkan Github Pages pada repositori untuk menampilkan website Anda secara online.

Dengan begitu, website ucapan ulang tahun Anda akan siap dipublikasikan ke seluruh dunia!

Kesimpulan

Posting Komentar untuk "Membuat Ucapan Selamat Ulang Tahun dengan HTML, CSS, dan JavaScript"

Langkah 2: Membuat File `index.html`

Langkah 3: Membuat File `main.css`

Langkah 4: Membuat File `main.js`