Monday, January 8, 2024

Responsive TechGadgetsHub eCommerce Website

 Description:

Create a fully responsive eCommerce website for TechGadgetsHub using HTML, CSS, and JavaScript. This example provides a basic structure featuring product listings, search functionality, user authentication, and a simplified checkout process.





Key Features:

  1. Product Listings: Display various tech gadgets with details such as product name and price. The product information is dynamically generated for demonstration purposes.

  2. Search Functionality: Implement a search feature allowing users to easily find their desired tech gadgets.

  3. User Authentication: While user authentication is a critical server-side feature, this example includes a placeholder for future implementation. Ensure to integrate secure authentication mechanisms.

  4. Responsive Design: The website is designed to adapt to various screen sizes, providing an optimal viewing experience on desktops, tablets, and mobile devices.

Note: This code serves as a starting point and lacks server-side functionality for user authentication and secure checkout. It is essential to enhance and integrate these features based on real-world requirements, ensuring a secure and seamless shopping experience for users.

Project Tool -


  <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TechGadgetsHub</title>
  <style>
    /* Basic styling for demonstration purposes */
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f4f4f4;
    }

    header {
      background-color: #333;
      color: #fff;
      padding: 1rem;
      text-align: center;
    }

    main {
      padding: 1rem;
    }

    .product {
      border: 1px solid #ddd;
      padding: 1rem;
      margin: 1rem;
      background-color: #fff;
      border-radius: 5px;
    }

    /* Add more styles for responsiveness */
  </style>
</head>
<body>
  <header>
    <h1>TechGadgetsHub</h1>
  </header>
  
  <main>
    <div id="product-list"></div>
  </main>

  <script>
    // Dummy product data for demonstration
    const products = [
      { id: 1, name: 'Smartphone', price: 499.99 },
      { id: 2, name: 'Smartwatch', price: 199.99 },
      { id: 3, name: 'Bluetooth Earbuds', price: 79.99 },
    ];

    // Function to display products
    function displayProducts() {
      const productList = document.getElementById('product-list');
      productList.innerHTML = '';

      products.forEach(product => {
        const productElement = document.createElement('div');
        productElement.classList.add('product');
        productElement.innerHTML = `
          <h3>${product.name}</h3>
          <p>Price: $${product.price}</p>
          <button onclick="addToCart(${product.id})">Add to Cart</button>
        `;
        productList.appendChild(productElement);
      });
    }

    // Dummy function for adding to cart
    function addToCart(productId) {
      alert(`Product ${productId} added to cart!`);
    }

    // Call the function to display products on page load
    displayProducts();
  </script>
</body>
</html>


Friday, January 5, 2024

Lyrics Finder Tool

 Description:

The Lyrics Finder Tool is a web application built using HTML, CSS, and JavaScript that allows users to quickly and easily fetch and display lyrics for a given song and artist. With a straightforward interface, users can input the artist and song details, and the tool dynamically retrieves the lyrics using the Lyrics.ovh API. The displayed lyrics, or any error messages, are presented in a user-friendly format, enhancing the experience of discovering and accessing song lyrics effortlessly.

Lyrics Finder tool that fetches and displays lyrics for a given song in HTML, CSS, and JavaScript

Project tool

Lyrics Finder Tool involves fetching data from an external API. One popular API for lyrics is the Lyrics.ovh API. Below is an example of a simple Lyrics Finder Tool using HTML, CSS, and JavaScript:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lyrics Finder</title> <style> body { font-family: 'Arial', sans-serif; text-align: center; margin: 50px; } #lyricsForm { max-width: 600px; margin: 0 auto; } #lyricsDisplay { margin-top: 20px; padding: 20px; border: 1px solid #ccc; border-radius: 5px; min-height: 100px; background-color: #f8f8f8; text-align: left; } </style> </head> <body> <h1>Lyrics Finder</h1> <form id="lyricsForm"> <label for="artist">Artist:</label> <input type="text" id="artist" placeholder="Enter artist" required> <label for="song">Song:</label> <input type="text" id="song" placeholder="Enter song" required> <button type="button" onclick="findLyrics()">Find Lyrics</button> </form> <div id="lyricsDisplay"></div> <script> async function findLyrics() { const artistInput = document.getElementById('artist'); const songInput = document.getElementById('song'); const lyricsDisplay = document.getElementById('lyricsDisplay'); const artist = artistInput.value.trim(); const song = songInput.value.trim(); if (!artist || !song) { alert('Please enter both artist and song.'); return; } try { const response = await fetch(`https://api.lyrics.ovh/v1/${artist}/${song}`); const data = await response.json(); if (response.ok) { // Display lyrics const lyrics = data.lyrics.replace(/\n/g, '<br>'); // Convert line breaks for HTML lyricsDisplay.innerHTML = `<h3>${artist} - ${song}</h3><p>${lyrics}</p>`; } else { // Display error message lyricsDisplay.innerHTML = `<p>Error: ${data.error || 'Lyrics not found.'}</p>`; } } catch (error) { console.error('Error fetching lyrics:', error); lyricsDisplay.innerHTML = '<p>An error occurred while fetching lyrics.</p>'; } } </script> </body> </html>

Social Media Share Button Generator

 Description:

The Social Media Share Button Generator is a versatile web tool crafted using HTML, CSS, and JavaScript. This tool empowers users to effortlessly create customized social media share buttons by selecting their preferred social media icon and button style. The generated buttons can be previewed instantly, allowing users to tailor the appearance of share buttons to match their website or application. With its user-friendly interface, this generator simplifies the process of integrating stylish and personalized share buttons, enhancing the social sharing experience for users

Social Media Share Button Generator tool with customizable icons and styles in HTML, CSS, and JavaScript

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Social Media Share Button Generator</title> <style> body { font-family: 'Arial', sans-serif; text-align: center; margin: 50px; } #buttonForm { max-width: 600px; margin: 0 auto; } #buttonPreview { margin-top: 20px; padding: 20px; border: 1px solid #ccc; border-radius: 5px; min-height: 100px; background-color: #f8f8f8; text-align: left; } .socialButton { display: inline-block; margin-right: 10px; margin-bottom: 10px; cursor: pointer; } </style> </head> <body> <h1>Social Media Share Button Generator</h1> <form id="buttonForm"> <label for="socialIcon">Select Social Media Icon:</label> <select id="socialIcon"> <option value="facebook">Facebook</option> <option value="twitter">Twitter</option> <option value="instagram">Instagram</option> <option value="linkedin">LinkedIn</option> <!-- Add more social media options as needed --> </select> <label for="buttonStyle">Select Button Style:</label> <select id="buttonStyle"> <option value="square">Square</option> <option value="rounded">Rounded</option> <option value="circle">Circle</option> </select> <button type="button" onclick="generateButton()">Generate Share Button</button> </form> <div id="buttonPreview"></div> <script> function generateButton() { const socialIconSelect = document.getElementById('socialIcon'); const buttonStyleSelect = document.getElementById('buttonStyle'); const buttonPreview = document.getElementById('buttonPreview'); const selectedIcon = socialIconSelect.value; const selectedStyle = buttonStyleSelect.value; const buttonHTML = `<a class="socialButton ${selectedStyle}" href="#" onclick="shareOn('${selectedIcon}')"> <img src="${getIconUrl(selectedIcon)}" alt="${selectedIcon} icon"> </a>`; buttonPreview.innerHTML = buttonHTML; } function shareOn(socialMedia) { // Add your share logic here alert(`Sharing on ${socialMedia}!`); } function getIconUrl(iconName) { // Replace with actual URLs for social media icons const iconUrls = { 'facebook': 'url_to_facebook_icon.png', 'twitter': 'url_to_twitter_icon.png', 'instagram': 'url_to_instagram_icon.png', 'linkedin': 'url_to_linkedin_icon.png', }; return iconUrls[iconName] || ''; } </script> </body> </html>

Below is an example of a Social Media Share Button Generator tool implemented in HTML, CSS, and JavaScript. Users can customize icons, styles, and generate the HTML code for social media share buttons.



Poll Creator Tool

 Description:

The Poll Creator Tool is a user-friendly web application built with HTML, CSS, and JavaScript. It enables users to effortlessly create customized polls by entering a question and specifying multiple answer options. The tool supports dynamic addition and removal of answer options for flexibility. Upon clicking the "Generate Poll" button, users can instantly preview their poll, making it a quick and convenient solution for crafting interactive surveys or polls for various purposes.

Poll Creator tool with customizable questions and answer options in HTML, CSS, and JavaScript.

project code tool


<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Poll Creator</title> <style> body { font-family: 'Arial', sans-serif; text-align: center; margin: 50px; } #pollForm { max-width: 600px; margin: 0 auto; } #pollPreview { margin-top: 20px; padding: 20px; border: 1px solid #ccc; border-radius: 5px; min-height: 100px; background-color: #f8f8f8; text-align: left; } </style> </head> <body> <h1>Poll Creator</h1> <form id="pollForm"> <label for="question">Poll Question:</label> <input type="text" id="question" placeholder="Enter your poll question" required> <div id="optionsContainer"> <label for="options">Answer Options:</label> <div class="option"> <input type="text" class="optionInput" placeholder="Option 1" required> <button type="button" onclick="removeOption(this)">Remove</button> </div> <div class="option"> <input type="text" class="optionInput" placeholder="Option 2" required> <button type="button" onclick="removeOption(this)">Remove</button> </div> </div> <button type="button" onclick="addOption()">Add Option</button> <button type="button" onclick="generatePoll()">Generate Poll</button> </form> <div id="pollPreview"></div> <script> function addOption() { const optionsContainer = document.getElementById('optionsContainer'); const newOption = document.createElement('div'); newOption.className = 'option'; newOption.innerHTML = ` <input type="text" class="optionInput" placeholder="New Option" required> <button type="button" onclick="removeOption(this)">Remove</button> `; optionsContainer.appendChild(newOption); } function removeOption(button) { const optionsContainer = document.getElementById('optionsContainer'); optionsContainer.removeChild(button.parentNode); } function generatePoll() { const questionInput = document.getElementById('question'); const optionsInputs = document.querySelectorAll('.optionInput'); const pollPreview = document.getElementById('pollPreview'); const question = questionInput.value.trim(); const options = Array.from(optionsInputs).map(input => input.value.trim()); if (!question || options.some(option => !option)) { alert('Please fill in both the question and all answer options.'); return; } // Generate poll preview pollPreview.innerHTML = ` <h3>${question}</h3> <ul> ${options.map(option => `<li>${option}</li>`).join('')} </ul> `; } </script> </body> </html>

Lorem Ipsum Generator

 Description:

The Lorem Ipsum Generator is a web-based tool that allows users to easily generate Lorem Ipsum text by specifying the number of paragraphs and words per paragraph. Users can customize the length of the generated text and utilize it as a placeholder or filler content in their projects. The tool provides a straightforward interface with adjustable input fields, making it a convenient solution for quickly generating dummy text for design and development purposes.

code in project

Lorem Ipsum Generator tool that allows users to specify the number of paragraphs and words with HTML, CSS, and JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lorem Ipsum Generator</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            text-align: center;
            margin: 50px;
        }

        #output {
            margin-top: 20px;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            min-height: 100px;
            background-color: #f8f8f8;
        }
    </style>
</head>
<body>
    <h1>Lorem Ipsum Generator</h1>
    <label for="paragraphs">Paragraphs:</label>
    <input type="number" id="paragraphs" value="3" min="1" max="10">
    
    <label for="words">Words per Paragraph:</label>
    <input type="number" id="words" value="50" min="1" max="1000">

    <button onclick="generateLorem()">Generate Lorem Ipsum</button>

    <div id="output"></div>

    <script>
        function generateLorem() {
            const paragraphsInput = document.getElementById('paragraphs');
            const wordsInput = document.getElementById('words');
            const outputDiv = document.getElementById('output');

            const paragraphs = parseInt(paragraphsInput.value);
            const words = parseInt(wordsInput.value);

            if (isNaN(paragraphs) || isNaN(words)) {
                alert('Please enter valid numbers for paragraphs and words.');
                return;
            }

            outputDiv.innerHTML = '';

            for (let i = 0; i < paragraphs; i++) {
                const paragraph = document.createElement('p');
                paragraph.textContent = generateParagraph(words);
                outputDiv.appendChild(paragraph);
            }
        }

        function generateParagraph(words) {
            const loremIpsumWords = ["Lorem", "ipsum", "dolor", "sit", "amet,", "consectetur", "adipisicing", "elit.", "Sed", "do", "eiusmod", "tempor", "incididunt", "ut", "labore", "et", "dolore", "magna", "aliqua.", "Ut", "enim", "ad", "minim", "veniam,", "quis", "nostrud", "exercitation", "ullamco", "laboris", "nisi", "ut", "aliquip", "ex", "ea", "commodo", "consequat.", "Duis", "aute", "irure", "dolor", "in", "reprehenderit", "in", "voluptate", "velit", "esse", "cillum", "dolore", "eu", "fugiat", "nulla", "pariatur.", "Excepteur", "sint", "occaecat", "cupidatat", "non", "proident,", "sunt", "in", "culpa", "qui", "officia", "deserunt", "mollit", "anim", "id", "est", "laborum."];

            let paragraphText = '';
            for (let i = 0; i < words; i++) {
                const randomIndex = Math.floor(Math.random() * loremIpsumWords.length);
                paragraphText += loremIpsumWords[randomIndex] + ' ';
            }

            return paragraphText.trim();
        }
    </script>
</body>
</html>


Tuesday, December 26, 2023

Sudoku Solver Pro free tool

 Description:

Unlock the solution to Sudoku puzzles effortlessly with Sudoku Solver Pro. Input your puzzle, edit cells with ease, and click "Solve Sudoku" to reveal the solution. Perfect for Sudoku enthusiasts and those seeking a quick solution to challenging puzzles.

This code creates a simple Sudoku Solver tool with a grid, input validation, and a solve button. The grid is pre-filled with a Sudoku puzzle, and users can edit the cells. The solveSudoku function is a placeholder for the actual Sudoku solving algorithm; you should replace it with your own logic to solve Sudoku puzzles.

project tool for free

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sudoku Solver</title> <style> body { font-family: Arial, sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; } #sudoku-solver-container { text-align: center; } .sudoku-grid { display: grid; grid-template-columns: repeat(9, 40px); gap: 2px; margin-bottom: 10px; } .sudoku-cell { width: 40px; height: 40px; text-align: center; font-size: 18px; border: 1px solid #ccc; box-sizing: border-box; } #solve-button { padding: 10px; font-size: 16px; cursor: pointer; } </style> </head> <body> <div id="sudoku-solver-container"> <h2>Sudoku Solver</h2> <div class="sudoku-grid" id="sudoku-grid"></div> <button id="solve-button" onclick="solveSudoku()">Solve Sudoku</button> </div> <script> const sudokuGrid = document.getElementById('sudoku-grid'); let sudokuValues = [ [5, 3, 0, 0, 7, 0, 0, 0, 0], [6, 0, 0, 1, 9, 5, 0, 0, 0], [0, 9, 8, 0, 0, 0, 0, 6, 0], [8, 0, 0, 0, 6, 0, 0, 0, 3], [4, 0, 0, 8, 0, 3, 0, 0, 1], [7, 0, 0, 0, 2, 0, 0, 0, 6], [0, 6, 0, 0, 0, 0, 2, 8, 0], [0, 0, 0, 4, 1, 9, 0, 0, 5], [0, 0, 0, 0, 8, 0, 0, 7, 9] ]; function generateSudokuGrid() { sudokuGrid.innerHTML = ''; for (let i = 0; i < 9; i++) { for (let j = 0; j < 9; j++) { const cell = document.createElement('div'); cell.className = 'sudoku-cell'; cell.contentEditable = true; cell.dataset.row = i; cell.dataset.col = j; if (sudokuValues[i][j] !== 0) { cell.textContent = sudokuValues[i][j]; } sudokuGrid.appendChild(cell); } } } function solveSudoku() { // Update sudokuValues array with user input const cells = document.querySelectorAll('.sudoku-cell'); cells.forEach(cell => { const row = parseInt(cell.dataset.row, 10); const col = parseInt(cell.dataset.col, 10); const value = parseInt(cell.textContent, 10) || 0; sudokuValues[row][col] = value; }); // Implement your Sudoku solving algorithm here (backtracking algorithm is commonly used) // This is a placeholder for the solving logic alert('Sudoku solved!'); } window.onload = generateSudokuGrid; </script> </body> </html>

a Sudoku Solver tool with a grid, input validation, and solve button using HTML, CSS, and JavaScript

ChromaSelect Pro free project tool

 Description:

Empower your creativity with ChromaSelect Pro, the advanced Color Picker tool. Choose colors effortlessly, view RGB values and Hex codes, and visualize your selections in real-time with the color preview. Perfect for designers, developers, and anyone passionate about colors.

Color Picker tool with options for selecting colors, RGB values, and hex codes. Write the code in HTML, CSS, and JavaScript


project tool free

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Color Picker</title> <style> body { font-family: Arial, sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; } #color-picker-container { text-align: center; } input { margin-bottom: 10px; padding: 8px; font-size: 16px; text-align: center; } #color-preview { width: 100px; height: 100px; margin: 10px; border: 1px solid #ccc; border-radius: 5px; } </style> </head> <body> <div id="color-picker-container"> <h2>Color Picker</h2> <label for="color-input">Select a Color:</label> <input type="color" id="color-input" onchange="updateColor()"> <label for="rgb-input">RGB Value:</label> <input type="text" id="rgb-input" readonly> <label for="hex-input">Hex Code:</label> <input type="text" id="hex-input" readonly> <div id="color-preview"></div> </div> <script> function updateColor() { const colorInput = document.getElementById('color-input'); const rgbInput = document.getElementById('rgb-input'); const hexInput = document.getElementById('hex-input'); const colorPreview = document.getElementById('color-preview'); const selectedColor = colorInput.value; // Update RGB input const rgbArray = hexToRgb(selectedColor); rgbInput.value = `RGB: ${rgbArray.join(', ')}`; // Update Hex input hexInput.value = `#${selectedColor.slice(1)}`; // Update color preview colorPreview.style.backgroundColor = selectedColor; } function hexToRgb(hex) { // Convert hex to RGB const bigint = parseInt(hex.slice(1), 16); const r = (bigint >> 16) & 255; const g = (bigint >> 8) & 255; const b = bigint & 255; return [r, g, b]; } </script> </body> </html>

This code creates a simple Color Picker tool with options for selecting colors, displaying RGB values, and showing hex codes. The updateColor function is called when the user selects a color, updating the RGB input, hex input, and color preview accordingly.


Responsive TechGadgetsHub eCommerce Website

  Description: Create a fully responsive eCommerce website for TechGadgetsHub using HTML, CSS, and JavaScript. This example provides a basic...