Skip to content

Anish Roy 2020ME10911 #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Anish Roy 2020ME10911 #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
b65adf1
Added Entry
anishroy1802 Jan 30, 2021
cee8871
Added entry
anishroy1802 Jan 31, 2021
5cf24e1
Added entry
anishroy1802 Jan 31, 2021
90357de
Modified changes: rows
anishroy1802 Feb 1, 2021
63ccc7d
Add
anishroy1802 Feb 1, 2021
02514d7
Update index.css
anishroy1802 Feb 1, 2021
383bc43
Add files via upload
anishroy1802 Feb 27, 2021
ca8880b
Delete Udai Hackathon directory
anishroy1802 Feb 27, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 23 additions & 2 deletions index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,9 @@
}

#header {
background-color: lightpink;
background-color:lightsalmon;
height: 30vh;

display: flex;
flex-direction: column;
justify-content: center;
Expand All @@ -15,13 +16,33 @@
#container {
background-color: black;
height: 70vh;
display: flex;
display: grid;
grid-template-columns: 200 px 200px 200px;
grid-template-rows: 1fr 1fr;
justify-content: space-evenly;
align-items: center;

}

.tile {
height: 200px;
width: 200px;
background-color: aliceblue;


}
.row {
display: flex;
flex-direction: row;
width: 150vh;
justify-content: space-evenly;

}








223 changes: 194 additions & 29 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,65 +3,230 @@
<html>
<head>
<title>Color Game</title>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./index.css" />

<style>
h2{
font-family: 'Open Sans', sans-serif;
}
h1{
font-family: 'Open Sans', sans-serif;

}

</style>


</head>
<body onload="newGame()">
<div id="header">
<h2>The Great</h2>
<h1 id="header-clue">rgb(xxx,xxx,xxx)</h1>
<h2>Guessing Game</h2>
</div>
<div>No. of tries<div id="count"></div></div>
<div id="container">
<div class="row">
<div class="tile" id="1"></div>
<div class="tile" id="2"></div>
<div class="tile" id="3"></div>
</div>
<div class="row">

<div class="tile" id="4"></div>
<div class="tile" id="5"></div>
<div class="tile" id="6"></div>
</div>


<button onclick= "newGame()">New Game</button>









</div>

<script>
var t1 = document.getElementById("1");
var t2 = document.getElementById("2");
var count = 0; //initialising value of count


var t= new Array();
for (var i=1; i<7;i++)
{
t[i]= document.getElementById(i);
}

var x;
var correctColor;

function getRandomColor() {
function getRandomColor()
{
count= 0;
var letters = "0123456789ABCDEF";
var color = "#";
for (var i = 0; i < 6; i++) {
for (var i = 0; i < 6; i++)
{
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}

function newGame() {
t1.style.background = getRandomColor();
t2.style.background = getRandomColor();
function newGame()
{
container.style.background = "black";
header.style.background = "lightsalmon";

x = Math.floor(Math.random() * 6 + 1);

t[1].style.background = getRandomColor();
t[2].style.background = getRandomColor();
t[3].style.background = getRandomColor();
t[4].style.background = getRandomColor();
t[5].style.background = getRandomColor();
t[6].style.background = getRandomColor();


//new snippet to get x as one of the colors of given six tiles
for (var k=1; k<7;k++)
{
if (x== k)
correctColor = t[k].style.background;

x = Math.floor(Math.random() * 2 + 1);
}


if (x == 1) correctColor = t1.style.background;
else correctColor = t2.style.background;
/* console.log(x);
console.log(correctColor); */
console.log(x);
console.log(correctColor);

document.getElementById("header-clue").innerHTML = correctColor;
}

t1.addEventListener("click", function () {
if (t1.style.background == correctColor) {
t2.style.background = correctColor;
document.getElementById("header").style.background = correctColor;
} else {
t1.style.background = "black";
}
});

t2.addEventListener("click", function () {
if (t2.style.background == correctColor) {
t1.style.background = correctColor;
document.getElementById("header").style.background = correctColor;
} else {
t2.style.background = "black";
}
});


//new code to be written in place of replaced part
t[1].addEventListener("click", function()
{
if (t[1].style.background== correctColor)
{
document.getElementById("container").style.background = correctColor;

document.getElementById("header").style.background = correctColor;

}
else
{
count= count+1;
document.getElementById("count").innerHTML = count;
t[1].style.background = "black";

}
});

t[2].addEventListener("click", function()
{
if (t[2].style.background== correctColor)
{
document.getElementById("container").style.background = correctColor;

document.getElementById("header").style.background = correctColor;

}
else
{
count= count+1;
document.getElementById("count").innerHTML = count;
t[2].style.background = "black";

}
});

t[3].addEventListener("click", function()
{
if (t[3].style.background== correctColor)
{
document.getElementById("container").style.background = correctColor;

document.getElementById("header").style.background = correctColor;

}
else
{
count= count+1;
document.getElementById("count").innerHTML = count;
t[3].style.background = "black";

}
});

t[4].addEventListener("click", function()
{
if (t[4].style.background== correctColor)
{
document.getElementById("container").style.background = correctColor;

document.getElementById("header").style.background = correctColor;


}
else
{
count= count+1;
document.getElementById("count").innerHTML = count;
t[4].style.background = "black";

}
});

t[5].addEventListener("click", function()
{
if (t[5].style.background== correctColor)
{
document.getElementById("container").style.background = correctColor;

document.getElementById("header").style.background = correctColor;

}
else
{
count= count+1;
document.getElementById("count").innerHTML = count;
t[5].style.background = "black";

}
});

t[6].addEventListener("click", function()
{
if (t[6].style.background== correctColor)
{
document.getElementById("container").style.background = correctColor;

document.getElementById("header").style.background = correctColor;

}
else
{
count= count+1;
document.getElementById("count").innerHTML = count;
t[6].style.background = "black";

}
});









</script>
</body>
</html>