monalighosh · December 11, 2016 23:04
diff --git a/index.html b/index.html
 <!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Team 10 Hexagon Jigsaw Puzzle</title>  <!-- Style sheets -->  <link rel="stylesheet" href="css/puzzle-style.css">  <!--[if lt IE 9]>        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><![endif]--></head><body>  <header> <!-- Page header start -->    Hexagon Jigsaw Puzzle - Team 10  </header> <!-- Page header end -->  <section>    <div id="puzzle-container"> <!-- Puzzle container start -->      <div id="puzzle-board">        <img src="img/_Puzzle_solved.png" alt="Solved Puzzle" id="solved-puzzle">        <div id="hex-images"> <!-- Overlapping puzzle images start -->          <img src="img/Group 45.png">          <img src="img/Group 44.png">          <img src="img/Group 43.png">          <img src="img/Group 42.png">          <img src="img/Group 41.png">          <img src="img/Group 40.png">          <img src="img/Group 39.png">          <img src="img/Group 38.png">          <img src="img/Group 37.png">          <img src="img/Group 36.png">          <img src="img/Group 35.png">          <img src="img/Group 34.png">          <img src="img/Group 33.png">          <img src="img/Group 32.png">          <img src="img/Group 31.png">          <img src="img/Group 30.png">          <img src="img/Group 29.png">          <img src="img/Group 28.png">          <img src="img/Group 27.png">          <img src="img/Group 26.png">          <img src="img/Group 25.png">          <img src="img/Group 24.png">          <img src="img/Group 23.png">          <img src="img/Group 22.png">          <img src="img/Group 21.png">          <img src="img/Group 20.png">          <img src="img/Group 19.png">          <img src="img/Group 18.png">          <img src="img/Group 17.png">          <img src="img/Group 16.png">          <img src="img/Group 15.png">          <img src="img/Group 14.png">          <img src="img/Group 13.png">          <img src="img/Group 12.png">          <img src="img/Group 11.png">          <img src="img/Group 10.png">          <img src="img/Group 9.png">          <img src="img/Group 8.png">          <img src="img/Group 7.png">          <img src="img/Group 6.png">          <img src="img/Group 5.png">        </div> <!-- Overlapping puzzle images end -->        <img src="img/_Puzzle_bg_unsolved.png" alt="Unsolved Puzzle" id="unsolved-puzzle">      </div>      <div id="preview-img"> <!-- Puzzle solved preview start -->        <img src="img/_Puzzle_solved.png" alt="Solved Puzzle">      </div> <!-- Puzzle solved preview end -->      <div id="puzzle-pieces">      </div>    </div> <!-- Puzzle container end -->    <!-- Bottom buttons start -->    <input type="button" value="Scramble" id="scramble">    <input type="button" value="Hint" id="preview">    <input type="button" value="Reset" id="reset">    <div id="timer"></div>    <!-- Bottom buttons end -->  </section>  <footer> <!-- Footer start -->    <div>Designed and developed by</div>     <img src="img/patrick.png" alt="Solved Puzzle"><div>Patrick Franz</div>    <img src="img/rafael.jpg" alt="Solved Puzzle"><div>Rafael Nunez</div>    <img src="img/mai.jpg" alt="Solved Puzzle"><div>Mai Xiong </div>    <img src="img/monali.jpg" alt="Solved Puzzle"><div>Monali Ghosh </div>  </footer> <!-- Footer end -->    <!-- JavaScript Files -->  <script src="js/puzzle.js"></script></body></html>
diff --git a/puzzle-style.css b/puzzle-style.css
 /*Description: MD Hackathon Team 10 Jigsaw Puzzle Authors: Patrick Franz, Rafael Nunez, Mai Xiong, Monali Ghosh*//*------ External Fonts ------*/@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');/*------ Reset Styles ------*/html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;}/*------ General Page Styling ------*/* { box-sizing: border-box;}body { font-family: "Roboto", Helvetica, Arial, sans-serif; font-size: 100%; /* 16px */ font-weight: 400; color: #696969; background: #fff url(../img/bg-lines.png);}/*------ Header Styling ------*/header { width: 100%; background: #000; color: #fff; padding: 1em; box-shadow: 0px 0px 8px 5px rgba(68,68,68,.5); font-size: 1.5em; /* 24px / 16px */}/*------ Main Section Styling ------*/section { padding: 3em 0; max-width: 888px; margin: 0 auto;}section input[type="button"] { position: relative; border: none; outline: 0; font-size: 1em; /* 16px / 16px */ font-weight: 700; padding: 0.8em 1.2em 1em; background: #fff; margin: 0 auto; box-shadow: 0 4px 2px -1px rgba(68,68,68,0.3); cursor: pointer;}section input[type="button"]:hover { box-shadow: 0 10px 5px 0px rgba(68,68,68,0.3);}section input[id="scramble"] { margin-left: 50%; transform: translate(-50%, 0);}section input[id="preview"],section input[id="reset"] { display: none;}/*------ Puzzle Container Styling ------*/#puzzle-container { position: relative; display: flex; flex-direction: column; max-width: 888px; margin: 0 auto; border: 10px solid #fff; box-shadow: 4px 45px 15px -30px rgba(68,68,68,0.3);}#preview-img { position: absolute; top: 0; left: 0; opacity: 0; transition: all 0.5s ease;}#puzzle-pieces { background: rgba(0,0,0,0.9);  visibility: hidden; height: 0px; transition: height 1s ease;}#puzzle-board img { display: block;}#puzzle-board img[id="unsolved-puzzle"] { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.5s ease;}/*------ Overlapping Puzzle Images Styling ------*/#hex-images { position: absolute; top: 0; left: 0; z-index: 5;}#hex-images img { position: absolute; transition: all 2s ease;}#hex-images img:nth-child(1) { top: 45px; left: 41px;}#hex-images img:nth-child(2) { top: 142px; left: 41px;}#hex-images img:nth-child(3) { top: 94px; left: 125px;}#hex-images img:nth-child(4) { top: 190px; left: 125px;}#hex-images img:nth-child(5) { top: 45px; left: 209px;}#hex-images img:nth-child(6) { top: 143px; left: 209px;}#hex-images img:nth-child(7) { top: 93px; left: 292px;}#hex-images img:nth-child(8) { top: 190px; left: 292px;}#hex-images img:nth-child(9) { top: 45px; left: 377px;}#hex-images img:nth-child(10) { top: 142px; left: 377px;}#hex-images img:nth-child(11) { top: 93px; left: 460px;}#hex-images img:nth-child(12) { top: 190px; left: 460px;}#hex-images img:nth-child(13) { top: 45px; left: 545px;}#hex-images img:nth-child(14) { top: 143px; left: 545px;}#hex-images img:nth-child(15) { top: 93px; left: 629px;}#hex-images img:nth-child(16) { top: 190px; left: 629px;}#hex-images img:nth-child(17) { top: 45px; left: 713px;}#hex-images img:nth-child(18) { top: 142px; left: 713px;}#hex-images img:nth-child(19) { top: 237px; left: 41px;}#hex-images img:nth-child(20) { top: 336px; left: 41px;}#hex-images img:nth-child(21) { top: 286px; left: 125px;}#hex-images img:nth-child(22) { top: 384px; left: 125px;}#hex-images img:nth-child(23) { top: 434px; left: 41px;}#hex-images img:nth-child(24) { top: 434px; left: 209px;}#hex-images img:nth-child(25) { top: 434px; left: 377px;}#hex-images img:nth-child(26) { top: 434px; left: 545px;}#hex-images img:nth-child(27) { top: 434px; left: 713px;}#hex-images img:nth-child(28) { top: 239px; left: 209px;}#hex-images img:nth-child(29) { top: 336px; left: 209px;}#hex-images img:nth-child(30) { top: 287px; left: 292px;}#hex-images img:nth-child(31) { top: 385px; left: 292px;}#hex-images img:nth-child(32) { top: 240px; left: 377px;}#hex-images img:nth-child(33) { top: 336px; left: 377px;}#hex-images img:nth-child(34) { top: 287px; left: 460px;}#hex-images img:nth-child(35) { top: 385px; left: 460px;}#hex-images img:nth-child(36) { top: 239px; left: 545px;}#hex-images img:nth-child(37) { top: 338px; left: 545px;}#hex-images img:nth-child(38) { top: 289px; left: 629px;}#hex-images img:nth-child(39) { top: 385px; left: 629px;}#hex-images img:nth-child(40) { top: 239px; left: 713px;}#hex-images img:nth-child(41) { top: 337px; left: 713px;}/*------ Timer Styling ------*/#timer { position: relative; border: none; outline: 0; font-weight: 700; width: 152px;  line-height: 46px; background: #ea3d85; text-align: center; float: right; box-shadow: 0 4px 2px -1px rgba(68,68,68,0.3); color: #fff; visibility: hidden; height: 0; transition: all 0.5s ease;}/*------ Footer Styling ------*/footer { position: absolute; display: flex; flex-direction: row; align-items: center; justify-content: center; width: 100%; bottom: 0; background: rgba(219,219,219, 0.9); padding: 0.7em; font-size: 0.875em;}footer img { border: 3px solid rgb(187,187,187); border-radius: 50%; margin-left: 1em; margin-right: 0.5em; width: 30px;}
diff --git a/puzzle.js b/puzzle.js
 // Show preview button function // var preview = document.getElementById("preview");preview.addEventListener("mousedown", showPreview);preview.addEventListener("mouseout", hidePreview);function showPreview(){ document.getElementById("preview-img").style.opacity = "1";}function hidePreview(){ document.getElementById("preview-img").style.opacity = "0";}// Scramble button function // var scramble = document.getElementById("scramble");scramble.addEventListener("mousedown", startPuzzle);function startPuzzle(){ scramble.style.display = "none"; document.getElementById("puzzle-pieces").style.visibility = "visible"; document.getElementById("puzzle-pieces").style.height = "370px"; document.getElementById("preview").style.display = "inline-block"; document.getElementById("reset").style.display = "inline-block"; document.getElementById("unsolved-puzzle").style.opacity = "1"; hexImagesAnimation(); setTimeout(countDownTimer, 2000);}// Scramble button function // function hexImagesAnimation() { var hexImagesContainer = document.getElementById("hex-images"); var hexImages = hexImagesContainer.getElementsByTagName("IMG"); for(var i = 0; i < hexImages.length; i++){  if(i === 0 || i === 2 || i === 4 || i === 6 || i === 8 || i === 18 || i === 20) {   hexImages[i].style.transform = "translate(30px, 550px) rotate(180deg)";  } else if (i === 22 || i === 30 || i === 25 || i === 28 || i === 21 || i === 23) {   hexImages[i].style.transform = "translate(20px, 300px) rotate(180deg)";  } else if (i === 1 || i === 5 || i === 9 || i === 27) {   hexImages[i].style.transform = "translate(0px, 500px) rotate(180deg)";  } else if ( i === 3 || i === 7 || i === 19 || i === 29) {   hexImages[i].style.transform = "translate(-20px, 400px) rotate(180deg)"  } else if (i === 11 || i === 13 || i === 15 || i === 17 || i === 31 || i === 33 || i === 35 || i === 37 || i === 39) {   hexImages[i].style.transform = "translate(20px, 500px) rotate(-180deg)";  } else if (i === 32 || i === 34 || i === 36 || i === 24 || i === 38 || i === 40 || i === 26) {   hexImages[i].style.transform = "translate(20px, 400px) rotate(-180deg)";  } else {   hexImages[i].style.transform = "translate(-30px, 560px) rotate(-180deg)";  } }}// Scramble animation reverse // function hexImagesAnimationReverse() { var hexImagesContainer = document.getElementById("hex-images"); var hexImages = hexImagesContainer.getElementsByTagName("IMG"); for(var i = 0; i < hexImages.length; i++){  if(i === 0 || i === 2 || i === 4 || i === 6 || i === 8 || i === 18 || i === 20) {   hexImages[i].style.transform = "translate(0, 0)";  } else if (i === 22 || i === 30 || i === 25 || i === 28 || i === 21 || i === 23) {   hexImages[i].style.transform = "translate(0, 0)";  } else if (i === 1 || i === 5 || i === 9 || i === 27) {   hexImages[i].style.transform = "translate(0, 0)";  } else if ( i === 3 || i === 7 || i === 19 || i === 29) {   hexImages[i].style.transform = "translate(0, 0)"  } else if (i === 11 || i === 13 || i === 15 || i === 17 || i === 31 || i === 33 || i === 35 || i === 37 || i === 39) {   hexImages[i].style.transform = "translate(0, 0)";  } else if (i === 32 || i === 34 || i === 36 || i === 24 || i === 38 || i === 40 || i === 26) {   hexImages[i].style.transform = "translate(0, 0)";  } else {   hexImages[i].style.transform = "translate(0, 0)";  } }}// Reset function // var reset = document.getElementById("reset");reset.addEventListener("mousedown", resetPuzzle);function resetPuzzle(){ document.getElementById("puzzle-pieces").style.transitionDelay = "0.2s"; document.getElementById("puzzle-pieces").style.height = "0"; document.getElementById("preview").style.display = "none"; document.getElementById("reset").style.display = "none"; document.getElementById("unsolved-puzzle").style.opacity = "0"; document.getElementById("timer").style.height = "0"; document.getElementById("timer").style.display = "none"; scramble.style.display = "block"; hexImagesAnimationReverse();}// Timer function // var countDownTime = 60;function countDownTimer(){ var counter = document.getElementById("timer"); counter.style.visibility = "visible"; counter.style.height = "47px"; var buzzer = new Audio(); buzzer.src = "sound/buzzer.mp3";    var minutes = parseInt( countDownTime / 60 ) % 60; var seconds = countDownTime % 60; var timer = setTimeout(function(){ countDownTimer() }, 1000); if(countDownTime < 1 ){   clearTimeout(timer);  buzzer.play();  alert("Sorry, your time is up, try again!");   resetPuzzle(); } countDownTime--; var result = "Time left " + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds  < 10 ? "0" + seconds : seconds); counter.innerHTML = result; }