Assignments Of Class 24: CSS Variables
Assignment 1: Basic CSS Variable Declaration
Q1: Create a simple webpage that defines CSS variables for colors and applies them to a heading (h1) and a paragraph (p).
Solution:
HTML (index.html):
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Variables Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to CSS Variables</h1>
<p>This paragraph uses CSS variables for colors.</p>
</body>
</html>
CSS (styles.css):
css
CopyEdit
:root {
--main-bg-color: lightblue;
--text-color: darkblue;
}
body {
background-color: var(--main-bg-color);
color: var(--text-color);
font-family: Arial, sans-serif;
text-align: center;
}
Explanation:
1. The :root selector is used to define CSS variables.
2. --main-bg-color is used for the body’s background.
3. --text-color is applied to the text color.
Output:
A light blue background with dark blue text.
Assignment 2: Changing CSS Variables Dynamically
Q2: Create a button that changes the text color when clicked using JavaScript.
Solution:
HTML (index.html):
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Text Color</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Click the button to change text color</h1>
<button onclick="changeColor()">Change Color</button>
<script src="script.js"></script>
</body>
</html>
CSS (styles.css):
css
CopyEdit
:root {
--text-color: black;
}
body {
color: var(--text-color);
text-align: center;
}
button {
padding: 10px;
margin-top: 20px;
}
JavaScript (script.js):
js
CopyEdit
function changeColor() {
document.documentElement.style.setProperty('--text-color', 'red');
}
Explanation:
- Clicking the button changes the CSS variable --text-color dynamically.
- document.documentElement.style.setProperty is used to update the variable.
Output:
The text color changes to red on button click.
Assignment 3: Theme Switching with Two Themes
Q3: Create a light/dark theme switcher using CSS variables.
Solution:
HTML (index.html):
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Theme Switcher</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Light/Dark Theme Switcher</h1>
<button id="toggle-theme">Toggle Theme</button>
<script src="script.js"></script>
</body>
</html>
CSS (styles.css):
css
CopyEdit
:root {
--bg-color: white;
--text-color: black;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
text-align: center;
transition: background-color 0.5s, color 0.5s;
}
.dark-theme {
--bg-color: black;
--text-color: white;
}
JavaScript (script.js):
js
CopyEdit
document.getElementById("toggle-theme").addEventListener("click", function() {
document.body.classList.toggle("dark-theme");
});
Output:
Switches between light and dark themes when clicking the button.
Assignment 4: Multiple Theme Switcher
Q4: Extend the previous assignment to include blue and green themes.
Solution:
JavaScript (script.js):
js
CopyEdit
const themes = ["light", "dark", "blue", "green"];
let currentThemeIndex = 0;
document.getElementById("toggle-theme").addEventListener("click", function() {
document.body.classList.remove(...themes.map(t => t + "-theme"));
currentThemeIndex = (currentThemeIndex + 1) % themes.length;
const newTheme = themes[currentThemeIndex];
if (newTheme !== "light") {
document.body.classList.add(newTheme + "-theme");
}
});
CSS (styles.css):
css
CopyEdit
.blue-theme {
--bg-color: #3498db;
--text-color: white;
}
.green-theme {
--bg-color: #2ecc71;
--text-color: white;
}
Output:
The theme cycles between light, dark, blue, and green on button click.
Assignment 5: Smooth Transition in Theme Switching
Q5: Add smooth animations while switching themes.
Solution:
Modify styles.css:
css
CopyEdit
body {
transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
}
Output:
The theme change happens smoothly instead of instantly.
Assignment 6: Theme Selector Dropdown
Q6: Replace the button with a dropdown to select a theme.
Solution:
HTML:
html
CopyEdit
<select id="theme-selector">
<option value="light">Light</option>
<option value="dark">Dark</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
JavaScript:
js
CopyEdit
document.getElementById("theme-selector").addEventListener("change", function(event) {
document.body.className = event.target.value + "-theme";
});
Output:
Users can select a theme from the dropdown.
Assignment 7: Store User Preference in LocalStorage
Q7: Save the selected theme so that it persists on page reload.
Solution:
Modify script.js:
js
CopyEdit
document.addEventListener("DOMContentLoaded", () => {
const savedTheme = localStorage.getItem("theme");
if (savedTheme) {
document.body.className = savedTheme;
}
});
document.getElementById("theme-selector").addEventListener("change", function(event) {
document.body.className = event.target.value;
localStorage.setItem("theme", event.target.value);
});
Output:
The selected theme remains the same even after refreshing the page.
Assignments 8-10: Advanced Concepts
Q8: Add a reset button to switch back to the default theme.
Q9: Use CSS grid or flexbox to create a theme preview section.
Q10: Apply different fonts for each theme using CSS variables.
Final Thoughts
These assignments guide students from basic CSS variables to advanced theme switching. Would you like further enhancements, such as custom themes or user-defined colors? 🚀
You said:
explain in detail...Assignments 8-10: Advanced Concepts Q8: Add a reset button to switch back to the default theme. Q9: Use CSS grid or flexbox to create a theme preview section. Q10: Apply different fonts for each theme using CSS variables.
ChatGPT said:
ChatGPT
Advanced CSS Variables Assignments (8-10) – Detailed Explanation, Solution & Output
These assignments extend your understanding of CSS variables and theme switching by adding a reset button, creating a theme preview section using CSS Grid/Flexbox, and applying different fonts dynamically.
Assignment 8: Add a Reset Button to Switch Back to the Default Theme
Objective:
- Implement a reset button that restores the default theme when clicked.
- Ensure that even after switching themes, users can quickly revert to the default.
Solution:
Step 1: Update HTML
Add a reset button to reset the theme back to Light Mode.
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reset Theme Button</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Theme Switcher with Reset</h1>
<select id="theme-selector">
<option value="light">Light</option>
<option value="dark">Dark</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
<button id="reset-theme">Reset Theme</button>
<script src="script.js"></script>
</body>
</html>
Step 2: Define CSS Themes
css
CopyEdit
:root {
--bg-color: white;
--text-color: black;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
text-align: center;
transition: background-color 0.5s, color 0.5s;
}
.dark-theme {
--bg-color: black;
--text-color: white;
}
.blue-theme {
--bg-color: #3498db;
--text-color: white;
}
.green-theme {
--bg-color: #2ecc71;
--text-color: white;
}
Step 3: Implement JavaScript for Theme Switching and Reset
js
CopyEdit
document.addEventListener("DOMContentLoaded", () => {
const savedTheme = localStorage.getItem("theme");
if (savedTheme) {
document.body.className = savedTheme;
}
});
document.getElementById("theme-selector").addEventListener("change", function(event) {
document.body.className = event.target.value + "-theme";
localStorage.setItem("theme", event.target.value + "-theme");
});
document.getElementById("reset-theme").addEventListener("click", function() {
document.body.className = "";
localStorage.removeItem("theme");
});
Explanation:
- The theme-selector dropdown allows users to change themes.
- Clicking the reset button removes all applied classes, restoring the default theme (Light Mode).
- localStorage is used so that the last selected theme is remembered until reset.
Expected Output:
1. User selects Dark, Blue, or Green Theme.
2. Click Reset Theme → Theme switches back to Light Mode.
Assignment 9: Use CSS Grid or Flexbox to Create a Theme Preview Section
Objective:
- Display a theme preview section where users can see a sample of different themes before applying them.
Solution:
Step 1: Update HTML
We will create four preview boxes showing each theme.
html
CopyEdit
<div class="theme-preview">
<div class="theme-box light-theme" onclick="applyTheme('light')">Light Theme</div>
<div class="theme-box dark-theme" onclick="applyTheme('dark')">Dark Theme</div>
<div class="theme-box blue-theme" onclick="applyTheme('blue')">Blue Theme</div>
<div class="theme-box green-theme" onclick="applyTheme('green')">Green Theme</div>
</div>
Step 2: Style the Theme Preview Section (CSS Grid or Flexbox)
css
CopyEdit
.theme-preview {
display: flex; /* Use flexbox to align theme boxes */
justify-content: center;
gap: 15px;
margin-top: 20px;
}
.theme-box {
width: 120px;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
font-weight: bold;
cursor: pointer;
transition: transform 0.3s;
}
.theme-box:hover {
transform: scale(1.1);
}
.light-theme {
background-color: white;
color: black;
border: 2px solid black;
}
.dark-theme {
background-color: black;
color: white;
}
.blue-theme {
background-color: #3498db;
color: white;
}
.green-theme {
background-color: #2ecc71;
color: white;
}
Step 3: JavaScript for Theme Selection
js
CopyEdit
function applyTheme(theme) {
document.body.className = theme + "-theme";
localStorage.setItem("theme", theme + "-theme");
}
Explanation:
- The theme preview boxes give a visual representation of each theme.
- Clicking a box applies that theme.
- CSS Flexbox is used to arrange the preview section neatly.
Expected Output:
A row of four colored boxes; clicking one applies that theme.
Assignment 10: Apply Different Fonts for Each Theme
Objective:
- Modify the theme switcher to change fonts dynamically using CSS variables.
Solution:
Step 1: Define Font Variables in CSS
css
CopyEdit
:root {
--bg-color: white;
--text-color: black;
--font-family: Arial, sans-serif;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
font-family: var(--font-family);
text-align: center;
transition: background-color 0.5s, color 0.5s, font-family 0.5s;
}
.dark-theme {
--bg-color: black;
--text-color: white;
--font-family: 'Courier New', monospace;
}
.blue-theme {
--bg-color: #3498db;
--text-color: white;
--font-family: 'Georgia', serif;
}
.green-theme {
--bg-color: #2ecc71;
--text-color: white;
--font-family: 'Comic Sans MS', cursive;
}
Step 2: Update JavaScript for Theme Switching
js
CopyEdit
document.getElementById("theme-selector").addEventListener("change", function(event) {
document.body.className = event.target.value + "-theme";
localStorage.setItem("theme", event.target.value + "-theme");
});
Explanation:
- CSS variables store font-family values.
- Each theme uses a different font (e.g., Courier New, Comic Sans MS, Georgia).
- The transition effect ensures smooth font switching.
Expected Output:
1. Selecting Dark Theme → Font changes to "Courier New".
2. Selecting Blue Theme → Font changes to "Georgia".
3. Selecting Green Theme → Font changes to "Comic Sans MS".
No comments:
Post a Comment