File tree 6 files changed +274
-0
lines changed
6 files changed +274
-0
lines changed Original file line number Diff line number Diff line change
1
+ <!DOCTYPE html>
2
+ < html >
3
+ < head >
4
+ < title > Pomodoro Timer</ title >
5
+ < link rel ="stylesheet " type ="text/css " href ="style.css " />
6
+ </ head >
7
+ < body >
8
+ < div class ="container ">
9
+ < h1 class ="title "> Pomodoro Timer</ h1 >
10
+ < p id ="timer " class ="timer "> 25:00</ p >
11
+ < div class ="button-wrapper ">
12
+ < button id ="start " class ="button button--start "> Start</ button >
13
+ < button id ="stop " class ="button button--stop "> Stop</ button >
14
+ < button id ="reset " class ="button button--reset "> Reset</ button >
15
+ </ div >
16
+ </ div >
17
+ < script src ="index.js "> </ script >
18
+ </ body >
19
+ </ html >
Original file line number Diff line number Diff line change
1
+ const startEl = document . getElementById ( "start" ) ;
2
+ const stopEl = document . getElementById ( "stop" ) ;
3
+ const resetEl = document . getElementById ( "reset" ) ;
4
+ const timerEl = document . getElementById ( "timer" ) ;
5
+
6
+ let intervalId ;
7
+ let timeLeft = 1500 ; // 25 minutes in seconds
8
+
9
+ function updateTimer ( ) {
10
+ let minutes = Math . floor ( timeLeft / 60 ) ;
11
+ let seconds = timeLeft % 60 ;
12
+ let formattedTime = `${ minutes . toString ( ) . padStart ( 2 , "0" ) } :${ seconds
13
+ . toString ( )
14
+ . padStart ( 2 , "0" ) } `;
15
+ // padStart() is a built-in method in JavaScript that allows you to pad a string with another string until it reaches a specified length. It's often used to format strings to a specific length, such as adding leading zeros to a number.
16
+ // const str = '7';
17
+ // const paddedStr = str.padStart(2, '0');
18
+
19
+ // console.log(paddedStr); // Output: '07'
20
+
21
+ timerEl . innerHTML = formattedTime ;
22
+ }
23
+
24
+ function startTimer ( ) {
25
+ intervalId = setInterval ( ( ) => {
26
+ timeLeft -- ;
27
+ updateTimer ( ) ;
28
+ if ( timeLeft === 0 ) {
29
+ clearInterval ( intervalId ) ;
30
+ alert ( "Time's up!" ) ;
31
+ }
32
+ } , 1000 ) ;
33
+ }
34
+
35
+ function stopTimer ( ) {
36
+ clearInterval ( intervalId ) ;
37
+ }
38
+
39
+ function resetTimer ( ) {
40
+ clearInterval ( intervalId ) ;
41
+ timeLeft = 1500 ;
42
+ updateTimer ( ) ;
43
+ }
44
+
45
+ startEl . addEventListener ( "click" , startTimer ) ;
46
+ stopEl . addEventListener ( "click" , stopTimer ) ;
47
+ resetEl . addEventListener ( "click" , resetTimer ) ;
Original file line number Diff line number Diff line change
1
+ /* Pomodoro Timer styles */
2
+
3
+ .container {
4
+ font-family : "Roboto" , Arial, Helvetica, sans-serif;
5
+ margin : 0 auto;
6
+ max-width : 400px ;
7
+ padding : 20px ;
8
+ text-align : center;
9
+ }
10
+
11
+ .title {
12
+ font-size : 36px ;
13
+ margin-bottom : 10px ;
14
+ color : # 2c3e50 ;
15
+ }
16
+
17
+ .timer {
18
+ font-size : 72px ;
19
+ color : # 2c3e50 ;
20
+ }
21
+
22
+ .button-wrapper {
23
+ display : flex;
24
+ justify-content : center;
25
+ }
26
+
27
+ .button {
28
+ border : none;
29
+ border-radius : 4px ;
30
+ color : # fff ;
31
+ font-size : 18px ;
32
+ font-weight : bold;
33
+ margin-right : 10px ;
34
+ padding : 10px 20px ;
35
+ text-transform : uppercase;
36
+ transition : all 0.2s ;
37
+ cursor : pointer;
38
+ }
39
+
40
+ .button--start {
41
+ background-color : # 27ae60 ;
42
+ }
43
+
44
+ .button--start : hover {
45
+ background-color : # 229954 ;
46
+ }
47
+
48
+ .button--stop {
49
+ background-color : # c0392b ;
50
+ }
51
+
52
+ .button--stop : hover {
53
+ background-color : # a93226 ;
54
+ }
55
+
56
+ .button--reset {
57
+ background-color : # 7f8c8d ;
58
+ }
59
+
60
+ .button--reset : hover {
61
+ background-color : # 6c7a7d ;
62
+ }
Original file line number Diff line number Diff line change
1
+ <!DOCTYPE html>
2
+ < html >
3
+ < head >
4
+ < title > Rock Paper Scissors</ title >
5
+ < meta charset ="UTF-8 " />
6
+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 " />
7
+ < link rel ="stylesheet " type ="text/css " href ="style.css " />
8
+ </ head >
9
+ < body >
10
+ < h1 > Rock Paper Scissors Game</ h1 >
11
+ < p > Choose your move:</ p >
12
+ < div class ="buttons ">
13
+ < button id ="rock "> 👊</ button >
14
+ < button id ="paper "> 🖐</ button >
15
+ < button id ="scissors "> ✌</ button >
16
+
17
+ <!-- HTML entities are used to display the icons. -->
18
+ </ div >
19
+ < p id ="result "> </ p >
20
+ < p id ="scores ">
21
+ Your score: < span id ="player-score "> 0</ span > Computer's score:
22
+ < span id ="computer-score "> 0</ span >
23
+ </ p >
24
+
25
+ < script src ="index.js "> </ script >
26
+ </ body >
27
+ </ html >
Original file line number Diff line number Diff line change
1
+ const buttons = document . querySelectorAll ( "button" ) ;
2
+ let playerScore = 0 ;
3
+ let computerScore = 0 ;
4
+
5
+ buttons . forEach ( ( button ) => {
6
+ button . addEventListener ( "click" , ( ) => {
7
+ playRound ( button . id , computerPlay ( ) ) ;
8
+ } ) ;
9
+ } ) ;
10
+
11
+ function computerPlay ( ) {
12
+ const choices = [ "rock" , "paper" , "scissors" ] ;
13
+ return choices [ Math . floor ( Math . random ( ) * choices . length ) ] ;
14
+ }
15
+
16
+ function playRound ( playerSelection , computerSelection ) {
17
+ if ( playerSelection === computerSelection ) {
18
+ document . getElementById ( "result" ) . textContent = "Tie game!" ;
19
+ } else if (
20
+ ( playerSelection === "rock" && computerSelection === "scissors" ) ||
21
+ ( playerSelection === "paper" && computerSelection === "rock" ) ||
22
+ ( playerSelection === "scissors" && computerSelection === "paper" )
23
+ ) {
24
+ playerScore ++ ;
25
+ document . getElementById (
26
+ "result"
27
+ ) . textContent = `You win! ${ playerSelection } beats ${ computerSelection } ` ;
28
+ } else {
29
+ computerScore ++ ;
30
+ document . getElementById (
31
+ "result"
32
+ ) . textContent = `You lose! ${ computerSelection } beats ${ playerSelection } ` ;
33
+ }
34
+ updateScore ( ) ;
35
+ }
36
+
37
+ function updateScore ( ) {
38
+ document . getElementById (
39
+ "player-score"
40
+ ) . textContent = `Your score: ${ playerScore } ` ;
41
+ document . getElementById (
42
+ "computer-score"
43
+ ) . textContent = `Computer's score: ${ computerScore } ` ;
44
+ }
Original file line number Diff line number Diff line change
1
+ * {
2
+ box-sizing : border-box;
3
+ }
4
+
5
+ body {
6
+ background-color : # f1f1f1 ;
7
+ font-family : Arial, sans-serif;
8
+ margin : 0 ;
9
+ padding : 0 ;
10
+ }
11
+
12
+ h1 {
13
+ font-size : 2rem ;
14
+ text-align : center;
15
+ padding-top : 100px ;
16
+ }
17
+
18
+ p {
19
+ font-size : 1.2rem ;
20
+ margin-bottom : 0.5rem ;
21
+ text-align : center;
22
+ }
23
+
24
+ .buttons {
25
+ display : flex;
26
+ justify-content : center;
27
+ }
28
+
29
+ button {
30
+ border : none;
31
+ border-radius : 5px ;
32
+ color : white;
33
+ cursor : pointer;
34
+ font-size : 3rem ;
35
+ margin : 0 0.5rem ;
36
+ padding : 0.5rem ;
37
+ transition : all 0.3s ease-in-out;
38
+ }
39
+
40
+ button : hover {
41
+ opacity : 0.7 ;
42
+ }
43
+
44
+ # rock {
45
+ background-color : # f44336 ; /* Red */
46
+ }
47
+
48
+ # paper {
49
+ background-color : # 2196f3 ; /* Blue */
50
+ }
51
+
52
+ # scissors {
53
+ background-color : # 4caf50 ; /* Green */
54
+ }
55
+
56
+ # result {
57
+ font-size : 1.5rem ;
58
+ font-weight : bold;
59
+ margin : 1rem 0 ;
60
+ }
61
+
62
+ # scores {
63
+ font-size : 1.2rem ;
64
+ font-weight : bold;
65
+ text-align : center;
66
+ }
67
+
68
+ # player-score {
69
+ color : # 4caf50 ;
70
+ margin-right : 0.5rem ;
71
+ }
72
+
73
+ # computer-score {
74
+ color : # f44336 ;
75
+ }
You can’t perform that action at this time.
0 commit comments