0
Ich bin auf dem pomodoro Projekt auf freies Code Camp arbeiten:Wie in HTML/CSS/Bootstrap ein Eingabefeld zum Zentrum
https://www.freecodecamp.com/challenges/build-a-pomodoro-clock
Und ich versuche, meine Eingabefelder zum Zentrum, aber ich bin nicht viel Erfolg erzielen. Hat jemand irgendwelche Ideen?
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() {
\t var displayString = "";
\t console.log("Update timer()");
\t if (timeSec === 0) {
\t \t timeSec = 59;
\t \t timeMin--;
\t } else {
\t \t timeSec--;
\t }
\t displayString = timeMin + ":" + pad(timeSec, 2);
\t $(".timer").html(displayString);
\t if (timeMin < 1 && timeSec < 1) {
\t \t $(".timer").css('color', 'red');
\t \t clearInterval(timerIntervalID);
\t \t alert("Pomodoro Over!")
\t }
}
function test() {
\t console.log("Test");
}
$(document).ready(function() {
\t $("button").click(function() {
\t \t var whichButton = $(this).attr("value");
\t \t console.log("Button pressed");
\t \t switch(whichButton) {
\t \t \t case "start":
\t \t \t \t timerIntervalID = setInterval(updateTimer, 1000);
\t \t \t \t break;
\t \t \t case "reset":
\t \t \t \t timeMin = 0;
\t \t \t \t timeSec = 3;
\t \t \t \t if (timerIntervalID !== null) {
\t \t \t \t \t clearInterval(timerIntervalID);
\t \t \t \t }
\t \t \t \t $(".timer").css('color', 'black');
\t \t \t \t displayString = timeMin + ":" + pad(timeSec, 2);
\t \t \t \t $(".timer").html(displayString);
\t \t \t \t break;
\t \t }
\t });
});.btn-primary {
\t width: 15rem;
\t margin: 0.2rem;
\t height: 5rem;
}
.btn-danger {
\t width: 15rem;
\t margin: 0.2rem;
\t 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>
\t <head>
\t <meta charset="utf-8">
\t <title>fccPomodoro</title>
\t </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;
}
Das funktionierte. Vielen Dank! –