Scrimba - Travel Journal solution

This is a solution to the Travel Journal solo project on Scrimba. Scrimba helps you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • Requirements
  • Screenshot
  • Links
  • Getting Started with Create React App
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

Overview

Requirements

• 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

Screenshot

Links

• Live Site URL: @Netlify
• Solution URL: @GitHub

Getting Started with Create React App

This project was bootstrapped with Create React App.

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• React.JS
• Flexbox

What I learned

• 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;
  }
}

Useful resources

• 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

Author

• Website - Emanuele Del Monte