CODEWITHSUNDEEP
jqueryselecttext
Aurore
Aurore

Reputation: 746

check the text to change the background color

I'm looking for a way to check if the user is putting the words in the correct order to change the background color. So here is my code that was made with a friend of mine: It's first creating a phrase that is "I am not." that you can change by clicking on it (it uses a select). You can now say "I am blue." so I'd like to make an event to check what is the sentence saying and to change the body background in order to fit the phrase.

I would also like to check if there is this order of words, in the middle of a sentence like, "it's raining, I am blue and wet" 

        
    
    $(document).ready(function() {

                });

                let phrases = ["I am not. "

                ];
                let lettres = /[\u0041-\u005a\u0061-\u007a\u00aa-\u00b5\u00ba-\u00c0\u00c1-\u00d6\u00d8-\u00f6]/gui;

                tokenize = function(phrase) {
                    let mots = [''];
                    let it = phrase[Symbol.iterator]();
                    for (var c = it.next(); !c.done; ) {

                        for (; !c.done && c.value.match(lettres); c = it.next()) {
                            mots[mots.length-1]+=(c.value);
                        }
                    //console.log(c.value);
                    if (mots[mots.length-1].length != 0 ){
                        mots.push('');
                    }

                    if (c.value == ' ') {
                        for (c = it.next(); !c.done && c.value == " "; c = it.next()) {continue;} continue;
                    } 
                        // console.log(i);
                        
                        console.log(mots);

                        if (!c.value.match(lettres)){
                            mots[mots.length-1]+=(c.value);
                        //console.log(c.value);
                        mots.push('');
                    }
                    c = it.next();
                }
                return mots.slice(0, mots.length-1);

                    if (phrase === "I am blue."){
                            $(body).css('background-color', 'blue');
                    }
            }



            $(document).ready(function() {
                let LARGEUR = $("#container .repeat").clone();
                let change=function(){
                    $(".width_tmp_option", this.parent).html($('option:selected', this).val());
                    $(this).width($(".width_tmp_select", this.parent).width());
                }
                $('#container').on("change",".un",change);


                let idx = Math.floor(Math.random() * Math.floor(phrases.length));
                let mots = tokenize(phrases[idx]);

                for( var i = 0 ; i < mots.length-1; i++){
                    $('#container .repeat:last-child').after(LARGEUR.clone());}
                    var i = 0;
                    console.log(mots.length);
                    $('#container .repeat').each(function(){
                        $('.un', this).val(mots[i]).each(change);
                        i++;

                    });

            // for ( var i in mots){
            //  let div = LARGEUR.clone();
            //  div.find('.un').val(mots[i]);
            //  console.log(i);
            //  div.find('.un').each(change);
                //div.css('display', 'inline');


        //  }
        // //   $('#container .repeat:first-child').css('display', 'none');

    });
@font-face {
    font-family: "Lexicon";
    src: url("fontes/Lexicon.woff") format("woff");
}


body {
    width: 70vw;
    height: 100vh;
    overflow: normal;
    font-family:'Lexicon';
    overflow: hidden;


}

.un{
    width: 2rem;
    margin: 0.2rem;
    font-family: 'Lexicon';
} 

option {
    background-color: none;
    font-family: 'Lexicon';
}

option:hover {
    background-color: green;

}

::selection {
    background-color: green;
}

.width_tmp_select{
    background-color: none;

}


.width_tmp_select{
    display : none;
    font-size: 2.5rem; 
    font-family: 'Lexicon';
} 

.un{
    font-size: 2.5rem; 

} 

#p1{
    font-size: 2rem;
    border: none;
} 

select {

}

/* For IE10 */
select::-ms-expand {
    display: none;

}

.repeat {
    display: inline-block;


}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script
    src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
    crossorigin="anonymous"></script>

    <link rel="stylesheet"type="text/css"href="style.css">
    <link rel="stylesheet"type="text/css"href="print.css" media="print">

    <title>Les Vergers</title>

</head>
<body class="white">

    <div id="container">
        <div class="repeat">

            <select name="mots" class="un">
                <option value=""> </option>
                <option value=".">.</option>
                <option value="I">I</option>
                <option value="am">am</option>
                <option value="blue">blue</option>
                <option value="not">not</option>
                <option value="!">!</option>

            </select>
            <select class="width_tmp_select">
                <option class="width_tmp_option"></option>
            </select>
        </div>
    </div>

            <script type="text/javascript">
                $(document).ready(function() {

                });

                let phrases = ["I am not. "

                ];
                let lettres = /[\u0041-\u005a\u0061-\u007a\u00aa-\u00b5\u00ba-\u00c0\u00c1-\u00d6\u00d8-\u00f6]/gui;

                tokenize = function(phrase) {
                    let mots = [''];
                    let it = phrase[Symbol.iterator]();
                    for (var c = it.next(); !c.done; ) {

                        for (; !c.done && c.value.match(lettres); c = it.next()) {
                            mots[mots.length-1]+=(c.value);
                        }
                    //console.log(c.value);
                    if (mots[mots.length-1].length != 0 ){
                        mots.push('');
                    }

                    if (c.value == ' ') {
                        for (c = it.next(); !c.done && c.value == " "; c = it.next()) {continue;} continue;
                    } 
                        // console.log(i);
                        
                        console.log(mots);

                        if (!c.value.match(lettres)){
                            mots[mots.length-1]+=(c.value);
                        //console.log(c.value);
                        mots.push('');
                    }
                    c = it.next();
                }
                return mots.slice(0, mots.length-1);

                    if (phrase === "I am blue."){
                            $(body).css('background-color', 'blue');
                    }
            }



            $(document).ready(function() {
                let LARGEUR = $("#container .repeat").clone();
                let change=function(){
                    $(".width_tmp_option", this.parent).html($('option:selected', this).val());
                    $(this).width($(".width_tmp_select", this.parent).width());
                }
                $('#container').on("change",".un",change);


                let idx = Math.floor(Math.random() * Math.floor(phrases.length));
                let mots = tokenize(phrases[idx]);

                for( var i = 0 ; i < mots.length-1; i++){
                    $('#container .repeat:last-child').after(LARGEUR.clone());}
                    var i = 0;
                    console.log(mots.length);
                    $('#container .repeat').each(function(){
                        $('.un', this).val(mots[i]).each(change);
                        i++;

                    });

    });

</script>

</body>


</html>

I started doing this that way :

            if (phrase === "I am blue."){
                        $(body).css('background-color', 'blue');
                }

But I believe its not right since it's not working...

Upvotes: 0

Views: 70

Answers (3)

MSKashef
MSKashef

Reputation: 406

I mean like this:

const actionTypes = {
  bgColor: 0,
  bgImage: 1,
  rotate: 2
};
const actions = {
  blue: {type: actionTypes.bgColor, color:"blue"},
  red: {type: actionTypes.bgColor, color:"red"},
  yellow: {type: actionTypes.bgColor, color:"yellow"},
  orange: {type: actionTypes.bgColor, color:"orange"},
  green: {type: actionTypes.bgColor, color:"green"},
  flower: {type: actionTypes.bgImage, src:"https://arts2science.files.wordpress.com/2018/12/flowers_02_460.jpg?w=640"},
  raining: {type: actionTypes.bgImage, src:"https://img.freepik.com/free-photo/heavy-rain-shower-meadow-background-with-sparkle-bokeh-raining-nature_79161-580.jpg?size=626&ext=jpg"},

}; // and so on
const wordSeparators = [' ', '.']; // the separator characters in the string. like '(', ')', '{`, '}', ' ' (space) and so on...

function detectColor (text) {
  let str = text;
  for (const wordSeparator of wordSeparators)
    str = str.split(wordSeparator).join('&clr_sprtr;');
  words = str.split('&clr_sprtr;');
  for (let word of words)
    if (actions[word] !== undefined) return actions[word];
}

let str = "I am raining and it's hot outside";

const action = detectColor(str);

switch (action.type) {
  case actionTypes.bgColor:
    $(body).css('background-color', action.color);
  break;
  case actionTypes.bgImage:
    $(body).css('background-image', `url(${action.src})`);
  break;
  case actionTypes.rotate:
    // implement rotation
  break;
}

Upvotes: 1

MSKashef
MSKashef

Reputation: 406

In that case you have to put all the colors in an array like and search and find the color in the string using code below:

const colors = ["blue", "red", "green", "purple", "pink", "orange"]; // and so on
const wordSeparators = [' ', '.']; // the separator characters in the string. like '(', ')', '{`, '}', ' ' (space) and so on...

function detectColor (text) {
  let str = text;
  for (const wordSeparator of wordSeparators)
    str = str.split(wordSeparator).join('&clr_sprtr;');
  words = str.split('&clr_sprtr;');
  for (let word of words)
    if (colors.indexOf(word) !== -1) return word;
}

And you can use the function in your code:

let str = "I am blue and it's hot outside";
$(body).css('background-color', detectColor(str));

Upvotes: 0

MSKashef
MSKashef

Reputation: 406

Try using this code:

let color = phrase.slice(phrase.lastIndexOf(' '), -1);
$(body).css('background-color', color);

and it just works for sentences that are like this:

  1. the 'color' is the last word in the sentence
  2. after 'color' there is a '.' character
  3. before 'color' there is a ' ' character

examples: I'm blue. I love red. the color is purple.

Upvotes: 0

Related Questions