Function keeps resetting itself without being called - javascript

I am trying to make a number guessing game. Unfortunately, the count/guessNo variable keeps resetting itself, indicating that the newGame function is being ended prematurely. This appears to happen primarily when switching from one guess number to another. Please do not recommend changes to my HTML; this is for an online bootcamp and we are required to use the supplied HTML. Here's my code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hot || Cold</title>
<!-- Meta Tags -->
<meta charset="utf-8"/>
<!-- Stylesheets -->
<link rel="stylesheet" href="styles/reset.css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900,900italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="styles/style.css"/>
<!-- JavaScript -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<header> <!--Header -->
<!-- Top Navigation -->
<nav>
<ul class="clearfix">
<li><a class="what" href="#">What ?</a></li>
<li><a class="new" href="#">+ New Game</a></li>
</ul>
</nav>
<!-- Modal Information Box -->
<div class="overlay" id="modal">
<div class="content">
<h3>What do I do?</h3>
<div>
<p>This is a Hot or Cold Number Guessing Game. The game goes like this: </p>
<ul>
<li>1. I pick a <strong>random secret number</strong> between 1 to 100 and keep it hidden.</li>
<li>2. You need to <strong>guess</strong> until you can find the hidden secret number.</li>
<li>3. You will <strong>get feedback</strong> on how close ("hot") or far ("cold") your guess is.</li>
</ul>
<p>So, Are you ready?</p>
<a class="close" href="#">Got It!</a>
</div>
</div>
</div>
<!-- logo text -->
<h1>HOT or COLD</h1>
</header>
<section class="game"> <!-- Guessing Section -->
<h2 id="feedback">Make your Guess!</h2>
<form>
<input type="text" name="userGuess" id="userGuess" class="text" maxlength="3" autocomplete="off" placeholder="Enter your Guess" required/>
<input type="submit" id="guessButton" class="button" name="submit" value="Guess"/>
</form>
<p>Guess #<span id="count">0</span>!</p>
<ul id="guessList" class="guessBox clearfix">
</ul>
</section>
</body>
</html>
$(document).ready(function(){
$(".what").click(function(){
$(".overlay").fadeIn(1000);
});
$("a.close").click(function(){
$(".overlay").fadeOut(1000);
});
newGame();
});
//call newGame when user enters number and presses enter
function newGame() {
var guessNo = 0;
var x = Math.floor(Math.random() * 100) + 1;
$('#guessButton').click(function(){
guesser(x,guessNo);
});
$('.new').click(function(){
newGame();
});
}
function guesser(x,guessNo) {
//jQuery
var guess = parseInt(document.getElementById("userGuess").value, 10);
var y = Math.abs(x-guess);
var r = "";
//switch statement
if ((guess > 100) || (guess < 1) || (isNaN(guess) == true)) {
r = "please enter a number between 1 and 100";
}
else if (y >= 50) {
r = "Ice cold";
}
else if (y >= 30) {
r = "cold";
}
else if (y >= 20) {
r = "warm";
}
else if (y >= 10) {
r = "hot";
}
else if (y >= 1) {
r = "very hot";
}
else {
r = "correct!";
}
guessNo += 1;
//jQuery
document.getElementById("feedback").innerHTML = r;
document.getElementById("count").innerHTML = guessNo;
console.log("guess = " + guess);
console.log("x = " + x);
console.log("y = " + y);
console.log("r = " + r);
return guessNo;
$('#guessButton').click(function(){
guesser(x,guessNo);
});
}


Solved. So basically, the problem that I ran into was that the submit button in my original code kept resetting the entire page instead of just processing the information in the textboxes.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hot || Cold</title>
<!-- Meta Tags -->
<meta charset="utf-8"/>
<!-- Stylesheets -->
<link rel="stylesheet" href="styles/reset.css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900,900italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="styles/style.css"/>
<!-- JavaScript -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<header> <!--Header -->
<!-- Top Navigation -->
<nav>
<ul class="clearfix">
<li><a class="what" href="#">What ?</a></li>
<li><a class="new" href="#">+ New Game</a></li>
</ul>
</nav>
<!-- Modal Information Box -->
<div class="overlay" id="modal">
<div class="content">
<h3>What do I do?</h3>
<div>
<p>This is a Hot or Cold Number Guessing Game. The game goes like this: </p>
<ul>
<li>1. I pick a <strong>random secret number</strong> between 1 to 100 and keep it hidden.</li>
<li>2. You need to <strong>guess</strong> until you can find the hidden secret number.</li>
<li>3. You will <strong>get feedback</strong> on how close ("hot") or far ("cold") your guess is.</li>
</ul>
<p>So, Are you ready?</p>
<a class="close" href="#">Got It!</a>
</div>
</div>
</div>
<!-- logo text -->
<h1>HOT or COLD</h1>
</header>
<section class="game"> <!-- Guessing Section -->
<h2 id="feedback">Make your Guess!</h2>
<form>
<input type="text" name="userGuess" id="userGuess" class="text" maxlength="3" autocomplete="off" placeholder="Enter your Guess" required/>
<!-- should not be submit -->
<input type="submit" id="guessButton" class="button" name="submit" value="Guess"/>
</form>
<p>Guess #<span id="count">0</span>!</p>
<ul id="guessList" class="guessBox clearfix">
</ul>
</section>
</body>
</html>
CSS:
clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
width: 100%;
height: 100%;
background-color: #394264;
}
body {
position: relative;
width: 98%;
height: 96%;
margin: 0.8em auto;
font-family: 'Lato', Calibri, Arial, sans-serif;
background-color: #1F253D;
text-align: center;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
}
a {
text-decoration: none;
color: black;
}
ul li {
display: inline;
}
/*---------------------------------------------------------------------------------
Header Styles
---------------------------------------------------------------------------------*/
nav {
position: relative;
height: 10%;
padding: 1em;
}
nav ul li {
text-transform: uppercase;
font-weight: 700;
font-size: 1.2em;
}
nav ul li:first-child {
float: left;
}
nav ul li:last-child {
float: right;
}
nav a {
color: #fff;
}
h1 {
font-weight: 900;
font-size: 3em;
padding: 0.8em;
color: #fff;
}
/*style for hidden modal*/
.overlay {
width: 100%;
height: 100%;
color: #fff;
background: #e74c3c;
position: absolute;
top: 0;
left: 0;
margin: 0;
z-index: 1000;
display: none;
}
.content {
color: #fff;
background: #e74c3c;
position: relative;
height: auto;
width: 600px;
border-radius: 3px;
top: 15%;
margin: auto auto;
border: 1px solid rgba(0,0,0,0.1);
}
.content h3 {
margin: 0;
padding: 0.4em;
text-align: center;
font-size: 2.4em;
font-weight: 300;
opacity: 0.8;
background: rgba(0,0,0,0.1);
border-radius: 3px 3px 0 0;
}
.content > div {
padding: 15px 40px 30px;
margin: 0;
font-weight: 300;
font-size: 1.15em;
}
.content > div p {
margin: 0;
padding: 10px 0;
line-height: 2em;
text-align: justify;
}
.content > div ul {
margin-bottom: -30px;
padding: 0 0 30px 20px;
text-align: left;
}
.content > div ul li {
padding: 5px 0;
display: block;
list-style-type: disc;
line-height: 1.5em;
}
.content > div ul li strong{
text-decoration: underline;
}
.content > div a {
font-size: 0.8em;
background: #1F253D;
color: #95a5a6;
padding: 0.5em 2em;
margin-bottom: 50px;
border-radius: 3px;
}
/*---------------------------------------------------------------------------------
Game Section Styles
---------------------------------------------------------------------------------*/
.game {
position: relative;
background-color: #394264;
width: 380px;
height: 380px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
margin: 0 auto;
box-shadow: rgb(26, 31, 52) 1px 1px,
rgb(26, 31, 52) 2px 2px,
rgb(26, 31, 52) 3px 3px,
rgb(26, 31, 53) 4px 4px,
rgb(26, 32, 53) 5px 5px,
rgb(27, 32, 53) 6px 6px,
rgb(27, 32, 54) 7px 7px,
rgb(27, 32, 54) 8px 8px,
rgb(27, 32, 54) 9px 9px,
rgb(27, 33, 55) 10px 10px,
rgb(27, 33, 55) 11px 11px,
rgb(28, 33, 55) 12px 12px,
rgb(28, 33, 56) 13px 13px,
rgb(28, 34, 56) 14px 14px,
rgb(28, 34, 56) 15px 15px,
rgb(28, 34, 57) 16px 16px,
rgb(29, 34, 57) 17px 17px,
rgb(29, 34, 57) 18px 18px,
rgb(29, 35, 58) 19px 19px,
rgb(29, 35, 58) 20px 20px,
rgb(29, 35, 58) 21px 21px,
rgb(29, 35, 59) 22px 22px,
rgb(30, 35, 59) 23px 23px,
rgb(30, 36, 59) 24px 24px,
rgb(30, 36, 60) 25px 25px,
rgb(30, 36, 60) 26px 26px,
rgb(30, 36, 60) 27px 27px,
rgb(31, 37, 61) 28px 28px;
}
h2 {
margin: 0 auto;
background: #cc324b;
padding: 1em 0.4em;
font-size: 1.5em;
font-weight: 400;
display: block;
line-height: 1em;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
color: #fff;
}
.game p {
margin-top: 0.5em;
font-size: 1.8em;
padding-bottom: 0.5em;
}
#count {
color: #f39c12;
font-weight: 700;
font-size: 1.5em;
}
input {
width: 300px;
height: 50px;
display: block;
padding: 0.8em 0;
margin: 0.8em auto 0;
background: #50597b;
color: #fff;
border: solid 1px #1f253d;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
input.button {
background: #1F253D;
color: #95a5a6;
font-size: 2em;
padding: 0.2em;
-webkit-transition: background 1s ease-in-out;
-moz-transition: background 1s ease-in-out;
-ms-transition: background 1s ease-in-out;
-o-transition: background 1s ease-in-out;
transition: background 1s ease-in-out;
}
input.button:hover {
background: #e64c65;
color: #fff;
-webkit-transition: background 1s ease-in-out;
-moz-transition: background 1s ease-in-out;
-ms-transition: background 1s ease-in-out;
-o-transition: background 1s ease-in-out;
transition: background 1s ease-in-out;
cursor: pointer;
}
input.text {
text-align: center;
padding: 0.2em;
font-size: 2em;
}
input:focus {
outline: none !important;
}
::-webkit-input-placeholder {
color: #95a5a6;
}
:-moz-placeholder { /* Firefox 18- */
color: #95a5a6;
}
::-moz-placeholder { /* Firefox 19+ */
color: #95a5a6;
}
:-ms-input-placeholder {
color: #95a5a6;
}
ul.guessBox {
height: 80px;
margin: 10px auto 0;
background: #11a8ab;
padding: 0.5em;
display: block;
line-height: 2em;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
color: #fff;
overflow: auto;
}
ul.guessBox li {
display: inline;
background-color: #1a4e95;
padding: 0.3em;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width: 95%;
margin: 0.2em;
color: #fff;
}
Javascript:
$(document).ready(function(){
$(".what").click(function(){
$(".overlay").fadeIn(1000);
});
gameState = {};
$("a.close").click(function(){
$(".overlay").fadeOut(1000);
});
$('#guessButton').click(function(){
guesser();
console.log("test");
});
$('.new').click(function(){
newGame();
});
});
function newGame() {
gameState.guessNumber = 0;
gameState.number = Math.floor(Math.random() * 100) + 1;
}
function guesser() {
//jQuery
event.preventDefault();
var x = gameState.number
var guess = parseInt($('#userGuess').val());
var y = Math.abs(x-guess);
var r = "";
if ((guess > 100) || (guess < 1) || (isNaN(guess) == true)) {
r = "please enter a number between 1 and 100";
}
else if (y >= 50) {
r = "Ice cold";
}
else if (y >= 30) {
r = "cold";
}
else if (y >= 20) {
r = "warm";
}
else if (y >= 10) {
r = "hot";
}
else if (y >= 1) {
r = "very hot";
}
else {
r = "correct!";
}
gameState.guessNumber ++;
document.getElementById("feedback").innerHTML = r;
document.getElementById("count").innerHTML = gameState.guessNumber;
console.log("guess = " + guess);
console.log("x = " + x);
console.log("y = " + y);
console.log("r = " + r);
//return guessNo;
}

Related

Open a multiple modal automatically

I have a multiple modal with next/previous buttons. I want my modal to open automatically as soon as the page loads.
For now I have to press the "Open modal" button, I want to remove that button.
I appreciate the help
Open the modal as soon as the page loads
Remove the "Open modal" button
The modal is multiple
$(document).ready(function() {
var data = [];
currentModal = 0;
$('.modalDialog').each(function() {
data.push({
id: $(this).attr('id'),
order: $(this).data('modalorder')
});
})
$('#openModalBtn').click(function() {
currentModal = 0;
window.location.href = "#" + data[currentModal].id;
$('#' + data[currentModal].id).find('.getAssignment2').prop('disabled', true);
})
// prev
$('.getAssignment2').click(function() {
if (currentModal > 0) {
currentModal--;
window.location.href = "#" + data[currentModal].id;
} else {
window.location.href = '#'
}
})
// next
$('.getAssignment').click(function() {
if (currentModal < data.length - 1) {
currentModal++;
if (currentModal === data.length - 1)
$('#' + data[currentModal].id).find('.getAssignment').prop('disabled', true);
window.location.href = "#" + data[currentModal].id;
} else {
window.location.href = '#'
}
})
})
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity: 0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity: 1;
pointer-events: auto;
}
.modalDialog>div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px;
border-radius: 10px;
background: #fff;
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
.getAssignment {
cursor: pointer;
background: linear-gradient(to left, #ffa400 0%, #ffa400 0%, #ff5f00f0 75%) !important;
border: none;
border-radius: 25px;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
padding: 5px 30px;
margin-top: 10px;
}
.getAssignment:hover {
background: linear-gradient(to left, #90d2fb 0%, #0891d2 0%, #09629b 55%) !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<input type="button" id="openModalBtn" value="Open Modal">
<div id="openModal1" class="modalDialog" data-modalorder="1">
<div>
X
<h3 style="text-align: center; font-weight: 600;">Hello</h3>
<p style="text-align: center;">Answer the questions</p>
<center>
<input class="getAssignment" type="button" value="Iniciar">
</center>
</div>
</div>
<div id="openModal2" class="modalDialog" data-modalorder="2">
<div>
X
<h3 style="text-align: center; font-weight: 600;">Birthday</h3>
<center>
<input type="date" id="birthday" name="birthday">
<br>
<input class="getAssignment" type="button" value="Siguiente">
</center>
</div>
</div>
<div id="openModal3" class="modalDialog" data-modalorder="3">
<div>
X
<h2 style="text-align: center; font-weight: 600;">Gender</h2>
<center>
<select name="work_days" id="id_work_days" multiple>
<option value="hombre">Man</option>
<option value="mujer">Women</option>
</select>
<input class="getAssignment" type="button" value="Siguiente">
</center>
</div>
</div>

Move your open modal code into a separate named function, so that you can use it in 2 places
call directly in the document ready function
register it to the click handler
$(document).ready(function() {
var data = [];
currentModal = 0;
$('.modalDialog').each(function() {
data.push({
id: $(this).attr('id'),
order: $(this).data('modalorder')
});
// call open modal on document ready
openModal();
})
// register the named function to the click handler
$('#openModalBtn').click((event)=>openModal());
// moved to a separate named function, so it can be called directly
function openModal(){
currentModal = 0;
window.location.href = "#" + data[currentModal].id;
$('#' + data[currentModal].id).find('.getAssignment2').prop('disabled', true);
}
// prev
$('.getAssignment2').click(function() {
if (currentModal > 0) {
currentModal--;
window.location.href = "#" + data[currentModal].id;
} else {
window.location.href = '#'
}
})
// next
$('.getAssignment').click(function() {
if (currentModal < data.length - 1) {
currentModal++;
if (currentModal === data.length - 1)
$('#' + data[currentModal].id).find('.getAssignment').prop('disabled', true);
window.location.href = "#" + data[currentModal].id;
} else {
window.location.href = '#'
}
})
})
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity: 0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity: 1;
pointer-events: auto;
}
.modalDialog>div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px;
border-radius: 10px;
background: #fff;
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
.getAssignment {
cursor: pointer;
background: linear-gradient(to left, #ffa400 0%, #ffa400 0%, #ff5f00f0 75%) !important;
border: none;
border-radius: 25px;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
padding: 5px 30px;
margin-top: 10px;
}
.getAssignment:hover {
background: linear-gradient(to left, #90d2fb 0%, #0891d2 0%, #09629b 55%) !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<input type="button" id="openModalBtn" value="Open Modal">
<div id="openModal1" class="modalDialog" data-modalorder="1">
<div>
X
<h3 style="text-align: center; font-weight: 600;">Hello</h3>
<p style="text-align: center;">Answer the questions</p>
<center>
<input class="getAssignment" type="button" value="Iniciar">
</center>
</div>
</div>
<div id="openModal2" class="modalDialog" data-modalorder="2">
<div>
X
<h3 style="text-align: center; font-weight: 600;">Birthday</h3>
<center>
<input type="date" id="birthday" name="birthday">
<br>
<input class="getAssignment" type="button" value="Siguiente">
</center>
</div>
</div>
<div id="openModal3" class="modalDialog" data-modalorder="3">
<div>
X
<h2 style="text-align: center; font-weight: 600;">Gender</h2>
<center>
<select name="work_days" id="id_work_days" multiple>
<option value="hombre">Man</option>
<option value="mujer">Women</option>
</select>
<input class="getAssignment" type="button" value="Siguiente">
</center>
</div>
</div>

The Code is not generating a file for cookie in browser

I have a html and Javascript code which sets a cookie and fetches from a cookie. I copied the code for JS and wrote the code for HTML , but I am unable to get the cookie. Here is my code
<!DOCTYPE html>
<html>
<head>
<script>
function setCookie(cname,cvalue,exdays) { // sets the cookie
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
var user=getCookie("username");
if (user != "") {
alert("Welcome again " + user);
} else {
<!--user = prompt("Please enter your name:","");-->
if (user != "" && user != null) {
setCookie("username", user, 30);
}
}
}
</script>
<style> // CSS details for login page creation .
html, body {
width: 100%;
height: 100%;
font-family: "Helvetica Neue", Helvetica, sans-serif;
color: #444;
-webkit-font-smoothing: antialiased;
background-image: url("bg.jpg");
}
#container {
position: fixed;
width: 500px;
height: 395px;
top: 25%;
left: 30%;
margin-top: -5px;
margin-left: -200x;
background: #fff;
border-radius: 30px;
border: 1px solid #ccc;
box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}
form {
margin: 0 auto;
margin-top: 20px;
}
label {
color: #555;
display: inline-block;
margin-left: 18px;
padding-top: 10px;
font-size: 14px;
}
p a {
font-size: 11px;
color: #aaa;
float: right;
margin-top: -13px;
margin-right: 20px;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
transition: all .4s ease;
}
p a:hover {
color: #555;
}
input {
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 12px;
outline: none;
}
input[type=text],
input[type=password] {
color: #777;
padding-left: 10px;
margin: 10px;
margin-top: 12px;
margin-left: 18px;
width: 290px;
height: 35px;
border: 1px solid #c7d0d2;
border-radius: 2px;
box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f7f8;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
transition: all .4s ease;
}
input[type=text]:hover,
input[type=password]:hover {
border: 1px solid #b6bfc0;
box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .7), 0 0 0 5px #f5f7f8;
}
input[type=text]:focus,
input[type=password]:focus {
border: 1px solid #a8c9e4;
box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #e6f2f9;
}
#lower {
background: #ecf2f5;
width: 100%;
height: 69px;
margin-top: 20px;
box-shadow: inset 0 1px 1px #fff;
border-top: 1px solid #ccc;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
input[type=checkbox] {
margin-left: 20px;
margin-top: 30px;
}
.check {
margin-left: 3px;
font-size: 11px;
color: #444;
text-shadow: 0 1px 0 #fff;
}
input[type=submit] {
float: right;
margin-right: 20px;
margin-top: 20px;
width: 80px;
height: 30px;
font-size: 14px;
font-weight: bold;
color: #fff;
background-color: #acd6ef; /*IE fallback*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#acd6ef), to(#6ec2e8));
background-image: -moz-linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%);
background-image: linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%);
border-radius: 30px;
border: 1px solid #66add6;
box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .5);
cursor: pointer;
}
input[type=submit]:hover {
background-image: -webkit-gradient(linear, left top, left bottom, from(#b6e2ff), to(#6ec2e8));
background-image: -moz-linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%);
background-image: linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%);
}
#imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
img.infosys {
width: 50%;
}
</style>
</head>
<body>
<form method = "post">
<div id="container">
<div id="imgcontainer">
<img src="pic.png" alt="pic Logo" class="pic" >
</div>
<br/>
<label for="username">Username:</label>
<input type="text" id="username" name="username" >
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<div id="lower">
<input type="checkbox"><label class="check" for="checkbox">Keep me logged in</label>
<input type="submit" value="Login" onClick="checkCookie()">
</div>
</form>
</div>
</body>
</html>
How do I know if the username is stored successfully? Please do let me know , what mistake I'm doing and where I am going wrong.

You are having 2 issues in your code. #camen6ert mentioned one of the issue and the second issue is that you are passing user variable to the setCookie() function which is empty and However, the cookie name should not be empty.
You need to replace your this part of your code:
if (user != "" && user != null) {
setCookie("username", user, 30);
}
with this one:
if (user != "" || user != null) {
setCookie("username", document.getElementById("username").value, 30);
}
Hope, it works for you.

There are a bunch of issues here that I will try to address:
<!-- --> is an HTML comment - this is not how you comment out JS code, and results in a fatal syntax error. so <!--user = prompt("Please enter your name:","");--> should be // user = prompt("Please enter your name:",""); if you want to comment out that line.
Since you commented out this line, the value of the variable user never gets set, and the if statement that follows it never evaulates to true and executes, since the variable is indeed equal to "". Either uncomment this line, or see note at bottom about fetch username value.
You are using "onClick" when you should be using "onclick" - it should be <input type="submit" value="Login" onclick="checkCookie()">
If you are trying to grab the username value from the form and save it into the cookie, you need to add code to that. Like:
function checkCookie() {
var user=getCookie("username");
if (user != "") {
alert("Welcome again " + user);
} else {
user = document.getElementById("username").value;
if (user != "" && user != null) {
setCookie("username", user, 30);
}
}
}
Furthermore, if you are trying to interact with a form before it is submitted, you are much better off attaching your function to the form's onsubmit event.

Change color of a input value represented as text

I created a interest calculator and i want the money amount and interest to turn to color green and not the whole text string.
So far I've tried with different type of dom manipulations, but haven't been successful in singeling out these two values. document.getElementById("resultat").style.color = "green"; will turn the whole text to green...
In my code i have the var startAar and the var rente, the two is as a input value and shown in a textarea.
How can i accomplish this?
<!DOCTYPE html>
<html>
<head>
<title>Rente Kalkulator</title>
<meta charset="utf-8">
<script src="https://use.fontawesome.com/af4e45f5ea.js"></script>
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon.ico">
<script type="text/javascript">
window.onload = btn;
function btn() {
document.getElementById("btn").onclick = regnUt;
}
function regnUt() {
var startAar = 1; // Start år er satt til 1
var pengeBelop = document.getElementById("pengeBelop").value; // Bruker input i "Pengebeløp"
var antallAar = document.getElementById("antallAar").value; // Bruker input i "Antall år"
var rente = document.getElementById("rente").value; // Bruker input i "Rente"
for (var antallAar; startAar <= antallAar; startAar++) { // Sjekk om brukers "Antall år" input er mindre en startAar, startAar = 1, legg til 1 til startAar samsvarer antallAar
if (startAar < antallAar) { // Om startAar er mindre en antallAar, legg til startAar til pengeBelop
pengeBelop += startAar;
}
pengeBelop = pengeBelop * (1+rente/100); // Formel for rente
document.getElementById("resultat").innerHTML += "Etter " + startAar + " år " + "har jeg " + pengeBelop.toFixed(0) + "kr" + " om renten er på " + rente + "%" + ("\n");
document.getElementById("resultat").style.border = " 2px solid #6dc066";
}
}
</script>
<style type="text/css">
#import url('https://fonts.googleapis.com/css?family=Roboto');
* {
margin: 0;
padding: 0;
}
body {
height: 100%;
text-align: center;
background-color: #f7f7f7;
font-family: 'Roboto', sans-serif;
}
h1 {
padding-top: 3%;
text-align: center;
letter-spacing: 3px;
color: #f7f7f7;
font-size: 35px;
text-shadow: 1px 1px 1px #000000;
transition-duration: 0.4s;
}
h1:hover {
font-size: 38px;
}
a {
text-decoration: none;
color: #f7f7f7;
}
h3 {
background-color: #f7f7f7;
color: #333333;
text-align: left;
padding-left: 10px;
padding-top: 12%;
padding-bottom: 5px;
font-size: 24px;
}
#header {
height: 25vh;
width: 100%;
background-color: #6dc066;
display: block;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#kalkulator {
background-color: #f7f7f7;
float: left;
padding-left: 15%;
margin-top: 15px;
}
#resultat {
float: right;
margin-top: 5%;
margin-right: 7%;
font-family: 'Roboto', sans-serif;
font-size: 16px;
padding-left: 70px;
line-height: 25px;
resize: none;
text-align: left;
}
#resultat:focus {
outline: none;
border: 2px solid #6dc066;
}
input {
padding-top: 12px;
padding-bottom: 12px;
padding-right: 130px;
padding-left: 10px;
float: left;
text-align: left;
font-size: 22px;
transition-duration: 0.4s;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
}
input:focus {
outline: none;
border: 2px solid #6dc066;
background-color: #eeeeee;
}
button {
margin-top: 25px;
padding: 15px 40px;
border-style: none;
transition-duration: 0.4s;
border-radius: 8px;
color: white;
font-size: 16px;
background-color: #6dc066;
font-family: 'Roboto', sans-serif;
}
button:hover {
padding: 17px 70px;
font-size: 18px;
background-color: #333333;
color: #f7f7f7;
}
button:focus {
outline: none;
}
button:active {
background-color: #333333;
box-shadow: 0 5px #666;
transform: translateY(8px);
}
</style>
</head>
<body>
<div id="header">
<h1>Rentekalkulator<br/><i class="fa fa-money" aria-hidden="true"></i></h1>
</div>
<div id="kalkulator">
<h3>Pengebeløp:</h3>
<input type="number" id="pengeBelop" placeholder="kr"><br/>
<h3>Antall år:</h3>
<input type="number" id="antallAar" placeholder="år"><br/>
<h3>Rente:</h3>
<input type="number" id="rente" placeholder="%"><br/>
<button type="button" id="btn">Regn ut</button><br/>
</div>
<textarea readonly cols='55' rows='15' id="resultat"></textarea>
</body>
</html>
`

your question is not clear , but i sugguest you to add this to the end of your style tag (I mean after button:active selectpr):
input[type='text'], input[type='number'],textarea{
color: green;
}

You can not style individual words within a textarea element, the style is applied to all of the text in the textarea.
If the resultat element is only for displaying a message to the user and not for inputting values, then perhaps you can replace it with a div element and inside that div wrap the text-parts that you want to highlight with span elements:
The HTML: <div id="resultat"></div>, set height and width in CSS.
The javascript:
document.getElementById("resultat").innerHTML =
"Etter "+"<span class='startAar'>"+startAar+" år "+"</span>"+
"har jeg "+"<span class='belop'>"+pengeBelop.toFixed(0)+"kr"+"</span>"+
"om renten er på "+"<span class='rente'>"+rente+"%"+"</span>"+
("\n");
The CSS:
.startAar, .belop, .rente {
color: green;
}
#resultat {
height: 100px;
width: 300px;
}

overlap of div over another section of the body when trying to insert

I hava a chart : code for chart
I am trying to put this chart within a website.website
Problem is that one div overflows the other as can be seen in the website.
I tried changing the position of the chart to relative from absolute.It doesnot work.
What may be the issue.Why is this happening ?Any idea.
fiddle related to the website :My code so far (experiment here)
My Code for the website( everything is available in above fiddle link) :
'use strict';
var dataset = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
// let colors = ['#8dd3c7', '#ffffb3', '#bebada', '#fb8072', '#80b1d3', '#fdb462', '#b3de69', '#fccde5', '#d9d9d9', '#bc80bd'];
let colors = ['#67001f', '#b2182b', '#d6604d', '#f4a582', '#fddbc7', '#e0e0e0', '#bababa', '#878787', '#4d4d4d', '#1a1a1a', 'white', 'white'];
var months = ['January - 2016', 'February - 2016', 'March - 2016', 'April - 2016', 'May - 2016', 'June - 2016', 'July - 2016', 'August - 2016', 'September - 2016', 'October - 2016', 'November - 2016', 'December - 2016'];
var dataWeeks = ["Week 1: 32<br>Week 2: 54<br>Week 3: 19<br>Week 4: 12", "Week 5: 22<br>Week 6: 14<br>Week 7: 12<br>Week 8: 03<br>Week 9:44", "Week 10: 14<br>Week 11: 11<br>Week 12: 23<br>Week 13:20 <br>Quarter 1 :25", "Week 14: 53<br>Week 15: 16<br>Week 16: 11 <br>Week 17:33", "Week 18: 52<br>Week 19: 22<br>Week 20: 12 <br>Week 21 :09 <br>Week 22:34", "Week 23: 59<br>Week 24: 87 <br>Week 25:36<br>Week 26:78<br>Quarter 2 :56<br>Half Yearly 1 :98", "Week 27: 69<br>Week 28: 33<br>Week 29: 11<br>Week 30: 65", "Week 31: 69<br>Week 32: 33<br>Week 33: 99<br>Week 34: 66<br>Week 35: 19", "Week 36: 84<br>Week 37: 16<br>Week 38: 66<br>Week 39: 11<br>Quarter 3 : 77", "Week 40: 86<br>Week 41: 21<br>Week 42: 52<br>Week 43: 12<br>Week 44: 37", "Week 45: 90<br>Week 46: 69<br>Week 47: 19<br>Week 48: 17", "Week 49:33 <br>Week 50:09 <br>Week 51:44 <br>Week 52 : 89<br>Quarter 4 :66<br>Half Yearly 2:99"];
var width = document.querySelector('.chart-wrapper').offsetWidth,
height = document.querySelector('.chart-wrapper').offsetHeight,
minOfWH = Math.min(width, height) / 2,
initialAnimDelay = 300,
arcAnimDelay = 150,
arcAnimDur = 3000,
secDur = 1000,
secIndividualdelay = 150;
var radius = undefined;
// calculate minimum of width and height to set chart radius
if (minOfWH > 200) {
radius = 200;
} else {
radius = minOfWH;
}
// append svg
var svg = d3.select('.chart-wrapper').append('svg').attr({
'width': width,
'height': height,
'class': 'pieChart'
}).append('g');
svg.attr({
'transform': 'translate(' + width / 2 + ', ' + height / 2 + ')'
});
// for drawing slices
var arc = d3.svg.arc().outerRadius(radius * 0.6).innerRadius(radius * 0.45);
// for labels and polylines
var outerArc = d3.svg.arc().innerRadius(radius * 0.85).outerRadius(radius * 0.85);
// d3 color generator
// let c10 = d3.scale.category10();
var tooltip = d3.select("body").append("div").attr("class", "tooltip").style("opacity", 0);
var pie = d3.layout.pie().value(function(d) {
return d;
});
var draw = function draw() {
svg.append("g").attr("class", "lines");
svg.append("g").attr("class", "slices");
svg.append("g").attr("class", "labels");
// define slice
var slice = svg.select('.slices').datum(dataset).selectAll('path').data(pie);
slice.enter().append('path').attr({
'fill': function fill(d, i) {
return colors[i];
},
'd': arc,
'stroke-width': '25px'
}).attr('transform', function(d, i) {
return 'rotate(-180, 0, 0)';
}).style('opacity', 0).transition().delay(function(d, i) {
return i * arcAnimDelay + initialAnimDelay;
}).duration(arcAnimDur).ease('elastic').style('opacity', 1).attr('transform', 'rotate(0,0,0)');
slice.transition().delay(function(d, i) {
return arcAnimDur + i * secIndividualdelay;
}).duration(secDur).attr('stroke-width', '5px');
var midAngle = function midAngle(d) {
return d.startAngle + (d.endAngle - d.startAngle) / 2;
};
var text = svg.select(".labels").selectAll("text").data(pie(dataset));
text.enter().append('text').attr('dy', '0.35em').style("opacity", 0).attr("cursor", "default").style('fill', function(d, i) {
return colors[i];
}).text(function(d, i) {
return months[i];
}).attr('transform', function(d) {
// calculate outerArc centroid for 'this' slice
var pos = outerArc.centroid(d);
// define left and right alignment of text labels
pos[0] = radius * (midAngle(d) < Math.PI ? 1 : -1);
return 'translate(' + pos + ')';
}).style('text-anchor', function(d) {
return midAngle(d) < Math.PI ? "start" : "end";
}).transition().delay(function(d, i) {
return arcAnimDur + i * secIndividualdelay;
}).duration(secDur).style('opacity', 1);
text.on("mousemove", function(d, i) {
tooltip.html(dataWeeks[i])
.style('top', d3.event.pageY - 6 + 'px')
.style('left', d3.event.pageX + 14 + 'px')
.style("opacity", 1);
}).on("mouseout", function(d) {
tooltip.style("opacity", 0);
});
var polyline = svg.select(".lines").selectAll("polyline").data(pie(dataset));
polyline.enter().append("polyline").style("opacity", 0.5).attr('points', function(d) {
var pos = outerArc.centroid(d);
pos[0] = radius * 0.95 * (midAngle(d) < Math.PI ? 1 : -1);
return [arc.centroid(d), arc.centroid(d), arc.centroid(d)];
}).transition().duration(secDur).delay(function(d, i) {
return arcAnimDur + i * secIndividualdelay;
}).attr('points', function(d) {
var pos = outerArc.centroid(d);
pos[0] = radius * 0.95 * (midAngle(d) < Math.PI ? 1 : -1);
return [arc.centroid(d), outerArc.centroid(d), pos];
});
};
draw();
var button = document.querySelector('button');
var replay = function replay() {
d3.selectAll('.slices').transition().ease('back').duration(500).delay(0).style('opacity', 0).attr('transform', 'translate(0, 250)').remove();
d3.selectAll('.lines').transition().ease('back').duration(500).delay(100).style('opacity', 0).attr('transform', 'translate(0, 250)').remove();
d3.selectAll('.labels').transition().ease('back').duration(500).delay(200).style('opacity', 0).attr('transform', 'translate(0, 250)').remove();
setTimeout(draw, 800);
};
.fl-lt {
float: left;
}
.fl-rt {
float: right;
}
/* Clear Floated Elements
---------------------------------*/
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:before,
.clearfix:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:after {
clear: both;
}
.figure {
margin: 0px;
}
img {
max-width: 100%;
}
a,
a:hover,
a:active {
outline: 0px !important
}
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.1.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
/* Primary Styles
---------------------------------*/
body {
background: #fff;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: normal;
color: #888888;
margin: 0;
}
h2 {
font-size: 34px;
color: #222222;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
letter-spacing: -1px;
margin: 0 0 15px 0;
text-align: center;
text-transform: uppercase;
}
h3 {
font-family: 'Montserrat', sans-serif;
color: #222222;
font-size: 16px;
margin: 0 0 5px 0;
text-transform: uppercase;
font-weight: 400;
}
h6 {
font-size: 16px;
color: #888888;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
text-align: center;
margin: 0 0 60px 0;
}
p {
line-height: 24px;
margin: 0;
}
/* Navigation
---------------------------------*/
.main-nav-outer {
padding: 0px;
border-bottom: 1px solid #dddddd;
box-shadow: 0 4px 5px -3px #ececec;
position: relative;
background: #fff;
}
.main-nav {
text-align: center;
margin: 10px 0 0px;
padding: 0;
list-style: none;
}
.main-nav li {
display: inline;
margin: 0 1px;
}
.main-nav li a {
display: inline-block;
color: #222222;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
text-decoration: none;
line-height: 20px;
margin: 17px 32px;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.main-nav li a:hover {
text-decoration: none;
color: #7cc576;
}
.small-logo {
padding: 0 32px;
}
/* Clients
---------------------------------*/
.client-part {
background: url(../img/section-bg1.jpg) center center no-repeat;
background-size: cover;
padding: 55px 0;
text-align: center;
}
.client-part-haead {
color: #fdfdfd;
font-size: 28px;
line-height: 41px;
margin: 30px 0 10px;
font-family: ''Open Sans',sans-serif';
font-style: italic;
}
.client {
padding: 0;
margin: 20px 0 0;
list-style: none;
text-align: center;
}
.client li {
display: inline;
margin: 0 15px;
}
.client li a {
display: inline-block;
}
.client li a img {
margin-bottom: 15px;
border-radius: 50%;
}
.client li a:hover {
text-decoration: none;
}
.client li a h3 {
color: #ffffff;
}
.client li a span {
color: #f1f1f1;
}
.quote-right {
font-style: normal;
width: 68px;
height: 68px;
margin: 0 auto;
border: 2px solid #7cc576;
border-radius: 50%;
display: block;
line-height: 68px;
text-align: center;
font-size: 27px;
color: #7cc576;
cursor: pointer;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.quote-right:hover {
color: #fff;
border: 2px solid #fff;
}
.c-logo-part {
background: #7cc576;
padding: 25px 0;
filter: alpha(opacity=60);
}
.c-logo-part ul {
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.c-logo-part ul li {
display: inline;
margin: 0 25px;
}
.c-logo-part ul a {
display: inline-block;
margin: 0 20px;
}
/* Talk Business
---------------------------------*/
.business-talking {
background: url(../img/section-bg2.jpg) top center no-repeat;
background-size: cover;
padding: 60px 0 10px;
text-align: center;
position: relative;
}
.business-talking h2 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
padding: 0;
margin: 20px 0 70px;
text-transform: uppercase;
font-size: 42px;
color: #fff;
}
/* Contact
---------------------------------*/
.main-section.contact {
padding: 90px 0 100px;
position: relative;
}
.main-section.contact {
background: url(../img/bg-map.png) left 190px no-repeat;
}
.contact-info-box {
font-size: 15px;
margin: 0 0 14px 68px;
padding-left: 0;
}
.contact-info-box h3 {
font-size: 15px;
font-weight: 400;
float: left;
width: 102px;
margin-right: 12px;
line-height: 28px;
}
.contact-info-box h3 i {
font-style: normal;
font-size: 18px;
color: #222222;
font-family: 'FontAwesome';
font-weight: normal;
margin-right: 7px;
}
.contact-info-box span {
line-height: 28px;
display: block;
overflow: hidden;
}
.social-link {
padding: 35px 0;
margin: 0 0 0 68px;
display: block;
overflow: hidden;
list-style: none;
}
.social-link li {
float: left;
margin-right: 8px;
}
.social-link li a {
display: block;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 25px;
color: #fff;
background: #222222;
border-radius: 50%;
transition: all 0.3s ease-in-out;
}
.social-link li a:hover,
.social-link li a:focus {
text-decoration: none;
}
.twitter a:hover {
background: #55acee;
}
.facebook a:hover {
background: #3b5998;
}
.pinterest a:hover {
background: #cb2026;
}
.gplus a:hover {
background: #dd4b39;
}
.dribbble a:hover {
background: #ea4c89;
}
.form {
margin: 0 66px 0 30px;
}
.input-text {
padding: 15px 16px;
border: 1px solid #ccc;
width: 100%;
height: 50px;
display: block;
border-radius: 4px;
font-size: 15px;
color: #aaa;
font-family: 'Open Sans', sans-serif;
margin: 0 0 15px 0;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.input-text:focus {
border: 1px solid #7cc576;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(124, 197, 118, 0.3);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(124, 197, 118, 0.3);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(124, 197, 118, 0.3);
}
.input-text.text-area {
height: 165px;
resize: none;
overflow: auto;
}
.input-btn {
width: 175px;
height: 50px;
background: #7cc576;
border-radius: 4px;
color: #ffffff;
font-size: 14px;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
border: 0px;
transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.input-btn:hover {
background: #111;
color: #fff;
}
.validation {
color: red;
display: none;
margin: 0 0 20px;
font-weight: 400;
font-size: 13px;
}
#sendmessage {
color: #7cc576;
border: 1px solid #7cc576;
display: none;
text-align: center;
padding: 15px;
font-weight: 600;
margin-bottom: 15px;
}
#errormessage {
color: red;
display: none;
border: 1px solid red;
text-align: center;
padding: 15px;
font-weight: 600;
margin-bottom: 15px;
}
#sendmessage.show,
#errormessage.show,
.show {
display: block;
}
/* chart related css
---------------------------------*/
.chart-wrapper {
width: 100%;
height: 100%;
background-color: #0d0d0d;
position: relative;
}
path {
stroke: #0d0d0d;
/* stroke-width: 5px; */
cursor: pointer;
-webkit-transition: fill 250ms;
transition: fill 250ms;
}
path:hover {
/* stroke-width: 10px; */
fill: #fff;
}
text {
font-size: .8em;
text-transform: uppercase;
letter-spacing: .5px;
}
polyline {
fill: none;
stroke: #fff;
stroke-width: 2px;
stroke-dasharray: 5px;
}
.button {
position: absolute;
top: 20px;
left: 820px;
text-transform: uppercase;
padding: 5px 10px;
outline: none;
font-size: .6em;
background-color: black;
color: #fff;
border: 1px solid #fff;
letter-spacing: 1px;
-webkit-transition: all 250ms;
transition: all 250ms;
}
button:hover {
background-color: #fff;
color: #0d0d0d;
box-shadow: 0 0 2px #fff;
}
button:active {
opacity: 0.5;
}
div.tooltip {
position: absolute;
padding: 4px;
background: white;
border: 1px solid black;
border-radius: 2px;
font-size: 14px;
}
/*chart related css*/
.chart-wrapper {
width: 100%;
height: 100%;
background-color: #0d0d0d;
position: relative;
}
path {
stroke: #0d0d0d;
/* stroke-width: 5px; */
cursor: pointer;
-webkit-transition: fill 250ms;
transition: fill 250ms;
}
path:hover {
/* stroke-width: 10px; */
fill: #fff;
}
text {
font-size: .8em;
text-transform: uppercase;
letter-spacing: .5px;
}
polyline {
fill: none;
stroke: #fff;
stroke-width: 2px;
stroke-dasharray: 5px;
}
button {
position: absolute;
top: 20px;
left: 820px;
text-transform: uppercase;
padding: 5px 10px;
outline: none;
font-size: .6em;
background-color: black;
color: #fff;
border: 1px solid #fff;
letter-spacing: 1px;
-webkit-transition: all 250ms;
transition: all 250ms;
}
button:hover {
background-color: #fff;
color: #0d0d0d;
box-shadow: 0 0 2px #fff;
}
button:active {
opacity: 0.5;
}
div.tooltip {
position: absolute;
padding: 4px;
background: white;
border: 1px solid black;
border-radius: 2px;
font-size: 14px;
}
<!doctype html>
<html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<title>Homepage</title>
<link rel="icon" href="favicon.png" type="image/png">
<link rel="shortcut icon" href="favicon.ico" type="img/x-icon">
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,800italic,700italic,600italic,400italic,300italic,800,700,600' rel='stylesheet' type='text/css'>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/font-awesome.css" rel="stylesheet" type="text/css">
<link href="css/responsive.css" rel="stylesheet" type="text/css">
<link href="css/animate.css" rel="stylesheet" type="text/css">
<!--[if IE]><style type="text/css">.pie {behavior:url(PIE.htc);}</style><![endif]-->
<script type="text/javascript" src="js/jquery.1.8.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/jquery-scrolltofixed.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.isotope.js"></script>
<script type="text/javascript" src="js/wow.js"></script>
<script type="text/javascript" src="js/classie.js"></script>
<script src="contactform/contactform.js"></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js'></script>
</head>
<body>
<nav class="main-nav-outer" id="test">
<!--main-nav-start-->
<div class="container">
<ul class="main-nav">
<li>Home
</li>
<li>Services
</li>
<li>Portfolio
</li>
<li class="small-logo">
<a href="#header">
<img src="img/small-logo.png" alt="">
</a>
</li>
<li>Clients
</li>
<li>TeamChart
</li>
<li>Contact
</li>
</ul>
<a class="res-nav_click" href="#"><i class="fa-bars"></i></a>
</div>
</nav>
<!--main-nav-end-->
<section class="main-section client-part" id="client">
<!--main-section client-part-start-->
<div class="container">
<b class="quote-right wow fadeInDown delay-03"><i class="fa-quote-right"></i></b>
<div class="row">
<div class="col-lg-12">
</div>
</div>
<ul class="client wow fadeIn delay-05s">
<li>
<a href="#">
<img src="img/client-pic1.jpg" alt="">
<h3>James Bond</h3>
<span>License To Drink Inc.</span>
</a>
</li>
</ul>
</div>
</section>
<!--main-section client-part-end-->
<div class="c-logo-part">
<!--c-logo-part-start-->
<div class="container">
<ul>
<li>
<a href="#">
<!-- chart section -->
<section class="main-section team" id="team">
<!--main-section team-start-->
<h2>TeamChart</h2>
<h6>Chart talks about the points required</h6>
<div class="chart-wrapper"></div>
<button onclick='replay()'>Replay</button>
<div class="textt" data-tip="this is the data ."></div>
</section>
<!--main-section team-end-->
<section class="business-talking">
<!--business-talking-start-->
<div class="container">
<h2>Let’s Talk Business.</h2>
</div>
</section>
<!--business-talking-end-->
<div class="container">
<section class="main-section contact" id="contact">
<div class="row">
<div class="col-lg-6 col-sm-7 wow fadeInLeft">
<div class="contact-info-box address clearfix">
<h3><i class=" icon-map-marker"></i>Address:</h3>
<span>308 Negra Arroyo Lane<br>Albuquerque, New Mexico, 87111.</span>
</div>
<div class="contact-info-box phone clearfix">
<h3><i class="fa-phone"></i>Phone:</h3>
<span>1-800-BOO-YAHH</span>
</div>
<div class="contact-info-box email clearfix">
<h3><i class="fa-pencil"></i>email:</h3>
<span>hello#knightstudios.com</span>
</div>
<div class="contact-info-box hours clearfix">
<h3><i class="fa-clock-o"></i>Hours:</h3>
<span><strong>Monday - Thursday:</strong> 10am - 6pm<br><strong>Friday:</strong> People work on Fridays now?<br><strong>Saturday - Sunday:</strong> Best not to ask.</span>
</div>
<ul class="social-link">
<li class="twitter"><i class="fa-twitter"></i>
</li>
<li class="facebook"><i class="fa-facebook"></i>
</li>
<li class="pinterest"><i class="fa-pinterest"></i
</li>
<li class="gplus"><i class="fa-google-plus"></i>
</li>
<li class="dribbble"><i class="fa-dribbble"></i>
</li>
</ul>
</div>
<div class="col-lg-6 col-sm-5 wow fadeInUp delay-05s">
<div class="form">
<div id="sendmessage">Your message has been sent. Thank you!</div>
<div id="errormessage"></div>
<form action="" method="post" role="form" class="contactForm">
<div class="form-group">
<input type="text" name="name" class="form-control input-text" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
<div class="validation"></div>
</div>
<div class="form-group">
<input type="email" class="form-control input-text" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
<div class="validation"></div>
</div>
<div class="form-group">
<input type="text" class="form-control input-text" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
<div class="validation"></div>
</div>
<div class="form-group">
<textarea class="form-control input-text text-area" name="message" rows="5" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea>
<div class="validation"></div>
</div>
<div class="text-center">
<button type="submit" class="input-btn">Send Message</button>
</div>
</form>
</div>
</div>
</div>
</section>
</div>
<script type="text/javascript">
$(document).ready(function(e) {
$('#test').scrollToFixed();
$('.res-nav_click').click(function() {
$('.main-nav').slideToggle();
return false
});
});
</script>
<script>
wow = new WOW({
animateClass: 'animated',
offset: 100
});
wow.init();
</script>
<script type="text/javascript">
$(window).load(function() {
$('.main-nav li a').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top - 102
}, 1500, 'easeInOutExpo');
/*
if you don't want to use the easing effects:
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1000);
*/
event.preventDefault();
});
})
</script>
<script type="text/javascript">
$(window).load(function() {
var $container = $('.portfolioContainer'),
$body = $('body'),
colW = 375,
columns = null;
$container.isotope({
// disable window resizing
resizable: true,
masonry: {
columnWidth: colW
}
});
$(window).smartresize(function() {
// check if columns has changed
var currentColumns = Math.floor(($body.width() - 30) / colW);
if (currentColumns !== columns) {
// set new column count
columns = currentColumns;
// apply width to container manually, then trigger relayout
$container.width(columns * colW)
.isotope('reLayout');
}
}).smartresize(); // trigger resize to set container width
$('.portfolioFilter a').click(function() {
$('.portfolioFilter .current').removeClass('current');
$(this).addClass('current');
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector,
});
return false;
});
});
</script>
<script src="js/indexpiechart.js"></script>
</body>
</html>

If the difference between the input and the variable is over 30 or over then the text for #feedback should be .

I am a newbie working on an assignment. I need to compare a variable to an input. If the difference between the randomNumber variable and the input is 30 or greater then I want the text for #feedback to be "very cold".
Example 1: randomNumber = 50 and input value = 20 then #feedback should be "very cold"
Example 2: randomNumber = 50 and input value = 90 then #feedback should be "very cold"
$(document).ready(function(){
var randomNumber = 0;
var userGuess = 0;
var guessCount = 0;
//generates number
function randomNumberGenerator() {
randomNumber = Math.floor(Math.floor(Math.random()*100));
console.log("random number= " + randomNumber);
}
randomNumberGenerator();
//starts new game
function newGame(){
guessCount = 0;
randomNumber = (Math.floor(Math.random()*100));
console.log("new number is " + randomNumber);
}
//user guess
function compareGuess(){
if ($("#userGuess").val() == randomNumber) {
$('#feedback').text('You Win!');
}
}
//sets number of counts
function setCount(count){
$('#count').text(guessCount);
}
//submit
$('#guessButton').click(function() {
compareGuess();
});
//click for new game
$( ".new" ).click(function() {
newGame();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="game"> <!-- Guessing Section -->
<h2 id="feedback">Make your Guess!</h2>
<form>
<input type="text"
name="userGuess"
id="userGuess"
class="text"
maxlength="3"
autocomplete="off"
placeholder="Enter your Guess"
required/>
<input type="button"
id="guessButton"
class="button"
name="submit"
value="Guess"/>
</form>
<p>
Guess #<span id="count">0</span>!
</p>
<ul id="guessList" class="guessBox clearfix">
</ul>
</section>
JS Fidde: https://jsfiddle.net/jelane20/w8jxqjem/6/
Please let me know if I need to provide any more information, thank you!

You just need this code in your compareGuess()
if(input > randomNumber)
{
if((input - randomNumber) > 30)
{
$("#feedback").text("Very cold!");
}
}
FIDDLE
SNIPPET
$(document).ready(function() {
var randomNumber = 0;
var userGuess = 0;
var guessCount = 0;
//generates number
function randomNumberGenerator() {
randomNumber = Math.floor(Math.floor(Math.random() * 100));
console.log("random number= " + randomNumber);
}
randomNumberGenerator();
//starts new game
function newGame() {
guessCount = 0;
randomNumber = (Math.floor(Math.random() * 100));
console.log("new number is " + randomNumber);
}
//user guess
function compareGuess() {
console.log("Guessing");
var input = parseInt($("#userGuess").val());
if (input == randomNumber) {
$('#feedback').text('You Win!');
}
if (input > randomNumber) {
if ((input - randomNumber) >= 30) {
$("#feedback").text("Very cold!");
}
}
}
//sets number of counts
function setCount(count) {
$('#count').text(guessCount);
}
//submit
$('#guessButton').click(function() {
compareGuess();
});
//click for new game
$(".new").click(function() {
newGame();
});
});
$(document).ready(function() {
/*--- Display information modal box ---*/
$(".what").click(function() {
$(".overlay").fadeIn(1000);
});
/*--- Hide information modal box ---*/
$("a.close").click(function() {
$(".overlay").fadeOut(1000);
});
});
/*---------------------------------------------------------------------------------
Common Styles
---------------------------------------------------------------------------------*/
/*float styles*/
.clearfix:before,
.clearfix:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.clearfix:after {
clear: both;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
width: 100%;
height: 100%;
background-color: #394264;
}
body {
position: relative;
width: 98%;
height: 96%;
margin: 0.8em auto;
font-family: 'Lato', Calibri, Arial, sans-serif;
background-color: #1F253D;
text-align: center;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
}
a {
text-decoration: none;
color: black;
}
ul li {
display: inline;
}
/*---------------------------------------------------------------------------------
Header Styles
---------------------------------------------------------------------------------*/
nav {
position: relative;
height: 10%;
padding: 1em;
}
nav ul li {
text-transform: uppercase;
font-weight: 700;
font-size: 1.2em;
}
nav ul li:first-child {
float: left;
}
nav ul li:last-child {
float: right;
}
nav a {
color: #fff;
}
h1 {
font-weight: 900;
font-size: 3em;
padding: 0.8em;
color: #fff;
}
/*style for hidden modal*/
.overlay {
width: 100%;
height: 100%;
color: #fff;
background: #e74c3c;
position: absolute;
top: 0;
left: 0;
margin: 0;
z-index: 1000;
display: none;
}
.content {
color: #fff;
background: #e74c3c;
position: relative;
height: auto;
width: 600px;
border-radius: 3px;
top: 15%;
margin: auto auto;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.content h3 {
margin: 0;
padding: 0.4em;
text-align: center;
font-size: 2.4em;
font-weight: 300;
opacity: 0.8;
background: rgba(0, 0, 0, 0.1);
border-radius: 3px 3px 0 0;
}
.content > div {
padding: 15px 40px 30px;
margin: 0;
font-weight: 300;
font-size: 1.15em;
}
.content > div p {
margin: 0;
padding: 10px 0;
line-height: 2em;
text-align: justify;
}
.content > div ul {
margin-bottom: -30px;
padding: 0 0 30px 20px;
text-align: left;
}
.content > div ul li {
padding: 5px 0;
display: block;
list-style-type: disc;
line-height: 1.5em;
}
.content > div ul li strong {
text-decoration: underline;
}
.content > div a {
font-size: 0.8em;
background: #1F253D;
color: #95a5a6;
padding: 0.5em 2em;
margin-bottom: 50px;
border-radius: 3px;
}
/*---------------------------------------------------------------------------------
Game Section Styles
---------------------------------------------------------------------------------*/
.game {
position: relative;
background-color: #394264;
width: 380px;
height: 380px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
margin: 0 auto;
box-shadow: rgb(26, 31, 52) 1px 1px, rgb(26, 31, 52) 2px 2px, rgb(26, 31, 52) 3px 3px, rgb(26, 31, 53) 4px 4px, rgb(26, 32, 53) 5px 5px, rgb(27, 32, 53) 6px 6px, rgb(27, 32, 54) 7px 7px, rgb(27, 32, 54) 8px 8px, rgb(27, 32, 54) 9px 9px, rgb(27, 33, 55) 10px 10px, rgb(27, 33, 55) 11px 11px, rgb(28, 33, 55) 12px 12px, rgb(28, 33, 56) 13px 13px, rgb(28, 34, 56) 14px 14px, rgb(28, 34, 56) 15px 15px, rgb(28, 34, 57) 16px 16px, rgb(29, 34, 57) 17px 17px, rgb(29, 34, 57) 18px 18px, rgb(29, 35, 58) 19px 19px, rgb(29, 35, 58) 20px 20px, rgb(29, 35, 58) 21px 21px, rgb(29, 35, 59) 22px 22px, rgb(30, 35, 59) 23px 23px, rgb(30, 36, 59) 24px 24px, rgb(30, 36, 60) 25px 25px, rgb(30, 36, 60) 26px 26px, rgb(30, 36, 60) 27px 27px, rgb(31, 37, 61) 28px 28px;
}
h2 {
margin: 0 auto;
background: #cc324b;
padding: 1em 0.4em;
font-size: 1.5em;
font-weight: 400;
display: block;
line-height: 1em;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
color: #fff;
}
.game p {
margin-top: 0.5em;
font-size: 1.8em;
padding-bottom: 0.5em;
}
#count {
color: #f39c12;
font-weight: 700;
font-size: 1.5em;
}
input {
width: 300px;
height: 50px;
display: block;
padding: 0.8em 0;
margin: 0.8em auto 0;
background: #50597b;
color: #fff;
border: solid 1px #1f253d;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
input.button {
background: #1F253D;
color: #95a5a6;
font-size: 2em;
padding: 0.2em;
-webkit-transition: background 1s ease-in-out;
-moz-transition: background 1s ease-in-out;
-ms-transition: background 1s ease-in-out;
-o-transition: background 1s ease-in-out;
transition: background 1s ease-in-out;
}
input.button:hover {
background: #e64c65;
color: #fff;
-webkit-transition: background 1s ease-in-out;
-moz-transition: background 1s ease-in-out;
-ms-transition: background 1s ease-in-out;
-o-transition: background 1s ease-in-out;
transition: background 1s ease-in-out;
cursor: pointer;
}
input.text {
text-align: center;
padding: 0.2em;
font-size: 2em;
}
input:focus {
outline: none !important;
}
::-webkit-input-placeholder {
color: #95a5a6;
}
:-moz-placeholder {
/* Firefox 18- */
color: #95a5a6;
}
::-moz-placeholder {
/* Firefox 19+ */
color: #95a5a6;
}
:-ms-input-placeholder {
color: #95a5a6;
}
ul.guessBox {
height: 80px;
margin: 10px auto 0;
background: #11a8ab;
padding: 0.5em;
display: block;
line-height: 2em;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
color: #fff;
overflow: auto;
}
ul.guessBox li {
display: inline;
background-color: #1a4e95;
padding: 0.3em;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width: 95%;
margin: 0.2em;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Top Navigation -->
<nav>
<ul class="clearfix">
<li><a class="what" href="#">What ?</a>
</li>
<li><a class="new" href="#">+ New Game</a>
</li>
</ul>
</nav>
<!-- Modal Information Box -->
<div class="overlay" id="modal">
<div class="content">
<h3>What do I do?</h3>
<div>
<p>This is a Hot or Cold Number Guessing Game. The game goes like this:</p>
<ul>
<li>1. I pick a <strong>random secret number</strong> between 1 to 100 and keep it hidden.</li>
<li>2. You need to <strong>guess</strong> until you can find the hidden secret number.</li>
<li>3. You will <strong>get feedback</strong> on how close ("hot") or far ("cold") your guess is.</li>
</ul>
<p>So, Are you ready?</p>
<a class="close" href="#">Got It!</a>
</div>
</div>
</div>
<!-- logo text -->
<h1>HOT or COLD</h1>
</header>
<section class="game">
<!-- Guessing Section -->
<h2 id="feedback">Make your Guess!</h2>
<!--<form>-->
<input type="text" name="userGuess" id="userGuess" class="text" maxlength="3" autocomplete="off" placeholder="Enter your Guess" required/>
<input type="submit" id="guessButton" class="button" name="submit" value="Guess" />
<!--</form>-->
<p>Guess #<span id="count">0</span>!</p>
<ul id="guessList" class="guessBox clearfix">
</ul>
</section>

I suspect that your problem is how to check if the difference between the randomnNumber and user's input is greater than 30. Here's the solution in JavaScript:
var userInput = $("#userGuess").val();
var difference = Math.abs(randomNumber - userInput);
if (difference > 30){
$('#feedback').text('very cold');
}

Before everything, as many have mentioned already. You need to remove the <form> tags and change the input type from submit to button.
I've looked at your code and i've altered it in a way of showing you how the check can be done. Check the JSFiddle:
https://jsfiddle.net/1w17oh13/3/
All the checks will be done inside the compareGuess()
//user guess
function compareGuess()
{
var guess = parseInt($("#userGuess").val());
guessCount += 1;
guesses.push(guess);
guessDistance = Math.abs(randomNumber - guess);
previousGuessDistance = Math.abs(randomNumber - guesses[guesses.length - 2]);
if (guess == randomNumber)
{
$('#feedback').text('You Win!');
}
else {
console.log(guess, randomNumber, previousGuessDistance, guessDistance);
if (isNaN(previousGuessDistance)) {
if (guess > randomNumber) {
$('#feedback').text('Guess lower!');
} else if (guess < randomNumber) {
$('#feedback').text('Guess higher!');
}
} else if (guessDistance > previousGuessDistance) {
if (guess > randomNumber) {
$('#feedback').text('Getting colder');
} else if (guess < randomNumber) {
$('#feedback').text('Getting colder, guess higher!');
}
} else if (guessDistance < previousGuessDistance) {
if (guess > randomNumber) {
$('#feedback').text('Getting hotter, guess lower!');
} else if (guess < randomNumber) {
$('#feedback').text('Getting hotter, guess higher!');
}
} else if (guessDistance === previousGuessDistance) {
if (guess > randomNumber) {
$('#feedback').text('On fire, guess lower!');
} else if (guess < randomNumber) {
$('#feedback').text('On fire, guess higher!');
}
} else {
$('#feedback').text('ERROR: Your guess must be a number between 1 and 100').css({
color: 'red'
});
}
}
}

Categories

Resources