The idea is to create simple hangman game, in which while you choose a given category and click new word button, the corresponding random word from the given list will be displayed (as underscores). Then, if letter matches letter present in this word, it will be revealed, if not, the consecutive element of hangman will be drawn.
But I have no clue now how to implement further these onto the project. How to create a function which will generate a word randomly on the background, and if chosen letter is not there, make it draw something, or if it is present in the word, change underscore with this letter?
I wanted to create a code which will allow to play hangman game described in the topic. I can't find solution for creating the code which will replace underscores with letters, and draw elements on the background if a given letter is not there.
let background;
let width, heigth, margin;
let animals, plants, clothes;
let lives;
let chosenCategory;
let word;
function initialize() {
background = document.getElementById("background").getContext("2d");
width = document.getElementById("background").width;
height = document.getElementById("background").height;
margin = 25;
lives = 10;
word = "nothing";
animals = ["horse", "elephant", "squirell"];
plants = ["pineapple", "tomato", "lettuce"];
clothes = ["trousers", "shirt", "skirt"];
}
function drawLetters() {
for (let i = 0; i < word.length; i++) {
background.fillRect(i * ((width * 0.9) / word.length) + margin, height / 2, 30, 5);
}
}
function randomWord() {
chosenCategory = document.getElementById("category").value;
if (chosenCategory == "animals") {
word = animals[Math.floor(Math.random() * animals.length)];
} else if (chosenCategory == "plants") {
word = plants[Math.floor(Math.random() * plants.length)];
} else if (chosenCategory == "clothes") {
word = clothes[Math.floor(Math.random() * clothes.length)];
}
}
function checkLetter(letter) {
if (word.includes(letter)) {
drawLetter(letter);
}
}
function drawLetter(letter) {
background.font = "30px Arial";
background.fillText(letter, word.indexOf(letter) * ((width * 0.9) / word.length) + margin, height / 2 - 10);
}
body {
text-align: center;
background-color: #8EB19D;
}
#background {
background-color: azure;
border: 3px solid black;
}
h1 {
color: rgb(190, 220, 254);
font-Size: 40px;
height: 50px;
text-align: center;
font-family: Tahoma;
}
.container {
font-size: 16px;
background-color: #ffffff;
width: 64vw;
max-width: 32em;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
padding: 3em;
border-radius: 0.6em;
}
.letter-row {
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.letter-container {
height: 2.4em;
width: 2.4em;
border-radius: 0.3em;
font-weight: bold;
background-color: #ffffff;
cursor: pointer;
}
<body onload="initialize()">
<h1>Hangman</h1>
<div class="container">
<p>
<select id="category">
<option value="">Category</option>
<option id="animals" option value="animals">Animals</option>
<option id="plants" option value="plants">Plants</option>
<option id="clothes" option value="clothes">Clothes</option>
</select>
</p>
<canvas id="background" width="350" height="250">No canvas support</canvas>
<div id="text-container">
<div class="letter-row">
<input class="letter-container" type="button" value="A" onclick="checkLetter('a')" />
<input class="letter-container" type="button" value="B" onclick="checkLetter('b')" />
<input class="letter-container" type="button" value="C" onclick="checkLetter('c')" />
<input class="letter-container" type="button" value="D" onclick="checkLetter('d')" />
<input class="letter-container" type="button" value="E" onclick="checkLetter('e')" />
<input class="letter-container" type="button" value="F" onclick="checkLetter('f')" />
<input class="letter-container" type="button" value="G" onclick="checkLetter('g')" />
<input class="letter-container" type="button" value="H" onclick="checkLetter('h')" />
<input class="letter-container" type="button" value="I" onclick="checkLetter('i')" />
</div>
<div class="letter-row">
<input class="letter-container" type="button" value="J" onclick="checkLetter('j')" />
<input class="letter-container" type="button" value="K" onclick="checkLetter('k')" />
<input class="letter-container" type="button" value="L" onclick="checkLetter('l')" />
<input class="letter-container" type="button" value="M" onclick="checkLetter('m')" />
<input class="letter-container" type="button" value="N" onclick="checkLetter('n')" />
<input class="letter-container" type="button" value="O" onclick="checkLetter('o')" />
<input class="letter-container" type="button" value="P" onclick="checkLetter('p')" />
<input class="letter-container" type="button" value="Q" onclick="checkLetter('q')" />
</div>
<div class="letter-row">
<input class="letter-container" type="button" value="R" onclick="checkLetter('r')" />
<input class="letter-container" type="button" value="S" onclick="checkLetter('s')" />
<input class="letter-container" type="button" value="T" onclick="checkLetter('t')" />
<input class="letter-container" type="button" value="U" onclick="checkLetter('u')" />
<input class="letter-container" type="button" value="V" onclick="checkLetter('v')" />
<input class="letter-container" type="button" value="W" onclick="checkLetter('w')" />
<input class="letter-container" type="button" value="X" onclick="checkLetter('x')" />
<input class="letter-container" type="button" value="Y" onclick="checkLetter('y')" />
<input class="letter-container" type="button" value="Z" onclick="checkLetter('z')" />
</div>
</div>
<p></p>
<div>
<button id="New Word" type="button" onclick="randomWord()">New Word</button>
<input type="button" value="Draw Lines" onclick="drawLetters()" />
</div>
<div class="game-container">
<svg height="250" width="200" class="figure-container">
<line x1="60" y1="20" x2="140" y2="20" />
</svg>
<div class="wrong-letter-container">
<div id="wrong-letters"></div>
</div>
<div class="word" id="word"></div>
</div>
<div class="popup-container" id="popup-container">
<div class="popup">
<h2 id="final-message"></h2>
</div>
</div>
</div>
</body>
Make a clear
do not use inline event handlers
for now add a console.log to double check
I also changed the CSS to not rely on position absolute and transform
let background;
let width, heigth, margin;
let animals, plants, clothes;
let lives;
let chosenCategory;
let word;
const clear = () => background.clearRect(0, 0, width, height);
const initialize = () => {
background = document.getElementById("background").getContext("2d");
width = document.getElementById("background").width;
height = document.getElementById("background").height;
margin = 25;
lives = 10;
word = "nothing";
animals = ["horse", "elephant", "squirell"];
plants = ["pineapple", "tomato", "lettuce"];
clothes = ["trousers", "shirt", "skirt"];
};
const drawLetters = () => {
clear();
console.log(word)
for (let i = 0; i < word.length; i++) {
background.fillRect(i * ((width * 0.9) / word.length) + margin, height / 2, 30, 5);
}
};
const randomWord = () =>{
chosenCategory = document.getElementById("category").value;
if (chosenCategory == "animals") {
word = animals[Math.floor(Math.random() * animals.length)];
} else if (chosenCategory == "plants") {
word = plants[Math.floor(Math.random() * plants.length)];
} else if (chosenCategory == "clothes") {
word = clothes[Math.floor(Math.random() * clothes.length)];
}
};
const drawLetter = (letter) => {
background.font = "30px Arial";
background.fillText(letter, word.indexOf(letter) * ((width * 0.9) / word.length) + margin, height / 2 - 10);
};
const checkLetter = (letter) => {
if (word.includes(letter)) {
drawLetter(letter);
}
};
window.addEventListener("DOMContentLoaded", initialize)
body {
text-align: center;
background-color: #8EB19D;
}
#background {
background-color: azure;
border: 3px solid black;
}
h1 {
color: rgb(190, 220, 254);
font-Size: 40px;
height: 50px;
text-align: center;
font-family: Tahoma;
}
.container {
font-size: 16px;
background-color: #ffffff;
width: 64vw;
max-width: 32em;
padding: 3em;
border-radius: 0.6em;
margin: auto;
}
.letter-row {
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.letter-container {
height: 2.4em;
width: 2.4em;
border-radius: 0.3em;
font-weight: bold;
background-color: #ffffff;
cursor: pointer;
}
<h1>Hangman</h1>
<div class="container">
<p>
<select id="category">
<option value="">Category</option>
<option id="animals" option value="animals">Animals</option>
<option id="plants" option value="plants">Plants</option>
<option id="clothes" option value="clothes">Clothes</option>
</select>
</p>
<canvas id="background" width="350" height="250">No canvas support</canvas>
<div id="text-container">
<div class="letter-row">
<input class="letter-container" type="button" value="A" onclick="checkLetter('a')" />
<input class="letter-container" type="button" value="B" onclick="checkLetter('b')" />
<input class="letter-container" type="button" value="C" onclick="checkLetter('c')" />
<input class="letter-container" type="button" value="D" onclick="checkLetter('d')" />
<input class="letter-container" type="button" value="E" onclick="checkLetter('e')" />
<input class="letter-container" type="button" value="F" onclick="checkLetter('f')" />
<input class="letter-container" type="button" value="G" onclick="checkLetter('g')" />
<input class="letter-container" type="button" value="H" onclick="checkLetter('h')" />
<input class="letter-container" type="button" value="I" onclick="checkLetter('i')" />
</div>
<div class="letter-row">
<input class="letter-container" type="button" value="J" onclick="checkLetter('j')" />
<input class="letter-container" type="button" value="K" onclick="checkLetter('k')" />
<input class="letter-container" type="button" value="L" onclick="checkLetter('l')" />
<input class="letter-container" type="button" value="M" onclick="checkLetter('m')" />
<input class="letter-container" type="button" value="N" onclick="checkLetter('n')" />
<input class="letter-container" type="button" value="O" onclick="checkLetter('o')" />
<input class="letter-container" type="button" value="P" onclick="checkLetter('p')" />
<input class="letter-container" type="button" value="Q" onclick="checkLetter('q')" />
</div>
<div class="letter-row">
<input class="letter-container" type="button" value="R" onclick="checkLetter('r')" />
<input class="letter-container" type="button" value="S" onclick="checkLetter('s')" />
<input class="letter-container" type="button" value="T" onclick="checkLetter('t')" />
<input class="letter-container" type="button" value="U" onclick="checkLetter('u')" />
<input class="letter-container" type="button" value="V" onclick="checkLetter('v')" />
<input class="letter-container" type="button" value="W" onclick="checkLetter('w')" />
<input class="letter-container" type="button" value="X" onclick="checkLetter('x')" />
<input class="letter-container" type="button" value="Y" onclick="checkLetter('y')" />
<input class="letter-container" type="button" value="Z" onclick="checkLetter('z')" />
</div>
</div>
<p></p>
<div>
<button id="New Word" type="button" onclick="randomWord()">New Word</button>
<input type="button" value="Draw Lines" onclick="drawLetters()" />
</div>
<div class="game-container">
<svg height="250" width="200" class="figure-container">
<line x1="60" y1="20" x2="140" y2="20" />
</svg>
<div class="wrong-letter-container">
<div id="wrong-letters"></div>
</div>
<div class="word" id="word"></div>
</div>
<div class="popup-container" id="popup-container">
<div class="popup">
<h2 id="final-message"></h2>
</div>
</div>
</div>
So when given category is chosen and New Word button is clicked, adequate to number of letters in this word, number underscores will be displayed.
And as here:
function checkLetter(letter) {
if (word.includes(letter)) {
drawLetter(letter);
}
If chosen letter is present, it will replace the underscore. And if it is not the case - if the word doesn't include the letter, then the element of hangman will be drawn. But I don't know how to make it work. How to make some kind of negation to this condition if word.includes, in the way such as: if word doesn't include letter, then draw element of the hangman.
Related
I have multiple buttons that need to be activated at the same time. When each button is click from the input it returns what is type. The problem is I need all the buttons to be fire off at the same time. When I have a separate button fire off theses buttons though I get undefined and not the input.
$(document).on("click", "#devSaveBtn", function () {
if (
$("#primaryBtn").trigger("click") &&
$("#secondaryBtn").trigger("click") &&
$("#thirdBtn").trigger("click")
) {
var getInput = $(this)
.closest("td")
.find("input[name='Object Name']")
.val();
console.log("Input = " + getInput);
var getInput2 = $(this)
.closest("td")
.find("input[name='Project Name']")
.val();
console.log("Input2 = " + getInput2);
var getInput3 = $(this)
.closest("td")
.find("input[name='Description']")
.val();
console.log("Input3 = " + getInput3);
} else {
console.log("This is not working");
}
});
<button type="button" input type="submit" id="devSaveBtn" class="devbutton devinithidden readonlyhidden" title="Reset Changes" style="visibility: visible; background-color: #f4d8b4;"><i class="fa fa-save"></i>
Save</button>
<td class="noncomponentswidth" id="recordObjName">
<p>
<input type="text" id="OBJ_NAME" name="Object Name" placeholder="" required minlength="8">
<button id="primaryBtn">Primary</button>
</p>
<button style="display: none;">Submit</button>
</td>
<td class="noncomponentswidth" id="recordProjectName">
<input type="text" id="DEPLOYER_PROJECT" name="Project Name" placeholder="">
<button id="secondaryBtn">Secondary</button>
</td>
<td class="noncomponentswidth" id="recordDeployerCandidate" placeholder="">
<input type="text" id="DESCRIPTION" name="Description" placeholder="" style="resize: vertical; width: 40em; height: 85px;">
<button id="thirdBtn">Third</button>
</td>
$(document).on("click", "#devSaveBtn", function () {
var getInput = $("input");
for (var i = 0; i < getInput.length; i++)
console.log(getInput[i].id, " => Input", i, " = ", getInput[i].value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.js" integrity="sha512-CX7sDOp7UTAq+i1FYIlf9Uo27x4os+kGeoT7rgwvY+4dmjqV0IuE/Bl5hVsjnQPQiTOhAX1O2r2j5bjsFBvv/A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<button type="button" input type="submit" id="devSaveBtn" class="devbutton devinithidden readonlyhidden" title="Reset Changes" style="visibility: visible; background-color: #f4d8b4;"><i class="fa fa-save"></i>
Save</button>
<td class="noncomponentswidth" id="recordObjName">
<p>
<input type="text" id="OBJ_NAME" name="Object Name" placeholder="" required minlength="8">
</p>
</td>
<td class="noncomponentswidth" id="recordProjectName">
<input type="text" id="DEPLOYER_PROJECT" name="Project Name" placeholder="">
</td>
<td class="noncomponentswidth" id="recordDeployerCandidate" placeholder="">
<input type="text" id="DESCRIPTION" name="Description" placeholder="" style="resize: vertical; width: 40em; height: 85px;">
</td>
I want the input background color to be updated when client insert illegal email input.
the current code doesn't work. what am i missing?
<input id="signup" type="submit" value="SIGN UP">
<div id="email">
<input type="email" id="inputMail" placeholder="Email">
<img src="C:\Users\okazi\Desktop\email.png" id="imageMail">
</div>
<script type="text/javascript">
var errorMassage = "";
function isEmail(inputMail)
{
var regex = /^([a-zA-Z0-9_.+-])+\#(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(inputMail);
}
$("#signup").click(function ()
{
if (isEmail($(inputMail).val()) == false)
{
$("inputMail").css("background-color", "red");
}
alert(errorMassage);
})
</script>
Here you are:
var errorMassage = "";
function isEmail(inputMail) {
var regex =
/^([a-zA-Z0-9_.+-])+\#(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(inputMail);
}
$("#signup").click(function() {
if (isEmail($(inputMail).val()) == false) {
$("#inputMail").css("background-color", "red");
}
alert(errorMassage);
});
<input id="signup" type="submit" value="SIGN UP" />
<div id="email">
<input type="email" id="inputMail" placeholder="Email" />
<img src="C:\Users\okazi\Desktop\TheKazim\photos\email.png" id="imageMail" />
</div>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
Also, to change border color instead of background color replace $("#inputMail").css("background-color", "red");
with $("#inputMail").css("border-color", "red"); as below:
var errorMassage = "";
function isEmail(inputMail) {
var regex =
/^([a-zA-Z0-9_.+-])+\#(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(inputMail);
}
$("#signup").click(function() {
if (isEmail($(inputMail).val()) == false) {
$("#inputMail").css("border-color", "red");
}
alert(errorMassage);
});
<input id="signup" type="submit" value="SIGN UP" />
<div id="email">
<input type="email" id="inputMail" placeholder="Email" />
<img src="C:\Users\okazi\Desktop\TheKazim\photos\email.png" id="imageMail" />
</div>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
I have viz with three checkboxes working as filters and displayed circles according to the group (see picture below)
In my work I use draw function to visualize all data. Problem is when I click on any checkbox, viz disappears and don't redraw. Can you help to find error here?
Snippet of my html-file:
<body>
<div class="centered" style="padding-top: 25px">
</div>
<div id="svganchor" class="graph centered">
</div>
<div id="checkboxes" class="centered">
<span style="position:relative; top: 3px">Toggle Elements: </span>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
<input type="checkbox" value="jump" class="mdl-checkbox__input element" checked="">Jumps
<span class="mdl-checkbox__label" id="jumpColor" style="font-size: 20px; color: #1976D2;">● </span>
</label>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
<input type="checkbox" value="spin" class="mdl-checkbox__input element" checked="">Spins
<span class="mdl-checkbox__label" id="spinColor" style="font-size: 20px; color: #388E3C;">● </span>
</label>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
<input type="checkbox" value="seq" class="mdl-checkbox__input element" checked="">Sequences
<span class="mdl-checkbox__label" id="seqColor" style="font-size: 20px; color: #D81B60;">● </span>
</label>
</style>
</div>
</body>
Snippet of my js-file:
d3.selectAll("input").on("change", filter);
function filter() {
function getCheckedBoxes(checkboxName) {
let checkboxes = d3.selectAll(checkboxName).nodes();
let checkboxesChecked = [];
for (let i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
checkboxesChecked.push(checkboxes[i].defaultValue);
}
}
return checkboxesChecked.length > 0 ? checkboxesChecked : null;
}
let checkedBoxes = getCheckedBoxes(".element");
let newData = [];
if (checkedBoxes == null) {
dataSet = newData;
draw();
return;
}
for (let i = 0; i < checkedBoxes.length; i++){
let newArray = data.filter(function(d) {
return d.element === checkedBoxes[i];
});
Array.prototype.push.apply(newData, newArray);
}
dataSet = newData;
draw();
}
Look to input values:
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
<input type="checkbox" value="Jumps" class="mdl-checkbox__input element" checked="">Jumps
<span class="mdl-checkbox__label" id="jumpColor" style="font-size: 20px; color: #1976D2;">● </span>
</label>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
<input type="checkbox" value="Spins" class="mdl-checkbox__input element" checked="">Spins
<span class="mdl-checkbox__label" id="spinColor" style="font-size: 20px; color: #388E3C;">● </span>
</label>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
<input type="checkbox" value="Sequences" class="mdl-checkbox__input element" checked="">Sequences
<span class="mdl-checkbox__label" id="seqColor" style="font-size: 20px; color: #D81B60;">● </span>
</label>
when i click the calculate button it is not showing the desired result it show same in btnvalue input as previous,if previousally the btnvalue is 2+3 then it show same after clicking calculate button 2+3 but i want the display as 5.
i have tried all function valueOf etc but i didnot get the result, i m writing my code in subline text3 and excuting it in XAMPP Control Panel v3.2.2
<!DOCTYPE html>
<html>
<head>
<title>calculater</title>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
</head>
<body>
<div style="padding-left:40px">
<h2> PHP Calculator</h2>
<form method="post" id="formID">
Enter value: <input type="text" name="btnValue" id='btnValue'> <br> <br>
<div style="padding-left: 105px">
<input type="button" value="9" name="btn1">
<input type="button" value="8" name="btn2">
<input type="button" value="7" name="btn3">
<input type="button" value="+" name="btn4"> <br>
<input type="button" value="6" name="btn5">
<input type="button" value="5" name="btn6">
<input type="button" value="4" name="btn7">
<input type="button" value="-" name="btn8" style="padding-left: 9px"> <br>
<input type="button" value="3" name="btn8">
<input type="button" value="2" name="btn9">
<input type="button" value="1" name="btn10">
<input type="button" value="/" name="btn11" style="padding-left: 9px"> <br>
<input type="button" value="0" name="btn12" style="padding- left:33px">
<input type="button" value="." name="btn13" style="padding-right:9px">
<input type="button" value="x" name="btn14" style="padding left: 7px"><br>
</div> <br>
<input type="button" id="Calculate" value="calculate" name="Calculator">
</form>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('input[type=button]').click(function(){
if($('#btnValue').val()==''){
$('#btnValue').val($(this).val());
}else{
$('#btnValue').val($('#btnValue').val()+($(this).val()));
}
});
$('#Calculate').click(function(){
var cal=$('#btnValue').val( );
$('#btnValue').val(cal.valueOf() );
});
});
</script>
</body>
</html>
I expect the calculate of 2+3 is 5 not 2+3.
From what I can see you have added the click function to all of your buttons here:
$(document).ready(function(){
$('input[type=button]').click(function(){
This includes your calculate button because it is also a input[type=button] it just has an id of Calculate. So even though you have separated the two functions the ready function takes over and places the value of the calculate button into the text field. Try adding the ready click function to only the buttons you have separated by the div tag and exclude the calculate button. I'm not an expert on jquery so I hope this helps you
just like what KJEK-Code said your setting a click listener on all button and then trying to set on the calculate button. Second, cal.valueOf() won't return the calculated value, it will return the same value as cal.
I have added some fixes based on this link: https://codepen.io/simonja2/pen/QbGYbR
<!DOCTYPE html>
<html>
<head>
<title>calculater</title>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
</head>
<body>
<div style="padding-left:40px">
<h2> PHP Calculator</h2>
<form method="post" id="formID">
Enter value: <input type="text" name="btnValue" id='btnValue'> <br> <br>
<div style="padding-left: 105px">
<input type="button" value="9" name="btn1">
<input type="button" value="8" name="btn2">
<input type="button" value="7" name="btn3">
<input type="button" value="+" name="btn4"> <br>
<input type="button" value="6" name="btn5">
<input type="button" value="5" name="btn6">
<input type="button" value="4" name="btn7">
<input type="button" value="-" name="btn8" style="padding-left: 9px"> <br>
<input type="button" value="3" name="btn8">
<input type="button" value="2" name="btn9">
<input type="button" value="1" name="btn10">
<input type="button" value="/" name="btn11" style="padding-left: 9px"> <br>
<input type="button" value="0" name="btn12" style="padding- left:33px">
<input type="button" value="." name="btn13" style="padding-right:9px">
<input type="button" value="x" name="btn14" style="padding left: 7px"><br>
</div> <br>
<input type="button" id="Calculate" value="calculate" name="Calculator">
</form>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('input[type=button]').click(function(){
console.log($(this).val());
if($(this).val() == "calculate") {
var cal=$('#btnValue').val( );
$('#btnValue').val(calculate(cal));
console.log(cal.valueOf());
} else {
if($('#btnValue').val()==''){
$('#btnValue').val($(this).val());
} else {
$('#btnValue').val($('#btnValue').val()+($(this).val()));
}
}
});
calculate = (value) => {
for (var i = 0; i < value.length; i++) {
if(isOperator(value[i])) {
var o = value[i];
var a = value.slice(0, i);
var b = value.slice(i+1);
return operate(a, b, o);
}
}
return value;
}
isOperator = function(value) {
return value === '/' || value === '*' || value === '+' || value === '-';
};
operate = function(a, b, operation) {
a = parseFloat(a);
b = parseFloat(b);
console.log(a, b, operation);
if (operation === '+') return a + b;
if (operation === '-') return a - b;
if (operation === '*') return a * b;
if (operation === '/') return a / b;
}
});
</script>
</body>
</html>
For some reason, my HTML text boxes are not centering. When I view them both on my desktop and on my mobile device, they show up differently. One is stretched while the other isn't centered. Ho can I make it so that my HTML code shows up the same in
both cases?
<body>
<div id="worked"></div>
<h1 style="text-align: center;"><span style="color: #ff0000;"><strong>Offer Ends In:</strong></span></h1>
<h1 id="time" style="text-align: center;"></h1>
<p> </p>
<!-- AWeber Web Form Generator 3.0.1 -->
<form class="af-form-wrapper" accept-charset="UTF-8" action="https://www.aweber.com/scripts/addlead.pl" method="post">
<div style="display: none;">
<input name="meta_web_form_id" type="hidden" value="604218668" />
<input name="meta_split_id" type="hidden" value="" />
<input name="listname" type="hidden" value="awlist4661276" />
<input id="redirect_56ab2ff33416d920a3c24dc4d8e140f4"
name="redirect"
type="hidden"
value="http://bloggingnetworkonline.com/InternetMarketing/?page_id=133&preview=true" />
<input name="meta_adtracking" type="hidden" value="My_Web_Form" />
<input name="meta_message" type="hidden" value="1" />
<input name="meta_required" type="hidden" value="name,email" />
<input name="meta_tooltip" type="hidden" value="name||First Name...,,email||Best Email..." />
</div>
<div id="af-form-604218668" class="af-form">
<div id="af-body-604218668" class="af-body af-standards">
<div class="af-element">
<label class="previewLabel" for="awf_field-90534028"></label>
<div class="af-textWrap" style="text-align: left;">
<input id="awf_field-90534028"
class="text"
style="width: 450px; position: center;"
tabindex="500"
name="name"
type="text"
value="First Name..." />
</div>
</div>
<div class="af-element" style="text-align: center;">
<label class="previewLabel" for="awf_field-90534029"></label>
<div class="af-textWrap" style="text-align: left;">
<input id="awf_field-90534029"
class="text"
style="width: 450px; position: center;"
tabindex="500"
name="email"
type="text"
value="Best Email..." />
</div>
</div>
<div class="af-element buttonContainer" style="text-align: center;">
<input id="af-submit-image-604218668"
class="image"
style="background: none; max-width: 100%; width: 450px position: center;"
tabindex="502"
alt="Submit Form"
name="submit"
src="https://hostedimages-cdn.aweber-static.com/MTE0ODQyNQ==/original/d316599087b84f9498e3854009bdad52.png"
type="image" />
</div>
<div class="af-element privacyPolicy" style="text-align: center;">
<p><strong>I respect your <a title="Privacy Policy" href="https://www.aweber.com/permission.htm" target="_blank" rel="nofollow">email privacy</a></strong></p>
<div class="af-clear"> </div>
</div>
</div>
</div>
<div style="display: none;"><img src="https://forms.aweber.com/form/displays.htm?id=bAwsTIwcbGwc" alt="" /></div>
</form>
<!-- /AWeber Web Form Generator 3.0.1 -->
</body>
<script>
var handler = function() {
if (--sec < 0) {
sec = 59;
if (--min < 0) {
min = 0;
sec = 0;
}
}
var min1 = "0" + min + "m";
var min2 = min + "m";
var sec1 = "0" + sec + "s";
var sec2 = sec + "s";
var col = ":";
min1 = min1.fontcolor("red");
min2 = min2.fontcolor("red");
sec1 = sec1.fontcolor("red");
sec2 = sec2.fontcolor("red");
col = col.fontcolor("red");
document.getElementById("time").innerHTML = (min < 10 ? min1 : min2) + col + (sec < 10 ? sec1 : sec2);
};
var sec = 0;
var min = 15;
handler();
setInterval(handler, 1000);
</script>
What text-box are you talking about?
If you are talking about the two input elements so why do you have on the wrapping div text-align: left? if you want it centered the containing element must be aligned to the center.
If you want the text inside the input to be centered you must put text-align: center in the input style, the position: center does not exist in css. (Example on "First Name" for text-align: center)
<body>
<div id="worked"></div>
<h1 style="text-align: center;">
<span style="color: #ff0000;"><strong>Offer Ends In:</strong></span>
</h1>
<h1 id="time" style="text-align: center;"></h1>
<p> </p>
<!-- AWeber Web Form Generator 3.0.1 -->
<form class="af-form-wrapper" accept-charset="UTF-8" action="https://www.aweber.com/scripts/addlead.pl" method="post">
<div style="display: none;">
<input name="meta_web_form_id" type="hidden" value="604218668" />
<input name="meta_split_id" type="hidden" value="" />
<input name="listname" type="hidden" value="awlist4661276" />
<input id="redirect_56ab2ff33416d920a3c24dc4d8e140f4"
name="redirect"
type="hidden"
value="http://bloggingnetworkonline.com/InternetMarketing/?page_id=133&preview=true" />
<input name="meta_adtracking" type="hidden" value="My_Web_Form" />
<input name="meta_message" type="hidden" value="1" />
<input name="meta_required" type="hidden" value="name,email" />
<input name="meta_tooltip" type="hidden" value="name||First Name...,,email||Best Email..." />
</div>
<div id="af-form-604218668" class="af-form">
<div id="af-body-604218668" class="af-body af-standards">
<div class="af-element">
<label class="previewLabel" for="awf_field-90534028"></label>
<div class="af-textWrap" style="text-align: center;">
<input id="awf_field-90534028"
class="text"
style="width: 450px; text-align: center;"
tabindex="500"
name="name"
type="text"
value="First Name..." />
</div>
</div>
<div class="af-element" style="text-align: center;">
<label class="previewLabel" for="awf_field-90534029"></label>
<div class="af-textWrap" style="text-align: center;">
<input id="awf_field-90534029"
class="text"
style="width: 450px; position: center;"
tabindex="500"
name="email"
type="text"
value="Best Email..." />
</div>
</div>
<div class="af-element buttonContainer" style="text-align: center;">
<input id="af-submit-image-604218668"
class="image"
style="background: none; max-width: 100%; width: 450px position: center;"
tabindex="502"
alt="Submit Form"
name="submit"
src="https://hostedimages-cdn.aweber-static.com/MTE0ODQyNQ==/original/d316599087b84f9498e3854009bdad52.png"
type="image" />
</div>
<div class="af-element privacyPolicy" style="text-align: center;">
<p><strong>I respect your <a title="Privacy Policy" href="https://www.aweber.com/permission.htm" target="_blank" rel="nofollow">email privacy</a></strong></p>
<div class="af-clear"> </div>
</div>
</div>
</div>
<div style="display: none;"><img src="https://forms.aweber.com/form/displays.htm?id=bAwsTIwcbGwc" alt="" /></div>
</form>
<!-- /AWeber Web Form Generator 3.0.1 -->
</body>
<script>
var handler = function() {
if (--sec < 0) {
sec = 59;
if (--min < 0) {
min = 0;
sec = 0;
}
}
var min1 = "0" + min + "m";
var min2 = min + "m";
var sec1 = "0" + sec + "s";
var sec2 = sec + "s";
var col = ":";
min1 = min1.fontcolor("red");
min2 = min2.fontcolor("red");
sec1 = sec1.fontcolor("red");
sec2 = sec2.fontcolor("red");
col = col.fontcolor("red");
document.getElementById("time").innerHTML = (min < 10 ? min1 : min2) + col + (sec < 10 ? sec1 : sec2);
};
var sec = 0;
var min = 15;
handler();
setInterval(handler, 1000);
</script>