Scribd Logo
Upload

Welcome to Scribd!

  • 23 views

    Build A Palindrome Checker

    Uploaded by

    marekwieszjakjest
    The document contains code for a palindrome checker web application. It includes HTML markup defining the page structure and styling with CSS. JavaScript code handles input, checks if the input is a palindrome by comparing it to the reversed text, and displays the result. The application takes text input, checks if it is the same forward and backward, and displays whether it is a palindrome or not.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd

    Build A Palindrome Checker

    Uploaded by

    marekwieszjakjest
    23 views4 pages
    The document contains code for a palindrome checker web application. It includes HTML markup defining the page structure and styling with CSS. JavaScript code handles input, checks if the input is a palindrome by comparing it to the reversed text, and displays the result. The application takes text input, checks if it is the same forward and backward, and displays whether it is a palindrome or not.

    Original Title

    build-a-palindrome-checker

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document contains code for a palindrome checker web application. It includes HTML markup defining the page structure and styling with CSS. JavaScript code handles input, checks if the input is a palindrome by comparing it to the reversed text, and displays the result. The application takes text input, checks if it is the same forward and backward, and displays whether it is a palindrome or not.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Download as txt, pdf, or txt
    23 views4 pages

    Build A Palindrome Checker

    Uploaded by

    marekwieszjakjest
    The document contains code for a palindrome checker web application. It includes HTML markup defining the page structure and styling with CSS. JavaScript code handles input, checks if the input is a palindrome by comparing it to the reversed text, and displays the result. The application takes text input, checks if it is the same forward and backward, and displays whether it is a palindrome or not.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Download as txt, pdf, or txt
    of 4

    ** start of undefined **

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <title>Palindrome checker</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./styles.css">
    </head>
    <body>
    <div class="site-content">
    <div>
    <h1 class="header">Is This A Palindrome?</h1>
    </div>
    <div class="middle-section">
    <p>Enter Your Text Here:</p>
    <div class="input-container">
    <input id="text-input">
    <button id="check-btn">Check!</button>
    </div>
    <div id="result" class="result">Your result</div>
    <p class="explanation">
    Palindrome is a word or sentence, that spelled backwards, sounds the
    same
    </p>
    </div>
    </div>
    <div class="patryk">cholerny patryk z siódemki...</div>
    <script src="script.js"></script>
    </body>
    </html>

    ** end of undefined **

    ** start of undefined **

    :root {
    --background-color1: #232323;
    --primary: #9E0DFF;
    --secondary: #c250ff;
    --hover: #d181fc;
    --active: #dea1ff;
    }

    body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--background-color1);
    }

    .site-content{
    display: inline-block;
    width: auto;
    height: auto
    }
    .header {
    margin: auto;
    display: inline-block;

    color: white;
    background-color: var(--primary);

    padding: 10px;
    border-radius: 20px;
    margin-bottom: 40px;
    font-family: Sans-Serif;
    }

    .middle-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    color: white;
    border: 2px solid white;
    border-radius: 20px;
    }

    .input-container {
    display: flex;
    }

    input {
    width: 250px;
    height: 40px;
    border-radius: 20px 0px 0px 20px;
    border-width: 0;

    font-size: 100%;
    font-family: Sans-Serif;
    font-weight: bold;
    }

    button {
    font-family: Sans-Serif;
    padding: 10px;
    border-radius: 0px 20px 20px 0px;
    border-width: 0;
    background-color: var(--secondary);
    }

    button:hover {
    background-color: var(--hover);
    }

    button:active {
    background-color: var(--active);
    }

    .result {
    margin-top: 16px;
    margin-left: 10px;
    margin-right: 10px;
    max-width: 90%;

    text-align: center;

    font-family: Sans-Serif;
    }

    .explanation {
    width: 300px;
    margin-left: 26px;
    }

    .middle-section p {
    margin-top: 16px;
    margin-bottom: 16px;
    font-family: Sans-Serif;
    }

    .patryk {
    position: fixed;
    color: white;
    right: 0;
    bottom: 0;
    }

    ** end of undefined **

    ** start of undefined **

    let isTextPalindrome;
    let enteredText;

    const resultButton = document.getElementById("check-btn");


    let enteredTextElement = document.getElementById("text-input");
    const resultText = document.getElementById("result")

    resultButton.addEventListener("click", isInputTextThere);

    function isInputTextThere() {

    enteredText = enteredTextElement.value;

    if (enteredText === "") {


    resultText.innerText = "enter a value";
    alert("Please input a value");
    } else {
    checkPalindrome();
    }
    }

    function checkPalindrome() {
    let enteredTextDisplay = enteredTextElement.value;
    let enteredText = enteredTextElement.value.replace(/[^a-zA-Z0-9]/g, '');

    const palindrome = enteredText.toLowerCase();


    const reversePalindrome = enteredText.split("").reverse().join("").toLowerCase();

    console.log(palindrome);
    console.log(reversePalindrome);

    if (palindrome === reversePalindrome) {


    isTextPalindrome = true;
    } else {
    isTextPalindrome = false;
    }
    console.log(isTextPalindrome);
    displayResult();
    }

    function displayResult() {
    if (isTextPalindrome) {
    resultText.innerText = `${enteredText} is a palindrome`;
    } else {
    resultText.innerText = `${enteredText} is not a palindrome`
    }
    }

    ** end of undefined **

    You might also like