I made a game as a web component using vanilla JS to facilitate dynamic CSS and HTML. This slider puzzle can be placed in html with a <slider-puzzle><\slider-puzzle> tag followed by a <script><\script> that either sources or contains the single js file. Hook it up to a hit key or a button and it will open and close over your page without affecting your layout at all. You can turn any image from your device into a puzzle in a snap and can set the difficulty by adjusting the number of tiles the image is split into and the shuffling algorithm handles the rest. Completely portable, no dependencies no frameworks no build needed. Send a like or a comment and I’ll share the code and a walkthrough how I did it. #html #javascript #css JavaScript
More Relevant Posts
-
Just finished building a simple Memory Matching Game using HTML, CSS, JavaScript, and jQuery. The goal was to focus on clean logic and a straightforward UI without relying on frameworks. It features a 4×4 grid, move counter, timer, match tracking, and a responsive layout. This project helped me reinforce core JavaScript concepts like event handling, state management, and DOM manipulation, while keeping the design minimal and easy to use. Thanks to Mam Juhinah Batool for the guidance and inspiration during the project- it really helped me think more clearly about clean code and user-focused design. Read the full project breakdown on Medium: https://lnkd.in/dBEf5kzW Source Code: https://lnkd.in/dQ8q7cKv #WebDevelopment #JavaScript #jQuery #Frontend #Projects #Learning
-
-
Just Built a Color Palette Generator using HTML, CSS & JavaScript! Today I created a simple Color Palette Generator where users can generate random color palettes with just one click. It’s a small project but a great way to practice JavaScript logic and DOM manipulation. ✨ What I practiced in this project: • Generating random HEX colors • Updating UI dynamically using JavaScript • DOM manipulation • Clean and responsive layout with HTML & CSS live link : https://lnkd.in/gf_k8zgh #JavaScript #WebDevelopment #FrontendDeveloper #HTML #CSS #CodingJourney #BuildInPublic
-
-
Just built a simple modal popup using HTML, CSS, and JavaScript. Features: • Open and close buttons • Close on Escape key • Click outside to close • Clean UI with background image This helped me understand DOM manipulation, event handling, and class toggling in JavaScript. Still learning and improving step by step. #HTML #CSS #JavaScript #WebDevelopment #LearningByDoing
-
🚀 30 Days of JavaScript – Day 17 Today I moved from basic JavaScript programs to building a real frontend feature using HTML, CSS, and JavaScript. 💡 Project: Signup Form with Validation This form is not just UI — it includes real user interaction and validation logic. ✅ Features: • Validates name, email, and password • Shows error messages near input fields • Prevents page reload on submit • Displays success message after valid submission • Automatically clears the form 🧠 Concepts Used: • DOM manipulation • event handling (addEventListener) • form validation logic • conditional statements • basic UI styling with CSS 📌 This helped me understand how real websites handle user input and validation. 🎥 Demo below 👇 👉 Source code in first comment (only JS Code). #JavaScript #FrontendDevelopment #HTML #CSS #WebDevelopment #LearningJavaScript #CodingJourney
-
In Javascript, suppose you want to append the same option element to two different containers. list.forEach(list=> { const option = document.createElement("option"); option.value = list.code; option.text = list.name; document.getElementById("pageA").appendChild(option); document.getElementById("pageB").appendChild(option); }); At first glance, this looks correct. But when you run it, the option will appear only in "pageB". Why? Because in the DOM, a single element cannot exist in two places at the same time. When you append it to the second container, the browser moves it there instead of copying it. To place the same element in multiple locations, you need to clone it like: document.getElementById("pageA").appendChild(option); document.getElementById("pageB").appendChild(option.cloneNode(true)); cloneNode(true) creates a deep copy of the element, allowing both containers to have their own instance. A small detail, but an important reminder of how the DOM tree actually works. #JavaScript #DOM #FrontendDevelopment #WebDevelopment
-
Linking JS file Sounds small… but it’s VERY important. 🔥 Without linking JS properly, your website is just a static page. 💡 What is a JS File? A JavaScript file (script.js) contains code that makes your website: ✅ Interactive ✅ Dynamic ✅ Responsive to user actions For example: - Button click events - Form validation - Show/Hide content - API calls 🛠 How to Link JavaScript File? There are 2 common ways: ✅ 1️⃣ Inside <head> <head> <script src="script.js"></script> </head> Problem ❌ JS loads before HTML → can cause errors. ✅ 2️⃣ Before Closing </body> <body> <script src="script.js"></script> </body> Why this is better? ✔ HTML loads first ✔ Then JavaScript runs ✔ Faster page experience 🎯 What I Understood Today Linking JS file is simple but powerful. One small line connects your entire logic to the UI. #WebDevelopment #JavaScript #Programming #Coding #SoftwareDevelopment #Tech
-
-
Built A responsive To-Do List Application using HTML, CSS and Javascript. Users can add and delete Task. Attached is toggle button that turns on and off light. Users can send feedback based on their user experience on the application. Test Application Using the Link Below 👇 https://lnkd.in/eSsaMJRW
-
-
I recently developed a To-Do List Web Application using HTML, CSS, and JavaScript. This project helps users manage daily tasks through a simple and interactive interface. Users can add tasks and remove them dynamically without refreshing the page. While building this project, I worked with JavaScript DOM manipulation, event handling, and front-end interface design to create a clean and user-friendly task management tool. 🔗 Live Webpage: https://lnkd.in/geiAPDgk 💻 Source Code: https://lnkd.in/gA9vAyjN #WebDevelopment #HTML #CSS #JavaScript #Learning
-
-
In JavaScript, Template Literals (backticks) are incredibly powerful to make our site dynamic, but there’s a catch: you cannot use a standard if-else statement inside of them. To change styles, icons, or text dynamically, you need the condition based Ternary Operator. Why use this method? Dynamic Styling: Toggle CSS classes instantly ${isActive ? 'text-green-500' : 'text-red-500'}. Smart Icons/image: Change icons based on state ${isLocked ? '🔒' : '<img src=assets/unlocked.png>'}. Inline Logic: Keep your UI code clean by handling conditions exactly where the data is rendered. The Syntax: `String text ${condition ? 'trueValue' : 'falseValue'} string text` How are you using template literals in your latest build? Let’s talk in the comments!
-
-
Back to the basics! 🚀 I’m currently spending some time revisiting the core pillars of web development: HTML, CSS, and JavaScript. Even as we move toward complex frameworks, I believe a rock-solid understanding of the DOM and styling is what separates a good developer from a great one. Today’s session: DOM manipulation and refining layouts. It’s amazing how much more you notice when you go back to the fundamentals with a fresh pair of eyes. #WebDevelopment #CodingLife #Frontend #LearningEveryday #JavaScript #HTML #CSS #Programming
-
Explore content categories
- Career
- Productivity
- Finance
- Soft Skills & Emotional Intelligence
- Project Management
- Education
- Technology
- Leadership
- Ecommerce
- User Experience
- Recruitment & HR
- Customer Experience
- Real Estate
- Marketing
- Sales
- Retail & Merchandising
- Science
- Supply Chain Management
- Future Of Work
- Consulting
- Writing
- Economics
- Artificial Intelligence
- Employee Experience
- Workplace Trends
- Fundraising
- Networking
- Corporate Social Responsibility
- Negotiation
- Communication
- Engineering
- Hospitality & Tourism
- Business Strategy
- Change Management
- Organizational Culture
- Design
- Innovation
- Event Planning
- Training & Development