Generate random list of words with JS - javascript

I'm trying to build a random JS word list generator but the code I have here just generates a single word. Actually I want it to generate a list of 30 words from a previously given list, it may be a 60 word list or 700 but the result should always be 30 with no duplicated words, but I don't know how to achieve this.
Also, I would like the visitors to introduce their own list of words and then click on "generate a new list of words" and then the page will randomize and give them a list of 30 words with different order every time they click the button.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title></title>
<style type="text/css">
form {
float:left;
padding:20px 20px 10px;
border:1px solid #999;
}
label {
float:left;
width:100px;
line-height:22px;
margin-bottom:10px;
font-size:12px;
}
input {
margin-bottom:10px;
}
</style>
<script type="text/javascript">
function init(){
words0=['art','car','bus','earth','camera','phone','sun','light','number',];
df=document.forms[0];
df.reset();
df[1].onclick=function() {
rnd0=Math.floor(Math.random()*words0.length);
df[0].value=words0[rnd0];
}
}
window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);
</script>
</head>
<body>
<form action="#">
<div>
<label>word one:</label><input type="text" readonly="readonly"><br>
<input type="button" value="Click here to get random words">
<input type="reset" value="Clear">
</div>
</form>
</body>
</html>


If you want to grab N items randomly from an array, a classical way of doing it is to :
randomly shuffle your array,
pick up the N first items of the suffled array
Example code :
function samples(items, number){
items.sort(function() {return 0.5 - Math.random()});
return items.slice(0, number);
}
Notice that the shuffle algorithm is probably not the best one, it is provided as an example, as mentioned by #Phylogenesis.
If you prefer to avoid reinvent wheels, you can also use undercore.js for example, that provides a sample method

Related

Typewriter effect with JavaScript

I am just new to JavaScript I do not understand how can I create such Typewriter effect, I am having problem in changing the color of some of its words. I have made something like this Sugar, Spice, everythingNice

Well mate the website you wanted to build (i guess) is made up of three.js for that rotating cube and for the typing effect you can use a simple easy and yet powerful js library - Typed.js
Include this in your html file:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.12/typed.min.js"></script>
<h3>Hey i am a<span class="typing"></span></h3>
Configure some basic options such as what are the different words to type,speed and the container you want to insert it onto:
var typed = new Typed(".typing",{ //specify the element
strings: ["Freelancer","Developer","Designer"], //multiple texts
typeSpeed: 100,
bacSpeed: 60,
loop: true
})
That's it! see it live below:
<!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>Typed js basic usage</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.12/typed.min.js"></script>
<style>
*{
font-family: sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.typing{
color: red;
}
</style>
</head>
<body>
<h3>Hey i am a <span class="typing"></span></h3>
<script>
var typed = new Typed(".typing",{
strings: ["Freelancer","Developer","Designer"],
typeSpeed: 100,
bacSpeed: 60,
loop: true
})
</script>
</body>
</html>
External links(for reference)
Typed.js docs

Algorithm: How to print a big shape of the letter

For example, when input is "y", it will print:
the output looks like this.
I use a front-end languages to show the example. I just generated nesting arrays as 9*9 grids to simulate the output. Then using for loop change them to HTML syntax. In this case, no matter what language I use, the key is the algorithm. I don't think my algorithm is efficient since I must generate 26 nesting arrays for 26 letters. Are there any efficient ways to solute this problem rather than create 26 nesting arrays?
$(document).ready(function(){
var letter_y=[
[0,0,0,0,0,0,0,0,0],
[0,1,0,0,0,0,0,1,0],
[0,1,0,0,0,0,0,1,0],
[0,1,0,0,0,0,0,1,0],
[0,1,1,1,1,1,1,1,0],
[0,0,0,0,1,0,0,0,0],
[0,0,0,0,1,0,0,0,0],
[0,0,0,0,1,0,0,0,0],
[0,0,0,0,1,0,0,0,0],
[0,0,0,0,0,0,0,0,0],
]
for(var x=0;x<letter_y.length;x++){
for(var j=0;j<letter_y[x].length;j++){
if(letter_y[x][j]===0)
$('.row').append('<div class="grid"></div>');
if(letter_y[x][j]===1)
$('.row').append('<div class="grid2"></div>');
}
$('.row').append('<br>');
}
});
.grid{
background-color: black;
width: 20px;
height: 20px;
display: inline-block;
margin:0px;
}
.row{
line-height: 0px;
}
.grid2{
background-color: blue;
width: 20px;
height: 20px;
display: inline-block;
}
<!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">
<title>fill_me_in</title>
<meta name="description" content="fill_me_in" >
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css " rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav id="nav_top" class="navbar navbar-inverse navbar-static-top">
<div class="container" id="main_container">
<a class="navbar-brand" href="http://api.jquery.com">Pac_man</a>
</div>
</nav>
<div class="container">
<div class="row">
</div>
</div>
<div class="own"></div>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<script src="application.js"></script>
</body>
</html>

There are two common ways to represent symbols - raster representation and vector representation. Since you already tried storing images for symbols as bit maps you can try vectors - e.g. "1" could be "line (0,0) to (0,10)".
If your main concern is size/how bitmaps look in code you can use strings ("010000010",...) or individual bits of numbers (that way 9x9 can be represented by 9 numbers).
Note: if you goal is to just render huge pixelated letters - there is likely matching font to do just that. Also you may need to figure out how to make such font available on the client.

Adjustable and multi-line label in HTML5

I am trying to write a canvas graph application by using HTML5 and JavaScript. The main element in this app is a box that the user is able to write a long text in it and the size of the box should adjust while writing the text. I realized that the best way is to use the textarea tag while the user wants to write in it and when the user loses the focus(blur event) on the textarea it will change to a label with the same value in the textarea. You can see the related code below:
<!DOCTYPE html public "-//w3c//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TB/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Editable Label</title>
<!--<link rel="stylesheet" href="box.css">-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#txt').blur(function () {
if ($('#txt').val().trim() != '') {
$('#txt').hide();
$('#lbl').html($('#txt').val());
$('#txt').val('');
}
});
$('#lbl').click(function () {
if ($('#lbl').html().trim() != '') {
$('#txt').show();
$('#txt').val($('#lbl').html());
$('#lbl').html('');
}
});
});
</script>
</head>
<body>
<div id="container" align="center" style="width:1300px; height:700px; position:relative;">
<canvas id="myCanvas" width="1300px" height="700px" style="border: 1px solid #323232;" ></canvas>
<span id="lbl" style="color: #ff0000; font-size: 14px; font-weight: bold; position:absolute; top:200px; left:170px;"></span>
<textarea id="txt" type="text" style="position:absolute; top:200px; left:170px;"></textarea>
</div>
</body>
</html>
I could make the textbox appear in multi-line by using textarea tag instead of the input tag but the problem is that I don't know how to make the label to appear in multi-line. I searched a lot and already used white-space:normal; and display:inline-block; and width: 20px; in styling the label but it didn't work. I am wondering if I need to adjust the label size (width and height) by using Jquery. If yes, how exactly do I have to do that?
Note that since the user is entering unknown amount of words I cannot use line breaking tags.
Any help will be highly appreciated.

I think what you want is
overflow:hidden; or overflow:visible;
so:
<textarea id="txt" type="text" style="position:absolute; top:200px; left:170px; overflow:hidden;"></textarea>
It would be easier to read your code if you used CSS though.
I'm not really sure what you're trying to do then, width:220px; made the text break for me. This also worked, and I believe it better matches what I think you're trying to do:
#lbl{
max-width:220px;
height:auto;
}

Trying to accomplish a 'slideshow' effect loading multiple pages

I'm fielding a request that someone essentially wants one master page with their logo at the top, and the remainder of the page will load a series of pages (populated by a static array) and then repeat itself.
My intent is to have a page load in the 'content' div element, wait a period of time (I only listed 2 seconds for testing purposes), and then the next page loads. When it reaches the end of the array, I want the array to reset so that this is continuously loading.
I'm sure there are probably better ways to do this, but through my research this seemed the simplest.
Any help, or pointing me in another direction is all greatly appreciated.
Editing for clarity:
What I'm looking for is one master page, which just simply has a header at the top of the page. The rest of the page would be composed of a single div element (or iFrame if need be) and the content of said element would change after a determined amount of time, automatically, with no input. The element would initially load 'testdata.php' which would be composed of multiple database calls, after a determined amount of time, that div element would reload 'testdata1.php', which is composed of completely different database calls.
I hope this helps better describe what I am hoping to achieve.
What I have so far:
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<script type="text/javascript" src="scripts_css/jquery.js"></script>
</head>
<body>
<div style="background-color: #E0E0E0; height: 150px; width: 100%; margins: 0 auto;">
<img src="images/logo.png"/>
</div>
<div id="content" style="height: 850px;"></div>
</body>
<script>
var linkArray=[ "testdata.php",
"testdata1.php"];
for (var i=0; i < linkArray.length; i++) {
setTimeout(function(){$("#content").load(linkArray[i])},2000);
if (i === (linkArray.length-1))
i = 0;
}
</script>

I know this isn't very helpful, and it doesn't directly address your problem, but you might want to try using jQuery (http://jquery.com/). You could have something like this:
$(document).ready(function() {
// Set timeout to 2 seconds
var array = ['page1', 'page2'];
document.write(array[1].href);
});
Or, you could use some server-side script like ruby, or PHP.

This ended up doing the trick for me:
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<script type="text/javascript" src="scripts_css/jquery.js"></script>
</head>
<body>
<div style="background-color: #E0E0E0; height: 150px; width: 100%; margins: 0 auto;">
<img src="images/logo.png"/>
</div>
<div id="content" style="height: 850px;"></div>
</body>
<script>
var linkArray=[ "testdata.php",
"testdata1.php"];
var timeout = 0;
var counter = 0;
var arrayCount = linkArray.length;
changeContent(timeout, counter, arrayCount);
function changeContent(def_timeout, def_counter, def_arrayCount) {
//setTimeout(function() {$("#content").load(linkArray[def_counter])}, def_timeout);
$("#content").load(linkArray[def_counter]);
def_counter++;
if (def_counter >= def_arrayCount)
def_counter = 0;
def_timeout = def_timeout + 5000;
setTimeout(function() {changeContent(def_timeout, def_counter, def_arrayCount)}, 5000);
}
</script>

Countdown Timer in Javascript won't run in Internet Explorer

I wrote this countdown timer, and it works in everything but IE. I get the restricted website from running scripts. But when I click that it is ok , the script doesn't run.
Is there a proper way to set up a javascript script to run after the pause for user ok?
Or is there a way to write it so it works for IE also.
I am not sending anything via innerHTML as code just numbers so I don't see that as the problem, and I rewrote it using the jQuery .html() function with the same results...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery Countdowwn Timer</title>
<style type="text/css">
span#days { font-size:20px;
color:#900;
font-weight:900;
}
span#hours { font-size:20px;
color:#903;
font-weight:900;
}
span#min { font-size:20px;
color:#906;
font-weight:900;
}
span#sec { font-size:20px;
color:#909;
font-weight:900;
}
span#date {font-size:22px;
font-weight:900;
color:#900;
}
span#mar {font-size:22px;
font-weight:900;
color:#03F;}
</style>
<script type="text/javascript">
function theTimer(){
var putday=document.getElementById("days");
var puthour=document.getElementById("hours");
var putmin =document.getElementById("min");
var putsec=document.getElementById("sec");
var marathon=new Date(2012,3,22,10,0,0,0);
var marathonCount=marathon.getTime();
var nowish=Date.now();
var dif=marathonCount-nowish;
var days=Math.floor(dif/(24*60*60*1000));
dif=dif-days*(24*60*60*1000);
var hours=Math.floor(dif/(60*60*1000));
dif=dif-hours*(60*60*1000);
var minutes=Math.floor(dif/(60*1000));
dif=dif-minutes*(60*1000);
var seconds=Math.floor(dif/1000);
putday.innerHTML="this stuffF";
putday.innerHTML=days;
puthour.innerHTML=hours;
putmin.innerHTML=minutes;
putsec.innerHTML=seconds;
var counter = setTimeout("theTimer()", 1000) };
</script>
</head>
<body onload="theTimer()">
<a href ="" style="text-decoration:none">
<center>
<p id="marathon">There are <span id="days"></span> days, <span id="hours"></span> hours, <span id="min"></span> minutes, and <span id="sec"></span> seconds left </p>
</center>
<center>
<p id="marathon">till the beginning of the Next <span id="mar">Marathon</span> on <span id="date">April 22, 2012.</span></p>
</center>
</a>
</body>
</html>

Thank you Naren for your comment about IE9 working.
I tracked it down to using Date.now()
That doesn't work in IE8 (which is one of the trial computer browsers I used) and probably earlier.
If I just do
new Date().getTime();
IE8 handles that.

Categories

Resources