pomodoro.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Orbitron&display=swap" rel="stylesheet">
    <link rel="shortcut icon" href="../../picture/favicon2.png" />
    <title id="tabTitle">Pomodoro</title>

    <link rel="stylesheet" href="pomodoro.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="pomodoro.js"></script>

</head>

<body>

    <div id="pomodoroClock">
        <!-- title -->
        <h1 id="title">Pomodoro</h1>


        <div id="input">

            <!-- timer length -->
            <h2>Arbeit: 25 min</h2>

            <!-- break length   -->
            <h2>Pause: 5 min</h2>

        </div>



        <!-- display    -->
        <div id="output">
            <h2 id="kindOfSession">Arbeit</h2>
            <h1 id="timeOutput"> 25:00 </h1>
        </div>

        <!-- start stop reset -->
        <div id="controls">
            <button id="start">Start</button>
            <button id="stop">Stop</button>
            <button id="reset">Reset</button>
        </div>
    </div>



</body>

</html>