Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions18Comments439

All comments

  • Hyron• 5,870

    @hyrongennike

    Posted

    Hi @Peteksi95,

    Congrats on completing the challenge

    If you want to center the card on the page. You can replace you main rule with the following.

    main {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

    Hope this is helpful

    Marked as helpful

    0
  • Hyron• 5,870

    @hyrongennike

    Posted

    Hi @Grimjow-immortal,

    Congrats on completing the challenge

    You can center the card with flexbox, replace your body rule with the one below.

    body {
    background-color: hsl(217, 54%, 11%);
    font-size: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

    Hope this is helpful.

    Marked as helpful

    0
  • Mgamboa• 200

    @Marianellag1

    Submitted

    wanted to practice what I am learning in bootcamp. Am I in the right path for this project? I tried applying what I learned. Where I am learning, they encourage google searches, which I did. It's very hard for a beginner because there are so many solutions, and how I am being taught, not all of them are the same. It's a little confusing. I know that if I continue to practice, I'll start understanding this language. I feel as if I did good on it, but I want to re-confirm I'm going on the right path of understanding coding, as a beginner.

    Thank you.

    **I will continue doing more of these, it helps a lot and I am very happy when it looks almost as the product preview.

    Gabrielle Parfum HTML and CSS

    #bootstrap#jquery

    3

    Hyron• 5,870

    @hyrongennike

    Posted

    Hi @Marianellag1,

    Nice job on the challenge

    If you want to center the card on the page, the margin-top: 12% on div inside the container div and replace your body rule with the following one.

    body {
    margin: 0;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

    Hope this is helpful

    Marked as helpful

    1
  • Hyron• 5,870

    @hyrongennike

    Posted

    Hi @joehaddad1000,

    Nice job on the challenge

    Just a few suggestion, you can replace your body rule with the following to center and space things out.

    body {
    background-color: var(--Violet);
    background-image: url("./images/bg-mobile.svg");
    background-size: 100%;
    background-repeat: no-repeat;
    padding: 2.5rem;
    color: white;
    font-family: 'Poppins', sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

main {
    flex-grow: 2;
    display: flex;
    align-items: center;
}

    Hope this is helpful.

    Marked as helpful

    0
  • Hyron• 5,870

    @hyrongennike

    Posted

    Hi @barnilsarma,

    Congrats on completing the challenge

    If you want to center the card on the page, you can replace your body rule with the following one.

    body {
    background-color: hsl(216, 12%, 8%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 0 !important;
    font-family: 'Overpass', sans-serif;
}

    Also make the thank you card the same size as the rating card.

    Hope this is helpful

    0
  • Hyron• 5,870

    @hyrongennike

    Posted

    Hi,

    Congrats on completing the challenge

    To center the card on the page you can replace you body rule with the following one.

    body {
    min-height: 100vh;
    background: hsl(185, 41%, 84%);
    margin: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    Hope this is helpful

    1
  • asya• 50

    @asya982

    Submitted

    I have a question which was remained unsolved... I couldn`t figure out how to vertically align my elemnts (especially on phones)...If you can give me any tips how to do that, I's be very grateful! Thank you in advance

    QR-code-component-main using CSS grid

    1

    Hyron• 5,870

    @hyrongennike

    Posted

    Hi @asya982,

    Congrats on completing the challenge

    To center the card on the page you can replace your body rule with the one below.

    body {
    background-color: hsl(212, 45%, 89%);
    font-family: 'Outfit', sans-serif;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

    Hope this is helpful

    Marked as helpful

    0
  • King-Lemuel Alpha• 20

    @Galahad-py

    Submitted

    Couldn't figure out how to change the icon color to white, tried using color, still didnt work.

    Also couldn't figure out how to add space in span.....error = >ofjules wyvern>

    Original files

    2

    Hyron• 5,870

    @hyrongennike

    Posted

    Hi @Galahad-py,

    Congrats on completing the challenge

    You can replace your body rule with the one below to the center card on the page.

    body {
    background-color: hsl(217, 54%, 11%);
    margin: 0;
    font-family: 'Outfit', sans-serif;
    color: hsl(215, 51%, 70%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 100vh;
}

    Because the overlay color is on the background on the div that surrounds the eye icon, the icon is underneath the overlay and you're also apply opacity to both the overlay and icon. You can use pseudo elements. before and after to create the overlay and add the eye icon. See my solution below.

    **my solution

    Hope this is helpful

    Marked as helpful

    0
  • Hyron• 5,870

    @hyrongennike

    Posted

    Hi @Andrusik1,

    Congrats on completing the challenge

    I would suggest just disabling the button until a rating is selected this can be done by adding the disabled attribute on the button and removing it when the rating is clicked currently it's "a" when you click submit without selecting a rating.

    Hope this is helpful

    1
  • Hyron• 5,870

    @hyrongennike

    Posted

    Hi @Nathanwalker28,

    Congrats on completing the challenge

    Seems there's a bug when selecting multiple ratings the submit button doesn't work. Only allow one button to be selected at a time.

    Hope this is helpful

    0
  • Damilarr• 40

    @Damilarr

    Submitted

    What do you think of my design and the way the javascript was used,is this a good practice?

    HTML,CSS BOOTSTRAP JAVASCRIPT

    #solid-js#bootstrap

    3

    Hyron• 5,870

    @hyrongennike

    Posted

    Hi @Damilarr,

    Congrats on completing the challenge

    Instead of the browser alert box which is bad for user experience, I would suggest just disabling the button until a rating is selected this can be done by adding the disabled attribute on the button and removing it when the rating is clicked

    Hope this is helpful

    Marked as helpful

    0
  • Sunbear Day• 80

    @SunbearDay

    Submitted

    I was confused by the colors provided to use in the project. I ended up using a different color for the page background. Not sure if this is an issue, but that's what I decided to do.

    I enjoyed putting this together. It was a lot of fun!

    Product review card using HTML, CSS and JavaScript

    1

    Hyron• 5,870

    @hyrongennike

    Posted

    Hi @SunbearDay,

    Congrats on completing the challenge

    I would suggest just disabling the button until a rating is selected this can be done by adding the disabled attribute on the button and removing it when the rating is clicked currently it's 0 when you click submit without selecting a rating which is not an option among the ratings.

    Hope this is helpful

    0
  • Mehdi• 990

    @siavhnz

    Submitted

    Hi dear community 👋

    React functionality was tricky, passing data and events to children and getting data from them was the point of this challenge

    Any tips will be appreciated

    🙏 💝

    Interactive rating component

    #react

    1

    Hyron• 5,870

    @hyrongennike

    Posted

    Hi @siavhnz,

    Congrats on completing the challenge

    I would suggest just disabling the button until a rating is selected this can be done by adding the disabled attribute on the button and removing it when the rating is clicked currently it's empty when you click submit without selecting a rating.

    Hope this is helpful

    Marked as helpful

    0
  • Teodor Jenkler• 660

    @TedJenkler

    Submitted

    How do you export and import in vanilla js?, didnt seem to work. Anyways was a fun small codechallange, I didnt have figma so colors and size may diff a bit

    Rating popup app

    4

    Hyron• 5,870

    @hyrongennike

    Posted

    You can also use sessionStorage or use a query string basically sending the variable through the link when the submit button is clicked.

    Marked as helpful

    0
  • Teodor Jenkler• 660

    @TedJenkler

    Submitted

    How do you export and import in vanilla js?, didnt seem to work. Anyways was a fun small codechallange, I didnt have figma so colors and size may diff a bit

    Rating popup app

    4

    Hyron• 5,870

    @hyrongennike

    Posted

    Hi @TedJenkler,

    Congrats on completing the challenge

    I would suggest just disabling the button until a rating is selected this can be done by adding the disabled attribute on the button and removing it when the rating is clicked currently it's # when you click submit without selecting a rating.

    Hope this is helpful

    Marked as helpful

    0
  • Ayman Tarek• 60

    @aymantarek16

    Submitted

    I finished this simple project in the least time and it was a fun challenge. You can move between the list tabs and press the Submit button to turn it into a thank you card .. Only techniques used: HTML, CSS, JavaScript

    Html css js

    #materialize-css

    2

    Hyron• 5,870

    @hyrongennike

    Posted

    Hi @aymantarek16,

    Congrats on completing the challenge

    I would suggest just disabling the button until a rating is selected this can be done by adding the disabled attribute on the button and removing it when the rating is clicked currently it's empty when you click submit without selecting a rating.

    Hope this is helpful

    1
  • Hyron• 5,870

    @hyrongennike

    Posted

    Hi @sumaiyakawsar

    Nice job on the challenge

    Instead of setting height: 65vh on body .container .card-container .card you can remove that and add the following rule.

    .card__top {
    margin-bottom: 5rem;
}

    this way the height is more consistent across different screens.

    Hope this is helpful

    Marked as helpful

    1
  • Hyron• 5,870

    @hyrongennike

    Posted

    Hi @bukeme,

    Nice job on the challenge

    Instead of using margin to try center the card you can replace your main rule with the following.

    main {
    max-width: 80%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

    Hope this is helpful

    Marked as helpful

    0
  • Juca Perez• 310

    @jucajulian0907

    Submitted

    Hello! I leave my solution to this challenge here, we continue practicing Tailwind. Any comment is welcomed...

    QR Code component

    #tailwind-css#animation

    1

    Hyron• 5,870

    @hyrongennike

    Posted

    Hi @jucajulian0907,

    Nice job on the challenge

    You can add min-h-screen on the body this will center the card on the page.

    Hope this is helpful

    Marked as helpful

    0
  • Hyron• 5,870

    @hyrongennike

    Posted

    Hi @Douoo,

    Congrats on completing challenge

    Instead of a width: 80% you can set max-width: 1170px and increase the padding to 5rem and add the following.

    .card > * {
    flex: 1;
}

    Hope this is helpful.

    0
  • Hyron• 5,870

    @hyrongennike

    Posted

    Hi @CoderKnight02,

    Congrats on completing the challenge

    I would suggest just disable the button until a rating is selected this can be done by adding the disabled attribute on the button and removing it when the rating is clicked. Currently the when you click the button without selecting a rating it's 0 but there is no 0 option.

    Hope this is helpful.

    Marked as helpful

    0
  • Hyron• 5,870

    @hyrongennike

    Posted

    Hi @MaikoCode,

    Congrats on completing the challenge

    You can center the card by removing the margin bottom on main.

    main {
    margin: 0;
}

    You can also look into only having one accordion open at a time should be simple just looping over all of them and display: none.

    Hope this is helpful

    0
  • Hyron• 5,870

    @hyrongennike

    Posted

    Hi @ColinMcArthur85,

    Nice job on the challenge

    To center the card on the page you can replace you body rule with the following one.

    body {
    line-height: 1.3;
    font-family: 'Karla', sans-serif;
    background-color: var(--ltgray);
    color: var(--grayblue);
    padding: var(--paddingx);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

    Hope this helpful.

    Marked as helpful

    0
  • Fred Banda• 10

    @fredbanda

    Submitted

    Learning would to learn more bout css

    CSS flexbox

    #backbone#cypress#sass/scss#styled-components#jquery

    3

    Hyron• 5,870

    @hyrongennike

    Posted

    Hi @fredbanda,

    Congrats on completing the challenge

    To center the card you can add min-height: 100vh; on the body as well as text-align: center;

    Also check the report above and fix the accessibility issues.

    Hope this is helpful

    Marked as helpful

    0