Pages

Saturday, 21 December 2024

Text to ASCII Art Converter Tool



Text to ASCII Art Converter

Text to ASCII Art Converter


        

    


    


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background-color: #f7f7f7;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    color: #333;
}

.container {
    background-color: #fff;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 400px;
    text-align: center;
}

.title {
    color: #5a5a5a;
    margin-bottom: 20px;
    font-size: 24px;
    text-transform: uppercase;
}

.input-container,
.output-container {
    margin-bottom: 20px;
}

textarea {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #ccc;
    margin-top: 10px;
    resize: none;
}

button {
    padding: 10px 15px;
    background-color: #4CAF50;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin: 10px 5px;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #45a049;
}

button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

button:active {
    transform: scale(0.98);
}

.output {
    background-color: #2d2d2d;
    color: #00FF00;
    padding: 20px;
    border-radius: 5px;
    font-family: monospace;
    font-size: 16px;
    min-height: 200px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

#outputText {
    max-height: 300px;
    overflow-y: auto;
}
// Initialize the Figlet library
const convertBtn = document.getElementById('convertBtn');
const copyBtn = document.getElementById('copyBtn');
const inputText = document.getElementById('inputText');
const outputText = document.getElementById('outputText');

// Event listener for Convert Button
convertBtn.addEventListener('click', () => {
    const text = inputText.value.trim();
    
    if (text === '') {
        alert("Please enter some text to convert.");
        return;
    }

    // Using the Figlet library to convert text to ASCII Art
    figlet.text(text, { font: 'slant' }, (err, result) => {
        if (err) {
            console.error("Error generating ASCII Art:", err);
            return;
        }

        outputText.textContent = result;  // Display ASCII Art
        copyBtn.disabled = false;  // Enable the Copy button
    });
});

// Event listener for Copy Button
copyBtn.addEventListener('click', () => {
    // Copy the ASCII Art to clipboard
    const asciiText = outputText.textContent;
    
    navigator.clipboard.writeText(asciiText).then(() => {
        alert("ASCII Art copied to clipboard!");
    }).catch(err => {
        console.error("Failed to copy: ", err);
    });
});
















By



at