I'm honestly just confused on what I should code for this project.
This is for a project I'm working on. Countless attempts I've tried just made me land back to the ground floor.
<!DOCTYPE html>
<html>
<head>
<title>Equation Solver</title>
<style>
/* CSS styles goes here */
form {
margin: auto; /* Centers the Form */
position: center;
text-align: center;
border: 4px solid black;
background:rgb(153, 102, 255);
color: black;
width: 300px;
height: 100%;
padding: 20px 68px;
border-radius: 32px
}
</style>
<script>
//JavaScript code goes here
</script>
</head>
<body>
<h1 align="center"> Solve the Equation </h1>
<form align="center">
<b>Click Me For a Mathematic Equation.</b><br>
<button onclick="ClickMe();">Click Me</button>
</form>
<form align="center">
<b>Submit Your Answer</b><br>
<button onclick="Submit();">Submit</button>
</form>
<form align="center">
<b>Reset</b><br>
<button onclick="Reset();">Reset</button>
</form>
<br><br>
</body>
</html>
One Form should have a button that once clicking it, it will generate a random equation out of 3 saved equations (I'm going to try to write code for a quadratic equation
The Other Form should be where you submit your answer to the random equation that was generated from above. If your answer is correct to the random equation then the background turns green otherwise it turns red. (The second part, I can do on my own)
The Last Form basically reloads your website in the tab.
You just need to write your functions inside the script block (between <script> and </script>, replacing //JavaScript code goes herewith your code.
You have to define the three functions used in the onclick events of the buttons.
ClickMe(), Submit() and Reset()
Defining functions in Javascript
https://www.w3schools.com/js/js_functions.asp
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions
Clickme should get a random element from an array
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
Getting a random value from a JavaScript array
Maybe you'll need also some dom manipulation function to add the content of the equation somewhere
https://www.w3schools.com/js/js_htmldom_methods.asp
How to add content to html body using JS?
Submit() needs to get some input and compare it to the expected result, so you'll need some input fields on your submit form
https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms
https://www.w3schools.com/html/html_forms.asp
Or you should prompt the user to input the answer
https://www.w3schools.com/jsref/met_win_prompt.asp
https://www.webnots.com/create-alert-prompt-confirm-dialog-boxes-using-javascript/
As you are checking the answer to be valid. You'll need to check evaluating the equation exposed and maybe you need eval but remember
eval is evil
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval
https://javascriptweblog.wordpress.com/2010/04/19/how-evil-is-eval/
Your Reset() function just needs to reload the page
- How to reload a page using JavaScript
Related
In HTML structure we have
<html lang="tr">
It is very useful when you need to transform text to upper/lowercase with different languages.
<div style="text-transform: uppercase;" id="asd">iğüşçıâ</div>
I'm working on a single page application, so I can't refresh the page.
But web application is multilingual so I need to change "lang" attribute of html tag without refreshing page.
I tried:
document.documentElement.lang = "en"
It doesn't affect text-transform: uppercase;.
If I manually change the html lang attribute in HTML file and reload the page, it works fine.
How can I done this? Is there a way?
Thanks advance.
update:
Some Stackoverflow users marked this is about ajax, php things. I'm sure sure this question never asked before. This question NOT about ajax and php.
You can use Angularjs to change the language without reloading the page.
For changing the language, you can use the angularjs $scope and change the language of HTML without reloading.
You can use setAttribute for changing or adding new attributes from elements;
document.documentElement.setAttribute("lang","tr")
function changeLangTr() {
document.documentElement.setAttribute("lang","tr")
getText()
}
function changeLangEn() {
document.documentElement.setAttribute("lang","en")
getText()
}
function getText() {
var node = document.getElementById('text')
}
p {
margin-top: 30px;
font-size: 20px;
text-transform: uppercase;
}
p.upper {
text-transform: uppercase;
}
p#info {
font-size: 12px;
color: red;
margin-top: 0;
}
<html name="html" lang="tr">
<body>
<div id="home">
<button onclick='changeLangTr()'>
Change Language TR
</button>
<button onclick='changeLangEn()'>
Change Language EN
</button>
<p id="text">
Türkçe Karakterlerin Kullanımı (iğüşçıâ)
</p>
<strong>Now:</strong>
<p id="info">
Turkish Lowercase
</p>
</div>
</body>
</html>
How do I make a code that, when the input is a list of your TikTok followers, make a list of all that have over ex. 1000 followers?
Like I put in, for example, a .txt file of all my followers usernames on TikTok and it makes it into a list and then looks how many followers each individual follower has. That way I can see if any famous follows me.
I'm a beginner in programming.
Does not need to be good looking at all. I prefer html but other is ok.
This is what I've tried but it's only looking at one user at the time and you need to do the input manually, and its iframe:ing right from "realtimetiktok.com":
<html>
<head>
<title>TikTok Followers</title>
<style>
body {
background-color: #ff004f;
}
</style>
</head>
<body style = "text-align:center">
<h1 style = "color:green;">
</br>
Write a TikTok username here
</h1>
<div class="box red"></div>
</br></br></br>
<input autofocus required pattern="[^' ']+" type = "text" placeholder="Username" autocomplete="on" id="myInput">
<button type="button" onclick="getInputValue();">Get Value</button>
<iframe id="myFrame" scrolling="no" src="https://www.realtimetiktok.com/?user=samthemans" style="border: 0px none; width: 1890px; height: 726px; overflow: hidden position: relative; left: -100px; top: -100px relative"> </iframe>
<script>
function getInputValue(){
// Selecting the input element and get its value
var inputVal = document.getElementById("myInput").value;
let x = (inputVal);
document.getElementById("myFrame").src = "https://www.realtimetiktok.com/?user=" + x;
}
</script>
</body>
</html>
output:
a list of all users that have over ex. 1000 followers and some details about them. Like this:
[username 1] 1 326 followers
[username 2] 14 836 followers
[username 3] 1 482 followers
But the output can be in any other way as well.
Like others have said you seem a bit confused on how exactly to go about this and you may have picked a topic a bit too advanced for you. While no one here is going to write your code for you, I think you are going about this in the wrong direction if you do want to proceed with this. You need to do some webscraping to get your data. You added a python tag so I am assuming you know some python.
You need to know how to do the following for your idea to work:
1) Print console messages
2) Read from Text Files
3) Web Scrape -- Look at a library called Beautiful Soup, that will get you in the right direction
From there you just want to loop over each line in the text file, scrape for each one, and clean up what you get from scraping and print what you want.
That would be how I'd go about this, though that's assuming you have a cursory understanding of python.
I have seen many questions like this one, but my question is slightly different.
I wrote an HTML code that can execute another HTML code inside a <div>. The page looks like this:
The code of this page is this:
<html>
<meta name="viewport" content="width=device-width"/>
<style>
html, body{margin: 0; padding: 0;}
textarea {width:100%; height: 28%;}
div {display: block; width: 100%;}
</style>
<body onload="loadData()" onbeforeunload="storeData()" onunload="this.onbeforeunload()">
<div style="overflow: auto;">
<textarea id="code"></textarea>
</div>
<div>
<button onclick="run()" style="float: left;">Run</button>
<button onclick="setSize()" style="float: right;">Set size</button>
<input type="number" id="size" style="float: right; text-align: right;"/>
</div>
<div id="result" style="overflow: auto; height: 70%; border-top: 2px solid black;"></div>
</body>
<script>
const editor=document.getElementById('code');
function run()
{
var res=document.getElementById('result');
var input=editor.value;
res.innerHTML=input;
}
function setSize()
{
editor.style.fontSize=document.getElementById("size").value;
document.getElementsByTagName("button")[0].style.fontSize=document.getElementById("size").value;
document.getElementsByTagName("button")[1].style.fontSize=document.getElementById("size").value;
document.getElementsByTagName("input")[0].style.fontSize=document.getElementById("size").value;
}
function storeData()
{
var data=document.getElementById("code").value;
var txtSize=document.getElementById("size").value;
localStorage.setItem("stored", data);
localStorage.setItem("size", txtSize);
}
function loadData()
{
var data=localStorage.getItem("stored");
var txtSize=localStorage.getItem("size");
document.getElementById("code").value=data;
document.getElementById("size").value=txtSize;
editor.style.fontSize=txtSize;
document.getElementsByTagName("button")[0].style.fontSize=document.getElementById("size").value;
document.getElementsByTagName("button")[1].style.fontSize=document.getElementById("size").value;
document.getElementsByTagName("input")[0].style.fontSize=document.getElementById("size").value;
}
</script>
</html>
It is working absolutely correct, except one thing. The problem is that, if a <button> is created and the onclick attribute has this code: document.write('Some text');, then the whole page gets cleared. See these screenshots:
So, can you tell any way by which I can ensure that no changes can be done to the original page?
Please help a class 10 student.
Instead of having 'result' as a regular div element, which is meant to represent a section of the actual page, what you want here is to embed a whole separate page/context, which is something that iframe is used for.
I managed to accomplish what you wanted by replacing the div with an iframe, and the first line in the 'run' method with this:
var res=document.getElementById('result').contentDocument.body;
See this fiddle for an example.
The problem is that, if a is created and the onclick attribute has this code: document.write('Some text');, then the whole page gets cleared.
That is exactly what is supposed to happen when document.write() is called. That function always replaces the entire page with whatever is in the quotes.
The solution is to simply never call that method. If there is some reason why you want to call document.write, you need to explain what that is in your question so we can suggest an appropriate alternative.
When I want to convey an error message to the user regarding their input, I would like to inform them of the error but keep all field values already filled out/selected maintained. Although this is possible using a js alert box, the php page is not visible beneath the alert box until the alert is acknowledge and the alert box is just plain ugly.
Instead I would prefer to use something like:
echo "<fieldset id='fieldsetErr'>
<legend id='legendErr'>Error:</legend>
<p id='pErr'>" . $errMsg . "
<br><br>
<span style='padding-left:200px'>
<a href='searchCriteria.php'>
<button>Clear</button>
</a>
</span>
</p>
</fieldset>";
with CSS something like:
#fieldsetErr {
width: 500px;
background:
url(images/logo.jpg)
top center / 300px 300px
no-repeat
fixed
padding-box
content-box
red;
color: white;
}
#legendErr {
font-size: 20px;
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px red, 0 0 5px red;
}
#pErr {
margin-left: 20px;
}
This fieldset error message integrates nicely with the rest of the page's layout. Unfortunately when the "Clear" button is click of course a new instance of the searchCriteria.php is loaded and all the user's previous input is lost.
If I simply remove the Clear button and so the option to clear the error message, the user's input values are still maintained while they can make necessary corrections and re-submit. But is it possible to let the user clear the fieldset error message away after they have read it without clearing away all the values they have input to that point, if so how might it be done?
UPDATE:
I thought maybe I could do what I want by wrapping the fieldset error message in div tags:
echo '<div id="divErr">
<fieldset id="fieldsetErr">
<legend id="legendErr">Error:</legend>
<p id="pErr">' . $errMsg . '
<br><br>
<span style="padding-left:200px">
<button onclick=<script type="text/javascript">','removeDivErr();','</script>>Clear</button>
</span>
</p>
</fieldset>
</div>';
and using a js function to remove the fieldset element when the Clear button is clicked:
<script type="text/javascript">
function removeDivErr() {
var elem = document.getElementById('divErr');
elem.parentNode.removeChild(elem);
}
</script>
Although it does not work as pasted, I am uncertain whether or not it is because of the way I am trying to call/integrate the javascript into the php echo statement. I have tried quoting the php echo statement and javascript function call in different ways to see if I could coax it to work, but so far nadda. Can anybody confirm?
How can I extract text data from a text file using javascript? I am making an online dictionary. I can code HTML and CSS well but not javascript.
Word Will be entered in first textbox then search button will be clicked and results will be shown in bottom textbox.
The data in text file is like "apple|a juicy fruit"
(without the quotations"
Now I want the text in search field to check up words before "|" sign and if match is found word/words after "|" will be sent to result field.
How can I do this using javascript?
My HTML code for the project is below:
<html>
<head>
<title>Online Dictionary</title>
<style>
.field{
border: 2px solid black;
}
#result_field{
margin-top: 5px;
width: 247px;
height: 100px;
}
</style>
</head>
<body>
<input type="text" placeholder="Enter your word here..." name="search_field" id="search_field" class="field">
<input type="button" value="SEARCH" name="btn" id="btn" class="btn"> <br>
<input type="text" placeholder="Meaning here..." name="result_field" id="result_field" class="field">
</body>
</html>
Try using Ajax.
Ajax is what do a request to a file from a server, so with it you can:
Check velocity of user network;
Get content of file.
See this.
I made few simple functions, you can check them here.
To use one of the functions above you can add lines like these:
$GET('file.txt?c=0',function(result){/* Success function */},function(e){/* Error function */});
$GET('dictionary.txt?anyvalue=0',function(text){alert(text);},function(e){/* Error function */});
/* in ahead of the link you will have to include the ?urlvar=value to the function works, */
/* I still didn't leave the function complete */
Note: case you want to request a file from another server then the file has to allow servers to access it (to allow or not allow you can use PHP or htaccess).
As #Stephan Bijzitter said, you can use PHP (or ASP) - there you can result the right meaning of a word easily.
A example is:
if($_GET['word']=="PC"){echo "Meaning";}
switch($_GET['word']){case "Word":echo "A word?";break;}
/* In PHP, $_GET['word'] returns the value of a parameter in page URL called "word" */