My Christmas Tree

index.html

  <div id="nameModal" class="modal">
        <div class="modal-content">
            <p>Hi There! Just tell us your name</p>
            <input type="text" id="nameInput" placeholder="Your name">
            <button id="submitName">Continue</button>
        </div>
    </div>

    <div class="message" id="message">Merry Christmas!</div>

    <div class="container">
        <div class="tree">
            <div class="star"></div>
            <div class="tree-section section-1"></div>
            <div class="tree-section section-2"></div>
            <div class="tree-section section-3"></div>
            <div class="trunk"></div>
        </div>
    </div>

my-christmas-tree.markdown

My Christmas Tree

A Pen by Jayanika Chandrapriya on CodePen.

License.

script.js

const tree = document.querySelector('.tree');
const colors = ['red', 'blue', 'yellow', 'green', 'purple', 'white'];

const lightPositions = [
    {x: -60, y: 40}, {x: -30, y: 30}, {x: 0, y: 25}, {x: 30, y: 30}, {x: 60, y: 40},
    {x: -70, y: 70}, {x: -40, y: 60}, {x: 10, y: 55}, {x: 40, y: 60}, {x: 70, y: 70},
    {x: -80, y: 100}, {x: -50, y: 90}, {x: -20, y: 85}, {x: 20, y: 85}, {x: 50, y: 90}, {x: 80, y: 100},
    {x: -90, y: 140}, {x: -60, y: 130}, {x: -30, y: 125}, {x: 0, y: 120}, {x: 30, y: 125}, {x: 60, y: 130}, {x: 90, y: 140},
    {x: -100, y: 170}, {x: -70, y: 160}, {x: -35, y: 155}, {x: 5, y: 150}, {x: 35, y: 155}, {x: 70, y: 160}, {x: 100, y: 170},
    {x: -110, y: 200}, {x: -80, y: 190}, {x: -45, y: 185}, {x: -10, y: 180}, {x: 25, y: 185}, {x: 80, y: 190}, {x: 110, y: 200},
    {x: -120, y: 240}, {x: -85, y: 230}, {x: -50, y: 225}, {x: -15, y: 220}, {x: 15, y: 220}, {x: 50, y: 225}, {x: 85, y: 230}, {x: 120, y: 240},
    {x: -130, y: 270}, {x: -95, y: 260}, {x: -60, y: 255}, {x: -25, y: 250}, {x: 10, y: 248}, {x: 45, y: 252}, {x: 95, y: 260}, {x: 130, y: 270},
    {x: -140, y: 300}, {x: -105, y: 290}, {x: -70, y: 285}, {x: -35, y: 280}, {x: 0, y: 278}, {x: 35, y: 280}, {x: 70, y: 285}, {x: 105, y: 290}, {x: 140, y: 300},
    {x: -145, y: 330}, {x: -110, y: 320}, {x: -75, y: 315}, {x: -40, y: 310}, {x: 0, y: 308}, {x: 40, y: 310}, {x: 75, y: 315}, {x: 110, y: 320}, {x: 145, y: 330}
];

lightPositions.forEach((pos, index) => {
    const light = document.createElement('div');
    light.className = `light ${colors[index % colors.length]}`;
    light.style.left = `calc(50% + ${pos.x}px)`;
    light.style.top = `${pos.y}px`;
    light.style.animationDelay = `${Math.random() * 2}s`;
    tree.appendChild(light);
});

function createSnowflake() {
    const snow = document.createElement('div');
    snow.className = 'snow';
    snow.style.left = Math.random() * 100 + '%';
    snow.style.animationDuration = (Math.random() * 3 + 2) + 's';
    snow.style.opacity = Math.random();
    snow.style.top = '-10px';
    document.body.appendChild(snow);
    
    setTimeout(() => {
        snow.remove();
    }, 5000);
}

setInterval(createSnowflake, 200);

const modal = document.getElementById('nameModal');
const nameInput = document.getElementById('nameInput');
const submitBtn = document.getElementById('submitName');
const messageDiv = document.getElementById('message');

submitBtn.addEventListener('click', function() {
    const name = nameInput.value.trim();
    if (name) {
        messageDiv.textContent = `Merry Christmas ${name}!`;
        modal.style.display = 'none';
    } else {
        alert('Please enter your name');
    }
});

nameInput.addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
        submitBtn.click();
    }
});

nameInput.focus();

style.css

body {
    margin: 0;
    padding: 0;
    background: linear-gradient(to bottom, #0a1128 0%, #1a2332 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
    font-family: Arial, sans-serif;
    flex-direction: column;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background: linear-gradient(135deg, #1a472a 0%, #0d3d2e 100%);
    padding: 40px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
    border: 2px solid #ffd700;
}

.modal-content h2 {
    color: #ffd700;
    margin-top: 0;
    font-size: 32px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.modal-content p {
    color: #fff;
    font-size: 18px;
    margin-bottom: 20px;
}

#nameInput {
    padding: 12px 20px;
    font-size: 18px;
    border: 2px solid #ffd700;
    border-radius: 5px;
    width: 250px;
    margin-bottom: 20px;
    background: #fff;
    outline: none;
}

#nameInput:focus {
    border-color: #ffed4e;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

#submitName {
    padding: 12px 30px;
    font-size: 18px;
    background: #ffd700;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    color: #0d3d2e;
    transition: all 0.3s;
}

#submitName:hover {
    background: #ffed4e;
    transform: scale(1.05);
}

.container {
    position: relative;
    margin-top: 20px;
}

.tree {
    position: relative;
    width: 0;
    height: 0;
    margin: 0 auto;
}

.tree-section {
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.section-1 {
    border-width: 0 100px 120px 100px;
    border-color: transparent transparent #0d5c3f transparent;
    top: 0;
    z-index: 3;
}

.section-2 {
    border-width: 0 130px 140px 130px;
    border-color: transparent transparent #0f6e4a transparent;
    top: 90px;
    z-index: 2;
}

.section-3 {
    border-width: 0 160px 160px 160px;
    border-color: transparent transparent #117a52 transparent;
    top: 190px;
    z-index: 1;
}

.trunk {
    width: 50px;
    height: 80px;
    background: linear-gradient(to bottom, #5c3a1e 0%, #4a2f18 100%);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 340px;
    border-radius: 0 0 5px 5px;
}

.star {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 40px solid #ffd700;
    z-index: 10;
}

.star:after {
    content: '';
    position: absolute;
    top: 15px;
    left: -25px;
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 40px solid #ffd700;
}

.light {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
    animation: twinkle 2s infinite;
    z-index: 5;
}

.light.red { 
    background: #ff0000;
    color: #ff0000;
}

.light.blue { 
    background: #0066ff;
    color: #0066ff;
}

.light.yellow { 
    background: #ffff00;
    color: #ffff00;
}

.light.green { 
    background: #00ff00;
    color: #00ff00;
}

.light.purple { 
    background: #9900ff;
    color: #9900ff;
}

.light.white { 
    background: #ffffff;
    color: #ffffff;
}

@keyframes twinkle {
    0%, 100% { 
        opacity: 1;
        transform: scale(1);
    }
    50% { 
        opacity: 0.3;
        transform: scale(0.8);
    }
}

.snow {
    position: absolute;
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 50%;
    animation: fall linear infinite;
}

@keyframes fall {
    to {
        transform: translateY(100vh);
    }
}

.message {
    color: #ffd700;
    font-size: 36px;
    font-weight: bold;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    margin-bottom: 20px;
    z-index: 100;
}