Skip to content

feat(ui): added Explore more modals #688

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat(ui): added Explore more modals #688

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 91 additions & 23 deletions frontendChallenges.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,61 @@
<meta charset="UTF-8" />
<title>Frontend Challenges</title>
<link rel="stylesheet" href="styles/frontendChallenges.css" />
<style>
/* Modal base */
.modal {
display: none; /* hidden by default */
position: fixed;
z-index: 1000;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.6);
display: flex;
align-items: center;
justify-content: center;
}
.modal-content {
background: #fff;
padding: 20px;
border-radius: 12px;
width: 90%;
max-width: 600px;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
position: relative;
animation: fadeIn 0.3s ease-in-out;
}
.modal-content h2 {
margin-top: 0;
}
.close {
position: absolute;
top: 10px; right: 15px;
font-size: 22px;
font-weight: bold;
cursor: pointer;
color: #555;
}
.close:hover { color: #000; }
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
}

/* Style Explore button */
.explorebtn {
background: #2563eb;
color: #fff;
padding: 8px 16px;
border-radius: 6px;
cursor: pointer;
margin-top: 10px;
display: inline-block;
transition: 0.2s;
}
.explorebtn:hover {
background: #1d4ed8;
}
</style>
</head>
<body>
<h1>Frontend Challenges</h1>
Expand All @@ -13,48 +68,61 @@ <h1>Frontend Challenges</h1>
</p>

<div class="challenge-list">
<!-- Challenge 1 -->
<div class="challenge">
<div class="challenge-title">Responsive Navbar</div>
<div class="challenge-desc">
Build a responsive navigation bar with a hamburger menu for mobile
view.
</div>
<div class="explorebtn">Explore more</div>
<div class="explorebtn" onclick="openModal('modal1')">Explore more</div>
</div>

<div class="challenge">
<div class="challenge-title">Pricing Card</div>
<div class="challenge-desc">
Design and code a modern pricing card layout using flexbox or grid.
<!-- Modal for Challenge 1 -->
<div id="modal1" class="modal">
<div class="modal-content">
<span class="close" onclick="closeModal('modal1')">&times;</span>
<h2>Responsive Navbar</h2>
<p>👉 Use Flexbox or CSS Grid for layout.</p>
<p>👉 Add a hamburger icon with JavaScript to toggle the menu on smaller screens.</p>
<a href="https://www.w3schools.com/howto/howto_js_topnav_responsive.asp" target="_blank">Learn More</a>
</div>
<div class="explorebtn">Explore more</div>
</div>

<!-- Challenge 2 -->
<div class="challenge">
<div class="challenge-title">Login Form UI</div>
<div class="challenge-title">Pricing Card</div>
<div class="challenge-desc">
Create a stylish login/signup form with smooth transitions.
Design and code a modern pricing card layout using flexbox or grid.
</div>
<div class="explorebtn">Explore more</div>
<div class="explorebtn" onclick="openModal('modal2')">Explore more</div>
</div>

<div class="challenge">
<div class="challenge-title">Landing Page</div>
<div class="challenge-desc">
Design a hero section with a call-to-action button and a background
image.
<!-- Modal for Challenge 2 -->
<div id="modal2" class="modal">
<div class="modal-content">
<span class="close" onclick="closeModal('modal2')">&times;</span>
<h2>Pricing Card</h2>
<p>👉 Use CSS Grid/Flexbox to align pricing tiers.</p>
<p>👉 Include hover effects for better UI.</p>
</div>
<div class="explorebtn">Explore more</div>
</div>

<div class="challenge">
<div class="challenge-title">Image Gallery</div>
<div class="challenge-desc">
Make a responsive image gallery that adjusts across devices using CSS
Grid.
</div>
<div class="explorebtn">Explore more</div>
</div>
<!-- You can repeat this structure for other challenges (Login Form, Landing Page, etc.) -->
</div>

<script>
function openModal(id) {
document.getElementById(id).style.display = "flex";
}
function closeModal(id) {
document.getElementById(id).style.display = "none";
}
window.onclick = function(e) {
document.querySelectorAll('.modal').forEach(modal => {
if (e.target === modal) modal.style.display = "none";
});
}
</script>
</body>
</html>
143 changes: 138 additions & 5 deletions uiChallenges.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,42 @@
.explorebtn:hover {
background-color: #034081;
}
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0; top: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.6);
display: flex;
align-items: center;
justify-content: center;
}
.modal-content {
background: #fff;
padding: 20px;
border-radius: 12px;
width: 90%;
max-width: 600px;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
position: relative;
animation: fadeIn 0.28s ease-in-out;
outline: none;
}
.close {
position: absolute;
top: 10px; right: 15px;
font-size: 22px;
font-weight: bold;
cursor: pointer;
color: #555;
}
.close:hover { color: #000; }
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-14px); }
to { opacity: 1; transform: translateY(0); }
}

</style>
</head>
<body>
Expand All @@ -49,29 +85,126 @@ <h1>UI Design Tasks</h1>
<div class="challenge">
<div class="challenge-title">Profile Card UI</div>
<div class="challenge-desc">Design and build a profile card with image, name, and social links.</div>
<div class="explorebtn"> Explore more </div>
<div class="explorebtn" onclick="openModal('modal1')"> Explore more </div>

</div>
<div class="challenge">
<div class="challenge-title">Pricing Table</div>
<div class="challenge-desc">Create a clean and responsive pricing component for a SaaS app.</div>
<div class="explorebtn"> Explore more </div>
<div class="explorebtn" onclick="openModal('modal2')"> Explore more </div>

</div>
<div class="challenge">
<div class="challenge-title">Login Page UI</div>
<div class="challenge-desc">Design a modern login form with input validation UI.</div>
<div class="explorebtn"> Explore more </div>
<div class="explorebtn" onclick="openModal('modal3')"> Explore more </div>

</div>
<div class="challenge">
<div class="challenge-title">Navbar with Dropdown</div>
<div class="challenge-desc">Build a responsive navigation bar with dropdown support.</div>
<div class="explorebtn"> Explore more </div>
<div class="explorebtn" onclick="openModal('modal4')"> Explore more </div>

</div>
<div class="challenge">
<div class="challenge-title">Dark Mode Toggle</div>
<div class="challenge-desc">Add a dark mode toggle switch with a smooth transition effect.</div>
<div class="explorebtn"> Explore more </div>
<div class="explorebtn" onclick="openModal('modal5')"> Explore more </div>

</div>
</div>
<!-- Modals (place before </body>) -->
<div id="modal1" class="modal" role="dialog" aria-modal="true" aria-labelledby="modal1-title">
<div class="modal-content" tabindex="0" aria-describedby="modal1-desc">
<span class="close" onclick="closeModal('modal1')" aria-label="Close modal">&times;</span>
<h2 id="modal1-title">Profile Card UI</h2>
<div id="modal1-desc">
<p>👉 Use Flexbox/Grid for layout. Include avatar, name and social icons.</p>
</div>
</div>
</div>

<div id="modal2" class="modal" role="dialog" aria-modal="true" aria-labelledby="modal2-title">
<div class="modal-content" tabindex="0" aria-describedby="modal2-desc">
<span class="close" onclick="closeModal('modal2')" aria-label="Close modal">&times;</span>
<h2 id="modal2-title">Pricing Table</h2>
<div id="modal2-desc">
<p>👉 Use CSS Grid for columns. Highlight recommended plan visually.</p>
</div>
</div>
</div>

<div id="modal3" class="modal" role="dialog" aria-modal="true" aria-labelledby="modal3-title">
<div class="modal-content" tabindex="0" aria-describedby="modal3-desc">
<span class="close" onclick="closeModal('modal3')" aria-label="Close modal">&times;</span>
<h2 id="modal3-title">Login Page UI</h2>
<div id="modal3-desc">
<p>👉 Add focus states and inline validation messages. Provide clear CTA.</p>
</div>
</div>
</div>

<div id="modal4" class="modal" role="dialog" aria-modal="true" aria-labelledby="modal4-title">
<div class="modal-content" tabindex="0" aria-describedby="modal4-desc">
<span class="close" onclick="closeModal('modal4')" aria-label="Close modal">&times;</span>
<h2 id="modal4-title">Navbar with Dropdown</h2>
<div id="modal4-desc">
<p>👉 Add dropdown hover/click states and mobile collapse behavior.</p>
</div>
</div>
</div>

<div id="modal5" class="modal" role="dialog" aria-modal="true" aria-labelledby="modal5-title">
<div class="modal-content" tabindex="0" aria-describedby="modal5-desc">
<span class="close" onclick="closeModal('modal5')" aria-label="Close modal">&times;</span>
<h2 id="modal5-title">Dark Mode Toggle</h2>
<div id="modal5-desc">
<p>👉 Use CSS variables for theme colors. Transition smoothly between themes.</p>
</div>
</div>
</div>
<script>
// Keep track of last focused element to restore focus when modal closes
let lastFocused = null;

function openModal(id) {
const modal = document.getElementById(id);
if (!modal) return;
lastFocused = document.activeElement;
modal.style.display = 'flex';
const content = modal.querySelector('.modal-content');
if (content) content.focus();
document.body.style.overflow = 'hidden'; // prevent background scroll
}

function closeModal(id) {
const modal = document.getElementById(id);
if (!modal) return;
modal.style.display = 'none';
document.body.style.overflow = '';
if (lastFocused) { try { lastFocused.focus(); } catch(e) {} lastFocused = null; }
}

// Click outside modal-content to close
window.addEventListener('click', (e) => {
document.querySelectorAll('.modal').forEach(modal => {
if (e.target === modal) {
modal.style.display = 'none';
document.body.style.overflow = '';
}
});
});

// Close modals on Escape
window.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
document.querySelectorAll('.modal').forEach(m => m.style.display = 'none');
document.body.style.overflow = '';
if (lastFocused) { try { lastFocused.focus(); } catch(e) {} lastFocused = null; }
}
});
</script>


</body>
</html>