I was able to build the Tic Tac Toe game using JavaScript or Reactjs. It works well. But for now, I am trying to build it without using any JavaScript code. Can I build it just using CSS?
I tried to use CSS variables and selectors but no luck yet.
#mixin winners($val) {
//1st line
#pos11-#{$val}:checked ~ #pos12-#{$val}:checked ~ #pos13-#{$val}:checked ~ #win-#{$val},
//2nd line
#pos21-#{$val}:checked ~ #pos22-#{$val}:checked ~ #pos23-#{$val}:checked ~ #win-#{$val},
//3rd line
#pos31-#{$val}:checked ~ #pos32-#{$val}:checked ~ #pos33-#{$val}:checked ~ #win-#{$val},
//1st column
#pos11-#{$val}:checked ~ #pos21-#{$val}:checked ~ #pos31-#{$val}:checked ~ #win-#{$val},
//2nd column
#pos12-#{$val}:checked ~ #pos22-#{$val}:checked ~ #pos32-#{$val}:checked ~ #win-#{$val},
//3rd column
#pos13-#{$val}:checked ~ #pos23-#{$val}:checked ~ #pos33-#{$val}:checked ~ #win-#{$val},
//1st diagonal
#pos11-#{$val}:checked ~ #pos22-#{$val}:checked ~ #pos33-#{$val}:checked ~ #win-#{$val},
//2nd diagonal
#pos13-#{$val}:checked ~ #pos22-#{$val}:checked ~ #pos31-#{$val}:checked ~ #win-#{$val} {
display:block;
& ~ #no-winner {
display:none;
}
}
}
Totally agree. You can build the TicTacToe game using CSS only.
In this case, modern browsers that support vw units, css counter, and css variables only can work!
Here's the html code:
<form>
<div class="board-wrapper">
<div class="board-outer">
<div class="board">
<div class="board-inner">
<input type="radio" name="pos11" id="pos11-blue" class="blue" required>
<input type="radio" name="pos11" id="pos11-red" class="red" required>
<div class="marque"></div>
<input type="radio" name="pos12" id="pos12-blue" class="blue" required>
<input type="radio" name="pos12" id="pos12-red" class="red" required>
<div class="marque"></div>
<input type="radio" name="pos13" id="pos13-blue" class="blue" required>
<input type="radio" name="pos13" id="pos13-red" class="red" required>
<div class="marque"></div>
<input type="radio" name="pos21" id="pos21-blue" class="blue" required>
<input type="radio" name="pos21" id="pos21-red" class="red" required>
<div class="marque"></div>
<input type="radio" name="pos22" id="pos22-blue" class="blue" required>
<input type="radio" name="pos22" id="pos22-red" class="red" required>
<div class="marque"></div>
<input type="radio" name="pos23" id="pos23-blue" class="blue" required>
<input type="radio" name="pos23" id="pos23-red" class="red" required>
<div class="marque"></div>
<input type="radio" name="pos31" id="pos31-blue" class="blue" required>
<input type="radio" name="pos31" id="pos31-red" class="red" required>
<div class="marque"></div>
<input type="radio" name="pos32" id="pos32-blue" class="blue" required>
<input type="radio" name="pos32" id="pos32-red" class="red" required>
<div class="marque"></div>
<input type="radio" name="pos33" id="pos33-blue" class="blue" required>
<input type="radio" name="pos33" id="pos33-red" class="red" required>
<div class="marque"></div>
<div id="win-blue" class="win-message"><div class="wrapper">Blue wins!</div></div>
<div id="win-red" class="win-message"><div class="wrapper">Red wins!</div></div>
<div id="no-winner" class="win-message"><div class="wrapper">It's a draw!</div></div>
</div>
</div>
</div>
</div>
<div class="actions">
<button type="reset">Restart</button>
</div>
</form>
And I tried to write the CSS here
I have done one implementation.
This is pure CSS and HTML only and extra you can play against computer:
Source code: https://codepen.io/T-Sz/pen/mdKxjxg
Online game: https://tic-tac-toe.xksi.pl/
Related
I have a small application of attempt online exam. My questions set are comes from DB using loop. I want to edit my already attempted exam. I have a answer set of questions. But I am not able to show auto select to attempt radio buttons.
Here is my answer set
{"1":"A","2":"A","6":"A","10":"A","14":"A","21":"B","26":"C","31":"B","33":"C","34":"B","54":"C"}
Here my questions which I am showing on view page using loop
<div class="row" style="margin-top: 20px;">
<section ng-repeat="count in subject.test_count" ng-cloak class="col col-3">
<div class="inline-group" ng-if="count%2!='0'">
<b style="width: 25px;display: inline-grid;">{{count}}</b>
<input type="radio" name="{{subject.name}}{{count}}"
id="a{{subject.name}}{{count}}" class="input-hidden"
ng-model="questiondata[subject.name][count]"
value="A" ng-checked="true">
<label for="a{{subject.name}}{{count}}" >
<p>A</p>
</label>
<input type="radio" name="{{subject.name}}{{count}}"
id="b{{subject.name}}{{count}}" class="input-hidden"
ng-model="questiondata[subject.name][count]" value="B">
<label for="b{{subject.name}}{{count}}" >
<p>B</p>
</label>
<input type="radio" name="{{subject.name}}{{count}}"
id="c{{subject.name}}{{count}}" class="input-hidden"
ng-model="questiondata[subject.name][count]" value="C">
<label for="c{{subject.name}}{{count}}" >
<p>C</p>
</label>
<input type="radio" name="{{subject.name}}{{count}}"
id="d{{subject.name}}{{count}}" class="input-hidden"
ng-model="questiondata[subject.name][count]" value="D">
<label for="d{{subject.name}}{{count}}" >
<p>D</p>
</label>
<input type="radio" name="{{subject.name}}{{count}}"
id="e{{subject.name}}{{count}}" class="input-hidden"
ng-model="questiondata[subject.name][count]" value="E">
<label for="e{{subject.name}}{{count}}" >
<p>E</p>
</label>
</div>
</section>
There are a couple things that are off with this. First is that you are ngRepeating through the values of the test_count and not the actual objects, to resolve that you're going to want to do something like this:
<section ng-repeat="(key,value) in subject.test_count" ng-cloak class="col col-3">
{{key}} {{value}}
<span class="inline-group" ng-if="count%2!='0'">
<input type="radio" name="{{subject.name}}{{key}}"
id="a{{subject.name}}{{key}}" class="input-hidden"
ng-model="questiondata[subject.name][key]"
value="A">
<label for="a{{subject.name}}{{key}}" >A</label>
<input type="radio" name="{{subject.name}}{{key}}"
id="b{{subject.name}}{{key}}" class="input-hidden"
ng-model="questiondata[subject.name][key]" value="B">
<label for="b{{subject.name}}{{key}}" >B</label>
<input type="radio" name="{{subject.name}}{{key}}"
id="c{{subject.name}}{{key}}" class="input-hidden"
ng-model="questiondata[subject.name][key]" value="C">
<label for="c{{subject.name}}{{key}}" >C</label>
<input type="radio" name="{{subject.name}}{{key}}"
id="d{{subject.name}}{{key}}" class="input-hidden"
ng-model="questiondata[subject.name][key]" value="D">
<label for="d{{subject.name}}{{key}}" > D</label>
<input type="radio" name="{{subject.name}}{{key}}"
id="e{{subject.name}}{{key}}" class="input-hidden"
ng-model="questiondata[subject.name][key]" value="E">
<label for="e{{subject.name}}{{key}}" >E</label>
</span>
</section>
Once you have your radio buttons and subject matching (I took some liberty with how I think you'd have the data setup) you need to seed the questiondata using the values you've provided above:
$scope.questiondata[0] = angular.copy($scope.subject.test_count);
Now we can see that $scope.questiondata[0][1] = $scope.subject.test_count[1] = 'A' which means that A will be selected.
Here is a sample of the full controller: https://plnkr.co/edit/fyJwfLc6Qb7b7p4ZLgqI
So in AngularJS i was using the following to show specific form elements based on a value that is captured by a model:
<fieldset class="full-width sm-padding">
<label>Do you have any major medical conditions such as
heart conditions, cancer or diabetes?</label>
<div class="inline-flex">
<input type="radio" name="medicalCondition" value="yes"
tabindex="16" ng-model="clientDetails.medicalCondition">Yes<br>
</div>
<div class="inline-flex">
<input type="radio" name="medicalCondition" value="no"
tabindex="17" ng-model="clientDetails.medicalCondition">No<br>
</div>
</fieldset>
<fieldset class="full-width sm-padding" ng-
if="clientDetails.medicalCondition == 'yes'">
<label>Are you currently taking any medication or do you
have any other medical conditions? For example HBP, Cholesterol, Asthma,
Depression? (Both lives if cover for couple)</label>
<div class="inline-flex">
<input type="radio" name="otherMedicalCondition"
value="yes" tabindex="18" ng-
model="clientDetails.otherMedicalCondition">Yes<br>
</div>
<div class="inline-flex">
<input type="radio" name="otherMedicalCondition"
value="no" tabindex="19" ng-
model="clientDetails.otherMedicalCondition">No<br>
</div>
</fieldset>
How can I do the same thing in Angular 2?
Have tried this but not working:
<fieldset class="full-width sm-padding">
<label>Do you smoke?</label>
<div class="inline-flex">
<input type="radio" name="smoker" value="yes"
tabindex="12" [(ngModel)] = "clientDetails.smoker">Yes<br>
</div>
<div class="inline-flex">
<input type="radio" name="smoker" value="no" tabindex="13" [(ngModel)] = "clientDetails.smoker">No<br>
</div>
</fieldset>
<div class="full-width flex" *ngIf="clientDetails.smoker ===
'Yes'">
<fieldset class="one-quarter sm-padding">
<label>What do you smoke?</label>
<input list="whatDoYouSmoke" name="whatDoYouSmoke"
tabindex="14">
<datalist id="whatDoYouSmoke">
<option value="Cigarettes">
<option value="Cigars">
<option value="Pipe">
<option value="E-Cigs">
<option value="Other">
</datalist>
</fieldset>
<fieldset class="one-quarter sm-padding">
<label>How many per day?</label>
<input type="number" min="0" name="howManySmokesPerDay"
tabindex="15">
</fieldset>
</div>
What am I doing wrong?
Have tried so many different options but can't quite get it to work!
thanks
The only thing I can see is that you have typed [(ngModel)] = "", try without spaces like: [(ngModel)]="". Also noticed that in your *ngIf="clientDetails.smoker ===
'Yes'", try with a little 'y' in yes as: *ngIf="clientDetails.smoker ===
'yes'". Since you are setting the value to "yes" and not "Yes" in your radio button.
There is a case problem in the Angular version. The first 'yes' starts with a lower case y and a second 'Yes' with a upper case Y.
For anyone out there looking for a solution to this, I ended up doing the following:
<fieldset class="full-width sm-padding">
<label>Do you smoke?</label>
<div class="inline-flex">
<input type="radio" name="smoker" [(ngModel)]="smoker"
[value]="true" [checked]="smoker" /> Yes<br>
</div>
<div class="inline-flex">
<input type="radio" name="smoker" [(ngModel)]="smoker"
[value]="false" [checked]="!smoker" /> No<br>
</div>
</fieldset>
<div class="full-width flex" *ngIf="smoker">
<fieldset class="one-quarter sm-padding">
<label>What do you smoke?</label>
<input list="whatDoYouSmoke" name="whatDoYouSmoke" tabindex="14">
<datalist id="whatDoYouSmoke">
<option value="Cigarettes">
<option value="Cigars">
<option value="Pipe">
<option value="E-Cigs">
<option value="Other">
</datalist>
</fieldset>
<fieldset class="one-quarter sm-padding">
<label>How many per day?</label>
<input type="number" min="0" name="howManySmokesPerDay"
tabindex="15">
</fieldset>
</div>
I want to validate all the fields in this form by angular, but it is not working. I am new to angular and cant find what the problem is. None of the field in this form is being validated
<form class="form-horizontal" role="form" name="commentForm" ng-submit="submitComment()" novalidate>
<div class="form-group" ng-class="{'has-error': commentForm.name.$error.required && !commentForm.name.$pristine}">
<label for="name" class="col-xs-2">Your Name</label>
<div class="col-xs-10">
<input type="text" class="form-control" name="name" id="name" placeholder="Enter Your Name" ng-model="dishComment.author">
<span class="help-block" ng-show="commentForm.name.$error.required && !commentForm.name.$pristine">Your Name is Required</span>
</div>
</div>
<div class="form-group">
<label for="rating" class="col-xs-2">Number of Stars</label>
<div class="col-xs-10">
<label class="radio-inline">
<input type="radio" name="rating" id="rating" value="1" ng-model="dishComment.rating"> 1
</label>
<label class="radio-inline">
<input type="radio" name="rating" id="rating" value="2" ng-model="dishComment.rating"> 2
</label>
<label class="radio-inline">
<input type="radio" name="rating" id="rating" value="3" ng-model="dishComment.rating"> 3
</label>
<label class="radio-inline">
<input type="radio" name="rating" id="rating" value="4" ng-model="dishComment.rating"> 4
</label>
<label class="radio-inline">
<input type="radio" name="rating" id="rating" value="5" ng-model="dishComment.rating"> 5
</label>
</div>
</div>
<div class="form-group" class="{'has-error': commentForm.comments.$error.required && !commentForm.comments.$pristine}">
<label for="comments" class="col-xs-2">Your comments</label>
<div class="col-xs-10">
<textarea class="form-control" id="comments" name="comments" rows="12" ng-model="dishComment.comment"></textarea>
<span class="help-block" ng-show="commentForm.comments.$error.required && !commentForm.comments.$pristine">Please Write a comment</span>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" ng-disabled="commentForm.$invalid">Submit Comment</button>
</div>
</div>
</form>
I think you only missed required in input element.
<input type="text" class="form-control" name="name" id="name" placeholder="Enter Your Name" ng-model="dishComment.author" required>
I just added required for one input element and its working.
Please check jsfiddle
I am using input fields, something like below structure. as Nitish said, you must need to write required in input element.
AppForm is a form name.
<md-input-container flex="50" flex-gt-xs="33" md-is-error="AppForm.txtApplicationUrl.$invalid && (AppForm.$submitted || AppForm.txtApplicationUrl.$dirty)">
<label for="input_0">Your label</label>
<input type="text" ng-model="applicationDetails.Applicationurl" name="txtApplicationUrl" tabindex="0" id="txtApplicationUrl" aria-invalid="false" required><div class="md-errors-spacer"></div>
<div ng-messages="AppForm.txtApplicationUrl.$error" ng-if="AppForm.$submitted || AppForm.txtApplicationUrl.$touched">
<div ng-message="required">Custom Message</div>
</div>
</md-input-container>
I have a checkbox as following :
<input type="checkbox" name="bacLibre" id="bacLibre" ng-model="bacLibre">
and other inputs as following :
<div id="bacSection" ng-show="!bacLibre">
<div class="row">
<div class="form-group col-md-6">
<label for="regionalScore">
{{'FME_CANDIDATURE.EDUCATION_INFORMATIONS.REGIONAL_SCORE' | translate}}:
</label>
<input type="number" min="0" max="20" step="0.01" name="regionalScore" id="regionalScore" class="form-control input-lg"
ng-model="candidature.regionalScore"
required>
</div>
<div class="form-group col-md-6">
<label for="bacSecondYearFirstSemScore">
{{'FME_CANDIDATURE.EDUCATION_INFORMATIONS.BAC_SECOND_YEAR_FIRST_SEM_SCORE' | translate}}:
</label>
<input type="number" min="0" max="20" step="0.01" name="bacSecondYearFirstSemScore" id="bacSecondYearFirstSemScore"
class="form-control input-lg"
ng-model="candidature.bacSecondYearFirstSemScore"
required>
</div>
</div>
</div>
as you can see all the inputs are required I want when I check that checkbox to change the state of all the inputs in that <div id="bacSection"> to not required, and then when I uncheck that checkbox to make all the inputs required.
how can I do this ?
Angular has a directive ng-required, use that on the input with a expression that gets changed
<<input type="number" min="0" max="20" step="0.01" name="bacSecondYearFirstSemScore" id="bacSecondYearFirstSemScore"
class="form-control input-lg"
ng-model="candidature.bacSecondYearFirstSemScore"
ng-required='bacLibre'>
I have the following HTML, I need to require a radio selection. Not sure how to do it in AngularJS.
<div class="form-group">
<label class="control-label pull-left"><small>Type of M (<i>check one</i>):</small></label>
<div class="col-md-5 pull-left">
<label class="radio-inline pull-left">
<input type="radio" name="radio" ng-model="m.pr.MType" value="PrRep"> PrRep
</label>
<label class="radio-inline pull-left">
<input type="radio" name="radio" ng-model="m.pr.MType" value="LProd"> LProd
</label>
</div>
<div class="input-group col-md-3">
<div class="input-group-sm">
<label><small>Prod LNum</small></label>
<input type="text" class="form-control" id="provProdLNum" ng-model="m.pr.prodLNum" ng-required="m.pr.MType != 'PrRep'" />
</div>
</div>
</div>
I've tried this:
<input type="radio" name="radio" ng-model="m.pr.MType" value="PrRep" required> PrRep
<input type="radio" name="radio" ng-model="m.pr.MType" value="LProd" required> LProd
and this:
<input type="radio" name="radio" ng-model="m.pr.MType" value="PrRep" ng-required="m.pr.MType != ''"> PrRep
<input type="radio" name="radio" ng-model="m.pr.MType" value="LProd" ng-required="m.pr.MType != ''"> LProd
Not sure which is the correct one to use here...
Use ng-required. In your first example, the permanent presence of the required attribute on all the radio buttons within a group will result in the form not validating.
Validate Radio Button AngularJS