Twitter Bootstrap Question posted in

Typing Game– Want all letters typed to be lower case-Twitter bootstrap

I’m trying to convert all letters that are typed in the field to be lower case. I know this is simple but for the life of me, I can’t get it to work. I thought if I put “word-input.toLowerCase()” under the match words function that it should make the letter lowercase but it didn’t work. Here’s what I have: 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css"> -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
    crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
<title>One Piece WordBeater</title>
</head>
<body>
    <body class="bg-dark text-white">
        <header class="bg-secondary text-center p-3 mb-5">
            <h1>One Piece Word Beater</h1>
        </header>
        <div class="container text-center">
            <!--Word & Input-->
            <div class="row">
                <div class="col-md-3 mx-auto">
                    <p class="lead">Current Level: <span class="text-info" id="levels"></span></p>
                </div>
                <div class="col-md-6 mx-auto">
                    <p class="lead">Type the Given Word Within <span class="text-success" id="seconds">5</span> Seconds. </p>
                    <h2 class="display-2 mb-5" id="current-word">luffy</h2>
                    <input type="text" class="form-control form-control-lg" placeholder="Start Typing..." id="word-input" autofocus>
                    <h4 class="mt-3" id="message"></h4>
                    <br>
                    <div class="btn-group">
                        <button type="button" class="btn btn-warning mr-5" id="start"><b>Let's Play!</b></button>
                        <button type="button" class="btn btn-danger" id="reset"><b>Reset Game</b></button>
                    </div>
               </div>
                <div class="col-md-3 mx-auto">
                        <p class="lead">High Score: <span class="text-info" id="highsocre"></span></p>
                </div>
            </div>
            <!--Time and Columns-->
            <div class="row mt-5">
                <div class="col md-6">
                    <h3>Time left: <span id="time">0</span></h3>
                </div>
                <div class="col md-6">
                    <h3>Score: <span id="score"> 0 </span></h3>
                </div>
            </div>
            <!--Instructions-->
            <div class="row mt-5">
                <div class="col md-12">
                    <div class="card card-body bg-secondary text-white">
                        <h5>Instructions</h5>
                        <p>Type each word in the given amount of seconds to score. To play again, just type the current word. Your score
                         will reset</p>
                    </div>
                </div>
            </div>
            <!--Level Selector-->
            <div class = "row mt-5">
                <div class="col md-12">
                    <div class="card card-body bg-secondary text-white">
                        <h5>Select the Difficulty</h5>
                       <div class="row mt-5">
                            <div class="col md-12">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-success mr-2" id="easy">Easy</button>
                                    <button type="button" class="btn btn-primary mr-2" id="medium">Medium</button>
                                    <button type="button" class="btn btn-danger" id="hard">Hard</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="index.js"></script>
</body>
</html>

// window.addEventListener('load', init);
//Start Game
// const startbtn = document.getElementById('start');


// global Varibales

//Avaible levels
const levels = {
    easy: 5,
    medium: 3,
    hard: 2,
}

//to cchange level
const currentLevel = levels.easy;

let time = currentLevel;
let score = 0;
let isPLaying;//initalzies game...true if game is on false if game is off


//DOM Elements
const wordInput = document.querySelector('#word-input');
const currentWord = document.querySelector('#current-word');
const scoreDisplay = document.querySelector('#score');
const timeDisplay = document.querySelector('#time');
const message = document.querySelector('#message');
const seconds = document.querySelector('#seconds');
const levelDisplay = document.querySelector('#levels');

const words = [
    'luffy',
    'zoro',
    'shanks',
    'nami',
    'brook',
    'chooper',
    'sanji',
    'franky',
    'jinbe',
    'carrot',
    'pekoms',
    'ace',
    'sabo',
    'robin',
    'bellamy',
    'crocodile',
    'merry',
    'yonko',
    'camie',
    'nefertari',
    'raizo',
    'momo',
    'law',
    'dracule',
    'boa',
    'buggy',
    'golroger',
    'bigmom',
    'smoker',
    'kaido'
];

//initialize Game

// function init() {
//     //Show number of seconds
//     seconds.innerHTML = currentLevel;
//     //load a word from array
//     showWord(words);
//     //Start Matching on word input
//     wordInput.addEventListener('input', startMatch);
//     //Call countdown every second
//     setInterval(countdown, 1000);
//     //Check status
//     setInterval(checkStatus, 50)
// }


window.onload = function init() {
    //start button
    const startBtn = document.getElementById('start')
    startBtn.onclick = function() {
            //Show number of seconds
    seconds.innerHTML = currentLevel;
    //load a word from array
    showWord(words);
    //Start Matching on word input
    wordInput.addEventListener('input', startMatch);
    //Call countdown every second
    setInterval(countdown, 1000);
    //Check status
    setInterval(checkStatus, 50)
    }


}

//level Buttons

//Easy Mode
// document.getElementById('easy').addEventListener('click', easyMode);
// function easyMode(levels) {

// }

//Start Match
function startMatch() {
    if(matchWords()){
        isPLaying = true;
        time = currentLevel + 1;
        showWord(words);
        wordInput.value='';
        score++;
    }

    //if score negative -1 display 0
    if(score === -1){
        scoreDisplay.innerHTML = 0;
    }else{
        scoreDisplay.innerHTML = score;
    }

}
//Match Current Word to word imput

function matchWords(){

    if(wordInput.value === currentWord.innerHTML) {
        message.innerHTML = 'Correct!!!';
        return true;
    } else {
        message.innerHTML = '';
        return false;
    }
}

//Pick & Show random word
function showWord(words) {
    //Generate random array index
    const randIndex = Math.floor(Math.random() * words.length);
    //Output random word
    currentWord.innerHTML = words[randIndex];
}
//Countdown Timer
function countdown() {
    //Make sure time is not run out
    if(time > 0) {
        //Decrease time
        time--;
    }else if(time === 0) {
        //Game Over
        isPLaying = false;
    }
    //Show time
    timeDisplay.innerHTML = time;
}

//Check game Status
function checkStatus() {
    if(!isPLaying && time === 0){
        message.innerHTML = 'Game Over!!';
        score = -1;
    }
}

//reset after game over
Tags:

2

Answers


  1. 0

    You can do this simply using CSS

    <input type="text" class="lowercase" name="input" />

    and in the css file do

    .lowercase { text-transform: lowercase }

    However, there’s a down side to this. The value being sent to the backend will still be in the actual case the text was entered.

    If you want to make sure you send the input to the backend in the lowercase I suggest using javascript to turn the string to lowercase.

    So, in your case, the variable ‘wordInput’ has the reference to the input element. To get its value, you need to do

    const wordInputValue = wordInput.value;

    which returns the string entered in the input. Now to turn it into lower case, simply do

    const wordInputValueLC = wordInput.value.toLowerCase();

    Login or Signup to reply.
  2. 0

    Is it not this line that needs to change?

    if(wordInput.value === currentWord.innerHTML) {

    make it 

    if(wordInput.value.toLowerCase() === currentWord.innerHTML) {

    and it should work since it is converting the entered word to lowercase and then comparing it to the target word…..

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search