Currently, I am tackling the pomodoro challenge on free code camp and seeking guidance:
I've been attempting to center my input boxes without much success. Does anyone have any suggestions?
var timeMin = 0;
var timeSec = 3;
var timerIntervalID = null;
function pad (str, max) {
str = str.toString();
return str.length < max ? pad("0" + str, max) : str;
}
function updateTimer() {
var displayString = "";
console.log("Update timer()");
if (timeSec === 0) {
timeSec = 59;
timeMin--;
} else {
timeSec--;
}
displayString = timeMin + ":" + pad(timeSec, 2);
$(".timer").html(displayString);
if (timeMin < 1 && timeSec < 1) {
$(".timer").css('color', 'red');
clearInterval(timerIntervalID);
alert("Pomodoro Over!")
}
}
function test() {
console.log("Test");
}
$(document).ready(function() {
$("button").click(function() {
var whichButton = $(this).attr("value");
console.log("Button pressed");
switch(whichButton) {
case "start":
timerIntervalID = setInterval(updateTimer, 1000);
break;
case "reset":
timeMin = 0;
timeSec = 3;
if (timerIntervalID !== null) {
clearInterval(timerIntervalID);
}
$(".timer").css('color', 'black');
displayString = timeMin + ":" + pad(timeSec, 2);
$(".timer").html(displayString);
break;
}
});
}); .btn-primary {
width: 15rem;
margin: 0.2rem;
height: 5rem;
}
.btn-danger {
width: 15rem;
margin: 0.2rem;
height: 5rem;
}
input {
max-width: 4rem;
text-align:center;
display:block;
margin:0;
} <head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="main.js"></script>
</head>
<html>
<head>
<meta charset="utf-8">
<title>fccPomodoro</title>
</head>
<div class="container">
<div class="jumbotron text-center">
<h1>fccPomodoro</h1>
<h2 class="timer">Time Left: 25 minutes</h2>
<button type="button" class="btn btn-primary" value="start">Start Pomodoro</button>
<button type="button" class="btn btn-danger" value="reset">Reset</button>
<div class="form-group">
<label for="min">Minutes:</label>
<input type="text" class="form-control" id="min" value="25">
</div>
<div class="form-group">
<label for="sec">Seconds:</label>
<input type="text" class="form-control" id="sec" value="00">
</div>
</div>
</div>
</html>styles.css
.btn-primary {
width: 15rem;
margin: 0.2rem;
height: 5rem;
}
.btn-danger {
width: 15rem;
margin: 0.2rem;
height: 5rem;
}
input {
max-width: 4rem;
text-align:center;
display:block;
margin:0;
}