diff --git a/home.html b/home.html
new file mode 100644
index 0000000..1b0b686
--- /dev/null
+++ b/home.html
@@ -0,0 +1,102 @@
+
+
+
+
+
+
+ Inside The Hacktiv Zoo
+
+
+
+
+
+
+
+ Do You Remember Them?
+
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+
+
+
+ During her visit, Devita was asked by her teacher to remember what animals she found in the zoo.
+
+ Unfortunately, Devita forgot. Devita needs your help to remember what animals she met at the Hacktiv zoo.
+
+ Do you want to help Devita?
+
+ with my pleasure 😄
+
+
+
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..3555cc2
--- /dev/null
+++ b/script.js
@@ -0,0 +1,195 @@
+var card = document.getElementsByClassName("card");
+var cards = [...card];
+var collect = document.getElementById("card-collect");
+var moves = 0;
+var counter = document.querySelector(".moves");
+var stars = document.querySelectorAll(".fa-star");
+var matchedCard = document.getElementsByClassName("match");
+var starsList = document.querySelectorAll(".stars li");
+var closeicon = document.querySelector(".close");
+var modal = document.getElementById("popup1")
+var openedCards = [];
+var nameUser1 = ''
+//pop up name when loaded or refresh
+function init() {
+ var name = prompt("Welcome to the Hacktiv Zoo. For administration purpose, let us know your name");
+ if (name === null || name === "" ) {
+ alert("Sorry, you can't help Devita due to incomplete data");
+ window.location.href = "index.html"
+ } else {
+ nameUser1 = name
+ alert("Hi " + name + "! We appreciate your kind for helping Devita😄")
+ startGame();
+ }
+}
+document.body.onload = init();
+//shuffles cards based on math random
+function shuffle(array) {
+ var currentIndex = array.length
+ while (currentIndex !== 0) {
+ var randomIndex = Math.floor(Math.random() * currentIndex);
+ currentIndex--;
+ var temporaryValue = array[currentIndex];
+ array[currentIndex] = array[randomIndex];
+ array[randomIndex] = temporaryValue;
+ }
+ return array;
+};
+//start new game
+function startGame(){
+ openedCards = [];
+ cards = shuffle(cards);
+ for (var i = 0; i < cards.length; i++){
+ collect.innerHTML = "";
+ [].forEach.call(cards, function(item) {
+ collect.appendChild(item);
+ });
+ cards[i].classList.remove("show", "open", "match", "disabled");
+ }
+ // reset moves
+ moves = 0;
+ counter.innerHTML = moves;
+ // reset rating
+ for (var i= 0; i < stars.length; i++){
+ stars[i].style.color = "#FFD700";
+ stars[i].style.visibility = "visible";
+ }
+ //reset timer
+ second = 0;
+ minute = 0;
+ hour = 0;
+ var timer = document.querySelector(".timer");
+ timer.innerHTML = "0 mins 0 secs";
+ clearInterval(interval);
+}
+//open and show class to display cards
+var displayCard = function (){
+ this.classList.toggle("open");
+ this.classList.toggle("show");
+ this.classList.toggle("disabled");
+};
+//Add opened cards to OpenedCards list and check if cards are match or not
+function cardOpen() {
+ openedCards.push(this);
+ var len = openedCards.length;
+ if(len === 2){
+ moveCounter();
+ if(openedCards[0].name === openedCards[1].name){
+ matched();
+ } else {
+ unmatched();
+ }
+ }
+};
+//Cards match
+function matched(){
+ openedCards[0].classList.add("match", "disabled");
+ openedCards[1].classList.add("match", "disabled");
+ openedCards[0].classList.remove("show", "open", "no-event");
+ openedCards[1].classList.remove("show", "open", "no-event");
+ openedCards = [];
+}
+//Cards don't match
+function unmatched(){
+ openedCards[0].classList.add("unmatched");
+ openedCards[1].classList.add("unmatched");
+ disable();
+ setTimeout(function(){
+ openedCards[0].classList.remove("show", "open", "no-event","unmatched");
+ openedCards[1].classList.remove("show", "open", "no-event","unmatched");
+ enable();
+ openedCards = [];
+ },1100);
+}
+//Disable cards temporarily
+function disable(){
+ Array.prototype.filter.call(cards, function(card){
+ card.classList.add('disabled');
+ });
+}
+//Enable cards and disable matched cards
+function enable(){
+ Array.prototype.filter.call(cards, function(card){
+ card.classList.remove('disabled');
+ for(var i = 0; i < matchedCard.length; i++){
+ matchedCard[i].classList.add("disabled");
+ }
+ });
+}
+//Count player's moves
+function moveCounter(){
+ moves++;
+ counter.innerHTML = moves;
+ //start timer on first click
+ if(moves == 1){
+ second = 0;
+ minute = 0;
+ hour = 0;
+ startTimer();
+ }
+ // setting rates based on moves
+ if (moves > 8 && moves < 12){
+ for( i= 0; i < 3; i++){
+ if(i > 1){
+ stars[i].style.visibility = "collapse";
+ }
+ }
+ }
+ else if (moves > 13){
+ for( i= 0; i < 3; i++){
+ if(i > 0){
+ stars[i].style.visibility = "collapse";
+ }
+ }
+ }
+}
+//Timer
+var second = 0, minute = 0; hour = 0;
+var timer = document.querySelector(".timer");
+var interval;
+function startTimer(){
+ interval = setInterval(function(){
+ timer.innerHTML = " " + minute+" mins "+second+" secs";
+ second++;
+ if(second == 60){
+ minute++;
+ second=0;
+ }
+ if(minute == 60){
+ hour++;
+ minute = 0;
+ }
+ },1000);
+}
+//Greeting card
+function congratulations(){
+ if (matchedCard.length == 16){
+ clearInterval(interval);
+ finalTime = timer.innerHTML;
+ modal.classList.add("show");
+ var starRating = document.querySelector(".stars").innerHTML;
+ document.getElementById("nameUser").innerHTML = nameUser1;
+ document.getElementById("finalMove").innerHTML = moves;
+ document.getElementById("starRating").innerHTML = starRating;
+ document.getElementById("totalTime").innerHTML = finalTime;
+ closeModal();
+ };
+}
+function closeModal(){
+ closeicon.addEventListener("click", function(e){
+ modal.classList.remove("show");
+ startGame();
+ });
+}
+//To play Again
+function replay(){
+ modal.classList.remove("show");
+ startGame();
+}
+// loop to add event listeners to each card
+for (var i = 0; i < cards.length; i++){
+ card = cards[i];
+ card.addEventListener("click", displayCard);
+ card.addEventListener("click", cardOpen);
+ card.addEventListener("click",congratulations);
+};
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..d1a2b01
--- /dev/null
+++ b/style.css
@@ -0,0 +1,333 @@
+/*
+style in general
+*/
+
+html{
+ box-sizing: border-box
+}
+*,
+*::before,
+*::after {
+ box-sizing: inherit;
+}
+html, body {
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+}
+body {
+ background-image: url(img/bg2.jpg);
+ background-size: cover;
+ background-position: center;
+ background-attachment: fixed;
+ background-repeat: no-repeat;
+ font-family: 'Bubblegum Sans', cursive;
+ font-size: 16px
+}
+#header1 {
+ margin-top: 20vh;
+ text-align: center
+}
+#description {
+ text-align: center
+}
+.container {
+ justify-content: center;
+ align-items: center;
+}
+.container h1 {
+ text-align: center;
+}
+.container .score-panel {
+ text-align: center;
+ align-items: center;
+ justify-content: center;
+
+}
+/*
+style for card collect
+*/
+
+.collect {
+ background: #716F71;
+ padding: 1rem;
+ border-radius: 4px;
+ box-shadow: 8px 9px 26px 0 rgba(46, 67, 73, 0.5);
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-around;
+ align-items: center;
+ margin: 0 0 3em;
+}
+.collect .card {
+ height: 20vh;
+ width: 20vw;
+ margin: 0.2rem 0.2rem;
+ background: #141214;;
+ font-size: 0;
+ color: #ffffff;
+ border-radius: 5px;
+ cursor: pointer;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ box-shadow: 5px 2px 20px 0 rgba(46, 61, 73, 0.5);
+}
+.collect .card.open {
+ transform: rotateY(0);
+ background: #02b3e4;
+ cursor: default;
+ animation-name: flipInY;
+ -webkit-backface-visibility: visible !important;
+ backface-visibility: visible !important;
+ animation-duration: .75s;
+}
+.collect .card.show {
+ font-size: 33px;
+}
+.collect .card.match {
+ cursor: default;
+ background: #E5F720;
+ font-size: 33px;
+ animation-name: rubberBand;
+ -webkit-backface-visibility: visible !important;
+ backface-visibility: visible !important;
+ animation-duration: .75s;
+}
+.collect .card.unmatched {
+ animation-name: pulse;
+ -webkit-backface-visibility: visible !important;
+ backface-visibility: visible !important;
+ animation-duration: .75s;
+ background: #e2043b;
+}
+.collect .card.disabled {
+ pointer-events: none;
+ opacity: 0.9;
+}
+
+/*
+style for score panel
+*/
+
+.score-panel {
+ text-align: left;
+ margin-bottom: 10px;
+}
+
+.score-panel .stars {
+ margin: 0;
+ padding: 0;
+ display: inline-block;
+ margin: 0 5px 0 0;
+}
+
+.score-panel .stars li , .moves1{
+ list-style: none;
+ display: inline-block;
+}
+
+.score-panel .restart {
+ display: inline-block;
+ cursor: pointer;
+}
+
+.fa-star {
+ color: #FFD700;
+}
+
+.timer {
+ display: inline-block;
+ margin: 0 1rem;
+}
+
+/*
+style for popup yeay
+*/
+
+.overlay {
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background: rgba(0, 0, 0, 0.7);
+ transition: opacity 500ms;
+ visibility: hidden;
+ opacity: 0;
+}
+.overlay:target {
+ visibility: visible;
+ opacity: 1;
+}
+.popup {
+ margin: 70px auto;
+ padding: 20px;
+ background: #ffffff;
+ border-radius: 5px;
+ width: 100%;
+ position: relative;
+ transition: all 5s ease-in-out;
+ font-family: 'Bubblegum Sans', cursive;
+}
+.popup h2 {
+ margin-top: 0;
+ color: #333;
+ font-family: 'Bubblegum Sans', Arial, sans-serif;
+ text-align: center;
+}
+.popup .close {
+ position: absolute;
+ top: 20px;
+ right: 30px;
+ transition: all 200ms;
+ font-size: 30px;
+ font-weight: bold;
+ text-decoration: none;
+ color: #333;
+}
+.popup .close:hover {
+ color:red;
+}
+.popup .content1,
+.content2 {
+ max-height: 30%;
+ overflow: auto;
+ text-align: center;
+}
+.show {
+ visibility: visible !important;
+ opacity: 100 !important;
+}
+#starRating li {
+ display: inline-block;
+}
+#replay {
+ background-color: #141214;
+ padding: 0.7rem 1rem;
+ font-size: 1.1rem;
+ display: block;
+ margin: 0 auto;
+ width: 80%;
+ font-family: 'Bubblegum Sans', cursive;
+ color: #ffffff;
+ border-radius: 5px;
+}
+
+/*
+animation
+*/
+@keyframes flipInY {
+ from {
+ transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+ animation-timing-function: ease-in;
+ opacity: 0;
+ }
+
+ 40% {
+ transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+ animation-timing-function: ease-in;
+ }
+
+ 60% {
+ transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+ opacity: 1;
+ }
+
+ 80% {
+ transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+ }
+
+ to {
+ transform: perspective(400px);
+ }
+}
+
+@keyframes rubberBand {
+ from {
+ transform: scale3d(1, 1, 1);
+ }
+
+ 30% {
+ transform: scale3d(1.25, 0.75, 1);
+ }
+
+ 40% {
+ transform: scale3d(0.75, 1.25, 1);
+ }
+
+ 50% {
+ transform: scale3d(1.15, 0.85, 1);
+ }
+
+ 65% {
+ transform: scale3d(.95, 1.05, 1);
+ }
+
+ 75% {
+ transform: scale3d(1.05, .95, 1);
+ }
+
+ to {
+ transform: scale3d(1, 1, 1);
+ }
+}
+
+@keyframes pulse {
+ from {
+ transform: scale3d(1, 1, 1);
+ }
+
+ 50% {
+ transform: scale3d(1.2, 1.2, 1.2);
+ }
+
+ to {
+ transform: scale3d(1, 1, 1);
+ }
+}
+
+/****** Media queries
+***************************/
+
+@media (max-width: 320px) {
+ .collect {
+ width: 85%;
+ }
+
+ .collect .card {
+ height: 4.7rem;
+ width: 4.7rem;
+ }
+}
+
+
+/* For Tablets and larger screens
+****************/
+
+@media (min-width: 768px) {
+ .container {
+ font-size: 22px;
+ height: 50%;
+ width: 50%;
+ margin: auto;
+ }
+
+ .collect {
+ width: 70%;
+ height: 120%;
+ margin: auto;
+
+ }
+
+ .collect .card {
+ height: 13vh;
+ width: 6.5vw;
+ }
+
+ .popup {
+ width: 60%;
+ }
+}
+