Member Avatar for gcardonav

I have a step in my code where the application will check on the word entered by the user and compare it to the a word. My issue is that my original code was javascript and now I am not certain how to set it up for AngularJS. I had to ideas but neither one work. This is my option in the my controller.js file

$scope.addGuess = function()
    {
    $scope.guesses.push($scope.guestGuess);
    $scope.guessed = $scope.guesses.length;
    $scope.correctResult = "You have guessed the correct word. Way to go!";
    $scope.incorrectResult = "Please try again!";
        if ($scope.guess == $scope.wordToGuess)
            {
                $scope.result ="You have guessed the correct word";
                alert(result);  
            }
        else if ($scope.guess == $scope.wordToGuess)
            {
                $scope.result = "Please try again!";
                alert(result);  
            }
    $scope.guess = '';
    }
});

Here is the option I was trying to use on my HTML file

<p align="center" ng-if="guestGuess == wordToGuess">{{correctResult}}</p>
<p align="center" ng-if="guestGuess != wordToGuess">{{incorrectResult}}</p>

The idea is that the word will be compared an amount of times, say 4 times, after 4 times the user will lose the game, so eventually I have to add a second condition about how many choices are left.

Thank you guys.

Here is the full code

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="guessGameApp">
<head>
    <title>Web Manager - AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
    <script src="js/controllers/app.js" type="text/javascript"></script>
    <script src="js/controllers/maincontroller.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="css/magicWord.css">
    <!--<script src="js/jquery-1.11.0.min.js"></script>-->
</head>
<body>
<div ng-controller="guessGameController">
    <p>
        <header id="masthead">
            <h2 align="center">{{appTitle}}</h2>
        </header>
    </p>
    <div ng-controller="wordController">
        <p>
            <table align="center" width="300px" height="150px" border="solid 2px">
                <tr>
                    <td id="guessBox">
                        <p align="center"><input value="" type="text" placeholder="Enter Guess" ng-model="guestGuess" /></p>
                        <p align="center">Your guess is: {{guestGuess}}</p>
                    </td>
                </tr>
                <tr>
                    <td id="guessBox">
                        <p align="center"><button ng-click="addGuess()">Click to Check</button></p>
                    </td>
                </tr>
            </table>
            <p align="center" ng-if="guestGuess == wordToGuess">{{correctResult}}</p>
            <p align="center" ng-if="guestGuess != wordToGuess">{{incorrectResult}}</p>
        </p>
        <p>
            <h3>Your guesses so far are: </h3>
            <ul>
                <li ng-repeat="words in guesses">
                    <p>{{words}}</p>
                </li>
            </ul>
            <p>You have guessed:<b>{{guessed}}</b> times out {{allowed}} chances.</p>
            <p>You have <b>{{allowed - guessed}}</b> guesses left.</p>
        </p>
    </div>
</div>
</body>
</html>

app.js

var gameApp = angular.module('guessGameApp', []);

maincontroller.js

var gameApp = angular.module('guessGameApp', []);

gameApp.controller("guessGameController", function($scope)
    {
    $scope.appTitle = "WELCOME TO THE GUESS GAME!";
    });

gameApp.controller('wordController', function($scope)
    {
    $scope.guess = '';
    $scope.guesses = [];
    $scope.guessed= '';
    $scope.allowed = 6;
    $scope.wordToGuess = "Just";


    $scope.addGuess = function()
        {
        $scope.guesses.push($scope.guestGuess);
        $scope.guessed = $scope.guesses.length;
        $scope.correctResult = "You have guessed the correct word. Way to go!";
        $scope.incorrectResult = "Please try again!";
            if ($scope.guess == $scope.wordToGuess)
                {
                    $scope.result ="You have guessed the correct word";
                    alert(result);  
                }
            else if ($scope.guess == $scope.wordToGuess)
                {
                    $scope.result = "Please try again!";
                    alert(result);  
                }
        $scope.guess = '';
        }
  • 2 Contributors
  • 2 Replies
  • 321 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by gcardonav
Member Avatar for hericles

What exactly is/isn't happening as it should?
I did notice, on line 12 of your controller, where you are checking for the word not matching, you have this:
else if ($scope.guess == $scope.wordToGuess)
but it should be
else if ($scope.guess != $scope.wordToGuess)
As it is your failure message won't display because your second condition is the same as the first.

Member Avatar for gcardonav

Actually I figured it out, well mostly. My code is working but the I am having trouble setting so the alert pops up correctly when the user runs out chances.

Here is how I set it up, but how could I change the last condition to only appear after the user runs out of chances. Any suggestion is welcomed. Thanks

if ($scope.guestGuess == $scope.wordToGuess)
    {
        $scope.result = "You have guessed the correct word. Way to go!";
        alert($scope.result);
    }
else if ($scope.guestGuess != $scope.wordToGuess & ($scope.allowed - $scope.guessed) > 0)
    {
        $scope.result = "Please try again!";    
        alert($scope.result);   
    }
else (($scope.allowed - $scope.guessed) < 0)
    {
        $scope.result = "Game over! The word was: ";    
        alert($scope.result + $scope.wordToGuess);  
    }
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.