I am thinking of making a "magic 8 ball" kind of website. I would like a version of the following code that looks more like the helix fossil website.
var answers = [
'Maybe.', 'Certainly not.', 'I hope so.', 'Not in your wildest dreams.',
'There is a good chance.', 'Quite likely.', 'I think so.', 'I hope not.',
'I hope so.', 'Never!', 'Fuhgeddaboudit.', 'Ahaha! Really?!?', 'Pfft.',
'Sorry, bucko.', 'Hell, yes.', 'Hell to the no.', 'The future is bleak.',
'The future is uncertain.', 'I would rather not say.', 'Who cares?',
'Possibly.', 'Never, ever, ever.', 'There is a small chance.', 'Yes!'];
document.getElementById('answerButton').onclick = function () {
var answer = answers[Math.floor(Math.random() * answers.length)];
document.getElementById('answerContainer').innerHTML = answer;
};
p, input, button {
font-family: sans-serif;
font-size: 15px;
}
input {
width: 200px;
}
<p> How can I help you today? </p>
<input type="text" placeholder="enter a question"></input>
<button id="answerButton"> Answer me </button>
<p id="answerContainer"></p>
Also, when I put this into the "insert code" feature in Weebly, it keeps showing the raw code above the elements. Any way I could clean this up or should I just use a different website creator?
I know nothing about CSS.
Below is a snippet that adds some styling to the basic code.
If you want to make a web page out of this, you can put the CSS inside style tags, the JavaScript inside script tags, and the HTML inside body tags.
Like this: right-click on my page and select "View Page Source" (or whatever your browser of choice calls it) to see how the page is organized.
Better yet, if the Weebly file manager allows it, put the CSS and JavaScript into external files and link to them in the HTML file.
window.onload = function () {
var answers = [
'Maybe.', 'Certainly not.', 'I hope so.', 'Not in your wildest dreams.',
'There is a good chance.', 'Quite likely.', 'I think so.', 'I hope not.',
'I would say so.', 'Never!', 'Fuhgeddaboudit.', 'Ahaha! Really?!?', 'Pfft.',
'Sorry, bucko.', 'Hell, yes.', 'Hell to the no.', 'The future is bleak.',
'The future is uncertain.', 'I would rather not say.', 'Who cares?',
'Possibly.', 'Never, ever, ever.', 'There is a small chance.', 'Yes!'];
var container = document.getElementById('answerContainer'),
opacityPercent,
previousAnswer;
function updateOpacity() {
opacityPercent += 1;
container.style.opacity = opacityPercent / 100;
if (opacityPercent < 100) {
window.requestAnimationFrame(updateOpacity);
}
}
function makeVisible() {
container.style.opacity = '0';
opacityPercent = -1;
updateOpacity();
}
opacityPercent = -1;
document.getElementById('questionArea').value = '';
document.getElementById('answerButton').onclick = function () {
while (true) {
var answer = answers[Math.floor(Math.random() * answers.length)];
if (answers.length == 1 || answer != previousAnswer) {
previousAnswer= answer;
break;
}
}
container.className = '';
container.innerHTML = answer;
makeVisible();
};
};
body {
background: #e8e8d6;
color: #333;
}
#wrapper {
width: 600px;
margin: 80px auto;
text-align: center;
}
p, input, button {
font-family: 'Source Sans Pro', sans-serif;
font-size: 24px;
}
#answerContainer {
opacity: 0;
}
p {
padding: 20px 0;
}
input {
width: 500px;
padding: 5px 15px;
background: #fff;
border: 2px solid #ddd;
outline: none;
}
input:focus {
border: 2px solid #888;
}
button {
background: #ffe;
color: #666;
border: 2px solid #666;
border-radius: 8px;
margin-left: 10px;
padding: 5px 15px;
outline: none;
}
button:hover {
background: #ffc;
color: #222;
border: 2px solid #222;
cursor: pointer;
}
<link rel="stylesheet" type="text/css"
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro">
<div id="wrapper">
<p> What do you want to know about the future? </p>
<p>
<input id="questionArea" type="text" placeholder="enter a question"></input>
</p>
<p>
<button id="answerButton"> Make a prediction </button>
</p>
<p id="answerContainer"></p>
</div>
Related
I want to achieve below picture functionality in react js. How to achieve this, Please Help. I have a list of differentiated words in a different category, like Organization, Person, Location. I want to separate those words denoting different colors and that category also.
I am done below code but not achieve what I want.
<text style={{background:"#A6E22D", borderRadius: "5px", color:'#1E1935'}}> By signing up, you agree to Terms of Service and </text><br/>
You may implement described feature by breaking your text into blocks of text matching and non-matching to your keywords, than render matching blocks as <span> nodes tagged (styled) accordingly:
const { useState } = React,
{ render } = ReactDOM,
rootNode = document.getElementById('root')
const srcText = `Amazon and Facebook are encouraging their employees in Seattle to stay home after workers for each company tested positive for the novel coronavirus.
Amazon (AMZN) revealed earlier this week that one of its Seattle-based employees has been diagnosed with the virus. On Wednesday, Facebook said a contractor who works at one of its offices in Seattle had tested positive.`
const sampleKeywords = [
{word: 'Amazon', tag: 'ORG'},
{word: 'Facebook', tag: 'ORG'},
{word: 'Seattle', tag: 'GEO'},
{word: 'earlier this week', tag: 'TIME'},
{word: 'on Wednesday', tag: 'TIME'}
]
const TaggedText = ({text, keywords}) => {
const rawKeywords = keywords.map(({word}) => word),
markedText = text.replace(new RegExp(rawKeywords.join('|'), 'gi'), w => `|${w}|`),
textBlocks = markedText.split('|').filter(textBlock => textBlock.length != 0)
return (
<span style={{lineHeight:'160%'}}>
{
textBlocks.map((textBlock,key) => {
const tag = (keywords.find(({word}) => word.toLowerCase() == textBlock.toLowerCase()) || {tag: null}).tag
return <span {...{key,...(tag && {tag})}}>{textBlock}{tag && <span className="tagLabel">{tag}</span>}</span>
})
}
</span>
)
}
render(<TaggedText text={srcText} keywords={sampleKeywords} />, rootNode)
span.tagLabel {
background: #fff;
border-radius: 3px;
font-size: 10px;
font-weight: bold;
margin-left: 10px;
color: grey;
}
span[tag="ORG"] {
background: #bf405c;
padding: 2px 10px;
border-radius: 5px;
color: #fff;
white-space: nowrap;
}
span[tag="GEO"] {
background: #3a8a2e;
padding: 2px 10px;
border-radius: 5px;
color: #fff;
white-space: nowrap;
}
span[tag="TIME"] {
background: #822e8a;
padding: 2px 10px;
border-radius: 5px;
color: #fff;
white-space: nowrap;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>
I'm new to programming in general. I'm learning HTML/CSS/Javascript atm.
I created a simple script that allow the user to change the font size of the paragraph element.
I tired my code is jsFiddle and it works fine, but when I copied it into an HTML document and started the page. The HTML and CSS are functioning properly, but the problem is: JavaScript is not working. Btw I'm using Chrome as a browser.
Is something wrong with my HTML document..? I'm so confused!
Here is the working jsFiddle: https://jsfiddle.net/o60gtvh8/
My HTML file (Download link / Dropbox):
https://www.dropbox.com/s/tl0npr5omefntv4/Font%20size%20changer.rar?dl=0
HTML file code ( Copy of the code in the HTML file provided in the download link above ):
<!doctype html>
<html>
<head>
<style>
h1 {
color: blue;
font-size: 25px;
margin: 10px;
}
h2 {
color: blue;
font-size: 15px;
margin: 10px;
}
p {
margin: 10px;
}
a {
margin: 10px;
font-size: 15px;
text-decoration: none;
border: 1px solid grey;
background-color: cyan;
color: black;
padding: 3px;
}
</style>
<script>
function sizeChanger(size) {
return function() {
document.body.style.fontSize = size + 'px';
};
}
var size10 = sizeChanger(10);
var size20 = sizeChanger(20);
var size30 = sizeChanger(30);
document.getElementById('size-10px').onclick = size10;
document.getElementById('size-20px').onclick = size20;
document.getElementById('size-30px').onclick = size30;
</script>
</head>
<body>
<h1>Tiger</h1>
<h2>(From Wikipedia, the free encyclopedia)</h2>
<p>The tiger (Panthera tigris) is the largest cat species, most recognizable for
their pattern of dark vertical stripes on reddish-orange fur with a lighter underside.
The species is classified in the genus Panthera with the lion, leopard, jaguar, and snow leopard.
</p>
Font size 10
Font size 20
Font size 30
</body>
</html>
Move your JavaScript to the end of the page before the closing body element. As it stands now you're trying to access elements that don't exist yet. jsFiddle works because by default they wrap the JavaScript code in a window.onload event.
h1 {
color: blue;
font-size: 25px;
margin: 10px;
}
h2 {
color: blue;
font-size: 15px;
margin: 10px;
}
p {
margin: 10px;
}
a {
margin: 10px;
font-size: 15px;
text-decoration: none;
border: 1px solid grey;
background-color: cyan;
color: black;
padding: 3px;
}
<h1>Tiger</h1>
<h2>(From Wikipedia, the free encyclopedia)</h2>
<p>The tiger (Panthera tigris) is the largest cat species, most recognizable for
their pattern of dark vertical stripes on reddish-orange fur with a lighter underside.
The species is classified in the genus Panthera with the lion, leopard, jaguar, and snow leopard.
</p>
Font size 10
Font size 20
Font size 30
<script>
function sizeChanger(size) {
return function() {
document.body.style.fontSize = size + 'px';
};
}
var size10 = sizeChanger(10);
var size20 = sizeChanger(20);
var size30 = sizeChanger(30);
document.getElementById('size-10px').onclick = size10;
document.getElementById('size-20px').onclick = size20;
document.getElementById('size-30px').onclick = size30;
</script>
So there's nothing really wrong with your code (although you should avoid legacy DOM notation like document.body.style.fontSize) -- you're just executing it too early.
In Anki, I have a note type where one card is effectively a cloze deletion, however I am using other cards at the same time, with the cloze deletion field in it. I've tried to use javascript to replace everything within two '\'s and it appears to work in the preview when editing, but when the card appears during normal use, only the first line appears as plain text. I'm using the desktop linux program for editing, but would also like to be able to use it in AnkiDroid.
So the question is: what's the problem and how can I fix it?
Front Template:
<script>
function showDef() {
document.getElementById("def").innerHTML = '{{Bedeutung 1}}'.replace(/^[^\/]+\/\*!?/, '').replace(/\*\/[^\/]+$/, '');
};
var initial = false;
var beispiel = (function () {/*{{Beispiel 1}}*/}).toString().replace(/^[^\/]+\/\*!?/, '').replace(/\*\/[^\/]+$/, '');
var splitBeispiel = beispiel.split('\\');
document.write(splitBeispiel[0] + "<n id='cloze'>[...]</n>" + splitBeispiel[2]);
</script>
<p onclick="showDef()" id="def">Click to show definition</p>
Styling:
.card {
font-family: arial;
font-size: 20px;
text-align: center;
color: black;
background-color: white;
}
#cloze {
font-family: arial;
font-size: 25px;
text-align: center;
color: blue;
background-color: white;
}
#def {
font-family: arial;
font-size: 15px;
text-align: center;
color: green;
background-color: white;
}
#beispiel {
font-family: arial;
font-size: 15px;
text-align: center;
color: orange;
background-color: white;
}
Back Template:
<script>
var initial = false;
var beispiel = (function () {/*{{Beispiel 1}}*/}).toString().replace(/^[^\/]+\/\*!?/, '').replace(/\*\/[^\/]+$/, '');
var splitBeispiel = beispiel.split('\\');
document.write(splitBeispiel[0] + "<n id='cloze'>" + splitBeispiel[1] +"</n>" + splitBeispiel[2]);
</script>
<hr id=answer>
{{Singular Nominativ}}
The 'Beispiel 1' field in the following example is "ein kirchlicher, ein \gesetzlicher\ Feiertag"
Screenshot of editor preview:
Screenshot of test:
I guess, you should look for the solution here.
Avoid using document.write in your templates and use document.getElementById("HTMLidToReplace").innerHTML = '<b>' + your_var + '</b>';, for example. Hope it helps.
So I made a bunch of divs stacked on each other, and I want each div to change its background color whenever its hover, but that's not what happens
When I hover an item its background color should change to green,
but it doesn't work even that I wrote div.oldiv:hover{background-color: #48FF0D;}
The problem is probably in CSS code.
Here is a snippet :
body{
background-color: #48FF0D;
}
#bigdiv {
height: 90%;
width: 100%;
}
.oldiv {
height: 0.390625%;
width: 100%;}
div.oldiv:hover{
background-color: #48FF0D;
}
#bigdiv2 {
height: 0;
width: 100%;
}
.btn {
border: none;
color: white;
padding: 14px 28px;
cursor: pointer;
}
.uptodown {
background-color: #e7e7e7;
color: black;
}
.uptodown:hover {
background: #ddd;
}
.l{
float: right;
}
<body>
<script>
var b = "",k = "",a,q,d;
for(a = 0;a<=256;a++){
d =" <div id=\"du\" class=\"oldiv\" style=\"background-color: rgb("+a+","+a+","+a+");\"></div>";
q =" <div id=\"du\" class=\"oldiv\" style=\"background-color:rgb("+(256-a)+","+(256-a)+","+(256-a)+");\"></div>";
b = b+"\n"+d;
k = k+"\n"+q;
}
window.onload = function (){
document.getElementById("bigdiv").innerHTML = b;
document.getElementById("bigdiv2").innerHTML = k;
}
function utd(a){
var bigdiv = document.getElementById("bigdiv");
var bigdiv2 = document.getElementById("bigdiv2");
if(a == 0){
bigdiv.style.height = "0";
bigdiv2.style.height= "90%";
}else{
bigdiv.style.height = "90%";
bigdiv2.style.height= "0";
}
}
</script>
<div id="bigdiv">
</div>
<div id="bigdiv2">
</div>
<div>
<button class="btn uptodown" onclick="utd(0)">white to black</button>
<button class="btn uptodown l" onclick="utd(1)">black to white</button>
</div>
</body>
Don't word about all the Javascript, its just to generate elements and adding them to HTML
I have no idea what the purpose of this code is, but I think I have fixed it..... Whatever it is :P
Your #bigdiv and #bigdiv2 percentage height were not working because the height of the document wasn't 100%. So I just added html, body {height:100%;} to fix that.
/* code added START */
html, body {
height:100%;
}
div.oldiv:hover {
background-color: #48FF0D!important;
}
/* code added END */
body{
background-color: #48FF0D;
}
#bigdiv {
height: 90%;
width: 100%;
}
.oldiv {
height: 0.390625%;
width: 100%;
}
/* div.oldiv:hover{background-color: #48FF0D;} */
#bigdiv2 {
height: 0;
width: 100%;
}
.btn {
border: none;
color: white;
padding: 14px 28px;
cursor: pointer;
}
.uptodown {
background-color: #e7e7e7;
color: black;
}
.uptodown:hover {
background: #ddd;
}
.l {
float: right;
}
<script>
var b = "",k = "",a,q,d;
for(a = 0;a<=256;a++){
d =" <div id=\"du\" class=\"oldiv\" style=\"background-color: rgb("+a+","+a+","+a+");\"></div>";
q =" <div id=\"du\" class=\"oldiv\" style=\"background-color:rgb("+(256-a)+","+(256-a)+","+(256-a)+");\"></div>";
b = b+"\n"+d;
k = k+"\n"+q;
}
function utd(a) {
var bigdiv = document.getElementById("bigdiv");
var bigdiv2 = document.getElementById("bigdiv2");
if(a == 0) {
bigdiv.style.height = "0";
bigdiv2.style.height= "90%";
} else {
bigdiv.style.height = "90%";
bigdiv2.style.height= "0";
}
}
</script>
<div id="bigdiv">
<script>document.write(b);</script>
</div>
<div id="bigdiv2">
<script>document.write(k);</script>
</div>
<div>
<button class="btn uptodown" onclick="utd(0)">white to black</button>
<button class="btn uptodown l" onclick="utd(1)">black to white</button>
</div>
Well, there is no use of Javascript here. I'm not able to understand what problem you're facing but refer here : https://www.w3schools.com/cssref/sel_hover.asp
CSS already has property of hover and can be used like element:hover {your properties inside like whatever event has to be happened on hover}. There is no need to use JS here. Hope this helps.
UPDATE:
I would also suggest you to follow good practice of writing JS code and CSS code in a separate file not in a HTML file.
This question already has answers here:
Input field for Tags separated by comma
(5 answers)
Closed 9 years ago.
I'd like to create an input field that people can type their skills into. When it's displayed on the front end of the site, each skill will be it's own element. So I'd like users to type their skills like this:
skill 1, skill 2, skill 3
and on the front end of the site, it should show like this:
[Skill 1] [Skill 2] [Skill 3].
So the comma separates each skill and then each skill will have some styling applied to it in CSS.
I've tried a few different techniques but non seem to work how I want them to, if someone could help me out here, I'd really appreciate it.
Thanks
Not without JavaScript (added the tags to your Question)
This example will allow you to continuously write your skills, while hitting , or Enter to 'divide' them.
jQuery(function($) {
$('#tags input').on('focusout', function() {
var txt = this.value.replace(/[^a-zA-Z0-9\+\-\.\#]/g, ''); // allowed characters list
if (txt) $(this).before('<span class="tag">' + txt + '</span>');
this.value = "";
this.focus();
}).on('keyup', function(e) {
// comma|enter (add more keyCodes delimited with | pipe)
if (/(188|13)/.test(e.which)) $(this).trigger('focusout');
});
$('#tags').on('click', '.tag', function() {
if (confirm("Really delete this tag?")) $(this).remove();
});
});
#tags {
float: left;
border: 1px solid #ccc;
padding: 4px;
font-family: Arial;
}
#tags span.tag {
cursor: pointer;
display: block;
float: left;
color: #555;
background: #add;
padding: 5px 10px;
padding-right: 30px;
margin: 4px;
}
#tags span.tag:hover {
opacity: 0.7;
}
#tags span.tag:after {
position: absolute;
content: "×";
border: 1px solid;
border-radius: 10px;
padding: 0 4px;
margin: 3px 0 10px 7px;
font-size: 10px;
}
#tags input {
background: #eee;
border: 0;
margin: 4px;
padding: 7px;
width: auto;
}
Add a skill and hit [,] or [Tab] or [Enter]<br><br>
<div id="tags">
<span class="tag">Photoshop</span>
<span class="tag">Illustrator</span>
<input type="text" value="" placeholder="Add a skill" />
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
Would you like to try this http://xoxco.com/projects/code/tagsinput/?
This is tags editor jquery plugin, simmilar to stackoverflow tags. I think, it is pretty nice. But in terms of your problem you would need some customizations.
if you are using client side scripting,
use jquery function split() the value with comma(',') to an array then append a css class to each array variable and display it.
var raw_data = "skill 1, skill 2, skill 3";
data_array = raw_data .split(",");
can access the elements by data_array[0],data_array[1] and data_array[2]
add or append these values to input field or html elements with .css( "color", "red" )