BLOG DETAIL

• abc
• 03 Nov 2025

Perfect Plant Match!

for Html:

<div class="quiz-container">
    <h1>Find Your Perfect Plant Match!</h1>
    <form id="plantQuiz">
        <label> Sunlight:</label>
        <select id="sunlight">
            <option value="low">Low Light</option>
            <option value="medium">Medium Light</option>
            <option value="high">High Light</option>
        </select>

        <label> Care Level:</label>
        <select  id="care">
            <option value="easy">Easy</option>
            <option value="moderate">Medium</option>
            <option value="high">High Maintenance</option>
        </select>

        <label> Pet-Friendly:</label>
        <select id="pets">
            <option value="yes">Yes</option>
            <option value="no">No</option>
        </select>
        <button type="submit">Find My Plant</button>
    </form>
    <div id="result" class="result-box"></div>
</div>

 for css:

.quiz-container{
    max-width: 500px;
    margin: auto;
    background: white;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

h1{
    text-align: center;
    color: #2d6a4f;
}

label{
    display: block;
    margin-top: 15px;
    font-weight: bold;
}

select, button{
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border-radius: 8px;
    border: 1px solid #ccc;
}

button{
    background: #2d6a4f;
    color: white;
    font-size: 16px;
    margin-top: 20px;
    cursor: pointer;
}

button:hover{
    background: #40916c;
}
.result-box{
    margin-top: 25px;
    padding: 15px;
    background: #d8f3dc;
    border-left: 6px solid #1b4332;
    display: none;
}

 for js:

document.getElementById('plantQuiz').addEventListener('submit',function (e) {
    e.preventDefault();

    const sunlight = document.getElementById('sunlight').value;
    const care = document.getElementById('care').value;
    const pets = document.getElementById('pets').value;

    const resultDiv = document.getElementById('result');
    let plantMatch = '';


    if (sunlight ==='low' && care === 'easy' && pets === 'yes'){
        plantMatch = 'spider plant-Great for low light,easy care,and safe for pets!';
    }else if (sunlight ==='medium' && care === 'moderate' && pets === 'no'){
        plantMatch = 'Aloe Vera - Needs some care and not safe for pets.';

    }else if (sunlight ==='high' && care === 'high' && pets === 'yes'){
        plantMatch = 'Hibiscus-Loves sun,requires attention,but pet-friendly!';
    }else if (sunlight ==='medium' && care === 'easy' && pets === 'yes'){
        plantMatch = 'Peperomia-pretty,low-maintenance and pet safe!';
    }else{
        plantMatch='Snake plant -very adaptable,but no safe for pets.';
    }

    resultDiv.innerText = plantMatch;
    resultDiv.style.display = 'block';


});