Name		Name	Last commit message	Last commit date
parent directory ..
Images		Images
README.md		README.md
WeddingAnniversary5.css		WeddingAnniversary5.css
WeddingAnniversary5.html		WeddingAnniversary5.html
WeddingAnniversary5.js		WeddingAnniversary5.js
WeddingAnniversary5_2.css		WeddingAnniversary5_2.css
WeddingAnniversary5_2.html		WeddingAnniversary5_2.html
WeddingAnniversary6.css		WeddingAnniversary6.css
WeddingAnniversary6.html		WeddingAnniversary6.html
WeddingAnniversary6.js		WeddingAnniversary6.js
WeddingAnniversary7.css		WeddingAnniversary7.css
WeddingAnniversary7.html		WeddingAnniversary7.html
WeddingAnniversary7.js		WeddingAnniversary7.js
WeddingAnniversary8.css		WeddingAnniversary8.css
WeddingAnniversary8.html		WeddingAnniversary8.html
WeddingAnniversary8ts.js		WeddingAnniversary8ts.js
WeddingAnniversary8ts.ts		WeddingAnniversary8ts.ts
WeddingAnniversary9_1.css		WeddingAnniversary9_1.css
WeddingAnniversary9_1.html		WeddingAnniversary9_1.html
WeddingAnniversary9_2.css		WeddingAnniversary9_2.css
WeddingAnniversary9_2.html		WeddingAnniversary9_2.html
WeddingAnniversary9_2ts.js		WeddingAnniversary9_2ts.js
WeddingAnniversary9_2ts.ts		WeddingAnniversary9_2ts.ts

README.md

Wedding Anniversary

You're inside me.

9th Wedding Anniversary 2 (2024.03.07)

Annual updates / 2nd trial

A family funeral schedule unexpectedly overlapped, creating a subdued atmosphere
- But it seems the mood of a typical funeral rather than a restrained wedding anniversary
All the image sources are generated by Bing Copilot (DALL·E 3)
- Remove background : remove.bg
Use a ten-color grayscale palette

WeddingAnniversary9_2.html : Mainly updated part

……

<head>
    ……
    <title>The 9th Wedding Anniversary (2)</title>
    <link rel="stylesheet" href="WeddingAnniversary9_2.css">
    <script defer src="WeddingAnniversary9_2ts.js"></script>
</head>

……

WeddingAnniversary9_2.css : Mainly updated part

body {
    ……

    font-family: "Brush Script MT", fantasy, Times, serif;
    opacity: 0.8;

    background-image: url("./Images/09_Background.png");
    ……
}

#row1_1 img {
    content: url("./Images/09_Heart.png");
    vertical-align: -40px;
    width: 130px;
    ……
}

#row2 img {
    content: url("./Images/09_Number_Mono.png");
    vertical-align: -100px;
    width: 240px;
    ……
}

WeddingAnniversary9_2ts.ts (New)

// declare the interval for changing colors as a constant
const changeInterval: number = 500;

// declare the palette of 10 shades of gray as a constant
const palette: string[] = ["#000000", "#111111", "#222222", "#333333", "#444444", "#555555", "#666666", "#777777", "#888888", "#999999"];

// declare the css id list to change colors as a constant
const cssIdList: string[] = ["row1_1", "row1_2", "row2", "row3"];

function changeColor() {
    // loop through the css id list
    for (let i = 0; i < cssIdList.length; i++) {
        // generate a random index from 0 to 9
        let index: number = Math.floor(Math.random() * palette.length);

        // get the color from the palette by the index
        let color: string = palette[index];

        // assign the color to the element by the css id
        document.getElementById(cssIdList[i])!.style.color = color;
    }
}

// call the function at the set interval
setInterval(changeColor, changeInterval);

9th Wedding Anniversary 1 (2024.03.07)

Annual updates

Conception : "9" = "Goo" in Korean = "Pigeon" You nahm sayin
- Background image sources : Pigeon heli (Imgur)
- Other images are generated by Bing Copilot (DALL·E 3)
  - Remove background : remove.bg
Use WeddingAnniversary8ts.ts as is, without any changes
My son really liked it

WeddingAnniversary9_1.html : Mainly updated part

……

<head>
    ……
    <title>The 9th Wedding Anniversary (1)</title>
    <link rel="stylesheet" href="WeddingAnniversary9_1.css">
    ……
</head>

……

WeddingAnniversary9_1.css : Mainly updated part

body {
    ……
    /* max-height: 1440; */

    font-family: "Comic Sans MS", Times, serif;
    opacity: 1;

    background-image: url("./Images/09_PigeonHelicopter.gif");
    ……
    background-repeat: no-repeat;
    ……
}

#row1_1 img {
    content: url("./Images/09_Heart_Pigeon.png");
    vertical-align: -30px;
    width: 150px;
    ……
}

#row2 img {
    content: url("./Images/09_Number_Pigeon.png");
    vertical-align: -60px;
    width: 200px;
    ……
    object-fit: cover;
    ……
}

8th Wedding Anniversary (2023.03.07)

Annual updates : Change the background, heart and number images and the text font
Technical improvements
- HTML
  - Move all the image urls and style properties to the css file
  - Simplify line replacements for improving legibility
- CSS
  - Use opacity all over the body tag
  - Change id names to row1_1 row1_2 row2 row3
- JavaScript
  - apply TypeScript

Sources : Background / Heart / Infinity Symbol

WeddingAnniversary8.html : Mainly updated part

……

<body>
    <div id='row1_1'>K R<img/></div>
    <div id='row1_2'>E Y</div>
    <div id='row2'>Celebrate Our <img/>th</div>
    <div id='row3'>Wedding Anniversary</div>
</body>

……

WeddingAnniversary8.css : Mainly updated part

body {
    text-align: center;

    max-width: 2880;
    max-height: 1440;

    font-family: fantasy, Times, serif;
    opacity: 0.8;

    /* background-color: black; */
    background-image: url("https://steamuserimages-a.akamaihd.net/ugc/88226491225119785/A926E8C91408FF20719AA8781EDB10ADF9BF7626/");
    background-size : 100%;

    /* border: 2px solid antiquewhite; */
    /* border-radius: 40px; */
}

#row1_1 img {
    content: url("https://i.pinimg.com/originals/38/a4/69/38a469ce87cd9702d0bea43478ad4df0.gif");
    vertical-align: -10px;
    width: 130px;
    height: auto;
    opacity: 1;
}

#row2 img {
    content: url("https://thumbs.gfycat.com/OrneryUnluckyAngwantibo-max-1mb.gif");
    vertical-align: -35px;
    width: 280px;
    height: auto;
    object-fit: none;
    opacity: 1;
}

WeddingAnniversary8ts.ts : Mainly updated part

function changeColor()
{
    const randNumDec = [];                                                          // for containing random numbers decimally
    const randNumHex = [];                                                          // for containing converted numbers hexdecimally
    const cssIdList = ["name1", "name2", "chameleon1", "chameleon2"];               // css id list to change colors

    for (let i = 0; i < 4 ; i++)
    {
        ……
        document.getElementById(cssIdList[i]).style.color = '#' + randNumHex[i];    // style-color requires #XXXXXX
    }
}

……

7th Wedding Anniversary (2022.03.07)

Annual updates : Change images of the heart and number
Technical improvements
- HTML : Relocate script tag (* reference ☞ Script Tag's Location (2022.01.02))
- CSS : Add border with rounded edge / change font from Comic Sans MS to Brush Script MT
- JavaScript : Limit letter's color range in consideration of black background (seems trivial)

Sources : Heart / 777

WeddingAnniversary7.html : Mainly updated part

<head>
    ……
    <script defer src="WeddingAnniversary7.js"></script>
</head>

WeddingAnniversary7.css : Mainly updated part

body {
    ……
    border: 2px solid white;
    border-radius: 40px;
}

#name1 {
    ……
    font-family: "Brush Script MT", "Comic Sans MS", Times, serif;
    ……
}

WeddingAnniversary7.js : Mainly updated part

……
        do                                                                          // to avoid black letters on the black background
        {
            randNumDec[i] = Math.floor(Math.random() * Math.pow(256, 3));           // generate RGB color (decimal)
            console.log(i, randNumDec[i]);                                          // test : ok
        }
        while (randNumDec[i] == 16777216);                                          // 256^3 = 16777216
……

6th Wedding Anniversary (2021.03.07)

Annual Updates : Change images of the heart and number

Technical improvements

CSS : Seperate id name to name1 and name2 and maintain the texts in a line
Javascript : Use for statement

WeddingAnniversary6.html : Mainly updated part

    <div id='name1' style="display:inline">
        K R
        <div id='heart' style="display:inline">
            <img src="heart2.gif">
        </div>
    </div>
    <div id='name2' style="display:inline">
        E Y
    </div>

WeddingAnniversary6.css : Mainly updated part

body {
    text-align: center;
}

#name1 {
……
    font-family: "Comic Sans MS", Times, serif;
……
}

WeddingAnniversary6.js : Mainly updated part

function changeColor() {

    const randNumDec = [];     // for containing random numbers decimally
    const randNumHex = [];     // for containing converted numbers hexdecimally
    const cssIdList = ["name1", "name2", "chameleon1", "chameleon2"]; // css id list to change colors

    for (let i = 0; i < 4 ; i++) {
        randNumDec[i] = Math.floor(Math.random() * Math.pow(256, 3)); // generate RGB color (decimal)
        randNumHex[i] = randNumDec[i].toString(16); // turn to the hexdecimal
        document.getElementById(cssIdList[i]).style.color = '#' + randNumHex[i]; // style-color requires #XXXXXX
    }

}

setInterval(changeColor, 500);

5th Wedding Anniversary 2 (2020.03.11)

Use vertical-align between text and image to improve alignment in CSS

WeddingAnniversary5_2.html : Mainly updated part

    <div id='name'>
        K R
        <div id='heart'>
            <img src="heart.gif">
        </div>
        E Y
    </div>
    <div id='chameleon1'>
        Celebrate Our
        <div id='year'>
            <img src="5.gif">
        </div>
        th
    </div>

WeddingAnniversary5_2.css : Mainly updated part

#heart {
    display: inline;
}
#heart img {
    width: 80px;
    height: auto;
}

#year {
    display: inline;
}
#year img {
    vertical-align: -20px;
    width: 100px;
    height: auto;
}

5th Wedding Anniversary (2020.03.07)

Advanced from Colorful Show

WeddingAnniversary5.html

<!DOCTYPE html>

<html>

<head>
    <meta charset="EUC-KR">
    <title>Wedding Anniversary 5</title>
    <link rel="stylesheet" href="WeddingAnniversary5.css">
</head>

<body>
    <div id='name'>
        K R <img src="https://thumbs.gfycat.com/ZigzagJauntyHapuku-small.gif"  height="70" width="70"> E Y
    </div>
    <div id='chameleon1'>
        Celebrate Our <img src="https://media.giphy.com/media/jQWTJf2Ch2ANz2DdqU/giphy.gif"  height="80" width="80">th
    </div>
    <div id='chameleon2'>
        Wedding Anniversary
    </div>

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

</html>

WeddingAnniversary5.css

@charset "EUC-KR";

#name {
    text-align: center;
    font-family: "Times New Roman", Times, serif;
    font-size: 450%;
}

#chameleon1 {
    text-align: center;
    font-family: "Times New Roman", Times, serif;
    font-size: 400%;
}

#chameleon2 {
    text-align: center;
    font-family: "Times New Roman", Times, serif;
    font-size: 400%;
}

WeddingAnniversary5.js

function changeColor() {
    randNumDec1 = Math.floor(Math.random() * Math.pow(256, 3));
    randNumDec2 = Math.floor(Math.random() * Math.pow(256, 3));
    randNumDec3 = Math.floor(Math.random() * Math.pow(256, 3));
    
    randNumHex1 = randNumDec1.toString(16);
    randNumHex2 = randNumDec2.toString(16);
    randNumHex3 = randNumDec3.toString(16);

    document.getElementById('name').style.color = '#' + randNumHex1;
    document.getElementById('chameleon1').style.color = '#' + randNumHex2;
    document.getElementById('chameleon2').style.color = '#' + randNumHex3;
}

setInterval(changeColor, 500);

Files

WeddingAnniversary

Directory actions

More options

Directory actions

More options

Latest commit

History

WeddingAnniversary

Folders and files

parent directory

List