All Rounder Tools Blogger-Best blog for blogger

Thursday, November 28, 2024

Line Graph Maker Tool with colorful styling and all its features use any free library

 

Line Graph Maker Tool

Line Graph Maker Tool

* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; background-color: #f4f4f9; color: #333; } .container { max-width: 900px; margin: 40px auto; padding: 20px; background-color: white; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } h1 { text-align: center; color: #4CAF50; margin-bottom: 20px; } .form-container { display: flex; flex-direction: column; gap: 15px; margin-bottom: 20px; } label { font-weight: bold; } input[type="text"], input[type="color"], button { padding: 10px; font-size: 16px; border-radius: 5px; border: 1px solid #ddd; } input[type="text"] { width: 100%; } button { background-color: #4CAF50; color: white; cursor: pointer; border: none; } button:hover { background-color: #45a049; } .graph-container { margin-top: 20px; text-align: center; } canvas { max-width: 100%; height: auto; border: 2px solid #ddd; border-radius: 8px; } document.getElementById('generateGraph').addEventListener('click', function () { // Get the input values const labelsInput = document.getElementById('labels').value.trim(); const dataInput = document.getElementById('data').value.trim(); const lineColor = document.getElementById('lineColor').value; // Validate input if (!labelsInput || !dataInput) { alert('Please fill in both Labels and Data points.'); return; } // Convert input values into arrays const labels = labelsInput.split(',').map(label => label.trim()); const data = dataInput.split(',').map(value => parseFloat(value.trim())); // Check if data and labels lengths match if (labels.length !== data.length) { alert('The number of labels must match the number of data points.'); return; } // Create the chart createLineChart(labels, data, lineColor); }); // Function to create the line chart function createLineChart(labels, data, lineColor) { const ctx = document.getElementById('lineGraph').getContext('2d'); // Destroy any existing chart before creating a new one if (window.lineChart) { window.lineChart.destroy(); } // Create the new line chart window.lineChart = new Chart(ctx, { type: 'line', data: { labels: labels, datasets: [{ label: 'Data Points', data: data, fill: false, borderColor: lineColor, tension: 0.1, pointRadius: 5, pointBackgroundColor: lineColor, pointBorderColor: '#fff', pointBorderWidth: 2 }] }, options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true } } } }); }
at No comments:
Labels:

Responsive Website Tester Tool with colorful styling and all its features use any free library

 

Responsive Website Tester Tool

Responsive Website Tester Tool

Instructions:

Select a screen size from the buttons above to test how a website will look on different devices.

For best results, enter the URL of the website you want to test in the iframe below.

© 2024 Responsive Website Tester Tool

at No comments:
Labels:

OPML to JSON Converter Tool with colorful styling and all its features use any free library

 

OPML to JSON Converter

OPML to JSON Converter

Upload an OPML file to convert it into JSON format.

Converted JSON:


        

    


    


/* styles.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

.container {
    width: 100%;
    max-width: 800px;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

header {
    text-align: center;
    margin-bottom: 20px;
}

header h1 {
    font-size: 2rem;
    color: #4caf50;
}

header p {
    font-size: 1rem;
    color: #555;
}

.upload-section {
    text-align: center;
    margin-bottom: 30px;
}

input[type="file"] {
    padding: 10px;
    border: 2px solid #4caf50;
    border-radius: 4px;
    background-color: #f9f9f9;
    cursor: pointer;
    font-size: 1rem;
}

button {
    padding: 10px 20px;
    background-color: #4caf50;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    margin-left: 10px;
    transition: background-color 0.3s ease;
}

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

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

.result-section {
    margin-top: 30px;
}

pre {
    background-color: #f4f4f4;
    padding: 15px;
    border-radius: 5px;
    font-size: 0.9rem;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    color: #333;
}

@media (max-width: 600px) {
    .container {
        padding: 10px;
    }
    header h1 {
        font-size: 1.5rem;
    }
    input[type="file"], button {
        width: 100%;
        margin-top: 10px;
    }
}
// script.js
document.getElementById('fileInput').addEventListener('change', handleFileSelect);
document.getElementById('convertButton').addEventListener('click', convertToJSON);

let opmlData = null;

function handleFileSelect(event) {
    const file = event.target.files[0];
    if (file && file.name.endsWith('.opml')) {
        document.getElementById('convertButton').disabled = false;
        const reader = new FileReader();
        reader.onload = function(e) {
            opmlData = e.target.result;
        };
        reader.readAsText(file);
    } else {
        alert('Please select a valid OPML file.');
        document.getElementById('convertButton').disabled = true;
    }
}

function convertToJSON() {
    if (!opmlData) return;

    try {
        const parser = new DOMParser();
        const xmlDoc = parser.parseFromString(opmlData, 'application/xml');
        const opmlObject = parseOPML(xmlDoc.documentElement);
        const jsonOutput = JSON.stringify(opmlObject, null, 2);
        document.getElementById('jsonOutput').textContent = jsonOutput;
    } catch (error) {
        alert('Error parsing the OPML file.');
        console.error(error);
    }
}

function parseOPML(node) {
    const result = {};
    if (node.nodeName === 'outline') {
        const attributes = node.attributes;
        const outlineObj = {
            text: attributes.getNamedItem('text') ? attributes.getNamedItem('text').value : '',
            type: attributes.getNamedItem('type') ? attributes.getNamedItem('type').value : '',
            xmlUrl: attributes.getNamedItem('xmlUrl') ? attributes.getNamedItem('xmlUrl').value : '',
            htmlUrl: attributes.getNamedItem('htmlUrl') ? attributes.getNamedItem('htmlUrl').value : '',
            children: []
        };

        Array.from(node.children).forEach(childNode => {
            outlineObj.children.push(parseOPML(childNode));
        });

        result.outline = outlineObj;
    }
    return result;
}











at





No comments:
  













Labels:

















          

        

          

        

Tuesday, November 5, 2024


          

        









Unix Timestamp Converter Tool with colorful styling and all its features use any free library











 



    
    
    Unix Timestamp Converter
    
    
    



    

        

            

                

                    

                        
Unix Timestamp Converter

                        
                        

                            
                            
                        


                        
                        
                        

                            
Converted Date and Time:

                            

                        

                    

                

            

        

    


    
    


/* Global styles */
body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f7fa;
    margin: 0;
    padding: 0;
    height: 100vh;
}

/* Container styles */
.container {
    max-width: 600px;
    padding-top: 30px;
}

/* Card styling */
.card {
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.card-body {
    background: #ffffff;
    border-radius: 10px;
}

/* Button Styling */
button {
    font-size: 16px;
    padding: 10px;
}

button:hover {
    background-color: #007bff;
}

button i {
    margin-left: 8px;
}

/* Result display */
.result {
    background-color: #fff3cd;
    border: 1px solid #ffeeba;
    padding: 10px;
    border-radius: 5px;
    margin-top: 20px;
}

#convertedDate {
    font-size: 18px;
    color: #28a745;
}
document.getElementById('convertBtn').addEventListener('click', function() {
    const timestampInput = document.getElementById('timestampInput').value;
    const convertedDate = document.getElementById('convertedDate');

    if (timestampInput === '') {
        convertedDate.innerHTML = 'Please enter a valid Unix timestamp.';
    } else {
        const unixTimestamp = parseInt(timestampInput);
        if (isNaN(unixTimestamp)) {
            convertedDate.innerHTML = 'Please enter a valid number.';
        } else {
            // Use moment.js to convert Unix timestamp
            const date = moment.unix(unixTimestamp).format('MMMM Do YYYY, h:mm:ss a');
            convertedDate.innerHTML = date;
        }
    }
});











at





No comments:
  













Labels:

























YouTube Thumbnail Downloader Tool with colorful styling and all its features use any free library











 



    
    
    
    YouTube Thumbnail Downloader
    
    


    

        

            
YouTube Thumbnail Downloader

            
Enter the YouTube video URL to download its thumbnail

        

        
        

            

                
                
            


            
        


        

            
© 2024 YouTube Thumbnail Downloader

        

    


    


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

body {
    font-family: 'Roboto', sans-serif;
    background-color: #f7f7f7;
    color: #333;
    padding: 20px;
}

.container {
    max-width: 600px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
}

header {
    margin-bottom: 20px;
}

header h1 {
    color: #ff4d4d;
    font-size: 2.5rem;
    margin-bottom: 10px;
}

header p {
    font-size: 1rem;
    color: #555;
}

.input-container {
    display: flex;
    justify-content: center;
    gap: 10px;
}

#videoURL {
    width: 70%;
    padding: 10px;
    border: 2px solid #ff4d4d;
    border-radius: 8px;
    font-size: 1rem;
}

#downloadBtn {
    padding: 10px 20px;
    background-color: #ff4d4d;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#downloadBtn:hover {
    background-color: #ff6666;
}

#thumbnailResult {
    margin-top: 30px;
}

.thumbnail-box {
    margin-bottom: 20px;
}

#thumbnailImage {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

button {
    padding: 10px 20px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #218838;
}

footer {
    margin-top: 40px;
    font-size: 0.8rem;
    color: #aaa;
}

.hidden {
    display: none;
}

@media screen and (max-width: 480px) {
    .container {
        padding: 15px;
    }

    header h1 {
        font-size: 2rem;
    }

    .input-container {
        flex-direction: column;
    }

    #videoURL {
        width: 100%;
    }

    #downloadBtn {
        width: 100%;
    }
}
document.getElementById("downloadBtn").addEventListener("click", function() {
    const videoURL = document.getElementById("videoURL").value;
    
    if (!videoURL) {
        alert("Please enter a valid YouTube URL");
        return;
    }

    // Extract the video ID from the YouTube URL
    const videoId = getYouTubeVideoId(videoURL);
    if (!videoId) {
        alert("Invalid YouTube URL. Please try again.");
        return;
    }

    // Generate thumbnail URL (largest resolution)
    const thumbnailUrl = `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`;

    // Show the thumbnail and download link
    document.getElementById("thumbnailResult").classList.remove("hidden");
    document.getElementById("thumbnailImage").src = thumbnailUrl;
    document.getElementById("downloadLink").href = thumbnailUrl;
});

function getYouTubeVideoId(url) {
    const regex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})(?:[^\s]*)/;
    const matches = url.match(regex);
    return matches && matches[1];
}











at





No comments:
  













Labels:

















          

        

          

        

Monday, October 14, 2024


          

        









Earn money online  Tool with colorful styling and all its features use any free library











 



    
    
    Earn Money Online Tool
    
    


    

        
Earn Money Online Tool

        

            

                
                
            

            
        


        
Submitted Ideas

        
    
    
    

    


body {
    background-color: #f8f9fa;
}

h1 {
    color: #343a40;
}

h2 {
    color: #007bff;
}

.btn-primary {
    background-color: #28a745;
    border-color: #28a745;
}

.btn-primary:hover {
    background-color: #218838;
    border-color: #1e7e34;
}

.list-group-item {
    background-color: #ffffff;
}
document.getElementById('ideaForm').addEventListener('submit', function(event) {
    event.preventDefault();

    const ideaInput = document.getElementById('ideaInput');
    const ideaText = ideaInput.value;

    if (ideaText.trim() === '') {
        alert('Please enter an idea!');
        return;
    }

    const ideasList = document.getElementById('ideasList');
    const newIdeaItem = document.createElement('li');
    newIdeaItem.className = 'list-group-item';
    newIdeaItem.textContent = ideaText;
    ideasList.appendChild(newIdeaItem);

    ideaInput.value = '';
});

    

    

    

    



at





No comments:
  




    


    

    

    

Labels:



    

    



    

    

    

    

    

    




    
YouTube subscribe URL Tool with colorful styling and all its features use any free library

    

    

    

    

    

     
    


    
    
    YouTube Subscribe URL Tool
    


    
    
        
    YouTube Subscribe URL Tool
    
        
        
        
    
    
    
    


body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 20px;
}

.container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

h1 {
    text-align: center;
    color: #FF0000;
}

input[type="text"] {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 2px solid #FF0000;
    border-radius: 5px;
    font-size: 16px;
}

button {
    width: 100%;
    padding: 10px;
    background-color: #FF0000;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}

button:hover {
    background-color: #CC0000;
}

.result {
    margin-top: 20px;
    padding: 10px;
    border: 2px solid #FF0000;
    border-radius: 5px;
    text-align: center;
    display: none;
}

.result a {
    color: #FF0000;
    text-decoration: none;
    font-weight: bold;
}

.result a:hover {
    text-decoration: underline;
}
document.getElementById('generateButton').addEventListener('click', function() {
    const channelId = document.getElementById('channelId').value.trim();
    const resultDiv = document.getElementById('result');

    if (channelId) {
        // Create the subscribe link
        const subscribeLink = `https://www.youtube.com/channel/${channelId}?sub_confirmation=1`;
        
        // Display the result
        resultDiv.innerHTML = `Your Subscribe Link: ${subscribeLink}`;
        resultDiv.style.display = 'block';
    } else {
        resultDiv.style.display = 'none';
        alert('Please enter a valid YouTube Channel ID or URL.');
    }
});

    

    

    

    



at





No comments:
  




    


    

    

    

Labels:



    

    



    

    

    

    

        
    
      

    


    

    

    
Subscribe to:
Posts (Atom)

    

    

    

    

    Line Graph Maker Tool with colorful styling and all its features use any free library
    

    
             Line Graph Maker Tool                        Line Graph Maker Tool             Labels (comma-separated):                Data Po...