In the video I showed you how to create a darkmode toggle. You are going to create one today. As a reminder the js code for the darkmode toggle was:
// adds or removes the 'dark' class from <html> based on the `theme` in localStorage,
// if given, or default preference otherwise.
function set_theme() {
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark')
} else {
document.documentElement.classList.remove('dark')
}
}
// Exposes function to toggle dark mode on and off.
window.toggleDarkMode = () => {
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
localStorage.theme = 'light'
} else {
localStorage.theme = 'dark'
}
set_theme()
}
// set theme on page load
set_theme()
Rewatch the video or ask AI on how you would trigger the toggleDarkMode function via a button click.
Use the browser's web inspector (keypress F12) to show the page's source code and validate that upon clicking your gains/looses the dark class.
This should yield you the first objective point.
Objective 2 + 3
Now you get a chance to play around and try to put together a professional looking page by using components you find in the Flowbite library.
With your dark-mode toggle up and running, make sure to expand upon the page and try out things that interest you such as:
- hiding/showing content based on dark mode or screen size
- add perhaps some icons
- add a menu and a page layout
- look for an overall consistent and complete look of the page.
Feel absolutely free to expand your page and include content not related to your persona as you did previously. If you want to make your homepage about something different altogher, by all means. In this case the easiest thing would just be to adjust the route and serve the existing home page under a different path so you gain the / route for your new content.
Also take some mental notes on what you could theme your final project around. There is no assignment for that yet but think about the general direction. Look through the schedule and the headings for upcoming topics to get a sense for what is still coming. Some of you might want to go for something ambitious as a browser game, a social media pattform or something alike but its also possible to create a company website with client communication features or an interactive guide to Restaurant Dining and Shopping oportunities around market street. At gracehopper conference last Fall a hot, repeating topic seemed to be integrating AI assistants in form of Chatbots to existing platforms. Opportunities are really endless.
Know that sometime soon I will ask for proposals and your ideas so its a good idea to slowly start thinking about this. The sooner you have a plan, the faster you can start putting it to action. The best ideas are often those that can be understood and appreciated by anyone in just two sentences or less.
I understand that this lecture's objectives are quite open ended and some of you might be wondering what level of quality I am exactly looking for. The honest answer is I don't know yet. I have to see your product before I (or more accurately you) can judge it. Imagine for a moment you are a painter during the Italian renaissance. You will only make a living if people like your paintings enough to buy them and you can't really ask them until you are done painting.
Focus on having both the dark and light themes consistent and professional looking. Stick with Flowbite this time to make your job easier. Build function components as you find yourself repeating code. Remember those are reusable, not just for the duration of this course but perhaps beyond that.