Skip to content

Instantly share code, notes, and snippets.

@SolarGeeks

SolarGeeks/index.html

Created April 29, 2017 11:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save SolarGeeks/c9029e424e77d0b37a22a6a6a421eebd to your computer and use it in GitHub Desktop.
Save SolarGeeks/c9029e424e77d0b37a22a6a6a421eebd to your computer and use it in GitHub Desktop.
Download ZIP
Html Code
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script type="text/javascript" src="effects.js"></script>
</head>
<body>
<div class="header">
<img src="Icons/logo%20.PNG" align="center" alt="logo" />
</div>
<div id="object-calculator">
<!-- Screen and clear key -->
<div class="screen"></div>
<div class="navagation">
<span class="clear">C</span>
<span class="clear">del</span>
<span id="back" class="eval">Back</span>
<span id="next" class="eval">Next</span>
</div>
<!-- Main Keys -->
<div class="keys" id="main">
<div>
<span class="eval" id="lights-button">Lights<img class="manImg" src="Icons/light.png"/></span>
</div>
<span class="eval" id="general-button">TVs<img class="manImg" src="Icons/tv.png"/></span>
<span class="eval" id="devices-button">Consoles<img class="manImg" src="Icons/consoles.png"/></span>
<span class="eval" id="computers-button">Computers<img class="manImg" src="Icons/computers.PNG"/></span>
<span class="eval" id="kitchen-button">Kitchen<img class="manImg" src="Icons/kitchen.png"/></span>
<span class="eval" id="washroom-button">Washroom<img class="manImg" src="Icons/washroom.png"/></span>
<span class="eval" id="home-button">Home<img class="manImg" src="Icons/mobile.png"/></span>
</div>
<div class="keys" id="lights">
<!-- operators and other keys -->
<span class="eval">10 LED Bulb</span>
<span class="eval">30 LED Bulb</span>
<span class="eval">50 LED Bulb</span>
<span class="eval">10 Fluor. Bulb</span>
<span class="eval">30 Fluor. Bulb</span>
<span class="eval">50 Fluor. Bulb</span>
</div>
<div class="keys" id="general">
<!-- operators and other keys -->
<span class="eval">Plasma TV</span>
<span class="eval">(20in+) LCD TV</span>
<span class="eval">(60in+) LCD TV</span>
<span class="eval">(20in+) LED TV</span>
<span class="eval">(60in+) LED TV</span>
</div>
<div class="keys" id="devices">
<!-- operators and other keys -->
<span class="eval">Xbox 360</span>
<span class="eval">Xbox One</span>
<span class="eval">Play Station 3</span>
<span class="eval">Play Station 4</span>
<span class="eval">Wii U</span>
<span class="eval">Smart Phone</span>
</div>
<div class="keys" id="computers">
<!-- operators and other keys -->
<span class="eval">PC</span>
<span class="eval">Laptop PC</span>
<span class="eval">Mac</span>
<span class="eval">Laptop Mac</span>
<span class="eval">Printer</span>
<span class="eval">Router</span>
</div>
<div class="keys" id="kitchen">
<!-- operators and other keys -->
<span class="eval">Oven</span>
<span class="eval">Dish Washer</span>
<span class="eval">Fride / Freezer</span>
<span class="eval">Microwave</span>
<span class="eval">Blender</span>
<span class="eval">Kettle</span>
</div>
<div class="keys" id="washroom">
<!-- operators and other keys -->
<span class="eval">Electronic Razor</span>
<span class="eval">Blow Dryer</span>
<span class="eval">Washer</span>
<span class="eval">Dryer</span>
<span class="eval">Iron</span>
</div>
<div class="keys" id="home">
<!-- operators and other keys -->
<span class="eval">A/C</span>
<span class="eval">Fan</span>
<span class="eval">Water Pump</span>
</div>
</div>
<script type="text/javascript" src="logic.js"></script>
<script type="text/javascript">
var catagories = ["#lights", "#general", "#devices", "#computers", "#kitchen", "#washroom", "#home", "#phones"]
var buttons = ["#lights-button", "#general-button", "#devices-button","#computers-button", "#kitchen-button", "#washroom-button", "#home-button"];
var clicked_sf = 0;
var behind = -1;
function is(num) {
if (num == 7) {
console.log("yp");
$("#next").html("Done");
$("#next").css("width", "100px;")
}
}
$("#next").click(function () {
$(buttons[clicked_sf]).css("background", "#ff9fa8");
$(buttons[clicked_sf]).css("color", "black");
$(buttons[clicked_sf]).css("box-shadow", "0px 4px #d3545d");
$(catagories[clicked_sf]).css("display", "block");
++clicked_sf;
++behind;
is(clicked_sf);
});
$("#back").click(function () {
$(buttons[behind]).css("background", "#1a1a1a");
$(buttons[behind]).css("color", "white");
$(buttons[behind]).css("box-shadow", "0px 4px grey");
$(catagories[behind]).css("display", "none");
--behind;
--clicked_sf;
$("#next").html("Next");
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment