This is a solution to the Travel Journal solo project on Scrimba. Scrimba helps you improve your coding skills by building realistic projects.
- Data array in a separate .js file
- Title, description, price, cover image, rating, review count, location, open spots
- Use .map() and props
- Style & polished
- Mobile designed
This project was bootstrapped with Create React App.
- Semantic HTML5 markup
- CSS custom properties
- React.JS
- Flexbox
- This is my way to display dynamic divider between the second, third (and so on) card but not on the last one:
.card {
padding: 2em 0;
}
.cards-list > .card + .card {
padding: 2em 0;
border-top: 1px solid var(--clr-text-light);
}
.cards-list .card:first-child {
padding-top: 0;
}
.cards-list .card:last-child {
padding-bottom: 0;
}
- How to implement dark mode via CSS:
@media (prefers-color-scheme: light) {
:root {
--clr-text-main: #2b283a;
--clr-text-light: #918e9b;
--clr-background-light: #ffffff;
}
}
/* Dark Mode */
@media (prefers-color-scheme: dark) {
:root {
--clr-text-main: #fff;
--clr-text-light: #e5e5e5;
--clr-background-light: #1d1d1c;
}
}
- ReactJS - How to set up a local development environment on your computer
- FontAwesome - How to install FontAwesome packages for React -BobbyHadz - Assign object to variable before exporting as module default
- Developer Mozilla - Detect if the user has requested a light or dark color theme
- Website - Emanuele Del Monte