Skip to content
OverviewSolutions
12
Comments
6
Amer
@amerrika

All comments

  • Amer•360
    @amerrikaPosted 9 months ago

    Hello Onos Ejoor,

    Congratulations on the completing your first challenge. It's not an easy one.

    I have a tip regarding your CSS code. You can use a single class to style multiple elements. Let's take a look at your buttons.

    First, we create a class "button" which styles are going to be used by both buttons.

    .button {
  border: none;
  padding: 10px 30px;
  transition-duration: 0.4s;
  border-radius: 30%;
  margin-top: 2%;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 18px 16px hsl(0, 6%, 93%);
}

    Then, you can create another class for each button to create some individual styles:

    .button-1 {
  background-color: hsl(171, 66%, 44%);
  margin-right: 1%;
}
.button-1:hover {
  background-color: green;
  color: white;
}
.button-2 {
  background-color: hsl(233, 100%, 69%);
}
.button-2:hover {
  background-color: blue;
  color: white;
}

    Now, button-1:hover and button-2:hover are using the same color, so you can write like this and delete this color property above:

    .button-1:hover,
.button-2:hover {
color:white
}

    In your HTML file you write the following:

    <button class="button button-1">Download for ios</button> <button class="button button-2 ">Download for Mac</button>

    I really hope this helps you a bit. You can try to apply this on your other css styles.

    Good luck!

    Marked as helpful
    0
  • George Kandelaki•610
    @GeorgeKandelakiSubmitted 9 months ago

    Please Give me FeedBacks and tell me about my mistakes. Also Tell me what can be written better in the code, So I can get better at coding and improve my skills. Thanks!

    QR-Code-Page

    2
    Amer•360
    @amerrikaPosted 9 months ago

    Hi, GeorgeKandelaki

    Nice solution. I think you don't need to have a container div. You can just set max-width on your main-content div to get the same effect.

    .main-content {
    max-width: 40rem;
    padding: 2.4rem 1.8rem;
    border-radius: 1.5rem;
    background-color: white;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.4rem;
}

    For components like this it is common to use name "card" instead of "main-content".

    I hope this helps you a little

    Best of luck with coding

    Marked as helpful
    1
  • Amer•360
    @amerrikaPosted 9 months ago

    Hi Mark,

    nice solution for this challenge! I have a tip for you and hope you'll like it.
    In your Rating.vue component you can use List Rendering in order to create multiple paragraphs inside the radioBtn div. This way you don't need to write each one manually.

    First, you create an array inside the data, let's call it possibleRatings. Like this:

    export default {

    props: ['changeRating', 'isSelected', 'isClicked'],
    data() {
        return {
            possibleRatings: [1, 2, 3, 4, 5]
        }
    },

    methods: {
        changeRating_(rate) {
            this.changeRating(rate);
        },

        isSelected_(rate) {
            return this.isSelected(rate);
        },

        isClicked_() {
            this.isClicked();
        }
    },
}

    Then, in the template you can cycle through this array and generate your paragraphs, like this:

    <div class="radioBtn">
    <p v-for="rating in possibleRatings" @click="changeRating_(rating)"
        :class="{ 'selected': isSelected_(rating) }">
        {{ rating }}
    </p>
</div>

    And instead of paragraphs I think a better solution would be to use a button-element.

    I hope you find this useful

    Good luck with coding!

    Marked as helpful
    1
  • Amer•360
    @amerrikaPosted 10 months ago

    Hi Ahmed, I think there is a bug in step 2. When I choose Advanced plan and after that I click the switch-button to see the yearly price it goes back to the first plan, and then again to the Advanced plan when button-switch clicked again. I started learning Vue and also did this project a month ago and came across bugs such this. I didn't learn vuex, so I cannot help with the code. I did mine with Vue3 Options API and the code is a mess haha, but it works.

    1
  • Amer•360
    @amerrikaPosted 10 months ago

    Hi Davide, I don't think this is a bad practice for this case. I was trying to figure out a better way but honestly don't see it. Hopefully someone will comment if there's a better solution, I would like to see it too.

    0
  • ZMB•720
    @ZMBAIGSubmitted 10 months ago

    Hello everyone,

    Any comment or feedback with respect to this project, will be highly appreciated.

    With regards,

    ZM. Baig

    QR-Code Component

    2
    Amer•360
    @amerrikaPosted 10 months ago

    Hi ZM. Baig, I think you did a great job with the styling. My advice would be to not to make the qr-component using the main-element but to make it with a article-element or a div-element that would be placed inside the main-element. And, instead of section-element for heading and paragraph I think a better solution would be to use a div-element. Something like this:

    <main>
    <article class="scan-container">
        <img>
        <div>
            <h1></h1>
            <p></p>
        </div>
    </article>
</main>

    This way the code is more semantic.

    Other than that, a great job.

    Good luck with coding!

    0