word-games-theme 1.2.1 → 1.2.2

data/assets/css/game.css

@@ -1,9 +1,19 @@
 /* create wordle screen css */
 .create-wordle{
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 20%);
+    box-shadow: 0 5px 15px rgb(0 0 0 / 20%) ; 
     margin-bottom: 150px;
     padding:8rem 0;
 }
+.word-generator-link{
+    font-size: 18px;
+    background: #f8f9fa;
+    padding: 8px 15px;
+    color:#404040;
+    box-shadow: 0 0 1px rgba(0,0,0,0.1);
+    border-radius: 4px;
+    margin: 0 25px;
+    border:1px solid rgba(0,0,0,.1)
+}
 .create-wordle .custom-word{
     font-weight: 600;
     text-transform: uppercase;
@@ -54,6 +64,11 @@
     top: 60px !important;
 }
 
+.game{
+    width: 100%;
+    /* height: 100vh; */
+}
+
 /* wordle game play css */
 .game .game-container .game-board{
     width: 350px;
@@ -62,12 +77,16 @@
     margin-top: 3px;
     display: flex;
     flex-wrap: wrap;
+    justify-content: center;
 }
 .game .game-container .game-board .tile{
-    width: 55px;
-    height: 55px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 60px;
+    height: 60px;
     text-align: center;
-    border:2px solid #d3d6da;
+    border:2px solid #dee1e9;
     border-radius: 5px;
     color: #363535;
     font-size: 28px;
@@ -75,6 +94,10 @@
     margin: 3px;
     max-width: 64px;
     text-transform: uppercase;
+    transition: transform 240ms linear;
+}
+.popAni{
+    animation: popAni 495ms ease-in-out;
 }
 .game .game-container .game-keyboard{
     display: flex;
@@ -87,7 +110,7 @@
     flex-direction: row;
     justify-content: center;
 }
-.game .game-container .game-keyboard-button {
+.game .game-container .key-btn {
     align-items: center;
     background-color: #edeff1;
     border: 2px solid transparent;
@@ -98,9 +121,286 @@
     font-size: 16px;
     font-weight: 900;
     justify-content: center;
-    margin: 3px;
+    margin: 2px;
     min-height: 40px;
-    padding: 15px;
+    padding: 11px 18px;
     text-decoration: inherit;
+    
+}
+
+.alert-container{
+    font-size: 15px;
+    box-shadow: 0 5px 15px rgb(0 0 0 / 10%);
+    position: fixed;
+    top: 160px;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 180px;
+    padding: 12px 0px;
+    text-align: center;
+    z-index: 9999999;
+    background: #000;
+    color:#fff;
+    border-radius: 4px;
+}
+.active-alert{
+    visibility: visible;
+}
+.tick {
+    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAL7SURBVEhL7ZZdSBRRFMf/s+PWSrsUFGoUfi1ooWISFUQPvfRhH1hUL5agvogvaQ/hamBRbz0W2VNBQb2IgqJsGL2VVBK11UNpPkhGKmWK6wfu7kznzFxGx5lxZ+tN/MGdOefOzP3PnTn3noN11jySOLvnWamfniqGJGVovqpOQMVnHI9ENd8l7oTDe/zwSGfp7nPkHaPm0/qXWKD2kl7gERS1A+Uf5vVuZ1YXbg9KCAT2kWgjeaeoBbR+Z/gFupFQWhGNDuLCsKp3W3EW1kQ3HYRHfkhegd7pmkEoiVrMzPY7iXvE2YrfXyJEg3pHShTQsw9oDMcXthfuLfNDlq+RxQ/KWl/qFNIYN7WxbLAX9uIMhWu58P4D9TSNVSEcE06fmqM3WSAZ+DwbcCXnEk5sO7QyaNKpVeumGWtw9ZYE4E2bIGvlkrGFRZtyqxHKq8HQ3HfsfVOJmBIXVzUWEItn4OSnGeFrWGcspxXR0ZXolrQAmkgwlFeL4blRtAzdRVxJiKsGPhqzUNgGVmFJzRSWCVmSqZlvb8ipRCi3BtPxGYSG7qD3F+8hNqtHUncIy8DpH5tg0VvBeoTL7iHbl6XN9HqwDjfy6zCy8BPnI1edRXUsv9QqrEo/hGXAA+7fXIwjWw+gbXczmunTNmZX4uvcCFq/teHVVGQ1UR5zTFgGroMrJz0LbbtatMhlxhd/azNNKuoQXNbN4enEIqq2HyYrX+/QmY5H8XzyNYr8QSwqMVz+chsvJgeSiTI9KI88FraB/V7dV3aRjvepWdYyz3znxkz0T310I8qzrMfR9090dwn74Iqhk94pLDwTI/Njbj6vQOqhsbqEY8J+xky4lPZaTzdZqWYmhhfzMBSligqEt3qXGeflxPmUUxunuNQhUU6L0QHhW3DOPO1/gAr/KLzePioEuMzhYPNq15zhf9pJhUADorPv/q0QWA6XPrLEWYaTB2ctu9KHY6IDCbWLSp+k9Zc74eVwseehXAuJt0GJir1xirOUi7111jrAXwKK6K/PgrsYAAAAAElFTkSuQmCC) no-repeat;
+    height: 35px;
+    margin: 10px 0;
+    background-position: center;
+}
+.close-icon {
+    background: url(/assets/images/close.png) no-repeat;
+    height: 20px;
+    margin: 10px 0;
+    background-position: center;
+    background-size: contain;
+}
+[data-state="active"] {
+    border-color: hsl(200, 1%, 34%);
+}
+[data-state="correct-spot"] {
+    color:#fff !important;
+    background-color:#6aaa64 !important;
+    border: none  !important;
+}
+[data-state="wrong-spot"] {
+    color:#fff !important;
+    background-color: #c9b458 !important;
+    border: none !important;
+}
+[data-state="wrong-word"] {
+    color:white !important;
+    background-color: #787c7e!important;
+    border: none !important;
+}
+.shake {
+    animation: shake 240ms ease-in-out;
+}
+.dance {
+    animation: dance 495ms ease-in-out;
+}
+.flip {
+    transform: rotateX(90deg);
+}
+.wordle-game-restart{
+    width: 120px;
+    margin: 0 auto;
+    background: #57ac57;
+    color: #fff;
+    display: block;
+    font-weight: 600;
+    padding: 10px;
+    border-radius: 5px;
+    font-size: 16px;
+    margin-bottom: 1rem;
+    text-align: center;
+}
+.wordle-game-restart:hover{
+    color:#fff !important;
+    text-decoration: none !important;
+}
+
+@keyframes shake {
+    10% {
+        transform: translateX(-5%);
+    }
+
+    30% {
+        transform: translateX(5%);
+    }
+
+    50% {
+        transform: translateX(-7.5%);
+    }
+
+    70% {
+        transform: translateX(7.5%);
+    }
+
+    90% {
+        transform: translateX(-5%);
+    }
+
+    100% {
+        transform: translateX(0);
+    }
+}
+
+@keyframes dance {
+    20% {
+        transform: translateY(-50%)
+    }
+
+    40% {
+        transform: translateY(5%)
+    }
+
+    60% {
+        transform: translateY(-25%)
+    }
+
+    80% {
+        transform: translateY(2.5%)
+    }
+
+    90% {
+        transform: translateY(-5%)
+    }
+
+    100% {
+        transform: translateY(0%)
+    }
+}
+
+@keyframes popAni {
+    0% {
+        transform: scale(.8);
+        opacity: 0;
+    }
+    
+    40% {
+        transform: scale(1.1);
+        opacity: 1;
+    }
+}
+
+.alert-Container {
+    position: fixed;
+    top: 10vh;
+    left: 50vw;
+    transform: translateX(-50%);
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+
+#confetti-canvas{
+    width: 100%;
+    position: fixed;
+    top:0
+}
+
+.gameResult{
+    text-align: center;
+    width: 100%;
+    font-size: 18px;
+    font-weight: 900;
+}
+#result-guess-word{
+    background: #f8f9fa;
+    width: 100px;
+    text-align: center;
+    margin: 0 auto;
+    padding: 8px;
+    border-radius: 5px;
+    border: 1px dashed gray;
+    margin-top: 1rem;
+    font-size: 15px;
+    text-transform: uppercase;
+    font-weight: 600;
+}
+.wordle-game-button{
+    padding: 0px 15px;
+    color: #626568;
+    font-size: 14px;
+    background: #f5f7fb;
+    padding: 8px 5px;
+    border: none;
+    width: 100%;
+    /* font-weight: 700; */
+    border-radius: 7px;
+    display: flex;
+    text-decoration: none;
+    cursor: pointer;
+    justify-content: center;
+    align-items: center;
+    align-content: center;
+    margin: 6px 0px;
+    border: 1px solid rgba(0,0,0,0.1);
+}
+.wordle-game-button:hover{
+    text-decoration: none !important;
+}
+.social-sharing-icons{
+    display:flex;
+    justify-content: center;
+}
+.share-icon{
+    width: 50px;
+    height: 50px;
+}
+
+
+#wordle-examples {
+    border-top: 1px solid rgba(0,0,0,0.1);
+    border-bottom: 1px solid rgba(0,0,0,0.1);
+    padding: 1rem 0rem;
+  }
+.wordle-game-spot {
+    padding: 20px;
+    border: 2px solid #3a3a3c;
+    margin: 2px;
+    display: inline-block;
+    line-height: 0;
+    font-weight: bold;
+    text-align: center;
+    font-size: 25px;
+}
+.wordle-game-absent {
+    background-color: #3a3a3c !important;
+    border-color: #3a3a3c !important;
+    color: #fff;
+  }
+.wordle-game-present {
+    background-color: #b59f3b !important;
+    border-color: #b59f3b !important;
+    color: white;
+  }
+.wordle-game-correct {
+    background-color: #538d4e !important;
+    border-color: #538d4e !important;
+    color: white;
+  }
+.wordle-game-spot:before {
+    content: "\a0";
+  }
+.wordle-game-spot[title]:before { content: attr(title); }
+.wordle-game-row-active .wordle-game-spot {
+      border-color: #666;
+  }
+  @media (max-width: 768px) {
+    #create-wordle-form{
+        padding:0 10px;
+    }
+    .create-wordle .custom-word{
+        width: 100%;
+    }
+    #exampleModal,.wordletip{
+        padding:15px;
+    }
+    .game .game-container .key-btn{
+        margin:2px;
+        padding:15px 10px;
+    }
+    .game .game-container .game-keyboard{
+        margin-top: 3rem !important;
+    }
+}
+
+/* 
+.wordl_ani{
+    animation: animated 3s ease-in-out infinite;
 }
 
+@keyframes animated {
+    100%{
+        transform: scale(1.03);
+    }
+     */
+/* } */

data/assets/css/wordleSolver.css

@@ -120,6 +120,17 @@
   margin: 10px auto;
   width: 75%;
 }
+.createWordleLink{
+  display: block;
+  box-shadow: 0 0 1px rgb(0 0 0 / 10%);
+    border: none;
+    padding: 10px 15px;
+    width: 100%;
+    background: rgb(118, 118, 118);
+    border-radius: 20px;
+    font-size: 15px;
+    margin-bottom: 10px;
+}
 @media (max-width: 768px) {
   .allfiveletterswords,
   #wordleWordCount {

data/assets/images/copy.svg

@@ -0,0 +1 @@
+<svg id="SvgjsSvg1020" width="288" height="288" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs"><defs id="SvgjsDefs1021"></defs><g id="SvgjsG1022"><svg xmlns="http://www.w3.org/2000/svg" width="288" height="288" viewBox="0 0 24 24"><path d="M20,16V4H8V16H20M22,16A2,2 0 0,1 20,18H8C6.89,18 6,17.1 6,16V4C6,2.89 6.89,2 8,2H20A2,2 0 0,1 22,4V16M16,20V22H4A2,2 0 0,1 2,20V7H4V20H16Z" fill="#626568" class="color000 svgShape"></path></svg></g></svg>

data/assets/images/facebooks.svg

@@ -0,0 +1 @@
+<svg id="SvgjsSvg1044" width="288" height="288" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs"><circle id="SvgjsCircle1050" r="144" cx="144" cy="144" transform="matrix(0.7916,0,0,0.7916,30.009600000000006,30.009600000000006)" fill="#4267b2"></circle><defs id="SvgjsDefs1045"></defs><g id="SvgjsG1046" transform="matrix(0.4652,0,0,0.4652,77.01128160400391,77.0111979598999)"><svg xmlns="http://www.w3.org/2000/svg" width="288" height="288" viewBox="0 0 24 24"><path d="M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z" fill="#ffffff" class="color000 svgShape"></path></svg></g></svg>

data/assets/images/twitters.svg

@@ -0,0 +1 @@
+<svg id="SvgjsSvg1030" width="288" height="288" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs"><circle id="SvgjsCircle1036" r="144" cx="144" cy="144" transform="matrix(0.7916,0,0,0.7916,30.009600000000006,30.009600000000006)" fill="#1da1f2"></circle><defs id="SvgjsDefs1031"></defs><g id="SvgjsG1032" transform="matrix(0.4652,0,0,0.4652,77.0111979598999,80.22)"><svg xmlns="http://www.w3.org/2000/svg" width="288" height="288" viewBox="0 0 24 24"><path d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z" fill="#ffffff" class="color000 svgShape"></path></svg></g></svg>

data/assets/images/whatsapp.svg

@@ -0,0 +1 @@
+<svg id="SvgjsSvg1066" width="288" height="288" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs"><circle id="SvgjsCircle1072" r="144" cx="144" cy="144" transform="matrix(0.7916,0,0,0.7916,30.009600000000006,30.009600000000006)" fill="#25d366"></circle><defs id="SvgjsDefs1067"></defs><g id="SvgjsG1068" transform="matrix(0.4652,0,0,0.4652,77.0112040802002,77.0112)"><svg xmlns="http://www.w3.org/2000/svg" width="288" height="288" viewBox="0 0 24 24"><path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91C2.13 13.66 2.59 15.36 3.45 16.86L2.05 22L7.3 20.62C8.75 21.41 10.38 21.83 12.04 21.83C17.5 21.83 21.95 17.38 21.95 11.92C21.95 9.27 20.92 6.78 19.05 4.91C17.18 3.03 14.69 2 12.04 2M12.05 3.67C14.25 3.67 16.31 4.53 17.87 6.09C19.42 7.65 20.28 9.72 20.28 11.92C20.28 16.46 16.58 20.15 12.04 20.15C10.56 20.15 9.11 19.76 7.85 19L7.55 18.83L4.43 19.65L5.26 16.61L5.06 16.29C4.24 15 3.8 13.47 3.8 11.91C3.81 7.37 7.5 3.67 12.05 3.67M8.53 7.33C8.37 7.33 8.1 7.39 7.87 7.64C7.65 7.89 7 8.5 7 9.71C7 10.93 7.89 12.1 8 12.27C8.14 12.44 9.76 14.94 12.25 16C12.84 16.27 13.3 16.42 13.66 16.53C14.25 16.72 14.79 16.69 15.22 16.63C15.7 16.56 16.68 16.03 16.89 15.45C17.1 14.87 17.1 14.38 17.04 14.27C16.97 14.17 16.81 14.11 16.56 14C16.31 13.86 15.09 13.26 14.87 13.18C14.64 13.1 14.5 13.06 14.31 13.3C14.15 13.55 13.67 14.11 13.53 14.27C13.38 14.44 13.24 14.46 13 14.34C12.74 14.21 11.94 13.95 11 13.11C10.26 12.45 9.77 11.64 9.62 11.39C9.5 11.15 9.61 11 9.73 10.89C9.84 10.78 10 10.6 10.1 10.45C10.23 10.31 10.27 10.2 10.35 10.04C10.43 9.87 10.39 9.73 10.33 9.61C10.27 9.5 9.77 8.26 9.56 7.77C9.36 7.29 9.16 7.35 9 7.34C8.86 7.34 8.7 7.33 8.53 7.33Z" fill="#ffffff" class="color000 svgShape"></path></svg></g></svg>

data/assets/js/confetti.js

@@ -0,0 +1,130 @@
+var maxParticleCount = 150; //set max confetti count
+var particleSpeed = 2; //set the particle animation speed
+var startConfetti; //call to start confetti animation
+var stopConfetti; //call to stop adding confetti
+var toggleConfetti; //call to start or stop the confetti animation depending on whether it's already running
+var removeConfetti; //call to stop the confetti animation and remove all confetti immediately
+
+(function () {
+    startConfetti = startConfettiInner;
+    stopConfetti = stopConfettiInner;
+    toggleConfetti = toggleConfettiInner;
+    removeConfetti = removeConfettiInner;
+    var colors = ["DodgerBlue", "OliveDrab", "Gold", "Pink", "SlateBlue", "LightBlue", "Violet", "PaleGreen", "SteelBlue", "SandyBrown", "Chocolate", "Crimson"]
+    var streamingConfetti = false;
+    var animationTimer = null;
+    var particles = [];
+    var waveAngle = 0;
+
+    function resetParticle(particle, width, height) {
+        particle.color = colors[(Math.random() * colors.length) | 0];
+        particle.x = Math.random() * width;
+        particle.y = Math.random() * height - height;
+        particle.diameter = Math.random() * 10 + 5;
+        particle.tilt = Math.random() * 10 - 10;
+        particle.tiltAngleIncrement = Math.random() * 0.07 + 0.05;
+        particle.tiltAngle = 0;
+        return particle;
+    }
+
+    function startConfettiInner() {
+        var width = window.innerWidth;
+        var height = window.innerHeight;
+        window.requestAnimFrame = (function () {
+            return window.requestAnimationFrame ||
+                window.webkitRequestAnimationFrame ||
+                window.mozRequestAnimationFrame ||
+                window.oRequestAnimationFrame ||
+                window.msRequestAnimationFrame ||
+                function (callback) {
+                    return window.setTimeout(callback, 16.6666667);
+                };
+        })();
+        var canvas = document.getElementById("confetti-canvas");
+        if (canvas === null) {
+            canvas = document.createElement("canvas");
+            canvas.setAttribute("id", "confetti-canvas");
+            canvas.setAttribute("style", "display:block;z-index:999999;pointer-events:none");
+            document.body.appendChild(canvas);
+            canvas.width = width;
+            canvas.height = height;
+            window.addEventListener("resize", function () {
+                canvas.width = window.innerWidth;
+                canvas.height = window.innerHeight;
+            }, true);
+        }
+        var context = canvas.getContext("2d");
+        while (particles.length < maxParticleCount)
+            particles.push(resetParticle({}, width, height));
+        streamingConfetti = true;
+        if (animationTimer === null) {
+            (function runAnimation() {
+                context.clearRect(0, 0, window.innerWidth, window.innerHeight);
+                if (particles.length === 0)
+                    animationTimer = null;
+                else {
+                    updateParticles();
+                    drawParticles(context);
+                    animationTimer = requestAnimFrame(runAnimation);
+                }
+            })();
+        }
+    }
+
+    function stopConfettiInner() {
+        streamingConfetti = false;
+    }
+
+    function removeConfettiInner() {
+        stopConfetti();
+        particles = [];
+    }
+
+    function toggleConfettiInner() {
+        if (streamingConfetti)
+            stopConfettiInner();
+        else
+            startConfettiInner();
+    }
+
+    function drawParticles(context) {
+        var particle;
+        var x;
+        for (var i = 0; i < particles.length; i++) {
+            particle = particles[i];
+            context.beginPath();
+            context.lineWidth = particle.diameter;
+            context.strokeStyle = particle.color;
+            x = particle.x + particle.tilt;
+            context.moveTo(x + particle.diameter / 2, particle.y);
+            context.lineTo(x, particle.y + particle.tilt + particle.diameter / 2);
+            context.stroke();
+        }
+    }
+
+    function updateParticles() {
+        var width = window.innerWidth;
+        var height = window.innerHeight;
+        var particle;
+        waveAngle += 0.01;
+        for (var i = 0; i < particles.length; i++) {
+            particle = particles[i];
+            if (!streamingConfetti && particle.y < -15)
+                particle.y = height + 100;
+            else {
+                particle.tiltAngle += particle.tiltAngleIncrement;
+                particle.x += Math.sin(waveAngle);
+                particle.y += (Math.cos(waveAngle) + particle.diameter + particleSpeed) * 0.5;
+                particle.tilt = Math.sin(particle.tiltAngle) * 15;
+            }
+            if (particle.x > width + 20 || particle.x < -20 || particle.y > height) {
+                if (streamingConfetti && particles.length <= maxParticleCount)
+                    resetParticle(particle, width, height);
+                else {
+                    particles.splice(i, 1);
+                    i--;
+                }
+            }
+        }
+    }
+})();

data/assets/js/createWordle.js

@@ -6,13 +6,47 @@ let copy_btn = document.querySelector(".copy-btn")
 let form = document.querySelector('#create-wordle-form')
 let openPopup = document.querySelector(".open-popup")
 
+const alertContainer = document.querySelector(".alert-container")
+let errorMsg = document.querySelector("#errorMsg")
+
+customWord.focus()
+
+
+let dictionary
+async function getData() {
+    const response = await fetch("/dictionary.json")
+    const data = await response.json()
+    dictionary = data
+}
+getData()
+
+
+
 const createWordle = (e) => {
-    openPopup.click()
     e.preventDefault();
-    copy_btn.innerHTML = "Copy"
-    copy_btn.style.background = "#6aaa64"
-    wordleGameLink.setAttribute("href", `/word-game-play?q=${btoa(customWord.value)}`)
-    wordleGameLink.innerHTML = `${window.location.protocol + "//" + window.location.hostname}/word-game-play?q=${btoa(customWord.value)}`
+
+    if (customWord.value.length < 5) {
+        errorMsg.innerHTML = "Not enough letters"
+        alertContainer.classList.add("active-alert")
+        setTimeout(() => {
+            alertContainer.classList.remove("active-alert")
+        }, 1000)
+    }
+    if (customWord.value.length === 5 && !dictionary.includes(customWord.value.toLocaleLowerCase())) {
+        errorMsg.innerHTML = "Not a valid word"
+        alertContainer.classList.add("active-alert")
+        setTimeout(() => {
+            alertContainer.classList.remove("active-alert")
+        }, 1000)
+    } else {
+        if (customWord.value.length === 5) {
+            openPopup.click()
+            copy_btn.innerHTML = "Copy"
+            copy_btn.style.background = "dodgerblue"
+            wordleGameLink.setAttribute("href", `/word-game-play?q=${btoa(customWord.value.toLocaleLowerCase())}`)
+            wordleGameLink.innerHTML = `${window.location.protocol + "//" + window.location.hostname}/word-game-play?q=${btoa(customWord.value.toLocaleLowerCase())}`
+        }
+    }
 }
 form.addEventListener('submit', createWordle);