Skip to content

Instantly share code, notes, and snippets.

@vin9012d

vin9012d/vanillmapQuestion.json

Created May 9, 2025 17:52
Show Gist options
  • Save vin9012d/56d9d38959bb37dd9212839cf7003f24 to your computer and use it in GitHub Desktop.
Save vin9012d/56d9d38959bb37dd9212839cf7003f24 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
vanillmapQuestion.json
{
"1":{
"id": "ed756208-c72e-4dbf-bd21-a656f777e5c3",
"slug": "hello-frontend-warrior",
"title": "Hello Frontend Warrior",
"description": "🏆 Hello Frontend Warrior",
"content": "# 🏆 Question: Add Main Heading in Vanilla JS\n\nThe JavaScript and CSS are already written; your job is to update the HTML so the tests pass.\n\n### What You Need to Do\n1. Open `index.html` and locate the `<div id=\"app\"></div>` container.\n2. Inside that container, add **only** an `<h1>` element with the exact text **Hello Frontend Warrior**.\n3. **Do not** touch any other HTML, CSS, or JS files.\n4. Run the test suite; all tests must pass before you submit.\n\n### Acceptance Criteria\n- The page displays an `<h1>` reading exactly **Hello Frontend Warrior** inside `#app`.\n\n## 🎯 Learning Outcomes\n- Practice inserting a static HTML heading into a boilerplate file.\n- Observe how existing JavaScript styling applies to a newly added element.\n\n*If you get stuck, check the editorial for a detailed solution.*",
"solution": "Here’s the updated `/index.html` showing only the added `<h1>`—nothing else changes:\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Frontend Warrior</title>\n <link rel=\"stylesheet\" href=\"styles.css\" />\n</head>\n<body>\n <div id=\"app\">\n <h1>Hello Frontend Warrior</h1>\n </div>\n <script src=\"index.js\"></script>\n</body>\n</html>\n```",
"dependency": {
"jest": "^29.0.0",
"jest-extended": "^3.0.2",
"@testing-library/dom": "^8.19.0",
"@testing-library/jest-dom": "^6.0.0"
},
"difficulty": "EASY",
"framework": "VANILLA",
"boilerplateCode": {
"/index.js": "// index.js\nexport function renderApp() {\n const app = document.getElementById('app');\n if (!app) return;\n\n const styles = {\n container: {\n minHeight: '100vh',\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'center',\n alignItems: 'center',\n background: 'linear-gradient(135deg, #ffecd2, #fcb69f, #ff9a9e, #fad0c4)',\n padding: '20px',\n boxSizing: 'border-box',\n textAlign: 'center'\n },\n heading: {\n fontSize: '4rem',\n color: '#222831',\n margin: '0',\n textShadow: '4px 4px 10px rgba(0,0,0,0.2)',\n background: 'linear-gradient(90deg, #ff6a00, #ee0979)',\n WebkitBackgroundClip: 'text',\n WebkitTextFillColor: 'transparent'\n }\n };\n\n Object.assign(app.style, styles.container);\n const h1 = app.querySelector('h1');\n if (h1) Object.assign(h1.style, styles.heading);\n}\n\nif (typeof window !== 'undefined' && typeof jest === 'undefined') {\n renderApp();\n}\n",
"/index.html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Frontend Warrior</title>\n <link rel=\"stylesheet\" href=\"styles.css\" />\n</head>\n<body>\n <div id=\"app\">\n <!-- Add your <h1>Hello Frontend Warrior</h1> here -->\n </div>\n <script src=\"index.js\"></script>\n</body>\n</html>",
"/styles.css": "body {\n margin: 0;\n font-family: 'Poppins', sans-serif;\n -webkit-font-smoothing: antialiased;\n}\n",
"/index.test.js": "/** @jest-environment jsdom */\nrequire('@testing-library/jest-dom');\nconst { getByRole } = require('@testing-library/dom');\n\ndescribe('Vanilla JS Frontend Warrior (index.test.js)', () => {\n beforeEach(() => {\n document.body.innerHTML = `dynamiclHtmlBodyContent`;\n const { renderApp } = require('./index.js');\n renderApp();\n });\n\n test('page container is styled', () => {\n const app = document.getElementById('app');\n expect(app).toHaveStyle('min-height: 100vh');\n });\n});",
"/testcaseShadow.js": "/** @jest-environment jsdom */\nrequire('@testing-library/jest-dom');\nconst { getByRole } = require('@testing-library/dom');\n\ndescribe('Vanilla JS Frontend Warrior', () => {\n beforeEach(() => {\n document.body.innerHTML = `dynamiclHtmlBodyContent`;\n const { renderApp } = require('./index.js');\n renderApp();\n });\n\n test('renders an h1 tag', () => {\n const heading = getByRole(document.body, 'heading', { level: 1 });\n expect(heading).toBeInTheDocument();\n });\n\n test('displays correct text inside h1', () => {\n const heading = getByRole(document.body, 'heading', { level: 1 });\n expect(heading).toHaveTextContent('Hello Frontend Warrior');\n });\n});"
},
"isPremium": false
},
"2": {
"id": "ed756208-c72e-4dbf-bd21-a656f777e5c3",
"slug": "hello-frontend-warrior-with-subheading",
"title": "Hello Frontend Warrior-with-subheading",
"description": "🏆 Hello Frontend Warrior With Subheading",
"content": "# 🏆 Question: Add Heading and Subheading in Vanilla JS\n\nThe JavaScript and CSS are already written; your job is to update the HTML so the tests pass.\n\n### What You Need to Do\n1. Open `index.html` and find the `<div id=\"app\"></div>` container.\n2. Inside that container, add:\n - A **main heading** (`<h1>`) with the exact text **Hello Frontend Warrior**.\n - A **subheading** (`<h2>`) with the exact text **Gear up to conquer React challenges!**.\n3. Do **not** touch any other files or elements.\n4. Run the test suite; all tests must pass before submission.\n\n### Acceptance Criteria\n- The page displays an `<h1>` reading “Hello Frontend Warrior”.\n- The page displays an `<h2>` reading “Gear up to conquer React challenges!”.\n\n## 🎯 Learning Outcomes\n- Learn where and how to insert static HTML into a boilerplate.\n- Observe how existing JavaScript styling applies to newly added elements.\n\n*If you get stuck, check the editorial for a detailed solution and explanation.*",
"solution": "Here's the fully fleshed-out `/index.html` with your two lines added—nothing else changes:\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Frontend Warrior</title>\n <link rel=\"stylesheet\" href=\"styles.css\" />\n</head>\n<body>\n <div id=\"app\">\n <h1>Hello Frontend Warrior</h1>\n <h2>Gear up to conquer React challenges!</h2>\n </div>\n <script src=\"index.js\"></script>\n</body>\n</html>\n``` \n\nNo other file needs editing—your existing `index.js` will automatically style those two elements when you preview or run tests. Good luck!",
"dependency": {
"jest": "^29.0.0",
"jest-extended": "^3.0.2",
"@testing-library/dom": "^8.19.0",
"@testing-library/jest-dom": "^6.0.0"
},
"difficulty": "EASY",
"framework": "VANILLA",
"boilerplateCode": {
"/index.js": "// index.js\nexport function renderApp() {\n const app = document.getElementById('app');\n if (!app) return;\n \n const styles = {\n container: {\n minHeight: '100vh',\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'center',\n alignItems: 'center',\n background: 'linear-gradient(135deg, #ffecd2, #fcb69f, #ff9a9e, #fad0c4)',\n padding: '20px',\n boxSizing: 'border-box',\n textAlign: 'center'\n },\n heading: {\n fontSize: '4rem',\n color: '#222831',\n margin: '0',\n textShadow: '4px 4px 10px rgba(0,0,0,0.2)',\n background: 'linear-gradient(90deg, #ff6a00, #ee0979)',\n WebkitBackgroundClip: 'text',\n WebkitTextFillColor: 'transparent'\n },\n subheading: {\n fontSize: '1.8rem',\n color: '#393E46',\n marginTop: '20px',\n fontWeight: '400',\n textShadow: '2px 2px 4px rgba(0,0,0,0.1)'\n }\n };\n\n // container\n Object.assign(app.style, styles.container);\n\n // existing headings\n const h1 = app.querySelector('h1');\n const h2 = app.querySelector('h2');\n if (h1) Object.assign(h1.style, styles.heading);\n if (h2) Object.assign(h2.style, styles.subheading);\n}\n\n// auto-run in preview (not in tests)\nif (typeof window !== 'undefined' && typeof jest === 'undefined') {\n renderApp();\n}\n",
"/index.html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Frontend Warrior</title>\n <link rel=\"stylesheet\" href=\"styles.css\" />\n</head>\n<body>\n <div id=\"app\">\n <!-- static markup: write your code here -->\n \n </div>\n <script src=\"index.js\"></script>\n</body>\n</html>",
"/styles.css": "body {\n margin: 0;\n font-family: 'Poppins', sans-serif;\n -webkit-font-smoothing: antialiased;\n}\n",
"/index.test.js": "/** @jest-environment jsdom */\nrequire('@testing-library/jest-dom');\nconst { getByRole } = require('@testing-library/dom');\n\ndescribe('Vanilla JS Frontend Warrior (index.test.js)', () => {\n beforeEach(() => {\n document.body.innerHTML = `dynamiclHtmlBodyContent`;\n const { renderApp } = require('./index.js');\n renderApp();\n });\n\n test('page container is styled', () => {\n const app = document.getElementById('app');\n expect(app).toHaveStyle('min-height: 100vh');\n });\n});",
"/testcaseShadow.js": "/** @jest-environment jsdom */\nrequire('@testing-library/jest-dom');\nconst { getByRole } = require('@testing-library/dom');\n\ndescribe('Vanilla JS Frontend Warrior', () => {\n beforeEach(() => {\n document.body.innerHTML = `dynamiclHtmlBodyContent`;\n const { renderApp } = require('./index.js');\n renderApp();\n });\n\n test('renders an h1 tag', () => {\n const heading = getByRole(document.body, 'heading', { level: 1 });\n expect(heading).toBeInTheDocument();\n });\n\n test('displays correct text inside h1', () => {\n const heading = getByRole(document.body, 'heading', { level: 1 });\n expect(heading).toHaveTextContent('Hello Frontend Warrior');\n });\n\n test('renders an h2 tag', () => {\n const sub = getByRole(document.body, 'heading', { level: 2 });\n expect(sub).toBeInTheDocument();\n });\n\n test('displays correct text inside h2', () => {\n const sub = getByRole(document.body, 'heading', { level: 2 });\n expect(sub).toHaveTextContent('Gear up to conquer React challenges!');\n });\n\n test('h1 has correct inline styles', () => {\n const heading = getByRole(document.body, 'heading', { level: 1 });\n expect(heading).toHaveStyle('font-size: 4rem');\n });\n\n test('h2 has correct inline styles', () => {\n const sub = getByRole(document.body, 'heading', { level: 2 });\n expect(sub).toHaveStyle('font-size: 1.8rem');\n });\n});"
},
"isPremium": false,
"createdAt": "2025-03-23T08:34:42.362Z",
"updatedAt": "2025-05-09T07:15:03.909Z",
"authorId": "3cb015a4-2154-4f01-94e3-69abe05824aa",
"tags": [
{
"id": "351c098e-605d-4c37-b602-55556436d559",
"name": "vanilla"
},
{
"id": "6b9f3d61-3e34-4d7e-a577-badfc0e461ad",
"name": "html"
},
{
"id": "92146ed5-5ad8-4341-984a-bad2f69b142e",
"name": "css"
}
]
},
"3":{
"id": "ed756208-c72e-4dbf-bd21-a656f777e5c3",
"slug": "hello-frontend-warrior",
"title": "Headings Galore in Vanilla JS",
"description": "🏆 Practice all six HTML heading levels",
"content": "# 🏆 Question 3: Headings Galore in Vanilla JS\n\nThe CSS and JavaScript are already set up. Your task is to insert six HTML heading tags so that all automated tests pass.\n\n### What You Need to Do\n1. Open `/index.html`.\n2. Find the `<div id=\"app\"></div>` container.\n3. Inside that container, add exactly one of each heading level from `<h1>` through `<h6>`, each containing the exact text **Hello Frontend Warrior**.\n4. Do **not** modify any other file or element.\n5. Run the test suite; all tests must pass before submission.\n\n### Acceptance Criteria\n- Six heading elements (`<h1>` through `<h6>`) exist inside the `#app` container.\n- Each heading displays exactly **Hello Frontend Warrior**.\n\n## 🎯 Learning Outcomes\n- Practice using semantic HTML heading elements.\n- Understand how CSS can style different heading levels uniformly.\n\n## 📝 Tag Usage Guidelines\n- **`<h1>`**: Use for the main page title—only one per page, highest importance.\n- **`<h2>`**: Use for top-level section titles beneath the main heading.\n- **`<h3>`**: Use for subsections within an `<h2>` section.\n- **`<h4>`–`<h6>`**: Use for deeper nested headings or minor subtitles.\n- Always follow a logical descending order (`<h1>` → `<h2>` → …) to preserve document structure, accessibility, and SEO.",
"solution": "Here's the completed `/index.html` with all six heading tags added:\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Frontend Warrior</title>\n <link rel=\"stylesheet\" href=\"styles.css\" />\n</head>\n<body>\n <div id=\"app\">\n <h1>Hello Frontend Warrior</h1>\n <h2>Hello Frontend Warrior</h2>\n <h3>Hello Frontend Warrior</h3>\n <h4>Hello Frontend Warrior</h4>\n <h5>Hello Frontend Warrior</h5>\n <h6>Hello Frontend Warrior</h6>\n </div>\n <script src=\"index.js\"></script>\n</body>\n</html>\n```",
"dependency": {
"jest": "^29.0.0",
"jest-extended": "^3.0.2",
"@testing-library/dom": "^8.19.0",
"@testing-library/jest-dom": "^6.0.0"
},
"difficulty": "EASY",
"framework": "VANILLA",
"boilerplateCode": {
"/index.js": "// index.js\nexport function renderApp() {\n // No JS needed; HTML carries your six headings.\n}\n\n// Auto-run in preview—but not in tests\nif (typeof window !== 'undefined' && typeof jest === 'undefined') {\n renderApp();\n}",
"/index.html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Frontend Warrior</title>\n <link rel=\"stylesheet\" href=\"styles.css\" />\n</head>\n<body>\n <div id=\"app\">\n <!-- Add your six headings here -->\n </div>\n <script src=\"index.js\"></script>\n</body>\n</html>",
"/styles.css": "body {\n margin: 0;\n font-family: 'Poppins', sans-serif;\n background: #f0f0f0;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n}\n\n#app {\n text-align: center;\n}\n\nh1 { background: #ff6b6b; color: #fff; padding: 8px; border-radius: 4px; }\nh2 { background: #feca57; color: #222; padding: 8px; border-radius: 4px; }\nh3 { background: #48dbfb; color: #1e272e; padding: 6px; border-radius: 4px; }\nh4 { background: #1dd1a1; color: #0f0f0f; padding: 6px; border-radius: 4px; }\nh5 { background: #5f27cd; color: #fff; padding: 4px; border-radius: 4px; }\nh6 { background: #54a0ff; color: #fff; padding: 4px; border-radius: 4px; }",
"/index.test.js": "/** @jest-environment jsdom */\nrequire('@testing-library/jest-dom');\nconst { getByRole } = require('@testing-library/dom');\n\ndescribe('Vanilla JS Headings Galore', () => {\n beforeEach(() => {\n document.body.innerHTML = `dynamiclHtmlBodyContent`;\n const { renderApp } = require('./index.js');\n renderApp();\n });\n\n test('renders an h1 tag', () => {\n const h1 = getByRole(document.body, 'heading', { level: 1 });\n expect(h1).toHaveTextContent('Hello Frontend Warrior');\n });\n test('renders an h2 tag', () => {\n const h2 = getByRole(document.body, 'heading', { level: 2 });\n expect(h2).toHaveTextContent('Hello Frontend Warrior');\n });\n test('renders an h3 tag', () => {\n const h3 = getByRole(document.body, 'heading', { level: 3 });\n expect(h3).toHaveTextContent('Hello Frontend Warrior');\n });\n test('renders an h4 tag', () => {\n const h4 = getByRole(document.body, 'heading', { level: 4 });\n expect(h4).toHaveTextContent('Hello Frontend Warrior');\n });\n test('renders an h5 tag', () => {\n const h5 = getByRole(document.body, 'heading', { level: 5 });\n expect(h5).toHaveTextContent('Hello Frontend Warrior');\n });\n test('renders an h6 tag', () => {\n const h6 = getByRole(document.body, 'heading', { level: 6 });\n expect(h6).toHaveTextContent('Hello Frontend Warrior');\n });\n});",
"/testcaseShadow.js": "/** @jest-environment jsdom */\nrequire('@testing-library/jest-dom');\nconst { getByRole } = require('@testing-library/dom');\n\ndescribe('Vanilla JS Headings Galore', () => {\n beforeEach(() => {\n document.body.innerHTML = `dynamiclHtmlBodyContent`;\n const { renderApp } = require('./index.js');\n renderApp();\n });\n\n test('renders an h1 tag', () => {\n const h1 = getByRole(document.body, 'heading', { level: 1 });\n expect(h1).toHaveTextContent('Hello Frontend Warrior');\n });\n test('renders an h2 tag', () => {\n const h2 = getByRole(document.body, 'heading', { level: 2 });\n expect(h2).toHaveTextContent('Hello Frontend Warrior');\n });\n test('renders an h3 tag', () => {\n const h3 = getByRole(document.body, 'heading', { level: 3 });\n expect(h3).toHaveTextContent('Hello Frontend Warrior');\n });\n test('renders an h4 tag', () => {\n const h4 = getByRole(document.body, 'heading', { level: 4 });\n expect(h4).toHaveTextContent('Hello Frontend Warrior');\n });\n test('renders an h5 tag', () => {\n const h5 = getByRole(document.body, 'heading', { level: 5 });\n expect(h5).toHaveTextContent('Hello Frontend Warrior');\n });\n test('renders an h6 tag', () => {\n const h6 = getByRole(document.body, 'heading', { level: 6 });\n expect(h6).toHaveTextContent('Hello Frontend Warrior');\n });\n});"
},
"isPremium": false,
"createdAt": "2025-03-23T08:34:42.362Z",
"updatedAt": "2025-05-02T07:52:54.383Z",
"authorId": "3cb015a4-2154-4f01-94e3-69abe05824aa",
"tags": [
{
"id": "351c098e-605d-4c37-b602-55556436d559",
"name": "vanilla"
},
{
"id": "6b9f3d61-3e34-4d7e-a577-badfc0e461ad",
"name": "html"
},
{
"id": "92146ed5-5ad8-4341-984a-bad2f69b142e",
"name": "css"
}
]
},
"4":{
"id": "ed756208-c72e-4dbf-bd21-a656f777e5c3",
"slug": "hello-frontend-warrior",
"title": "Profile Section in Vanilla JS",
"description": "Build a simple profile section using headings, paragraph, and list.",
"content": "# 🏆 Question 4: Build a Profile Section in Vanilla JS\n\nThe CSS and JavaScript are already set up. Your job is to insert the required HTML elements so that all automated tests pass.\n\n### What You Need to Do\n1. Open `/index.html`.\n2. Inside the `<div id=\"app\"></div>` container, add the following elements **in this exact order**:\n 1. A `<h1>` element with the exact text **Jane Doe**.\n 2. A `<h2>` element with the exact text **UI Developer**.\n 3. A `<p>` element with the exact text **Passionate about crafting user-friendly interfaces.**\n 4. A `<ul>` element containing three `<li>` items with texts **HTML**, **CSS**, and **JavaScript**, in that order.\n3. **Do not** modify any other HTML, CSS, or JS files.\n4. Run the test suite; all tests must pass before submission.\n\n### Acceptance Criteria\n- An `<h1>` reading **Jane Doe** appears inside `#app`.\n- An `<h2>` reading **UI Developer** appears inside `#app`.\n- A `<p>` reading **Passionate about crafting user-friendly interfaces.** appears inside `#app`.\n- A `<ul>` with three `<li>` items reading **HTML**, **CSS**, and **JavaScript** appears inside `#app`, in that order.\n\n## 📝 Tag Usage Guidelines\n- **`<h1>`**: Use for the main profile name—highest-level heading.\n- **`<h2>`**: Use for the profile role or subtitle—secondary heading.\n- **`<p>`**: Use for descriptive text or paragraphs of information.\n- **`<ul>`**: Use for grouping related items without a specific order.\n- **`<li>`**: Use for each individual item within a list.\n\n## 🎯 Learning Outcomes\n- Practice assembling a small HTML component with multiple semantic tags.\n- See how pre-written JavaScript and CSS apply consistent styling to varied elements.\n\n*If you need help, check the editorial for a full solution and explanation.*",
"solution": "Here's the completed `/index.html`, with only the required HTML inserted:\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Frontend Warrior</title>\n <link rel=\"stylesheet\" href=\"styles.css\" />\n</head>\n<body>\n <div id=\"app\">\n <h1>Jane Doe</h1>\n <h2>UI Developer</h2>\n <p>Passionate about crafting user-friendly interfaces.</p>\n <ul>\n <li>HTML</li>\n <li>CSS</li>\n <li>JavaScript</li>\n </ul>\n </div>\n <script src=\"index.js\"></script>\n</body>\n</html>\n``` \n\nNo other file needs editing—your existing JS and CSS will automatically style and position your new markup. Once you've added these lines, run the tests and submit when they all pass!",
"dependency": {
"jest": "^29.0.0",
"jest-extended": "^3.0.2",
"@testing-library/dom": "^8.19.0",
"@testing-library/jest-dom": "^6.0.0"
},
"difficulty": "EASY",
"framework": "VANILLA",
"boilerplateCode": {
"/index.js": "// index.js\nexport function renderApp() {\n const app = document.getElementById('app');\n if (!app) return;\n // No JS changes needed—HTML markup carries your content.\n}\n\n// Auto-run in preview—but not in tests\nif (typeof window !== 'undefined' && typeof jest === 'undefined') {\n renderApp();\n}\n",
"/index.html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Frontend Warrior</title>\n <link rel=\"stylesheet\" href=\"styles.css\" />\n</head>\n<body>\n <div id=\"app\">\n <!-- Add your HTML here -->\n </div>\n <script src=\"index.js\"></script>\n</body>\n</html>",
"/styles.css": "body {\n margin: 0;\n font-family: 'Poppins', sans-serif;\n -webkit-font-smoothing: antialiased;\n}\n#app {\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n background: linear-gradient(135deg, #ffecd2, #fcb69f, #ff9a9e, #fad0c4);\n padding: 20px;\n box-sizing: border-box;\n text-align: center;\n}",
"/index.test.js": "/** @jest-environment jsdom */\nrequire('@testing-library/jest-dom');\nconst { getByRole, getByText, getAllByRole } = require('@testing-library/dom');\n\ndescribe('Vanilla JS Profile Section', () => {\n beforeEach(() => {\n document.body.innerHTML = `dynamiclHtmlBodyContent`;\n const { renderApp } = require('./index.js');\n renderApp();\n });\n\n test('renders an h1 tag with the correct name', () => {\n const heading1 = getByRole(document.body, 'heading', { level: 1 });\n expect(heading1).toHaveTextContent('Jane Doe');\n });\n\n test('renders an h2 tag with the correct role', () => {\n const heading2 = getByRole(document.body, 'heading', { level: 2 });\n expect(heading2).toHaveTextContent('UI Developer');\n });\n\n test('renders a paragraph with the correct description', () => {\n const para = getByText(document.body, 'Passionate about crafting user-friendly interfaces.');\n expect(para.tagName).toBe('P');\n });\n\n test('renders a list with exactly three skills', () => {\n const items = getAllByRole(document.body, 'listitem');\n const texts = items.map(el => el.textContent);\n expect(items).toHaveLength(3);\n expect(texts).toEqual(['HTML', 'CSS', 'JavaScript']);\n });\n});",
"/testcaseShadow.js": "/** @jest-environment jsdom */\nrequire('@testing-library/jest-dom');\nconst { getByRole, getByText, getAllByRole } = require('@testing-library/dom');\n\ndescribe('Vanilla JS Profile Section', () => {\n beforeEach(() => {\n document.body.innerHTML = `dynamiclHtmlBodyContent`;\n const { renderApp } = require('./index.js');\n renderApp();\n });\n\n test('renders an h1 tag with the correct name', () => {\n const heading1 = getByRole(document.body, 'heading', { level: 1 });\n expect(heading1).toHaveTextContent('Jane Doe');\n });\n\n test('renders an h2 tag with the correct role', () => {\n const heading2 = getByRole(document.body, 'heading', { level: 2 });\n expect(heading2).toHaveTextContent('UI Developer');\n });\n\n test('renders a paragraph with the correct description', () => {\n const para = getByText(document.body, 'Passionate about crafting user-friendly interfaces.');\n expect(para.tagName).toBe('P');\n });\n\n test('renders a list with exactly three skills', () => {\n const items = getAllByRole(document.body, 'listitem');\n const texts = items.map(el => el.textContent);\n expect(items).toHaveLength(3);\n expect(texts).toEqual(['HTML', 'CSS', 'JavaScript']);\n });\n});"
},
"isPremium": false,
"createdAt": "2025-03-23T08:34:42.362Z",
"updatedAt": "2025-05-02T07:46:59.522Z",
"authorId": "3cb015a4-2154-4f01-94e3-69abe05824aa",
"tags": [
{
"id": "351c098e-605d-4c37-b602-55556436d559",
"name": "vanilla"
},
{
"id": "6b9f3d61-3e34-4d7e-a577-badfc0e461ad",
"name": "html"
},
{
"id": "92146ed5-5ad8-4341-984a-bad2f69b142e",
"name": "css"
}
]
},
"5":{
"id": "ed756208-c72e-4dbf-bd21-a656f777e5c3",
"slug": "hello-frontend-warrior",
"title": "Embedding an Image and a Link in Vanilla JS",
"description": "Embed an image and a hyperlink into the boilerplate HTML.",
"content": "# 🏆 Question 5: Embedding an Image and a Link in Vanilla JS \n\nThe CSS and JavaScript are already set up. Your task is to insert the required HTML elements so that all automated tests pass.\n\n### What You Need to Do\n1. Open `/index.html`.\n2. Locate the `<div id=\"app\"></div>` container.\n3. Inside that container, add **only**:\n - An `<img>` element with `src=\"https://img.freepik.com/free-vector/hand-drawn-flat-design-api-illustration_23-2149365021.jpg?t=st=1746782594~exp=1746786194~hmac=8828087e9f4183cb28aac2f365c2036f1084fe91894cdde5b8dafcabc96e9de9&w=380\"` and `alt=\"Sample Kitten\"`.\n - A `<p>` element containing an `<a>` element with `href=\"https://www.frontendwarrior.com/\"` and link text **Google**.\n4. Do **not** modify any other HTML, CSS, or JS files.\n5. Run the test suite; all tests must pass before submission.\n\n### Acceptance Criteria\n- An `<img>` with exactly `src=\"https://img.freepik.com/free-vector/hand-drawn-flat-design-api-illustration_23-2149365021.jpg?t=st=1746782594~exp=1746786194~hmac=8828087e9f4183cb28aac2f365c2036f1084fe91894cdde5b8dafcabc96e9de9&w=380\"` and `alt=\"Sample Kitten\"` appears inside `#app`.\n- A `<p>` containing an `<a>` with exactly `href=\"https://www.frontendwarrior.com/\"` and link text **Google** appears inside `#app`.\n\n## 📝 Tag Usage Guidelines\n- **`<img>`**: Use to embed images; always include an `alt` attribute for accessibility. \n For further details on the `<img>` element, refer to MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img\n- **`<p>`**: Use to wrap blocks of text or inline elements like links.\n- **`<a>`**: Use to create hyperlinks; the `href` attribute specifies the link destination.\n\n## 🎯 Learning Outcomes\n- Learn how to embed external images in HTML with correct accessibility practices.\n- Practice creating and configuring hyperlinks for navigation.",
"solution": "Here is the completed `/index.html`, with only the required lines added:\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Frontend Warrior</title>\n <link rel=\"stylesheet\" href=\"styles.css\" />\n</head>\n<body>\n <div id=\"app\">\n <img src=\"https://img.freepik.com/free-vector/hand-drawn-flat-design-api-illustration_23-2149365021.jpg?t=st=1746782594~exp=1746786194~hmac=8828087e9f4183cb28aac2f365c2036f1084fe91894cdde5b8dafcabc96e9de9&w=380\" alt=\"Sample Kitten\" />\n <p>Visit <a href=\"https://www.frontendwarrior.com/\">frontendwarrior</a></p>\n </div>\n <script src=\"index.js\"></script>\n</body>\n</html>\n```",
"dependency": {
"jest": "^29.0.0",
"jest-extended": "^3.0.2",
"@testing-library/dom": "^8.19.0",
"@testing-library/jest-dom": "^6.0.0"
},
"difficulty": "EASY",
"framework": "VANILLA",
"boilerplateCode": {
"/index.js": "// index.js\nexport function renderApp() {\n // No JS needed. The HTML markup you add will be styled automatically.\n}\n\n// Auto-run in preview—but not in tests\nif (typeof window !== 'undefined' && typeof jest === 'undefined') {\n renderApp();\n}\n",
"/index.html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Frontend Warrior</title>\n <link rel=\"stylesheet\" href=\"styles.css\" />\n</head>\n<body>\n <div id=\"app\">\n <!-- Add your <img> and <a> here -->\n </div>\n <script src=\"index.js\"></script>\n</body>\n</html>",
"/styles.css": "body {\n margin: 0;\n font-family: 'Poppins', sans-serif;\n -webkit-font-smoothing: antialiased;\n}\n#app {\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n background: linear-gradient(135deg, #f6d365, #fda085);\n padding: 20px;\n box-sizing: border-box;\n text-align: center;\n}\nimg {\n border: 4px solid #fff;\n border-radius: 8px;\n margin-bottom: 16px;\n max-width: 200px;\n}\na {\n color: #222831;\n text-decoration: none;\n font-weight: bold;\n}\na:hover {\n text-decoration: underline;\n}",
"/index.test.js": "/** @jest-environment jsdom */\nrequire('@testing-library/jest-dom');\nconst { getByAltText, getByRole } = require('@testing-library/dom');\n\ndescribe('Vanilla JS Image and Link', () => {\n beforeEach(() => {\n document.body.innerHTML = `dynamiclHtmlBodyContent`;\n const { renderApp } = require('./index.js');\n renderApp();\n });\n\n test('renders an img with correct src and alt', () => {\n const img = getByAltText(document.body, 'Sample Kitten');\n expect(img).toHaveAttribute('src', 'https://img.freepik.com/free-vector/hand-drawn-flat-design-api-illustration_23-2149365021.jpg?t=st=1746782594~exp=1746786194~hmac=8828087e9f4183cb28aac2f365c2036f1084fe91894cdde5b8dafcabc96e9de9&w=380');\n });\n\n test('renders a link with correct href and text', () => {\n const link = getByRole(document.body, 'link', { name: 'frontendwarrior' });\n expect(link).toHaveAttribute('href', 'https://www.frontendwarrior.com/');\n });\n});",
"/testcaseShadow.js": "/** @jest-environment jsdom */\nrequire('@testing-library/jest-dom');\nconst { getByAltText, getByRole } = require('@testing-library/dom');\n\ndescribe('Vanilla JS Image and Link', () => {\n beforeEach(() => {\n document.body.innerHTML = `dynamiclHtmlBodyContent`;\n const { renderApp } = require('./index.js');\n renderApp();\n });\n\n test('renders an img with correct src and alt', () => {\n const img = getByAltText(document.body, 'Sample Kitten');\n expect(img).toHaveAttribute('src', 'https://img.freepik.com/free-vector/hand-drawn-flat-design-api-illustration_23-2149365021.jpg?t=st=1746782594~exp=1746786194~hmac=8828087e9f4183cb28aac2f365c2036f1084fe91894cdde5b8dafcabc96e9de9&w=380');\n });\n\n test('renders a link with correct href and text', () => {\n const link = getByRole(document.body, 'link', { name: 'frontendwarrior' });\n expect(link).toHaveAttribute('href', 'https://www.frontendwarrior.com/');\n });\n});"
},
"isPremium": false,
"createdAt": "2025-03-23T08:34:42.362Z",
"updatedAt": "2025-05-02T08:02:07.161Z",
"authorId": "3cb015a4-2154-4f01-94e3-69abe05824aa",
"tags": [
{
"id": "351c098e-605d-4c37-b602-55556436d559",
"name": "vanilla"
},
{
"id": "6b9f3d61-3e34-4d7e-a577-badfc0e461ad",
"name": "html"
},
{
"id": "92146ed5-5ad8-4341-984a-bad2f69b142e",
"name": "css"
}
]
},
"6":{
"id": "ed756208-c72e-4dbf-bd21-a656f777e5c3",
"slug": "hello-frontend-warrior",
"title": "Add a Paragraph with Title Attribute in Vanilla JS",
"description": "Insert a paragraph with a title attribute into the boilerplate HTML.",
"content": "# 🏆 Question 6: Add a Paragraph with a Title Attribute in Vanilla JS\n\nThe CSS and JavaScript are already set up. Your task is to insert the required HTML element so that all automated tests pass.\n\n### What You Need to Do\n1. Open `/index.html`.\n2. Locate the `<div id=\"app\"></div>` container.\n3. Inside that container, add **only** a `<p>` element with:\n - `title=\"this is the best Frontend practice platform\"`\n - inner text **Hello Frontend Warrior**\n4. Do **not** modify any other HTML, CSS, or JS files.\n5. Run the test suite; all tests must pass before submission.\n\n### Acceptance Criteria\n- A `<p>` element with text **Hello Frontend Warrior** and `title=\"this is the best Frontend practice platform\"` appears inside `#app`.\n\n## 🎯 Learning Outcomes\n- Practice adding and using HTML attributes.\n- Understand how pre-written JavaScript and CSS can style and interact with attribute-enhanced markup.",
"solution": "Here's the completed `/index.html`, with only the required line added:\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Frontend Warrior</title>\n <link rel=\"stylesheet\" href=\"styles.css\" />\n</head>\n<body>\n <div id=\"app\">\n <p title=\"this is the best Frontend practice platform\">Hello Frontend Warrior</p>\n </div>\n <script src=\"index.js\"></script>\n</body>\n</html>\n```",
"dependency": {
"jest": "^29.0.0",
"jest-extended": "^3.0.2",
"@testing-library/dom": "^8.19.0",
"@testing-library/jest-dom": "^6.0.0"
},
"difficulty": "EASY",
"framework": "VANILLA",
"boilerplateCode": {
"/index.js": "// index.js\nexport function renderApp() {\n // No JS needed—your HTML will be styled automatically.\n}\n\n// Auto-run in preview—but not in tests\nif (typeof window !== 'undefined' && typeof jest === 'undefined') {\n renderApp();\n}\n",
"/index.html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Frontend Warrior</title>\n <link rel=\"stylesheet\" href=\"styles.css\" />\n</head>\n<body>\n <div id=\"app\">\n <!-- Add your <p> here -->\n </div>\n <script src=\"index.js\"></script>\n</body>\n</html>",
"/styles.css": "body {\n margin: 0;\n font-family: 'Poppins', sans-serif;\n background: #f0f0f0;\n}\n#app {\n min-height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: center;\n padding: 20px;\n}\np {\n font-size: 1.5rem;\n color: #2f3542;\n background: #dfe4ea;\n padding: 8px 12px;\n border-radius: 4px;\n}",
"/index.test.js": "/** @jest-environment jsdom */\nrequire('@testing-library/jest-dom');\nconst { getByText } = require('@testing-library/dom');\n\ndescribe('Vanilla JS Paragraph with Title', () => {\n beforeEach(() => {\n document.body.innerHTML = `dynamiclHtmlBodyContent`;\n const { renderApp } = require('./index.js');\n renderApp();\n });\n\n test('renders a p tag with the correct text', () => {\n const para = getByText(document.body, 'Hello Frontend Warrior');\n expect(para.tagName).toBe('P');\n });\n\n test('p tag has the correct title attribute', () => {\n const para = getByText(document.body, 'Hello Frontend Warrior');\n expect(para).toHaveAttribute('title', 'this is the best Frontend practice platform');\n });\n});",
"/testcaseShadow.js": "/** @jest-environment jsdom */\nrequire('@testing-library/jest-dom');\nconst { getByText } = require('@testing-library/dom');\n\ndescribe('Vanilla JS Paragraph with Title', () => {\n beforeEach(() => {\n document.body.innerHTML = `dynamiclHtmlBodyContent`;\n const { renderApp } = require('./index.js');\n renderApp();\n });\n\n test('renders a p tag with the correct text', () => {\n const para = getByText(document.body, 'Hello Frontend Warrior');\n expect(para.tagName).toBe('P');\n });\n\n test('p tag has the correct title attribute', () => {\n const para = getByText(document.body, 'Hello Frontend Warrior');\n expect(para).toHaveAttribute('title', 'this is the best Frontend practice platform');\n });\n});"
},
"isPremium": false,
"createdAt": "2025-03-23T08:34:42.362Z",
"updatedAt": "2025-05-09T10:05:40.868Z",
"authorId": "3cb015a4-2154-4f01-94e3-69abe05824aa",
"tags": [
{
"id": "351c098e-605d-4c37-b602-55556436d559",
"name": "vanilla"
},
{
"id": "6b9f3d61-3e34-4d7e-a577-badfc0e461ad",
"name": "html"
},
{
"id": "92146ed5-5ad8-4341-984a-bad2f69b142e",
"name": "css"
}
]
},
"7":{
"id": "ed756208-c72e-4dbf-bd21-a656f777e5c3",
"slug": "hello-frontend-warrior",
"title": "Use External CSS Classes in Vanilla JS",
"description": "Apply predefined CSS classes to a card component.",
"content": "# 🏆 Question : Use External CSS Classes in Vanilla JS\n\nThe CSS and JavaScript are already set up. Your task is to insert a small card component into the boilerplate HTML, using only the predefined class names in **`styles.css`**, so that all automated tests pass.\n\n### What You Need to Do\n1. Open `/index.html`.\n2. Locate the `<div id=\"app\"></div>` container.\n3. Inside that container, add only the following structure (don't include any other markup):\n - A `<div>` with class `card`.\n - Inside it, an `<h2>` with class `title` and text **Hello Frontend Warrior**.\n - Inside it, a `<p>` with class `description` and text **Welcome to Vanilla JS challenges!**.\n4. Do **not** copy any ready-made snippet from these instructions—implement it yourself.\n5. If you get stuck, check the editorial for guidance.\n6. Run the test suite; all tests must pass before submission.\n\n### Acceptance Criteria\n- A `<div class=\"card\">` wraps exactly one `<h2 class=\"title\">Hello Frontend Warrior</h2>` and one `<p class=\"description\">Welcome to Vanilla JS challenges!</p>`.\n\n## 🎯 Learning Outcomes\n- Learn to apply external CSS classes to HTML elements.\n- Understand how external styles override default browser styling without inline CSS.\n",
"solution": "Here is the completed `/index.html`, with only the card markup added:\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Frontend Warrior</title>\n <link rel=\"stylesheet\" href=\"styles.css\" />\n</head>\n<body>\n <div id=\"app\">\n <div class=\"card\">\n <h2 class=\"title\">Hello Frontend Warrior</h2>\n <p class=\"description\">Welcome to Vanilla JS challenges!</p>\n </div>\n </div>\n <script src=\"index.js\"></script>\n</body>\n</html>\n```",
"dependency": {
"jest": "^29.0.0",
"jest-extended": "^3.0.2",
"@testing-library/dom": "^8.19.0",
"@testing-library/jest-dom": "^6.0.0"
},
"difficulty": "EASY",
"framework": "VANILLA",
"boilerplateCode": {
"/index.js": "import \"/styles.css\";\n// index.js\nexport function renderApp() {\n // No JS needed—CSS classes will style your markup.\n}\n\n// Auto-run in preview—but not in tests\nif (typeof window !== 'undefined' && typeof jest === 'undefined') {\n renderApp();\n}\n",
"/index.html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Frontend Warrior</title>\n <link rel=\"stylesheet\" href=\"styles.css\" />\n</head>\n<body>\n <div id=\"app\">\n <!-- Add your card markup here -->\n </div>\n <script src=\"index.js\"></script>\n</body>\n</html>",
"/styles.css": "body {\n margin: 0;\n font-family: 'Poppins', sans-serif;\n background: #fafafa;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100vh;\n}\n\n.card {\n background: #ffffff;\n border: 2px solid #4b7bec;\n border-radius: 8px;\n padding: 16px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n text-align: center;\n width: 300px;\n}\n\n.title {\n font-size: 2rem;\n color: #4b7bec;\n margin: 0 0 8px;\n}\n\n.description {\n font-size: 1rem;\n color: #57606f;\n margin: 0;\n}",
"/testcaseShadow.js": "/** @jest-environment jsdom */\nrequire('@testing-library/jest-dom');\nconst { getByRole, getByText } = require('@testing-library/dom');\n\ndescribe('Vanilla JS Card Component', () => {\n beforeEach(() => {\n document.body.innerHTML = `dynamiclHtmlBodyContent`;\n const { renderApp } = require('./index.js');\n renderApp();\n });\n\n test('renders a div with class card', () => {\n const card = document.querySelector('.card');\n expect(card).toBeInTheDocument();\n });\n\n test('renders an h2.title with correct text', () => {\n const heading = getByRole(document.body, 'heading', { level: 2 });\n expect(heading).toHaveClass('title');\n expect(heading).toHaveTextContent('Hello Frontend Warrior');\n });\n\n test('renders a p.description with correct text', () => {\n const para = getByText(document.body, 'Welcome to Vanilla JS challenges!');\n expect(para.tagName).toBe('P');\n expect(para).toHaveClass('description');\n });\n});"
},
"isPremium": false,
"createdAt": "2025-03-23T08:34:42.362Z",
"updatedAt": "2025-05-02T08:41:52.827Z",
"authorId": "3cb015a4-2154-4f01-94e3-69abe05824aa",
"tags": [
{
"id": "351c098e-605d-4c37-b602-55556436d559",
"name": "vanilla"
},
{
"id": "6b9f3d61-3e34-4d7e-a577-badfc0e461ad",
"name": "html"
},
{
"id": "92146ed5-5ad8-4341-984a-bad2f69b142e",
"name": "css"
}
]
},
"8":{
"id": "f1a2b3c4-d5e6-7890-abcd-ef1234567890",
"slug": "div-basics",
"title": "Basic Div Usage in Vanilla JS",
"description": "Create a nested `<div>` structure inside the boilerplate HTML.",
"content": "# 🏆 Question : Basic Div Usage in Vanilla JS\n\nThe CSS and JavaScript are already set up. Your task is to insert a simple nested `<div>` structure into the boilerplate HTML so that all automated tests pass—implement it yourself without copy-pasting from these instructions.\n\n### What You Need to Do\n1. Open `/index.html`.\n2. Locate the `<div id=\"app\"></div>` container.\n3. Inside that container, add **only**:\n ```html\n <div class=\"container\">\n <div class=\"box\">Box 1</div>\n <div class=\"box\">Box 2</div>\n </div>\n ```\n4. Do **not** modify any other HTML, CSS, or JS files.\n5. If you get stuck, check the editorial for hints.\n6. Run the test suite; all tests must pass before submission.\n\n### Acceptance Criteria\n- A `<div class=\"container\">` wraps exactly two `<div class=\"box\">` elements.\n- The first `.box` contains the text **Box 1**.\n- The second `.box` contains the text **Box 2**.\n\n## 🎯 Learning Outcomes\n- Practice creating and nesting `<div>` elements.\n- Understand how to use class names for grouping and styling in HTML.\n",
"solution": "If you need help implementing this structure, refer to the editorial.",
"dependency": {
"jest": "^29.0.0",
"jest-extended": "^3.0.2",
"@testing-library/dom": "^8.19.0",
"@testing-library/jest-dom": "^6.0.0"
},
"difficulty": "EASY",
"framework": "VANILLA",
"boilerplateCode": {
"/index.js": "import \"/styles.css\";\nexport function renderApp() {\n // No JS needed—HTML markup carries your nested divs.\n}\n\n// Auto-run in preview—but not in tests\nif (typeof window !== 'undefined' && typeof jest === 'undefined') {\n renderApp();\n}\n",
"/index.html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Div Basics</title>\n <link rel=\"stylesheet\" href=\"styles.css\" />\n</head>\n<body>\n <div id=\"app\">\n <!-- Add your nested divs here -->\n </div>\n <script src=\"index.js\"></script>\n</body>\n</html>",
"/styles.css": "body {\n margin: 0;\n font-family: 'Poppins', sans-serif;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n background: #f5f6fa;\n}\n\n.container {\n border: 2px dashed #2f3542;\n padding: 16px;\n}\n\n.box {\n background: #70a1ff;\n color: #ffffff;\n padding: 8px;\n margin: 4px 0;\n text-align: center;\n border-radius: 4px;\n}",
"/testcaseShadow.js": "/** @jest-environment jsdom */\nrequire('@testing-library/jest-dom');\nconst { getByText } = require('@testing-library/dom');\n\ndescribe('Vanilla JS Div Basics', () => {\n beforeEach(() => {\n document.body.innerHTML = `dynamiclHtmlBodyContent`;\n const { renderApp } = require('./index.js');\n renderApp();\n });\n\n test('renders a container div', () => {\n const container = document.querySelector('.container');\n expect(container).toBeInTheDocument();\n });\n\n test('renders two box divs', () => {\n const boxes = document.querySelectorAll('.box');\n expect(boxes).toHaveLength(2);\n });\n\n test('first box has text Box 1', () => {\n expect(getByText(document.body, 'Box 1')).toBeInTheDocument();\n });\n\n test('second box has text Box 2', () => {\n expect(getByText(document.body, 'Box 2')).toBeInTheDocument();\n });\n});"
}
},
"9": {
"id": "q1-select-by-class",
"slug": "select-by-class",
"title": "DOM Selection: Select Elements by Class",
"description": "Select all elements with a given class and update their text.",
"content": "# 🏆 Question 1: Select Elements by Class\n\nThe HTML and CSS are provided. Your task is to write the JS in `index.js` to select every element with class `box` and change its text to **\"Selected\"**.\n\n### What You Need to Do\n1. Open `/index.js`.\n2. Inside `renderApp()`, select all elements with class `box` using `getElementsByClassName`.\n3. Loop through them and set each `.textContent` to **\"Selected\"**.\n4. Do not modify any other file.\n5. Run the tests; all must pass before submission.\n\n### Acceptance Criteria\n- All three `<div class=\"box\">` elements initially read **\"Box A\"**, **\"Box B\"**, **\"Box C\"**.\n- After running your code, each reads **\"Selected\"**.\n\n## 🎯 Learning Outcomes\n- Practice using `document.getElementsByClassName()` and converting the HTMLCollection to an array.\n",
"solution": "```js\n// index.js\nexport function renderApp() {\n const boxes = document.getElementsByClassName('box');\n Array.from(boxes).forEach(box => {\n box.textContent = 'Selected';\n });\n}\n\n// Auto-run in preview—but not in tests\nif (typeof window !== 'undefined' && typeof jest === 'undefined') {\n renderApp();\n}\n```",
"dependency": {
"jest": "^29.0.0",
"jest-extended": "^3.0.2",
"@testing-library/dom": "^8.19.0",
"@testing-library/jest-dom": "^6.0.0"
},
"difficulty": "EASY",
"framework": "VANILLA",
"boilerplateCode": {
"/index.js": "// index.js\nexport function renderApp() {\n // Write your code here\n}\n\n// Auto-run in preview—but not in tests\nif (typeof window !== 'undefined' && typeof jest === 'undefined') {\n renderApp();\n}\n",
"/index.html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"/><meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\"/><title>Select by Class</title></head>\n<body>\n <div id=\"app\">\n <div class=\"box\">Box A</div>\n <div class=\"box\">Box B</div>\n <div class=\"box\">Box C</div>\n </div>\n <script src=\"index.js\"></script>\n</body>\n</html>",
"/styles.css": "/* no styles needed for this exercise */",
"/index.test.js": "/** @jest-environment jsdom */\nrequire('@testing-library/jest-dom');\n\ndescribe('Select by Class', () => {\n beforeEach(() => {\n document.body.innerHTML = `dynamiclHtmlBodyContent`;\n const { renderApp } = require('./index.js');\n renderApp();\n });\n\n test('all .box texts are \"Selected\"', () => {\n const boxes = document.querySelectorAll('.box');\n expect(boxes).toHaveLength(3);\n boxes.forEach(box => expect(box).toHaveTextContent('Selected'));\n });\n});",
"/testcaseShadow.js": "/** @jest-environment jsdom */\nrequire('@testing-library/jest-dom');\n\ndescribe('Select by Class', () => {\n beforeEach(() => {\n document.body.innerHTML = `dynamiclHtmlBodyContent`;\n const { renderApp } = require('./index.js');\n renderApp();\n });\n\n test('all .box texts are \"Selected\"', () => {\n const boxes = document.querySelectorAll('.box');\n expect(boxes).toHaveLength(3);\n boxes.forEach(box => expect(box).toHaveTextContent('Selected'));\n });\n});"
},
"isPremium": false,
"createdAt": "2025-03-23T08:34:42.362Z",
"updatedAt": "2025-05-09T11:22:49.242Z",
"authorId": "3cb015a4-2154-4f01-94e3-69abe05824aa",
"tags": [
{
"id": "351c098e-605d-4c37-b602-55556436d559",
"name": "vanilla"
},
{
"id": "6b9f3d61-3e34-4d7e-a577-badfc0e461ad",
"name": "html"
},
{
"id": "6fc00304-7dbe-4203-b424-b9e9c120ffda",
"name": "javascript"
},
{
"id": "92146ed5-5ad8-4341-984a-bad2f69b142e",
"name": "css"
},
{
"id": "c8d3e2f6-c5f3-4333-b6da-7ddc3c3a8dc5",
"name": "dom"
}
]
},
"10":{
"id": "q2-select-by-id",
"slug": "select-by-id",
"title": "DOM Selection: Select Element by ID",
"description": "Select a single element by its ID and update its text.",
"content": "# 🏆 Question 2: Select Element by ID\n\nThe HTML and CSS are provided. Write the JS in `index.js` to select the element with `id=\"unique\"` and change its text to **\"Updated\"**.\n\n### What You Need to Do\n1. Open `/index.js`.\n2. Inside `renderApp()`, select the element with `document.getElementById('unique')`.\n3. If it exists, set its `.textContent` to **\"Updated\"**.\n4. Do not modify any other file.\n5. Run the tests; all must pass.\n\n### Acceptance Criteria\n- The `<div id=\"unique\">` initially reads **\"Original\"**.\n- After your code runs, it reads **\"Updated\"**.\n\n## 🎯 Learning Outcomes\n- Practice using `document.getElementById()` to select a single element.\n",
"solution": "```js\n// index.js\nexport function renderApp() {\n const el = document.getElementById('unique');\n if (el) {\n el.textContent = 'Updated';\n }\n}\n\n// Auto-run in preview—but not in tests\nif (typeof window !== 'undefined' && typeof jest === 'undefined') {\n renderApp();\n}\n```",
"dependency": {
"jest": "^29.0.0",
"jest-extended": "^3.0.2",
"@testing-library/dom": "^8.19.0",
"@testing-library/jest-dom": "^6.0.0"
},
"difficulty": "EASY",
"framework": "VANILLA",
"boilerplateCode": {
"/index.js": "// index.js\nexport function renderApp() {\n // Write your code here\n}\n\n// Auto-run in preview—but not in tests\nif (typeof window !== 'undefined' && typeof jest === 'undefined') {\n renderApp();\n}\n",
"/index.html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"/><meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\"/><title>Select by ID</title></head>\n<body>\n <div id=\"app\">\n <div id=\"unique\">Original</div>\n </div>\n <script src=\"index.js\"></script>\n</body>\n</html>",
"/styles.css": "/* no styles needed */",
"/index.test.js": "/** @jest-environment jsdom */\nrequire('@testing-library/jest-dom');\nconst { getByText } = require('@testing-library/dom');\n\ndescribe('Select by ID', () => {\n beforeEach(() => {\n document.body.innerHTML = `dynamiclHtmlBodyContent`;\n const { renderApp } = require('./index.js');\n renderApp();\n });\n\n test('#unique text updates to \"Updated\"', () => {\n expect(getByText(document.body, 'Updated')).toBeInTheDocument();\n });\n});",
"/testcaseShadow.js": "/** @jest-environment jsdom */\nrequire('@testing-library/jest-dom');\nconst { getByText } = require('@testing-library/dom');\n\ndescribe('Select by ID', () => {\n beforeEach(() => {\n document.body.innerHTML = `dynamiclHtmlBodyContent`;\n const { renderApp } = require('./index.js');\n renderApp();\n });\n\n test('#unique text updates to \"Updated\"', () => {\n expect(getByText(document.body, 'Updated')).toBeInTheDocument();\n });\n});"
},
"isPremium": false,
"createdAt": "2025-03-23T08:34:42.362Z",
"updatedAt": "2025-05-09T11:16:20.554Z",
"authorId": "3cb015a4-2154-4f01-94e3-69abe05824aa",
"tags": [
{
"id": "351c098e-605d-4c37-b602-55556436d559",
"name": "vanilla"
},
{
"id": "6b9f3d61-3e34-4d7e-a577-badfc0e461ad",
"name": "html"
},
{
"id": "6fc00304-7dbe-4203-b424-b9e9c120ffda",
"name": "javascript"
},
{
"id": "92146ed5-5ad8-4341-984a-bad2f69b142e",
"name": "css"
},
{
"id": "c8d3e2f6-c5f3-4333-b6da-7ddc3c3a8dc5",
"name": "dom"
}
]
},
"11":{
"id": "q3-query-selector",
"slug": "query-selector",
"title": "DOM Selection: querySelector",
"description": "Use `querySelector` to target the first matching element and change its text.",
"content": "# 🏆 Question 3: Use `querySelector`\n\nGiven multiple `<p class=\"text\">` elements, write JS to select the first one via `document.querySelector('.text')` and set its text to **\"Changed\"**.\n\n### What You Need to Do\n1. Open `/index.js`.\n2. Inside `renderApp()`, use `document.querySelector('.text')` to get the first paragraph.\n3. If found, set `.textContent` to **\"Changed\"**.\n4. Do not modify any other file.\n5. Run the tests; all must pass.\n\n### Acceptance Criteria\n- Two `<p class=\"text\">` elements initially read **\"First\"** and **\"Second\"**.\n- After your code runs, only the first reads **\"Changed\"**; the second remains **\"Second\"**.\n\n## 🎯 Learning Outcomes\n- Practice `document.querySelector()` for first-match selection.\n",
"solution": "```js\n// index.js\nexport function renderApp() {\n const first = document.querySelector('.text');\n if (first) {\n first.textContent = 'Changed';\n }\n}\n\n// Auto-run in preview—but not in tests\nif (typeof window !== 'undefined' && typeof jest === 'undefined') {\n renderApp();\n}\n```",
"dependency": {
"jest": "^29.0.0",
"jest-extended": "^3.0.2",
"@testing-library/dom": "^8.19.0",
"@testing-library/jest-dom": "^6.0.0"
},
"difficulty": "EASY",
"framework": "VANILLA",
"boilerplateCode": {
"/index.js": "// index.js\nexport function renderApp() {\n // Write your code here\n}\n\n// Auto-run in preview—but not in tests\nif (typeof window !== 'undefined' && typeof jest === 'undefined') {\n renderApp();\n}\n",
"/index.html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head><meta charset=\"UTF-8\"/><meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\"/><title>querySelector</title></head>\n<body>\n <div id=\"app\">\n <p class=\"text\">First</p>\n <p class=\"text\">Second</p>\n </div>\n <script src=\"index.js\"></script>\n</body>\n</html>",
"/styles.css": "/* no styles needed */",
"/index.test.js": "/** @jest-environment jsdom */\nrequire('@testing-library/jest-dom');\n\ndescribe('querySelector exercise', () => {\n beforeEach(() => {\n document.body.innerHTML = `dynamiclHtmlBodyContent`;\n const { renderApp } = require('./index.js');\n renderApp();\n });\n\n test('only first .text changes to \"Changed\"', () => {\n const ps = document.querySelectorAll('.text');\n expect(ps[0]).toHaveTextContent('Changed');\n expect(ps[1]).toHaveTextContent('Second');\n });\n});",
"/testcaseShadow.js": "/** @jest-environment jsdom */\nrequire('@testing-library/jest-dom');\n\ndescribe('querySelector exercise', () => {\n beforeEach(() => {\n document.body.innerHTML = `dynamiclHtmlBodyContent`;\n const { renderApp } = require('./index.js');\n renderApp();\n });\n\n test('only first .text changes to \"Changed\"', () => {\n const ps = document.querySelectorAll('.text');\n expect(ps[0]).toHaveTextContent('Changed');\n expect(ps[1]).toHaveTextContent('Second');\n });\n});"
},
"isPremium": false,
"createdAt": "2025-03-23T08:34:42.362Z",
"updatedAt": "2025-05-09T11:25:47.896Z",
"authorId": "3cb015a4-2154-4f01-94e3-69abe05824aa",
"tags": [
{
"id": "351c098e-605d-4c37-b602-55556436d559",
"name": "vanilla"
},
{
"id": "6b9f3d61-3e34-4d7e-a577-badfc0e461ad",
"name": "html"
},
{
"id": "6fc00304-7dbe-4203-b424-b9e9c120ffda",
"name": "javascript"
},
{
"id": "92146ed5-5ad8-4341-984a-bad2f69b142e",
"name": "css"
},
{
"id": "c8d3e2f6-c5f3-4333-b6da-7ddc3c3a8dc5",
"name": "dom"
}
]
},
"12":{
"id": "q3-query-selector",
"slug": "vannilla-onclick-change-text",
"title": "DOM Manipulation: Change Heading on Button Click",
"description": "Attach a click handler so clicking the button updates the heading text.",
"content": "# 🏆 Question 9: DOM Manipulation – Change Heading on Button Click\n\n## 📖 Description \nYour task is to write JavaScript in `/index.js` that attaches a click event listener to a button and updates the text of an `<h1>` element when it’s clicked.\n\n### 🔹 What You Need to Do \n1. Open `/index.js`. \n2. Inside the exported `renderApp()` function, write code to:\n - Select the `<h1>` element. \n - Select the `<button>` with id `btn`. \n - Attach a `click` event listener to the button that changes the `<h1>`’s `textContent` to **\"Button Clicked!\"**. \n3. **Do not** modify any other file. \n4. Run the test suite; all tests must pass before submission.\n\n## ✅ Acceptance Criteria \n- The page initially shows an `<h1>` reading **\"Hello Frontend Warrior\"** and a `<button>` labeled **\"Click Me!\"**. \n- After clicking the button, the `<h1>`’s text updates to **\"Button Clicked!\"**.\n\n## 📌 Topics Covered \n- DOM selection (`getElementById`, `querySelector`) \n- Event handling in JavaScript \n- Modifying `textContent` \n\n## 🎯 Learning Outcomes \nBy completing this challenge, you will: \n✅ Learn to select DOM elements in JavaScript. \n✅ Practice attaching event listeners. \n✅ Understand how to update the DOM in response to user actions.\n",
"solution": "```js\n// index.js\nexport function renderApp() {\n const heading = document.querySelector('h1');\n const button = document.getElementById('btn');\n if (!heading || !button) return;\n\n button.addEventListener('click', () => {\n heading.textContent = 'Button Clicked!';\n });\n}\n\n// Auto-run in preview—but not in tests\nif (typeof window !== 'undefined' && typeof jest === 'undefined') {\n renderApp();\n}\n```",
"dependency": {
"jest": "^29.0.0",
"jest-extended": "^3.0.2",
"@testing-library/dom": "^8.19.0",
"@testing-library/jest-dom": "^6.0.0"
},
"difficulty": "EASY",
"framework": "VANILLA",
"boilerplateCode": {
"/index.js": "// index.js\nexport function renderApp() {\n // Write your code here\n}\n\n// Auto-run in preview—but not in tests\nif (typeof window !== 'undefined' && typeof jest === 'undefined') {\n renderApp();\n}\n",
"/index.html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Frontend Warrior</title>\n <link rel=\"stylesheet\" href=\"styles.css\" />\n</head>\n<body>\n <div id=\"app\">\n <h1>Hello Frontend Warrior</h1>\n <button id=\"btn\">Click Me!</button>\n </div>\n <script src=\"index.js\"></script>\n</body>\n</html>",
"/styles.css": "body {\n margin: 0;\n font-family: 'Poppins', sans-serif;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 100vh;\n background: #e0e0e0;\n}\nh1 {\n margin-bottom: 16px;\n}\nbutton {\n padding: 8px 16px;\n font-size: 1rem;\n cursor: pointer;\n}",
"/testcaseShadow.js": "/** @jest-environment jsdom */\nrequire('@testing-library/jest-dom');\nconst { getByRole } = require('@testing-library/dom');\n\ndescribe('DOM Manipulation: Button Click', () => {\n beforeEach(() => {\n document.body.innerHTML = `dynamiclHtmlBodyContent`;\n const { renderApp } = require('./index.js');\n renderApp();\n });\n\n test('initial heading text is correct', () => {\n const heading = getByRole(document.body, 'heading', { level: 1 });\n expect(heading).toHaveTextContent('Hello Frontend Warrior');\n });\n\n test('clicking the button changes heading text', () => {\n const button = getByRole(document.body, 'button', { name: 'Click Me!' });\n button.click();\n const heading = getByRole(document.body, 'heading', { level: 1 });\n expect(heading).toHaveTextContent('Button Clicked!');\n });\n});",
"/index.test.js": "/** @jest-environment jsdom */\nrequire('@testing-library/jest-dom');\nconst { getByRole } = require('@testing-library/dom');\n\ndescribe('DOM Manipulation: Button Click', () => {\n beforeEach(() => {\n document.body.innerHTML = `dynamiclHtmlBodyContent`;\n const { renderApp } = require('./index.js');\n renderApp();\n });\n\n test('initial heading text is correct', () => {\n const heading = getByRole(document.body, 'heading', { level: 1 });\n expect(heading).toHaveTextContent('Hello Frontend Warrior');\n });\n\n test('clicking the button changes heading text', () => {\n const button = getByRole(document.body, 'button', { name: 'Click Me!' });\n button.click();\n const heading = getByRole(document.body, 'heading', { level: 1 });\n expect(heading).toHaveTextContent('Button Clicked!');\n });\n});"
},
"isPremium": false,
"createdAt": "2025-03-23T08:34:42.362Z",
"updatedAt": "2025-05-02T09:24:51.362Z",
"authorId": "3cb015a4-2154-4f01-94e3-69abe05824aa",
"tags":["html","css","vanilla","javascript","dom"]
},
"13":{
"id": "ed756208-c72e-4dbf-bd21-a656f777e5c3",
"slug": "hello-frontend-warrior",
"title": "Build a Greeting Generator in Vanilla JS",
"description": "Create a simple greeting generator using form inputs and DOM updates.",
"content": "# 🏆 Question 10: Build a Greeting Generator in Vanilla JS\n\n## 📖 Description \nTime to combine form inputs and DOM updates! Your task is to create a greeting generator: the user enters their name, clicks a button, and sees a personalized message.\n\n### What You Need to Do \n1. Open `index.js`. \n2. Inside the exported `renderApp()` function, write code to:\n - Select the input with `id=\"nameInput\"`.\n - Select the button with `id=\"greetBtn\"`.\n - Select the paragraph with `id=\"greeting\"`.\n - Attach a `click` event listener to the button that reads and trims the input’s value and sets the paragraph’s `textContent` to `Hello, <name>!`.\n3. **Do not** modify any other file. \n4. Run the test suite; all tests must pass before submission.\n\n## ✅ Requirements \n- Before clicking, the paragraph (`<p id=\"greeting\">`) must be empty. \n- After entering, for example, **Alice** and clicking **Greet Me**, the paragraph must read **\"Hello, Alice!\"**.\n\n## 📌 Topics Covered \n- Selecting form inputs and buttons in JavaScript \n- Event handling (`addEventListener`) \n- Updating the DOM via `textContent` \n\n## 🎯 Learning Outcomes \nBy completing this challenge, you will: \n✅ Learn to select and interact with form elements in JS. \n✅ Practice attaching click handlers to buttons. \n✅ Understand how to update page content dynamically based on user input.\n",
"solution": "```js\n// index.js\nexport function renderApp() {\n const input = document.getElementById('nameInput');\n const button = document.getElementById('greetBtn');\n const greeting = document.getElementById('greeting');\n if (!input || !button || !greeting) return;\n\n button.addEventListener('click', () => {\n const name = input.value.trim();\n greeting.textContent = `Hello, ${name}!`;\n });\n}\n\n// Auto-run in preview (not in tests)\nif (typeof window !== 'undefined' && typeof jest === 'undefined') {\n renderApp();\n}\n```",
"dependency": {
"jest": "^29.0.0",
"jest-extended": "^3.0.2",
"@testing-library/dom": "^8.19.0",
"@testing-library/jest-dom": "^6.0.0"
},
"difficulty": "EASY",
"framework": "VANILLA",
"boilerplateCode": {
"/index.js": "// index.js\n import \"/styles.css\" \n export function renderApp() {\n // Write your code here\n}\n\n// Auto-run in preview (not in tests)\nif (typeof window !== 'undefined' && typeof jest === 'undefined') {\n renderApp();\n}\n",
"/index.html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Frontend Warrior</title>\n <link rel=\"stylesheet\" href=\"styles.css\" />\n</head>\n<body>\n <div id=\"app\">\n <input type=\"text\" id=\"nameInput\" placeholder=\"Enter your name\" />\n <button id=\"greetBtn\">Greet Me</button>\n <p id=\"greeting\"></p>\n </div>\n <script src=\"index.js\"></script>\n</body>\n</html>",
"/styles.css": "body {\n margin: 0;\n font-family: 'Poppins', sans-serif;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 100vh;\n background: #e9f7ef;\n}\n#app {\n text-align: center;\n}\ninput {\n padding: 8px;\n font-size: 1rem;\n margin-bottom: 8px;\n}\nbutton {\n padding: 8px 16px;\n font-size: 1rem;\n cursor: pointer;\n margin-bottom: 16px;\n}\n#greeting {\n font-size: 1.2rem;\n color: #2d3436;\n}",
"/index.test.js": "/** @jest-environment jsdom */\nrequire('@testing-library/jest-dom');\nconst { getByPlaceholderText, getByRole, getByText } = require('@testing-library/dom');\n\ndescribe('Greeting Generator', () => {\n beforeEach(() => {\n document.body.innerHTML = `dynamiclHtmlBodyContent`;\n const { renderApp } = require('./index.js');\n renderApp();\n });\n\n test('initial greeting is empty', () => {\n const greeting = document.getElementById('greeting');\n expect(greeting.textContent).toBe('');\n });\n\n test('displays greeting after click', () => {\n const input = getByPlaceholderText(document.body, 'Enter your name');\n const button = getByRole(document.body, 'button', { name: 'Greet Me' });\n input.value = 'Alice';\n button.click();\n expect(getByText(document.body, 'Hello, Alice!')).toBeInTheDocument();\n });\n});",
"/testcaseShadow.js": "/** @jest-environment jsdom */\nrequire('@testing-library/jest-dom');\nconst { getByPlaceholderText, getByRole, getByText } = require('@testing-library/dom');\n\ndescribe('Greeting Generator', () => {\n beforeEach(() => {\n document.body.innerHTML = `dynamiclHtmlBodyContent`;\n const { renderApp } = require('./index.js');\n renderApp();\n });\n\n test('initial greeting is empty', () => {\n const greeting = document.getElementById('greeting');\n expect(greeting.textContent).toBe('');\n });\n\n test('displays greeting after click', () => {\n const input = getByPlaceholderText(document.body, 'Enter your name');\n const button = getByRole(document.body, 'button', { name: 'Greet Me' });\n input.value = 'Alice';\n button.click();\n expect(getByText(document.body, 'Hello, Alice!')).toBeInTheDocument();\n });\n});"
},
"isPremium": false,
"createdAt": "2025-03-23T08:34:42.362Z",
"updatedAt": "2025-05-02T09:34:15.277Z",
"authorId": "3cb015a4-2154-4f01-94e3-69abe05824aa",
"tags": [
"html",
"css",
"dom",
"vanilla",
"javascript"
]
},
"14":{
"id": "ed756208-c72e-4dbf-bd21-a656f777e5c3",
"slug": "dark-mode-toggle",
"title": "Dark Mode Toggle in Vanilla JS",
"description": "Attach a click handler to toggle dark mode on the page.",
"content": "# 🏆 Question: Dark Mode Toggle in Vanilla JS\n\nThe CSS is already written; your job is to write the JavaScript so that a button toggles dark mode on the `<body>` element.\n\n### What You Need to Do\n1. Open `index.js` and find the exported `renderApp()` function.\n2. Inside `renderApp()`: \n - Select the `<button id=\"toggleBtn\">`. \n - Attach a `click` event listener that toggles the `dark-mode` class on `document.body` (using `classList.toggle()`).\n3. **Do not** modify any other files. \n4. Run the test suite; all tests must pass before submission.\n\n### Acceptance Criteria\n- Initially, `<body>` does **not** have the `dark-mode` class. \n- After one click on the button, `<body>` **must** have `class=\"dark-mode\"`. \n- After a second click, `<body>` **must not** have the `dark-mode` class.\n\n## 🎯 Learning Outcomes\n- Practice selecting elements with `getElementById`. \n- Learn to toggle CSS classes via `classList.toggle()`. \n- Understand how to respond to user interactions in JavaScript.\n\n*If you get stuck, check the editorial for a detailed solution.*",
"solution": "```js\n// index.js\nexport function renderApp() {\n const btn = document.getElementById('toggleBtn');\n if (!btn) return;\n btn.addEventListener('click', () => {\n document.body.classList.toggle('dark-mode');\n });\n}\n\n// Auto-run in preview—but not in tests\nif (typeof window !== 'undefined' && typeof jest === 'undefined') {\n renderApp();\n}\n```",
"dependency": {
"jest": "^29.0.0",
"jest-extended": "^3.0.2",
"@testing-library/dom": "^8.19.0",
"@testing-library/jest-dom": "^6.0.0"
},
"difficulty": "EASY",
"framework": "VANILLA",
"boilerplateCode": {
"/index.js": "// index.js\nimport \"/styles.css\";\n\nexport function renderApp() {\n // Write your code here\n}\n\n// Auto-run in preview—but not in tests\nif (typeof window !== 'undefined' && typeof jest === 'undefined') {\n renderApp();\n}\n",
"/index.html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Frontend Warrior</title>\n <link rel=\"stylesheet\" href=\"styles.css\" />\n</head>\n<body>\n <div id=\"app\">\n <button id=\"toggleBtn\">Toggle Dark Mode</button>\n </div>\n <script src=\"index.js\"></script>\n</body>\n</html>",
"/styles.css": "body {\n margin: 0;\n font-family: 'Poppins', sans-serif;\n background: #ffffff;\n color: #000000;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n}\n#app {\n text-align: center;\n}\n.dark-mode {\n background: #333333;\n color: #ffffff;\n}\nbutton {\n padding: 10px 20px;\n font-size: 1rem;\n cursor: pointer;\n}",
"/testcaseShadow.js": "/** @jest-environment jsdom */\nrequire('@testing-library/jest-dom');\nconst { getByRole } = require('@testing-library/dom');\n\ndescribe('Dark Mode Toggle', () => {\n beforeEach(() => {\n document.body.innerHTML = `dynamiclHtmlBodyContent`;\n const { renderApp } = require('./index.js');\n renderApp();\n });\n\n test('body does not have dark-mode class initially', () => {\n expect(document.body).not.toHaveClass('dark-mode');\n });\n\n test('clicking toggleBtn adds dark-mode class', () => {\n const btn = getByRole(document.body, 'button', { name: 'Toggle Dark Mode' });\n btn.click();\n expect(document.body).toHaveClass('dark-mode');\n });\n\n test('clicking toggleBtn again removes dark-mode class', () => {\n const btn = getByRole(document.body, 'button', { name: 'Toggle Dark Mode' });\n btn.click();\n expect(document.body).not.toHaveClass('dark-mode');\n });\n});",
"/index.test.js": "/** @jest-environment jsdom */\nrequire('@testing-library/jest-dom');\nconst { getByRole } = require('@testing-library/dom');\n\ndescribe('Dark Mode Toggle', () => {\n beforeEach(() => {\n document.body.innerHTML = `dynamiclHtmlBodyContent`;\n const { renderApp } = require('./index.js');\n renderApp();\n });\n\n test('body does not have dark-mode class initially', () => {\n expect(document.body).not.toHaveClass('dark-mode');\n });\n\n test('clicking toggleBtn adds dark-mode class', () => {\n const btn = getByRole(document.body, 'button', { name: 'Toggle Dark Mode' });\n btn.click();\n expect(document.body).toHaveClass('dark-mode');\n });\n\n test('clicking toggleBtn again removes dark-mode class', () => {\n const btn = getByRole(document.body, 'button', { name: 'Toggle Dark Mode' });\n btn.click();\n expect(document.body).not.toHaveClass('dark-mode');\n });\n});"
},
"isPremium": false,
"createdAt": "2025-03-23T08:34:42.362Z",
"updatedAt": "2025-05-02T09:36:37.624Z",
"authorId": "3cb015a4-2154-4f01-94e3-69abe05824aa",
"tags": [
"html",
"css",
"dom",
"vanilla",
"javascript"
]
},
"15":{
"id": "ed756208-c72e-4dbf-bd21-a656f777e5c3",
"slug": "dynamic-list-rendering",
"title": "Dynamic List Rendering in Vanilla JS",
"description": "Render an array of skills as list items programmatically.",
"content": "# 🏆 Question: Dynamic List Rendering in Vanilla JS\n\nAll HTML and CSS scaffolding is provided. Your task is to write JavaScript that takes a predefined array of skills and renders each as an `<li>` in the `<ul>`.\n\n### What You Need to Do\n1. Open `index.js` and locate the exported `renderApp()` function. \n2. Inside `renderApp()`: \n - Declare the skills array: \n ```js\n const skills = ['HTML', 'CSS', 'JavaScript', 'React'];\n ```\n - Select the `<ul id=\"skillsList\">` element. \n - Loop over `skills`, and for each: \n 1. Create an `<li>` element. \n 2. Set its `textContent` to the skill name. \n 3. Append it to the `<ul>`. \n3. **Do not** modify `index.html` or `styles.css`. \n4. Run the test suite; all tests must pass before submission.\n\n### Acceptance Criteria\n- The `<ul id=\"skillsList\">` ends up with **exactly 4** `<li>` children. \n- The `<li>` texts match `['HTML', 'CSS', 'JavaScript', 'React']` in order.\n\n## 🎯 Learning Outcomes\n- Practice creating DOM elements with `document.createElement`. \n- Learn to append elements via `appendChild`. \n- Understand looping over arrays to build dynamic UI.\n\n*If you get stuck, check the editorial for a detailed solution.*",
"solution": "```js\n// index.js\nexport function renderApp() {\n const skills = ['HTML', 'CSS', 'JavaScript', 'React'];\n const list = document.getElementById('skillsList');\n if (!list) return;\n\n skills.forEach(skill => {\n const li = document.createElement('li');\n li.textContent = skill;\n list.appendChild(li);\n });\n}\n\n// Auto-run in preview—but not in tests\nif (typeof window !== 'undefined' && typeof jest === 'undefined') {\n renderApp();\n}\n```",
"dependency": {
"jest": "^29.0.0",
"jest-extended": "^3.0.2",
"@testing-library/dom": "^8.19.0",
"@testing-library/jest-dom": "^6.0.0"
},
"difficulty": "EASY",
"framework": "VANILLA",
"boilerplateCode": {
"/index.js": "// index.js\n import \"/styles.css\" \n export function renderApp() {\n const skills = ['HTML', 'CSS', 'JavaScript', 'React'];\n const list = document.getElementById('skillsList');\n if (!list) return;\n // Write your code here\n}\n\n// Auto-run in preview—but not in tests\nif (typeof window !== 'undefined' && typeof jest === 'undefined') {\n renderApp();\n}\n",
"/index.html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Frontend Warrior</title>\n <link rel=\"stylesheet\" href=\"styles.css\" />\n</head>\n<body>\n <div id=\"app\">\n <h2>Your Skills</h2>\n <ul id=\"skillsList\"></ul>\n </div>\n <script src=\"index.js\"></script>\n</body>\n</html>",
"/styles.css": "body {\n margin: 0;\n font-family: 'Poppins', sans-serif;\n background: #fafafa;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 40px;\n}\n#app {\n background: #fff;\n padding: 20px;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n width: 320px;\n text-align: left;\n}\nul {\n list-style: disc;\n padding-left: 20px;\n}\nli {\n margin: 6px 0;\n}",
"/testcaseShadow.js": "/** @jest-environment jsdom */\nrequire('@testing-library/jest-dom');\nconst { getAllByRole } = require('@testing-library/dom');\n\ndescribe('Dynamic List Rendering', () => {\n beforeEach(() => {\n document.body.innerHTML = `dynamiclHtmlBodyContent`;\n const { renderApp } = require('./index.js');\n renderApp();\n });\n\n test('renders exactly four list items', () => {\n const items = getAllByRole(document.body, 'listitem');\n expect(items).toHaveLength(4);\n });\n\n test('list items have correct text in order', () => {\n const expected = ['HTML', 'CSS', 'JavaScript', 'React'];\n const items = getAllByRole(document.body, 'listitem');\n items.forEach((li, i) => {\n expect(li).toHaveTextContent(expected[i]);\n });\n });\n});",
"/index.test.js": "/** @jest-environment jsdom */\nrequire('@testing-library/jest-dom');\nconst { getAllByRole } = require('@testing-library/dom');\n\ndescribe('Dynamic List Rendering', () => {\n beforeEach(() => {\n document.body.innerHTML = `dynamiclHtmlBodyContent`;\n const { renderApp } = require('./index.js');\n renderApp();\n });\n\n test('renders exactly four list items', () => {\n const items = getAllByRole(document.body, 'listitem');\n expect(items).toHaveLength(4);\n });\n\n test('list items have correct text in order', () => {\n const expected = ['HTML', 'CSS', 'JavaScript', 'React'];\n const items = getAllByRole(document.body, 'listitem');\n items.forEach((li, i) => {\n expect(li).toHaveTextContent(expected[i]);\n });\n });\n});"
},
"isPremium": false,
"createdAt": "2025-03-23T08:34:42.362Z",
"updatedAt": "2025-05-02T09:39:54.930Z",
"authorId": "3cb015a4-2154-4f01-94e3-69abe05824aa",
"tags": [
"html",
"css",
"dom",
"vanilla",
"javascript"
]
},
"16":{
"id": "ed756208-c72e-4dbf-bd21-a656f777e5c3",
"slug": "parent-child-descendant-selectors",
"title": "Parent, Child & Descendant Selectors in CSS",
"description": "Practice combining parent-child and descendant selectors in an external stylesheet.",
"content": "# 🏆 Question: Parent, Child & Descendant Selectors in CSS\n\nThe HTML structure is fixed; your job is to write combinator selectors in `styles.css` (already imported in `index.js`) so that the tests pass.\n\n### What You Need to Do\n1. Open `styles.css`.\n2. Add exactly these rules:\n - Style direct children of `#container` with class `.child` to have `background-color: lightblue;`.\n - Style any `.grandchild` inside a `.child` (descendant) to be bold and green.\n - Style the `<h1>` inside `#container` to be centered and red.\n3. **Do not** modify any other file.\n4. Run the test suite; all tests must pass before you submit.\n\n### Acceptance Criteria\n- `#container > .child { background-color: lightblue; }`\n- `.child .grandchild { font-weight: bold; color: green; }`\n- `#container h1 { text-align: center; color: red; }`\n\n## 🎯 Learning Outcomes\n- Practice using parent > child and descendant selectors.\n- Learn how external CSS is loaded via JS import.\n\n*If you get stuck, check the editorial for a detailed solution.*",
"solution": "```css\n#container > .child {\n background-color: lightblue;\n}\n\n.child .grandchild {\n font-weight: bold;\n color: green;\n}\n\n#container h1 {\n text-align: center;\n color: red;\n}\n```\n**How it works**\n- `#container > .child` targets only `.child` elements that are immediate children of `#container`.\n- `.child .grandchild` matches any `.grandchild` nested inside a `.child`.\n- `#container h1` centers and colors the `<h1>` under `#container`.",
"dependency": {
"jest": "^29.0.0",
"jest-extended": "^3.0.2",
"@testing-library/dom": "^8.19.0",
"@testing-library/jest-dom": "^6.0.0"
},
"difficulty": "EASY",
"framework": "VANILLA",
"boilerplateCode": {
"/index.js": "// index.js\nimport '/styles.css';\n\nexport function renderApp() {\n // no JS needed for styling\n}\n\n// Auto-run in preview—but not in tests\nif (typeof window !== 'undefined' && typeof jest === 'undefined') {\n renderApp();\n}\n",
"/index.html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>CSS Selectors Practice</title>\n</head>\n<body>\n <div id=\"container\">\n <h1>Section Title</h1>\n <div class=\"child\">First Child</div>\n <div class=\"child\">\n <p class=\"grandchild\">Nested Grandchild</p>\n </div>\n </div>\n <script src=\"index.js\"></script>\n</body>\n</html>",
"/styles.css": "/* Write your CSS here */\n",
"/index.test.js": "/** @jest-environment jsdom */\nrequire('@testing-library/jest-dom');\n\ndescribe('Parent & Descendant Selectors', () => {\n beforeEach(() => {\n document.body.innerHTML = `dynamiclHtmlBodyContent`;\n require('./index.js');\n });\n\n test('direct child selector rule exists', () => {\n const styleTag = document.head.querySelector('style');\n expect(styleTag).not.toBeNull();\n const css = styleTag.textContent;\n expect(css).toMatch(/#container\\s*>\\s*\\.child\\s*\\{/);\n });\n\n test('descendant selector for .grandchild exists', () => {\n const css = document.head.querySelector('style').textContent;\n expect(css).toMatch(/\\.child\\s+\\.grandchild\\s*\\{/);\n });\n\n test('h1 selector inside container exists', () => {\n const css = document.head.querySelector('style').textContent;\n expect(css).toMatch(/#container\\s+h1\\s*\\{/);\n });\n});",
"/testcaseShadow.js": "/** @jest-environment jsdom */\nrequire('@testing-library/jest-dom');\n\ndescribe('Parent & Descendant Selectors', () => {\n beforeEach(() => {\n document.body.innerHTML = `dynamiclHtmlBodyContent`;\n require('./index.js');\n });\n\n test('direct child selector rule exists', () => {\n const styleTag = document.head.querySelector('style');\n expect(styleTag).not.toBeNull();\n const css = styleTag.textContent;\n expect(css).toMatch(/#container\\s*>\\s*\\.child\\s*\\{/);\n });\n\n test('descendant selector for .grandchild exists', () => {\n const css = document.head.querySelector('style').textContent;\n expect(css).toMatch(/\\.child\\s+\\.grandchild\\s*\\{/);\n });\n\n test('h1 selector inside container exists', () => {\n const css = document.head.querySelector('style').textContent;\n expect(css).toMatch(/#container\\s+h1\\s*\\{/);\n });\n});"
},
"isPremium": false,
"createdAt": "2025-03-23T08:34:42.362Z",
"updatedAt": "2025-05-02T10:01:51.372Z",
"authorId": "3cb015a4-2154-4f01-94e3-69abe05824aa",
"tags": [
{
"id": "351c098e-605d-4c37-b602-55556436d559",
"name": "vanilla"
},
{
"id": "6b9f3d61-3e34-4d7e-a577-badfc0e461ad",
"name": "html"
},
{
"id": "6fc00304-7dbe-4203-b424-b9e9c120ffda",
"name": "javascript"
},
{
"id": "92146ed5-5ad8-4341-984a-bad2f69b142e",
"name": "css"
},
{
"id": "ad13a6a7-9ef9-46f6-b1d6-f21bd9f77e4a",
"name": "specificity"
},
{
"id": "bf3fc26b-66cf-4c6f-b9c4-37df009cb116",
"name": "css selectors"
}
]
},
"17":{
"id": "ed756208-c72e-4dbf-bd21-a656f777e5c3",
"slug": "css-sibling-first-last-child-selectors",
"title": "Sibling & First/Last-Child Selectors in CSS",
"description": "Practice sibling and first/last-child CSS selectors in an external stylesheet.",
"content": "# 🏆 Question: Sibling & First/Last-Child Selectors in CSS\n\nThe HTML is fixed; your job is to write sibling and pseudo-class selectors in `styles.css` (already imported in `index.js`) so that the tests pass.\n\n### What You Need to Do\n1. Open `styles.css`.\n2. Add exactly these rules:\n - Color the **first** `<li>` in `#list` purple.\n - Color the **last** `<li>` in `#list` orange.\n - Make the `<li>` immediately after the one with class `.special` italic (adjacent-sibling selector).\n - Underline **all** `<li>` items that follow `.special` (general-sibling selector).\n3. **Do not** modify any other file.\n4. Run the test suite; all tests must pass before you submit.\n\n### Acceptance Criteria\n- `#list li:first-child { color: purple; }`\n- `#list li:last-child { color: orange; }`\n- `.special + li { font-style: italic; }`\n- `.special ~ li { text-decoration: underline; }`\n\n## 🎯 Learning Outcomes\n- Practice using `:first-child`, `:last-child`, `+` and `~` selectors.\n- Understand how to load and apply external CSS via JS import.\n\n*If you get stuck, check the editorial for a detailed solution.*",
"solution": "```css\n#list li:first-child {\n color: purple;\n}\n\n#list li:last-child {\n color: orange;\n}\n\n.special + li {\n font-style: italic;\n}\n\n.special ~ li {\n text-decoration: underline;\n}\n```\n**How it works**\n- `:first-child` and `:last-child` target the first/last `<li>` respectively.\n- `.special + li` styles only the `<li>` immediately after `.special`.\n- `.special ~ li` underlines all `<li>` siblings after `.special`.",
"dependency": {
"jest": "^29.0.0",
"jest-extended": "^3.0.2",
"@testing-library/dom": "^8.19.0",
"@testing-library/jest-dom": "^6.0.0"
},
"difficulty": "EASY",
"framework": "VANILLA",
"boilerplateCode": {
"/index.js": "// index.js\nimport '/styles.css';\n\nexport function renderApp() {}\n\n// Auto-run in preview—but not in tests\nif (typeof window !== 'undefined' && typeof jest === 'undefined') {\n renderApp();\n}\n",
"/index.html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>CSS Sibling Selectors Practice</title>\n</head>\n<body>\n <ul id=\"list\">\n <li>Item 1</li>\n <li class=\"special\">Item 2</li>\n <li>Item 3</li>\n <li>Item 4</li>\n </ul>\n <script src=\"index.js\"></script>\n</body>\n</html>",
"/styles.css": "/* Write your CSS here */\n",
"/testcaseShadow.js": "/** @jest-environment jsdom */\nrequire('@testing-library/jest-dom');\ndescribe('Sibling & First/Last-Child Selectors', () => {\n beforeEach(() => {\n document.body.innerHTML = `dynamiclHtmlBodyContent`;\n require('./index.js');\n });\n\n test('first-child selector rule exists', () => {\n const css = document.head.querySelector('style').textContent;\n expect(css).toMatch(/#list\\s+li:first-child\\s*\\{/);\n });\n\n test('last-child selector rule exists', () => {\n const css = document.head.querySelector('style').textContent;\n expect(css).toMatch(/#list\\s+li:last-child\\s*\\{/);\n });\n\n test('adjacent sibling selector after .special exists', () => {\n const css = document.head.querySelector('style').textContent;\n expect(css).toMatch(/\\.special\\s*\\+\\s*li\\s*\\{/);\n });\n\n test('general sibling selector after .special exists', () => {\n const css = document.head.querySelector('style').textContent;\n expect(css).toMatch(/\\.special\\s*~\\s*li\\s*\\{/);\n });\n});",
"/index.test.js": "/** @jest-environment jsdom */\nrequire('@testing-library/jest-dom');\ndescribe('Sibling & First/Last-Child Selectors', () => {\n beforeEach(() => {\n document.body.innerHTML = `dynamiclHtmlBodyContent`;\n require('./index.js');\n });\n\n test('first-child selector rule exists', () => {\n const css = document.head.querySelector('style').textContent;\n expect(css).toMatch(/#list\\s+li:first-child\\s*\\{/);\n });\n\n test('last-child selector rule exists', () => {\n const css = document.head.querySelector('style').textContent;\n expect(css).toMatch(/#list\\s+li:last-child\\s*\\{/);\n });\n\n test('adjacent sibling selector after .special exists', () => {\n const css = document.head.querySelector('style').textContent;\n expect(css).toMatch(/\\.special\\s*\\+\\s*li\\s*\\{/);\n });\n\n test('general sibling selector after .special exists', () => {\n const css = document.head.querySelector('style').textContent;\n expect(css).toMatch(/\\.special\\s*~\\s*li\\s*\\{/);\n });\n});"
},
"tags":["html","css","javascript","css selectors","specificity", "vanilla"],
"isPremium": false,
"createdAt": "2025-03-23T08:34:42.362Z",
"updatedAt": "2025-05-03T06:55:02.844Z",
"authorId": "3cb015a4-2154-4f01-94e3-69abe05824aa"
},
"18":{
"id": "ed756208-c72e-4dbf-bd21-a656f777e5c3",
"slug": "pseudo-class-and-sibling-selectors-in-CSS",
"title": "Pseudo-Class & Sibling Selectors in CSS",
"description": "Practice using pseudo-classes and sibling selectors in external CSS.",
"content": "# 🏆 Question: Pseudo-Class & Sibling Selectors in CSS\n\nThe HTML structure is fixed; your job is to write CSS rules in `styles.css` (already imported in `index.js`) so that the tests pass.\n\n### What You Need to Do\n1. Open `styles.css`.\n2. Add exactly these selectors and declarations:\n - `#gallery img { width: 300px; height: 200px; }`\n - `#gallery img:nth-child(2) { opacity: 0.7; }`\n - `#gallery img:nth-last-child(1) { opacity: 0.3; }`\n - `img + img { margin-left: 10px; }`\n - `img ~ img { margin-left: 5px; }`\n3. **Do not** modify any other file.\n4. Run the test suite; all tests must pass before submission.\n\n### Acceptance Criteria\n- Every `<img>` in `#gallery` is 300×200px.\n- The second image has `opacity: 0.7`.\n- The last image has `opacity: 0.3`.\n- Each image immediately after another has a 10px left margin.\n- All other sibling images have a 5px left margin.\n\n## 🎯 Learning Outcomes\n- Practice using `:nth-child` and `:nth-last-child` pseudo-classes.\n- Learn adjacent (`+`) and general (`~`) sibling selectors.\n\n*If you get stuck, check the editorial for a detailed solution.*",
"solution": "```css\n/* Base sizing for all images */\n#gallery img {\n width: 300px;\n height: 200px;\n}\n\n/* Second image */\n#gallery img:nth-child(2) {\n opacity: 0.7;\n}\n\n/* Last image */\n#gallery img:nth-last-child(1) {\n opacity: 0.3;\n}\n\n/* Adjacent sibling: immediately following another image */\nimg + img {\n margin-left: 10px;\n}\n\n/* General sibling: all other following images */\nimg ~ img {\n margin-left: 5px;\n}\n```\n**How it works**\n- `:nth-child(2)` and `:nth-last-child(1)` target specific positions in the list.\n- `img + img` applies only to an `<img>` immediately after another `<img>`.\n- `img ~ img` applies to every `<img>` that follows any earlier `<img>`.",
"boilerplateCode": {
"/index.html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Pseudo-Class Selectors Practice</title>\n</head>\n<body>\n <div id=\"gallery\">\n <img src=\"https://images.unsplash.com/photo-1708028674188-92d5443be918?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTZ8fHNtYWxsJTIwaWFtZ2V8ZW58MHx8MHx8fDA%3D\" alt=\"1\">\n <img src=\"https://images.unsplash.com/photo-1708028674188-92d5443be918?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTZ8fHNtYWxsJTIwaWFtZ2V8ZW58MHx8MHx8fDA%3D\" alt=\"2\">\n <img src=\"https://images.unsplash.com/photo-1708028674188-92d5443be918?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTZ8fHNtYWxsJTIwaWFtZ2V8ZW58MHx8MHx8fDA%3D\" alt=\"3\">\n <img src=\"https://images.unsplash.com/photo-1708028674188-92d5443be918?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTZ8fHNtYWxsJTIwaWFtZ2V8ZW58MHx8MHx8fDA%3D\" alt=\"4\">\n </div>\n <script src=\"index.js\"></script>\n</body>\n</html>",
"/styles.css": "/* Write your CSS here */\n\nimg {\n width: 300px;\n height: 200px;\n}\n",
"/index.js": "// index.js\nimport '/styles.css';\n\nexport function renderApp() {}\n\n// Auto-run in preview—but not in tests\nif (typeof window !== 'undefined' && typeof jest === 'undefined') {\n renderApp();\n}\n",
"/testcaseShadow.js": "/** @jest-environment jsdom */\nrequire('@testing-library/jest-dom');\n\ndescribe('Pseudo-Class & Sibling Selectors', () => {\n beforeEach(() => {\n document.body.innerHTML = `dynamiclHtmlBodyContent`;\n require('./index.js');\n });\n\n test('nth-child(2) selector exists', () => {\n const css = document.head.querySelector('style').textContent;\n expect(css).toMatch(/#gallery\\s+img:nth-child\\(2\\)\\s*\\{/);\n });\n\n test('nth-last-child(1) selector exists', () => {\n const css = document.head.querySelector('style').textContent;\n expect(css).toMatch(/#gallery\\s+img:nth-last-child\\(1\\)\\s*\\{/);\n });\n\n test('adjacent sibling selector exists', () => {\n const css = document.head.querySelector('style').textContent;\n expect(css).toMatch(/img\\s*\\+\\s*img\\s*\\{/);\n });\n\n test('general sibling selector exists', () => {\n const css = document.head.querySelector('style').textContent;\n expect(css).toMatch(/img\\s*~\\s*img\\s*\\{/);\n });\n});",
"/index.test.js": "/** @jest-environment jsdom */\nrequire('@testing-library/jest-dom');\n\ndescribe('Pseudo-Class & Sibling Selectors', () => {\n beforeEach(() => {\n document.body.innerHTML = `dynamiclHtmlBodyContent`;\n require('./index.js');\n });\n\n test('nth-child(2) selector exists', () => {\n const css = document.head.querySelector('style').textContent;\n expect(css).toMatch(/#gallery\\s+img:nth-child\\(2\\)\\s*\\{/);\n });\n\n test('nth-last-child(1) selector exists', () => {\n const css = document.head.querySelector('style').textContent;\n expect(css).toMatch(/#gallery\\s+img:nth-last-child\\(1\\)\\s*\\{/);\n });\n\n test('adjacent sibling selector exists', () => {\n const css = document.head.querySelector('style').textContent;\n expect(css).toMatch(/img\\s*\\+\\s*img\\s*\\{/);\n });\n\n test('general sibling selector exists', () => {\n const css = document.head.querySelector('style').textContent;\n expect(css).toMatch(/img\\s*~\\s*img\\s*\\{/);\n });\n});"
},
"dependency": {
"jest": "^29.0.0",
"jest-extended": "^3.0.2",
"@testing-library/dom": "^8.19.0",
"@testing-library/jest-dom": "^6.0.0"
},
"difficulty": "EASY",
"framework": "VANILLA",
"isPremium": false,
"tags":["html","css","javascript","css selectors","specificity", "vanilla"]
},
"19":{
"id": "ed756208-c72e-4dbf-bd21-a656f777e5c3",
"slug": "element-vs-class-selector-specificity",
"title": "Element vs. Class Selector Specificity",
"description": "Demonstrate how CSS specificity resolves conflicting rules.",
"content": "# 🏆 Question: Element vs. Class Selector Specificity\n\nCSS specificity decides which rule wins when multiple selectors match the same element. In this exercise, you’ll add two rules to `styles.css` (already imported in `index.js`): one for all `<h2>` elements, and one for the `.highlight` class.\n\n### What You Need to Do\n1. Open `styles.css`.\n2. Add these rules:\n - `h2 { color: green; }`\n - `.highlight { color: orange; }`\n3. **Do not** modify any other file.\n4. Run the tests to verify both rules are present.\n\n### Acceptance Criteria\n- The CSS contains an `h2 { color: green; }` rule.\n- The CSS contains a `.highlight { color: orange; }` rule.\n\n## 🎯 Learning Outcomes\n- Understand how specificity is calculated `(a,b,c,d)`.\n- See why a class selector (`.highlight`) beats an element selector (`h2`) even when both apply.\n\n*If you get stuck, check the editorial for a detailed explanation.*",
"solution": "```css\n/* Element selector: specificity (0,0,0,1) */\nh2 {\n color: green;\n}\n\n/* Class selector: specificity (0,0,1,0) */\n.highlight {\n color: orange;\n}\n```\n**Why it works**\n- The element selector `h2` has specificity `(0,0,0,1)`.\n- The class selector `.highlight` has specificity `(0,0,1,0)`.\n- Since `(0,0,1,0)` > `(0,0,0,1)`, the `.highlight` rule overrides `h2` when both match the same element.",
"dependency": {
"jest": "^29.0.0",
"jest-extended": "^3.0.2",
"@testing-library/dom": "^8.19.0",
"@testing-library/jest-dom": "^6.0.0"
},
"difficulty": "EASY",
"framework": "VANILLA",
"boilerplateCode": {
"/index.js": "// index.js\nimport '/styles.css';\n\nexport function renderApp() {}\n\nif (typeof window !== 'undefined' && typeof jest === 'undefined') {\n renderApp();\n}\n",
"/index.html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Specificity Demo</title>\n</head>\n<body>\n <h2 class=\"highlight\">Specificity Demo</h2>\n <script src=\"index.js\"></script>\n</body>\n</html>",
"/styles.css": "/* Write your CSS here */\n",
"/index.test.js": "/** @jest-environment jsdom */\nrequire('@testing-library/jest-dom');\ndescribe('Element vs. Class Specificity', () => {\n beforeEach(() => {\n document.body.innerHTML = `dynamiclHtmlBodyContent`;\n require('./index.js');\n });\n\n test('element selector h2 exists', () => {\n const css = document.head.querySelector('style').textContent;\n expect(/h2\\s*\\{[^}]*color:\\s*green;/.test(css)).toBe(true);\n });\n\n test('class selector .highlight exists', () => {\n const css = document.head.querySelector('style').textContent;\n expect(/\\.highlight\\s*\\{[^}]*color:\\s*orange;/.test(css)).toBe(true);\n });\n});",
"/testcaseShadow.js": "/** @jest-environment jsdom */\nrequire('@testing-library/jest-dom');\ndescribe('Element vs. Class Specificity', () => {\n beforeEach(() => {\n document.body.innerHTML = `dynamiclHtmlBodyContent`;\n require('./index.js');\n });\n\n test('element selector h2 exists', () => {\n const css = document.head.querySelector('style').textContent;\n expect(/h2\\s*\\{[^}]*color:\\s*green;/.test(css)).toBe(true);\n });\n\n test('class selector .highlight exists', () => {\n const css = document.head.querySelector('style').textContent;\n expect(/\\.highlight\\s*\\{[^}]*color:\\s*orange;/.test(css)).toBe(true);\n });\n});"
},
"isPremium": false,
"createdAt": "2025-03-23T08:34:42.362Z",
"updatedAt": "2025-05-03T07:14:40.067Z",
"authorId": "3cb015a4-2154-4f01-94e3-69abe05824aa",
"tags":["html","css","javascript","css selectors","specificity", "vanilla"]
},
"20":{
"id": "ed756208-c72e-4dbf-bd21-a656f777e5c3",
"slug": "id-class-element-specificity",
"title": "ID vs. Class vs. Element Selector Specificity",
"description": "Demonstrate how ID, class, and element selectors compete by specificity.",
"content": "# 🏆 Question: ID vs. Class vs. Element Selector Specificity\n\nCSS specificity determines which rule applies when multiple selectors match the same element. In this challenge, you'll write three separate rules in **styles.css** (already imported in `index.js`) that all target the same `<h1>`:\n\n### What You Need to Do\n1. Open **`styles.css`**. \n2. Add one rule to target **all** `<h1>` elements so they use **font-size: 1.5rem**. \n3. Add one rule to target the **`.title`** class so it uses **font-size: 2rem**. \n4. Add one rule to target the **`#main`** ID so it uses **font-size: 2.5rem**. \n5. **Do not** modify any other file. \n6. Run the test suite; all tests must pass before submission.\n\n### Acceptance Criteria\n- Your stylesheet contains a rule setting `h1 { font-size: 1.5rem; }`. \n- It contains a rule setting `.title { font-size: 2rem; }`. \n- It contains a rule setting `#main { font-size: 2.5rem; }`.\n\n## 🎯 Learning Outcomes\n- Calculate specificity tuples: element `(0,0,0,1)`, class `(0,0,1,0)`, and ID `(0,1,0,0)`. \n- See why the `#main` rule wins over the `.title` and `h1` rules when all apply.\n\n*If you get stuck, check the editorial for a detailed explanation.*",
"solution": "```css\n/* Element selector (0,0,0,1) */\nh1 {\n font-size: 1.5rem;\n}\n\n/* Class selector (0,0,1,0) */\n.title {\n font-size: 2rem;\n}\n\n/* ID selector (0,1,0,0) */\n#main {\n font-size: 2.5rem;\n}\n```\n**Why it works**\n- Compare `(a,b,c,d)`:\n - `h1` → `(0,0,0,1)` \n - `.title` → `(0,0,1,0)` \n - `#main` → `(0,1,0,0)` \n- The first non-zero difference is in `b` (ID count), so `#main` wins.",
"dependency": {
"jest": "^29.0.0",
"jest-extended": "^3.0.2",
"@testing-library/dom": "^8.19.0",
"@testing-library/jest-dom": "^6.0.0"
},
"difficulty": "EASY",
"framework": "VANILLA",
"boilerplateCode": {
"/index.js": "// index.js\nimport '/styles.css';\n\nexport function renderApp() {}\n\nif (typeof window !== 'undefined' && typeof jest === 'undefined') {\n renderApp();\n}\n",
"/index.html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Specificity Levels</title>\n</head>\n<body>\n <h1 id=\"main\" class=\"title\">Priority Test</h1>\n <script src=\"index.js\"></script>\n</body>\n</html>",
"/styles.css": "/* Write your CSS here */\n",
"/testcaseShadow.js": "/** @jest-environment jsdom */\nrequire('@testing-library/jest-dom');\ndescribe('ID vs. Class vs. Element Specificity', () => {\n beforeEach(() => {\n document.body.innerHTML = `dynamiclHtmlBodyContent`;\n require('./index.js');\n });\n\n test('element selector h1 exists', () => {\n const css = document.head.querySelector('style').textContent;\n expect(/h1\\s*\\{[^}]*font-size:\\s*1\\.5rem;/.test(css)).toBe(true);\n });\n\n test('.title selector exists', () => {\n const css = document.head.querySelector('style').textContent;\n expect(/\\.title\\s*\\{[^}]*font-size:\\s*2rem;/.test(css)).toBe(true);\n });\n\n test('#main selector exists', () => {\n const css = document.head.querySelector('style').textContent;\n expect(/#main\\s*\\{[^}]*font-size:\\s*2\\.5rem;/.test(css)).toBe(true);\n });\n});",
"/index.test.js": "/** @jest-environment jsdom */\nrequire('@testing-library/jest-dom');\ndescribe('ID vs. Class vs. Element Specificity', () => {\n beforeEach(() => {\n document.body.innerHTML = `dynamiclHtmlBodyContent`;\n require('./index.js');\n });\n\n test('element selector h1 exists', () => {\n const css = document.head.querySelector('style').textContent;\n expect(/h1\\s*\\{[^}]*font-size:\\s*1\\.5rem;/.test(css)).toBe(true);\n });\n\n test('.title selector exists', () => {\n const css = document.head.querySelector('style').textContent;\n expect(/\\.title\\s*\\{[^}]*font-size:\\s*2rem;/.test(css)).toBe(true);\n });\n\n test('#main selector exists', () => {\n const css = document.head.querySelector('style').textContent;\n expect(/#main\\s*\\{[^}]*font-size:\\s*2\\.5rem;/.test(css)).toBe(true);\n });\n});"
},
"isPremium": false,
"createdAt": "2025-03-23T08:34:42.362Z",
"updatedAt": "2025-05-03T07:16:26.707Z",
"authorId": "3cb015a4-2154-4f01-94e3-69abe05824aa",
"tags":["html","css","javascript","css selectors","specificity", "vanilla"]
},
"21":{
"id": "ed756208-c72e-4dbf-bd21-a656f777e5c3",
"slug": "inline-vs-external-specificity",
"title": "Inline Styles vs. External CSS Specificity",
"description": "Show that inline styles override external stylesheet rules.",
"content": "# 🏆 Question: Inline Styles vs. External CSS Specificity\n\nInline styles always have higher specificity than external rules. In this challenge, you'll:\n\n### What You Need to Do\n1. Open **`styles.css`** and add a rule for the `.box` class that sets **background-color: blue**. \n2. In **`index.html`**, locate the `<div class=\"box\">` and add an inline `style` attribute to set **background-color: yellow;**. \n3. **Do not** modify any other file. \n4. Run the test suite; all tests must pass before submission.\n\n### Acceptance Criteria\n- Your stylesheet contains `.box { background-color: blue; }`. \n- The `<div class=\"box\">` element has `style=\"background-color: yellow;\"` in its tag.\n\n## 🎯 Learning Outcomes\n- Understand that inline `style` (specificity `(1,0,0,0)`) overrides any external selector (e.g. `.box` at `(0,0,1,0)`). \n- See how specificity determines which CSS wins in the browser.\n\n*If you get stuck, check the editorial for a detailed explanation.*",
"solution": "```css\n/* External stylesheet rule */\n.box {\n background-color: blue;\n}\n``` \n```html\n<!-- Inline style overrides external rule -->\n<div class=\"box\" style=\"background-color: yellow;\">Inline Wins</div>\n``` \n**Why it works** \n- Inline styles have specificity `(1,0,0,0)`. \n- The external `.box` rule has specificity `(0,0,1,0)`. \n- Since `1 > 0`, the inline `yellow` background takes effect.",
"dependency": {
"jest": "^29.0.0",
"jest-extended": "^3.0.2",
"@testing-library/dom": "^8.19.0",
"@testing-library/jest-dom": "^6.0.0"
},
"difficulty": "EASY",
"framework": "VANILLA",
"boilerplateCode": {
"/index.js": "// index.js\nimport '/styles.css';\n\nexport function renderApp() {}\n\nif (typeof window !== 'undefined' && typeof jest === 'undefined') {\n renderApp();\n}\n",
"/index.html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Inline vs External</title>\n</head>\n<body>\n <div class=\"box\" style=\"background-color: yellow;\">Inline Wins</div>\n <script src=\"index.js\"></script>\n</body>\n</html>",
"/styles.css": "/* Write your CSS here */\n",
"/testcaseShadow.js": "/** @jest-environment jsdom */\nrequire('@testing-library/jest-dom');\ndescribe('Inline > External Specificity', () => {\n beforeEach(() => {\n document.body.innerHTML = `dynamiclHtmlBodyContent`;\n require('./index.js');\n });\n\n test('external .box rule exists', () => {\n const css = document.head.querySelector('style').textContent;\n expect(/\\.box\\s*\\{[^}]*background-color:\\s*blue;/.test(css)).toBe(true);\n });\n\n test('div has inline style attribute', () => {\n const div = document.querySelector('.box');\n expect(div).toHaveAttribute('style', 'background-color: yellow;');\n });\n});",
"/index.test.js": "/** @jest-environment jsdom */\nrequire('@testing-library/jest-dom');\ndescribe('Inline > External Specificity', () => {\n beforeEach(() => {\n document.body.innerHTML = `dynamiclHtmlBodyContent`;\n require('./index.js');\n });\n\n test('external .box rule exists', () => {\n const css = document.head.querySelector('style').textContent;\n expect(/\\.box\\s*\\{[^}]*background-color:\\s*blue;/.test(css)).toBe(true);\n });\n\n test('div has inline style attribute', () => {\n const div = document.querySelector('.box');\n expect(div).toHaveAttribute('style', 'background-color: yellow;');\n });\n});"
},
"isPremium": false,
"createdAt": "2025-03-23T08:34:42.362Z",
"updatedAt": "2025-05-03T07:17:41.922Z",
"authorId": "3cb015a4-2154-4f01-94e3-69abe05824aa",
"tags":["html","css","javascript","css selectors","specificity", "vanilla"]
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment