I have been trying to make a wordle copy where the amount of guesses and word length can be controlled. So I used a nested for loop to display the grid. My school has banned inspect on my computer so I cannot use console.log. The error might be coming from the fetch request. I hope I get an answer soon.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<title>Unlimited Wordle</title>
</head>
<body>
<center><h1>Unlimited Wordle</h1><br><br>
<h4>Start out by tying in word length and amount of guesses. (Defaults are 5 and 6)</h4>
<h3>Word Length:</h3>
<input id="length"/>
<h3>Guesses:</h3>
<input id="width"/><br><br>
<button id="start" onclick="play()">Start!</button>
<div id="grid"></div><br><br>
<button id="new" onclick="location.refresh()"><h4>Get A New Word!</h4></button><br><br>
<h3 id="answer"></h3></center>
<script>
function play(){
grid=document.getElementById("grid");
var line=1;
if(document.getElementById("width").length==0){
var width=5;
}else{
var width=parseInt(document.getElementById("width").value);
}
if(document.getElementById("length").length==0){
var length=6;
}else{
var length=parseInt(document.getElementById("length").value);
}
var length=parseInt(document.getElementById("length").value);
var word="";
while(length(word)!=width){
word=fetch("https://random-word-api.herokuapp.com/word");
}
for (i=0; i<length; i++){
for(j=0; j<width; j++){
grid.innerHTML+=`<textarea id="${i} ${j}" rows="1", cols="1" maxlength="1" style="resize: none;" onkeyup="this.value = this.value.toUpperCase(); "></textarea>`
}
grid.innerHTML+="<br>"
}
window.addEventListener(onkeydown, function(event){
var typed="";
if(event.keyCode==13){
var filled=true;
var colors="";
for(k=1; k<width; k++){
typed+=document.getElementById(`${line} ${k}`).value
if(document.getElementById(`${line} ${k}`).value.length==0){
var filled=false;
}
}
if(filled==true){
for(k=1; k<width; k++){
if(word[i]==typed[i]){
document.getElementById(`${line} ${k}`).style.color="green";
}
if(word.includes(typed[i])){
document.getElementById(`${line} ${k}`).style.color="yellow";
}
if(!word.includes(typed[i])){
document.getElementById(`${line} ${k}`).style.color="gray";
}
document.getElementById(`${line} ${k}`).readOnly=true;
}
line++;
if(line>6){
document.getElementById("answer").innerHTML=`The word was: ${word}.`;
}
}
}
}
)
}
</script>
</body>
</html>
My github is https://github.com/ethanreesewagner.
Related
When i use the function to check if number is positive or negative it works fine but when i try to do it again nothing happens i have to refresh the whole page to make it work again. Any help is welcome!
const userNum = document.querySelector(".user-input").value;
const checkBtn = document.querySelector(".check-input");
const result = document.querySelector(".result");
function checkNum() {
if (userNum > 0) {
result.innerHTML = "Positive!!"
}
else if (userNum < 0) {
result.innerHTML = "Negativeee!!"
}
else if (userNum < 0) {
result.innerHTML = "Number is NULL"
}
else {
result.innerHTML = "Enter a Number!!"
}
return false;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="intro">
<h1>A Program to Check if number is <br></h1>
<h2>Positive, Negative or Null</h2>
</div>
<div class="check-number-type">
<input type="text" class="user-input">
<button onclick="checkNum()" class="check-input">Check</button>
</div>
<div class="show-result">
<p class="result"></p>
</div>
</div>
</body>
<script src="/script.js"></script>
</html>
The reason why you say you have to "reload" the page everytime is because your code that extracts the input value was placed outside of your checkNum function that determines if it's positive or negative.
You only retrieve the input once, when the script starts, instead of getting a fresh copy everytime you enter the checkNum function.
Just move this:
const userNum = document.querySelector(".user-input").value;
Inside the checkNum() function.
I've been experimenting with a local sign in/log in system and I've hit a error. I was trying to make a regular expression that checks if the user's username and password contain 8 characters and 2 numbers. I really am not sure how to do that but this is all my code I've been able too put togheter.
HTML code:
<!DOCTYPE html>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form id='form'>
<title>Sign Up #1</title>
<h3>Simple Signup system</h3>
<div>
<label>Username:</label>
<input type="text" name="text1" id = "username">
</div>
<div>
<label>Password:</label>
<input type="text" name="text2" id = "password">
<div>
<button type="button" id="subBtn">Sign Up!</button>
</form>
</body>
<script src="main.js"></script>
</html>
My JS code:
var t = 'everything good, loging in'
var f = 'something is not right, try again.'
var tf = 'not-set'
var statment = /^[a-zA-Z]*$/
window.onload = function() {
document.getElementById('subBtn').addEventListener('click', onSubmit);
}
// main
function onSubmit() {
if (document.getElementById('username').value.includes(Number)) {
tf = 'True'
} else {
tf = 'False'
}
if (document.getElementById('username').value.includes(statment)) {
tf.push('True')
} else {
tf.push('False')
}
if (tf = ['True', 'True']) {
alert('Good to go, redirecting')
} else {
alert('Username does not meet the standards for creating a account!')
}
document.forms['forms1'].submit()
}
EDIT: Was able to redo a part of the code, I'm still using regex to check for letters because I'm not sure how to do it without it.
Current error: 'first can't be a Regular Expression'.
Hi all I have the following code:
my code
let companyNameField = document.getElementById('FormField_6_input');
let button = document.getElementById('ContinueButton_6');
companyNameField.addEventListener('input', validate);
function validate() {
var companyNameValue = companyNameField.value;
var companyRGEX = /[2-9]\d{3}/;
if (companyNameValue.match(companyRGEX)) {
button.disabled = false;
} else {
button.disabled = true;
companyNameField.setAttribute("pattern", '[2-9]\\d{3}');
companyNameField.setAttribute("title", "wrong");
}
}
<form action="" onchange="validate()">
<input type="text" id="FormField_6_input" name="CompanyName" />
<button id="ContinueButton_6">Continue</button>
</form>
With my function, I am checking if my input text satisfies my regex. If not then I disabled my button.
With disabling I also want to set the "title" attribute to my input for showing a message.
With console log I can see that pattern and title were successfully added to my input but when I am starting to write something wrong only my button gets disabled and the title not showing the error message.
How can I fix that?
Actually, title attribute could only be shown while the mouse is hovering on the tag, so it is not suitable to add title in input. Maybe it works in next code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="" onchange="validate()">
<input type="text" id="FormField_6_input" name="CompanyName" />
<button id="ContinueButton_6">Continue</button>
<span id="wrong_text" style="display:none">wrong</span>
</form>
<script>
let companyNameField = document.getElementById('FormField_6_input');
let button = document.getElementById('ContinueButton_6');
let wrongText = document.getElementById('wrong_text');
companyNameField.addEventListener('input', validate);
function validate() {
var companyNameValue = companyNameField.value;
var companyRGEX = /[2-9]\d{3}/;
if (companyNameValue.match(companyRGEX)) {
button.disabled = false;
wrongText.style.display = "inline";
} else {
button.disabled = true;
companyNameField.setAttribute("pattern", '[2-9]\\d{3}');
companyNameField.setAttribute("title", "wrong");
wrongText.style.display = "none";
}
}
</script>
</body>
</html>
Look at the above snippet, I've tried to solve your issue. Let me know if it works
let companyNameField = document.getElementById("FormField_6_input");
let button = document.getElementById("ContinueButton_6");
companyNameField.addEventListener("input", validate);
function validate() {
var companyNameValue = companyNameField.value;
var companyRGEX = /[2-9]\d{3}/;
if (companyNameValue.match(companyRGEX)) {
button.disabled = false;
} else {
button.disabled = true;
companyNameField.setAttribute("pattern", "[2-9]\\d{3}");
companyNameField.setAttribute("title", "wrong");
}
}
<!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" />
<title>Static Template</title>
</head>
<body>
<form action="">
<input
type="text"
id="FormField_6_input"
name="CompanyName"
onchange="validate()"
/>
<button id="ContinueButton_6" disabled>Continue</button>
</form>
</body>
</html>
instead of using regex you can also use parseInt(); and isNaN(); to only allowing numbers to enter.
I'm trying to create a code that can increase and decrease via clcik of a button
html code but the problem is i cant get it to function I've tried different options.
<!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="styles.css">
<title>Document</title>
</head>
<body>
<div id="body">
<h1>COUNTER</h1>
<span id="time">0</span><br>
<button id="lower" onclick="reduceone()" type="button">LOWER COUNT</button><BR>
<button id="add" onclick="addone()" type="button">ADD COUNT</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="index.js"></script>
</body>
</html>
javascript code:
$("#add").click(function (){
let count = 0;
count ++;
$("#time").text(count);
});
$(#lower).click(function(){
let count = 0;
count --;
$("#time").text(count)
});
Try this
let count = 0;
$("#add").click(function (){
count ++;
$("#time").text(count);
});
$(#lower).click(function(){
count --;
$("#time").text(count)
});
You have to make variable (count ) a global variable so all functions can access his value . If you put variable(count) in a function then only that function can access his value . Hope you understand
You need to share the state between two functions so each of them could see the shared state that they are changing.
Also, all id or class names should be between inverted commas like that "#lower"
let count = 0; // Shared state that both functions can see
$("#add").click(function (){
count++;
$("#time").text(count);
});
$("#lower").click(function(){ // "#lower" not #lower
count--;
$("#time").text(count)
});
Can anyone help :
The scenario is when the user1 click the button it will increment
Example : user1 clicks 5 times and then the user2 when it clicks the next number will be 6. and then when the user1 click again it will be 7
i think it works with ajax and save to db, anyone can help me how to do it. Im a begginer in ajax and database
Here is the code i just know:
<html>
<body>
<button type="button" onClick="counter()">Next</button>
<p>Number: <a id="counter">0</a></p>
</body>
</html>
<script type="text/javascript">
var counter= 0;
function counter() {
counter += 1;
document.getElementById("counter").innerHTML = counter;
}
</script>
Please use session storage to store the incremental values.
like store the values using sessionStorage.setItem("userclicks",variablevalue);
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script type="text/javascript">
function load()
{
if(localStorage.getItem("counter")!=null)
{
counter = Number(localStorage.getItem("counter"));
document.getElementById("counterValue").innerHTML = counter;
}
}
var counter= 0;
function counterFn() {
counter = Number(localStorage.getItem("counter"));
console.log(counter);
counter += 1;
localStorage.setItem("counter",counter);
document.getElementById("counterValue").innerHTML = counter;
}
</script>
</head>
<body onload="load();">
<button type="button" onclick="counterFn()">Next</button>
<p>Number:<a id="counterValue">0</a></p>
</body>
</html>
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script type="text/javascript">
function load()
{
if(localStorage.getItem("counter")!=null)
{
counter = Number(localStorage.getItem("counter"));
document.getElementById("counterValue").innerHTML = counter;
}
}
var counter= 0;
function counterFn() {
counter = Number(localStorage.getItem("counter"));
console.log(counter);
counter += 1;
localStorage.setItem("counter",counter);
document.getElementById("counterValue").innerHTML = counter;
}
</script>
</head>
<body onload="load();">
<button type="button" onclick="counterFn()">Next</button>
<p>Number:<a id="counterValue">0</a></p>
</body>
</html>