diff --git a/Pig Game/dice-1.png b/Pig Game/dice-1.png
new file mode 100644
index 0000000..0d911ca
Binary files /dev/null and b/Pig Game/dice-1.png differ
diff --git a/Pig Game/dice-2.png b/Pig Game/dice-2.png
new file mode 100644
index 0000000..f3c32af
Binary files /dev/null and b/Pig Game/dice-2.png differ
diff --git a/Pig Game/dice-3.png b/Pig Game/dice-3.png
new file mode 100644
index 0000000..e3ef2b5
Binary files /dev/null and b/Pig Game/dice-3.png differ
diff --git a/Pig Game/dice-4.png b/Pig Game/dice-4.png
new file mode 100644
index 0000000..0c785f7
Binary files /dev/null and b/Pig Game/dice-4.png differ
diff --git a/Pig Game/dice-5.png b/Pig Game/dice-5.png
new file mode 100644
index 0000000..b4b41e3
Binary files /dev/null and b/Pig Game/dice-5.png differ
diff --git a/Pig Game/dice-6.png b/Pig Game/dice-6.png
new file mode 100644
index 0000000..6f4d9b3
Binary files /dev/null and b/Pig Game/dice-6.png differ
diff --git a/Pig Game/index.html b/Pig Game/index.html
new file mode 100644
index 0000000..f72c8f4
--- /dev/null
+++ b/Pig Game/index.html
@@ -0,0 +1,36 @@
+
+
+
+
+
+
+
+ Pig Game
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
diff --git a/Pig Game/pig-game-flowchart.png b/Pig Game/pig-game-flowchart.png
new file mode 100644
index 0000000..2e51a84
Binary files /dev/null and b/Pig Game/pig-game-flowchart.png differ
diff --git a/Pig Game/script.js b/Pig Game/script.js
new file mode 100644
index 0000000..d64bafa
--- /dev/null
+++ b/Pig Game/script.js
@@ -0,0 +1,111 @@
+'use strict';
+
+//Selecting Elements
+const player0El = document.querySelector('.player--0') // Player 1 class
+const player1El = document.querySelector('.player--1') // Player 2 class
+const score0El = document.getElementById('score--0');
+const score1El = document.getElementById('score--1');
+const current0El = document.getElementById('current--0');
+const current1El = document.getElementById('current--1');
+
+const diceEl = document.querySelector('.dice');
+const btnNew = document.querySelector('.btn--new');
+const btnRoll = document.querySelector('.btn--roll');
+const btnHold = document.querySelector('.btn--hold')
+
+let scores, currentScore, activePlayer, playing;
+
+//Starting condition
+const init = function () {
+ scores = [0, 0];
+ currentScore = 0;
+ activePlayer = 0;
+ playing = true;
+
+ score0El.textContent = 0;
+ score1El.textContent = 0;
+ current0El.textContent = 0;
+ current1El.textContent = 0;
+
+ diceEl.classList.add('hidden');
+ player0El.classList.remove('player--winner');
+ player1El.classList.remove('player--winner');
+ player0El.classList.add('player--active');
+ player1El.classList.remove('player--active');
+ };
+ init();
+
+const switchPlayer = function()
+{
+ if(playing){
+ //switch to the next player
+ document.getElementById(`current--${activePlayer}`).textContent = 0;
+ currentScore = 0;
+ activePlayer = activePlayer === 0 ? 1 : 0 // ternary operator if activePlayer === 0 if not change to 1 else make it 0
+ //Changing the Active Player Color
+ player0El.classList.toggle('player--active'); //toggle is another property in classList which add class if not available
+ player1El.classList.toggle('player--active');
+ }
+
+}
+
+//Hiding the Image Dice
+diceEl.classList.add('hidden'); // Hiding the Dice by adding the Hidden Class
+
+//Rolling the Dice Functionality
+btnRoll.addEventListener('click', function() {
+
+ if(playing){
+
+ //1. Generating a Random Dice Result
+ const dice = Math.trunc(Math.random() * 6 ) + 1; //dice is a not a global Variable - needs to change every time
+
+ //Displaying the Dice
+ diceEl.classList.remove('hidden'); //removing the hidden class
+ diceEl.src = `dice-${dice}.png`; //when dice number becomes random the src also changes according and display the number
+
+ //3. Check for rolled 1: if true, switch to next player
+ if(dice != 1){
+ //Add dice to current one
+ currentScore += dice; //currentScore = CurrentScore+dice
+ document.getElementById(`current--${activePlayer}`).textContent = currentScore;
+ }
+ else{
+ switchPlayer(); //calling the function
+ }
+}
+
+});
+
+//Hold button Function
+btnHold.addEventListener('click', function()
+{
+ if(playing)
+ {
+ //1.Add current score to sctivr Player's score
+ scores[activePlayer] += currentScore; //scores[activePlayer] = scores[activePlayer + currentScore
+ document.getElementById(`score--${activePlayer}`).textContent = scores[activePlayer];
+
+ //2. Check if Player's score is >= 100
+ if(scores[activePlayer] >= 100)
+ {
+ //finish the Game
+ playing = false;
+ diceEl.classList.add('hidden');//removing the dice after won
+ document.querySelector(`.player--${activePlayer}`).classList.add('player--winner');
+ document.querySelector(`.player--${activePlayer}`).classList.remove('player--active');//removing the previous class
+
+ }
+ else{
+ //Switch to the next Player -
+ switchPlayer();
+ }
+
+ }
+
+
+});
+
+
+//reset Function calling
+btnNew.addEventListener('click', init);
\ No newline at end of file
diff --git a/Pig Game/style.css b/Pig Game/style.css
new file mode 100644
index 0000000..e05165d
--- /dev/null
+++ b/Pig Game/style.css
@@ -0,0 +1,173 @@
+@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: inherit;
+}
+
+html {
+ font-size: 62.5%;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Nunito', sans-serif;
+ font-weight: 400;
+ height: 100vh;
+ color: #333;
+ background-image: linear-gradient(to top left, #753682 0%, #bf2e34 100%);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+/* LAYOUT */
+main {
+ position: relative;
+ width: 100rem;
+ height: 60rem;
+ background-color: rgba(255, 255, 255, 0.35);
+ backdrop-filter: blur(200px);
+ filter: blur();
+ box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.25);
+ border-radius: 9px;
+ overflow: hidden;
+ display: flex;
+}
+
+.player {
+ flex: 50%;
+ padding: 9rem;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ transition: all 0.75s;
+}
+
+/* ELEMENTS */
+.name {
+ position: relative;
+ font-size: 4rem;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ word-spacing: 2px;
+ font-weight: 300;
+ margin-bottom: 1rem;
+}
+
+.score {
+ font-size: 8rem;
+ font-weight: 300;
+ color: #c7365f;
+ margin-bottom: auto;
+}
+
+.player--active {
+ background-color: rgba(255, 255, 255, 0.4);
+}
+.player--active .name {
+ font-weight: 700;
+}
+.player--active .score {
+ font-weight: 400;
+}
+
+.player--active .current {
+ opacity: 1;
+}
+
+.current {
+ background-color: #c7365f;
+ opacity: 0.8;
+ border-radius: 9px;
+ color: #fff;
+ width: 65%;
+ padding: 2rem;
+ text-align: center;
+ transition: all 0.75s;
+}
+
+.current-label {
+ text-transform: uppercase;
+ margin-bottom: 1rem;
+ font-size: 1.7rem;
+ color: #ddd;
+}
+
+.current-score {
+ font-size: 3.5rem;
+}
+
+/* ABSOLUTE POSITIONED ELEMENTS */
+.btn {
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ color: #444;
+ background: none;
+ border: none;
+ font-family: inherit;
+ font-size: 1.8rem;
+ text-transform: uppercase;
+ cursor: pointer;
+ font-weight: 400;
+ transition: all 0.2s;
+
+ background-color: white;
+ background-color: rgba(255, 255, 255, 0.6);
+ backdrop-filter: blur(10px);
+
+ padding: 0.7rem 2.5rem;
+ border-radius: 50rem;
+ box-shadow: 0 1.75rem 3.5rem rgba(0, 0, 0, 0.1);
+}
+
+.btn::first-letter {
+ font-size: 2.4rem;
+ display: inline-block;
+ margin-right: 0.7rem;
+}
+
+.btn--new {
+ top: 4rem;
+}
+.btn--roll {
+ top: 39.3rem;
+}
+.btn--hold {
+ top: 46.1rem;
+}
+
+.btn:active {
+ transform: translate(-50%, 3px);
+ box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);
+}
+
+.btn:focus {
+ outline: none;
+}
+
+.dice {
+ position: absolute;
+ left: 50%;
+ top: 16.5rem;
+ transform: translateX(-50%);
+ height: 10rem;
+ box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.2);
+}
+
+.player--winner {
+ background-color: #2f2f2f;
+}
+
+.player--winner .name {
+ font-weight: 700;
+ color: #c7365f;
+}
+
+/* Hidden Class */
+
+.hidden{
+ display: none;
+}
\ No newline at end of file