Skip to content
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

Frontend Assessment - Patrick Del Rosario #52

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
+424 −40
Open

Frontend Assessment - Patrick Del Rosario #52

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
39 changes: 39 additions & 0 deletions exercise1/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello Developer!</title>
<link rel="stylesheet" href="style2.css">
</head>
<body>
<div class="container">
<header class="banner">
<img src="https://via.placeholder.com/1920x650" alt="Placeholder Image 1">
<div class="banner-text">
<h1>Hello Developer!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
</header>
<section class="card-container">
<div class="cards-section">
<div class="card">
<img src="https://via.placeholder.com/400x300" alt="Placeholder Image 2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<button>READ MORE</button>
</div>
<div class="card">
<img src="https://via.placeholder.com/400x300" alt="Placeholder Image 3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<button>READ MORE</button>
</div>
<div class="card">
<img src="https://via.placeholder.com/400x300" alt="Placeholder Image 4">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
<button>READ MORE</button>
</div>
</div>
</section>
</div>
</body>
</html>
119 changes: 119 additions & 0 deletions exercise1/style2.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
font-family: Arial, sans-serif;
}

.container {
margin: 0 auto;
}

.banner {
position: relative;
text-align: center;
color: white;
}

.banner img {
width: 100%;
height: auto;
}

.banner-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.banner h1 {
font-size: 48px;
margin-bottom: 10px;
}

.banner p {
font-size: 24px;
}

button {
outline: none; /* Remove default focus outline */
}

button:focus {
outline: 2px solid #007BFF; /* Custom focus outline */
z-index: 1; /* Ensure focus outline is visible */
}

.cards-section {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 20px;
margin-top: 20px;
max-width: 1200px;
}

.card {
background: #fff;
border: 1px solid #ddd;
border-radius: 8px;
padding: 20px;
text-align: center;
min-width: 300px;
max-width: 32%;
display: flex;
flex-direction: column;
justify-content: space-between;
}

.card img {
max-width: 100%;
height: auto;
border-bottom: 1px solid #ddd;
margin-bottom: 20px;
}

.card p {
flex-grow: 1;
margin-bottom: 20px;
line-height: 1.5;
}

.card button {
background: white;
color: black;
border: 2px solid black;
padding: 10px 20px;
cursor: pointer;
border-radius: 50px;
text-transform: uppercase;
font-weight: bold;
align-self: center;
}

.card button:hover {
background: #f1f1f1;
}

.card-container {
display: flex;
justify-content: center;
margin-top: 20px; /* Adjust the margin as needed */
}

@media (max-width: 768px) {
.banner img {
content: url('https://via.placeholder.com/600x600');
}
.cards-section {
flex-direction: column;
}

.card {
max-width: 100%;
}
}
25 changes: 25 additions & 0 deletions exercise2/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Tabs and Accordion</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="tabs" id="tabs">
<div class="tab-titles" id="tab-titles">
<!-- Tab titles will be injected here by JavaScript -->
</div>
<div class="tab-contents" id="tab-contents">
<!-- Tab contents will be injected here by JavaScript -->
</div>
</div>
<div class="accordion" id="accordion">
<!-- Accordion will be injected here by JavaScript -->
</div>
</div>
<script src="script.js"></script>
</body>
</html>
102 changes: 102 additions & 0 deletions exercise2/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
document.addEventListener("DOMContentLoaded", function() {
const data = [
{
"title": "Section 1",
"content": "<p>Maecenas nec semper ante, pellentesque posuere lorem. Nullam ipsum massa, consequat eget urna ut, pulvinar dignissim lorem. Nulla facilisi. Nam mattis eleifend metus. Fusce at commodo lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus pellentesque elit sem, vel blandit posuere.</p>"
},
{
"title": "Section 2",
"content": "<p>Mauris a orci sodales, scelerisque velit vitae, gravida nisl. Ut non laoreet eros, vel laoreet nisi. Praesent sed dolor dui. Proin non fringilla quam. Aliquam erat volutpat. Vestibulum vel arcu semper, lobortis turpis ac, ultricies nisi. Praesent id.</p>"
},
{
"title": "Section 3",
"content": "<p>Sed elementum sapien ut sapien imperdiet, eu venenatis enim rhoncus. Praesent euismod tincidunt rhoncus. Duis cras amet:</p><ul><li>List item one</li><li>List item two</li><li>List item three</li></ul>"
},
{
"title": "Section 4",
"content": "<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.</p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>"
}
];

const tabsTitlesContainer = document.getElementById('tab-titles');
const tabsContentsContainer = document.getElementById('tab-contents');
const accordionContainer = document.getElementById('accordion');

data.forEach((section, index) => {
// Create tab title
const tabTitle = document.createElement('div');
tabTitle.className = 'tab-title';
tabTitle.innerText = section.title;
tabTitle.dataset.index = index;
tabTitle.tabIndex = 0; // Make tab title focusable

// Create tab content
const tabContent = document.createElement('div');
tabContent.className = 'tab-content';
tabContent.innerHTML = section.content;

tabTitle.addEventListener('click', () => {
document.querySelectorAll('.tab-title').forEach((title, i) => {
if (i === index) {
title.classList.add('active');
} else {
title.classList.remove('active');
}
});
document.querySelectorAll('.tab-content').forEach((content, i) => {
if (i === index) {
content.style.display = 'block';
} else {
content.style.display = 'none';
}
});
});

tabTitle.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
tabTitle.click();
}
});

tabsTitlesContainer.appendChild(tabTitle);
tabsContentsContainer.appendChild(tabContent);

// Create accordion
const accordionItem = document.createElement('div');
accordionItem.className = 'accordion-item';

const accordionTitle = document.createElement('div');
accordionTitle.className = 'accordion-title';
accordionTitle.innerText = section.title;
accordionTitle.dataset.index = index;

const accordionContent = document.createElement('div');
accordionContent.className = 'accordion-content';
accordionContent.innerHTML = section.content;

accordionTitle.addEventListener('click', () => {
document.querySelectorAll('.accordion-content').forEach((content, i) => {
if (i === index) {
content.style.display = content.style.display === 'block' ? 'none' : 'block';
} else {
content.style.display = 'none';
}
});
});

accordionItem.appendChild(accordionTitle);
accordionItem.appendChild(accordionContent);
accordionContainer.appendChild(accordionItem);
});

// Open first tab and accordion on load
if (document.querySelector('.tab-title')) {
document.querySelector('.tab-title').classList.add('active');
}
if (document.querySelector('.tab-content')) {
document.querySelector('.tab-content').style.display = 'block';
}
if (document.querySelector('.accordion-content')) {
document.querySelector('.accordion-content').style.display = 'block';
}
});
Loading