Add files via upload

Premkolte · Dec 22, 2023 · 5cec3e5 · 5cec3e5
1 parent 3c3e63c
commit 5cec3e5
Show file tree

Hide file tree

Showing 3 changed files with 263 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>CodePen - love Puzzle</title>
+  <link rel="stylesheet" href="style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div id='puz_box'>
+  <div id='puz'>
+    <i class='first' ondrop='drop(event)' ondragover='allowDrop(event)' ></i>
+    <i class='secon' ondrop='drop(event)' ondragover='allowDrop(event)'></i>
+    <i class='third' ondrop='drop(event)' ondragover='allowDrop(event)'></i>
+    <i class='fourt' ondrop='drop(event)' ondragover='allowDrop(event)'></i>
+    <i class='fifth' ondrop='drop(event)' ondragover='allowDrop(event)'></i>
+    <i class='sixth' ondrop='drop(event)' ondragover='allowDrop(event)'></i>
+    <i class='seven' ondrop='drop(event)' ondragover='allowDrop(event)'></i>
+    <i class='eight' ondrop='drop(event)' ondragover='allowDrop(event)'></i>
+    <i class='ninth' ondrop='drop(event)' ondragover='allowDrop(event)'></i>
+  </div>
+  <div id='puzz'>
+    <i class='third' draggable='true' ondragstart='drag(event)'></i>
+    <i class='first' draggable='true' ondragstart='drag(event)'></i>
+    <i class='secon' draggable='true' ondragstart='drag(event)'></i>
+    <i class='fourt' draggable='true' ondragstart='drag(event)'></i>
+    <i class='fifth' draggable='true' ondragstart='drag(event)'></i>
+    <i class='sixth' draggable='true' ondragstart='drag(event)'></i>
+    <i class='seven' draggable='true' ondragstart='drag(event)'></i>
+    <i class='eight' draggable='true' ondragstart='drag(event)'></i>
+    <i class='ninth' draggable='true' ondragstart='drag(event)'></i>  
+  </div>
+</div>
+<div id='clicks'>0</div>
+<!-- partial -->
+  <script  src="script.js"></script>
+
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,107 @@
+var images = ['https://images.srkh.in/wp-content/uploads/2023/02/Happy-Propose-Day-Images-333-I-LOVE-YOU.jpg'];
+
+
+var currentIndex = 0;
+var totalClicks = 0;
+
+function randomizeImage() {
+  let root = document.documentElement;
+  root.style.setProperty('--image', 'url(' + images[currentIndex] + ')');
+  currentIndex++;
+  if (currentIndex >= images.length) {
+    currentIndex = 0;
+  }
+  var puzzleItems = document.querySelectorAll('#puzz i');
+  for (var i = 0; i < puzzleItems.length; i++) {
+    puzzleItems[i].style.left = Math.random() * (window.innerWidth - 100) + 'px';
+    puzzleItems[i].style.top = Math.random() * (window.innerHeight - 100) + 'px';
+  }
+}
+
+randomizeImage();
+
+function reloadPuzzle() {
+  var doneItems = document.querySelectorAll('.done');
+  doneItems.forEach(function (element) {
+    element.classList.toggle('done');
+  });
+  var droppedItems = document.querySelectorAll('.dropped');
+  droppedItems.forEach(function (element) {
+    element.classList.toggle('dropped');
+  });
+  var allDoneElement = document.querySelector('.allDone');
+  allDoneElement.style = '';
+  allDoneElement.classList.toggle('allDone');
+}
+
+// mobile functionality
+var puzzleItemsMobile = document.querySelectorAll('#puzz i');
+puzzleItemsMobile.forEach(function (element) {
+  element.addEventListener('mousedown', function () {
+    totalClicks++;
+    document.querySelector('#clicks').innerHTML = totalClicks;
+  });
+  element.addEventListener('click', function () {
+    if (document.querySelector('.clicked')) {
+      document.querySelector('.clicked').classList.toggle('clicked');
+      element.classList.toggle('clicked');
+    } else {
+      element.classList.toggle('clicked');
+    }
+  });
+});
+
+var puzzleItemsDesktop = document.querySelectorAll('#puz i');
+puzzleItemsDesktop.forEach(function (element) {
+  element.addEventListener('click', function () {
+    if (document.querySelector('.clicked')) {
+      var clickedElement = document.querySelector('.clicked');
+      if (clickedElement.classList.contains(element.classList)) {
+        element.classList.add('dropped');
+        clickedElement.classList.add('done');
+        clickedElement.classList.toggle('clicked');
+
+        if (document.querySelectorAll('.dropped').length == 9) {
+          document.querySelector('#puz').classList.add('allDone');
+          document.querySelector('#puz').style.border = 'none';
+          document.querySelector('#puz').style.animation = 'allDone 1s linear forwards';
+
+          setTimeout(function () {
+            reloadPuzzle();
+            randomizeImage();
+          }, 1500);
+        }
+      }
+    }
+  });
+});
+
+// desktop drag and drop
+function allowDrop(ev) {
+  ev.preventDefault();
+}
+
+function drag(ev) {
+  ev.dataTransfer.setData("text", ev.target.className);
+}
+
+function drop(ev) {
+  ev.preventDefault();
+  var data = ev.dataTransfer.getData("text");
+
+  if (ev.target.className == data) {
+    ev.target.classList.add('dropped');
+    document.querySelector('.' + data + "[draggable='true']").classList.add('done');
+
+    if (document.querySelectorAll('.dropped').length == 9) {
+      document.querySelector('#puz').classList.add('allDone');
+      document.querySelector('#puz').style.border = 'none';
+      document.querySelector('#puz').style.animation = 'allDone 1s linear forwards';
+
+      setTimeout(function () {
+        reloadPuzzle();
+        randomizeImage();
+      }, 1500);
+    }
+  }
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,116 @@
+:root {
+    --color:lightgray;
+    --border-radius:10px;
+  }
+
+  body {
+    background:#efefef;
+    padding:0;
+    margin:0;
+    box-sizing:border-box;
+  }
+
+  #puz, #puzz {
+    position:absolute;
+    border-radius:var(--border-radius) 0 var(--border-radius) 0;    
+    user-select:none;
+  }
+  #puz {
+    width:300px;
+    height:300px;
+    position:absolute;
+    top:50%;
+    left:50%;
+    transform:translate(-50%,-50%);
+    border:3px dashed lightgray;
+    overflow:hidden;
+  }
+  #puzz {
+    left:0;
+    top:0;
+    border:0;
+  }
+
+  #puz i {
+    float:left;
+    width:100px;
+    height:100px;
+    outline:1px dashed lightgray;
+  }
+
+  #puzz i {
+    position:absolute;
+    width:100px;
+    height:100px;
+    background:var(--color);
+    background-image:var(--image);
+    background-size:300px 300px;
+    cursor:move;
+    box-shadow:0 0 10px rgba(0,0,0,.25);
+  }
+
+  .first {
+    border-top-left-radius:var(--border-radius);
+    background-position:left top !important;
+  }
+  .secon {
+    background-position:center top !important;
+  }
+  .third {
+  /*   border-top-right-radius:var(--border-radius); */
+    background-position:right top !important;
+  }
+  .fourt {
+    background-position:left center !important;
+  }
+  .fifth {
+    background-position:center center !important;
+  }
+  .sixth {  
+    background-position:right center !important;
+  }
+  .seven {
+  /*   border-bottom-left-radius:var(--border-radius); */
+    background-position:left bottom !important;
+  }
+  .eight {
+    background-position:center bottom !important;
+  }
+  .ninth {
+    border-bottom-right-radius:var(--border-radius);
+    background-position:right bottom !important;
+  }
+
+  .clicked {
+    box-shadow:0 0 0 4px gray !important;
+  }
+
+  .dropped {
+    background:var(--color);
+    background-image:var(--image);
+    background-size:300px 300px;
+  }
+  .done {
+    opacity:0;
+    pointer-events:none;
+  }
+
+  .allDone {
+    animation:allDone 1s linear forwards;
+    border:3px solid lightgray !important;
+  }
+  .allDone i {
+    outline:0 !important;
+  }
+
+  @keyframes allDone {
+    50% { transform:translate(-50%,-50%) scale(1.2); }
+  }
+
+  #clicks {
+    font-size:8px;
+    font-family:monospace;
+    position:absolute;
+    bottom:5px;
+    right:5px;
+  }