Random Note Generator

Random Note Generator

Ransom Note Generator Project (Javascript and HMTL)

For this project, you have to create a webpage that can be used to generate a ‘ransom’ demand from any text entered by the user.

For each letter it needs to be a different:

font (font type, font size, etc…)

color

border

angle (only tilted a little bit)

Solution 

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8″>

<title>Title</title>

<style>

#ransom span {

display: inline-block;

margin: 5px 10px;

}

.container {

width: 80%;

margin: auto;

}

#text {

width: 200px;

height: 40px;

padding: 5px;

border: 1px solid #000;

resize: none;

vertical-align: bottom;

}

#button {

vertical-align: bottom;

padding: 5px;

}

</style>

</head>

<body>

<div class=”container”>

<div class=”form”>

<textarea id=”text”></textarea>

<button id=”button”>Generate</button>

</div>

<div id=”ransom”>

</div>

</div>

<scriptsrc=”https://code.jquery.com/jquery-2.2.4.min.js”></script>

<script>

var fonts = [‘Arial’,

‘Helvetica’,

‘Times New Roman’,

‘Times’,

‘Courier New’,

‘Courier’,

‘Verdana’,

‘Georgia’,

‘Palatino’,

‘Garamond’,

‘Bookman’,

‘Comic Sans MS’,

‘Trebuchet MS’,

‘Arial Black’,

‘Impact’];

functiongetRandomFont() {

var rand = Math.floor(Math.random() * 15);

return fonts[rand];

}

functiongetRandomColor() {

var letters = ‘0123456789ABCDEF’;

var color = ‘#’;

for (var i = 0; i < 6; i++) {

color += letters[Math.floor(Math.random() * 16)];

}

return color;

}

functionrandomBetween(min, max) {

returnMath.floor(Math.random() * max) + min

}

$(‘#button’).click(function (ev) {

vartextArray = $(‘#text’).val().trim().split(”);

var $ransom = $(‘#ransom’);

$ransom.html(”);

textArray.forEach(function (t) {

var $ell = $(‘<span>’).text(t);

varbackgroundColor = getRandomColor();

console.log(‘rotate(‘ + randomBetween(0, 20) + ‘deg)’);

$ell.css({

‘background-color’: backgroundColor,

‘font-size’: randomBetween(40, 70),

‘font-family’: getRandomFont(),

‘border’: randomBetween(0, 3) + ‘px solid ‘ + getRandomColor(),

‘transform’: ‘rotate(‘ + randomBetween(0, 20) + ‘deg)’

});

$ransom.append($ell);

});

});

</script>

</body>

</html>