[GitHub Preview(https://szablitho.github.io/advice-generator-app/)]
This is a solution to the Advice generator app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Note: Delete this note and update the table of contents based on what sections you keep.
Users should be able to:
- View the optimal layout for the app depending on their device's screen size
- See hover states for all interactive elements on the page
- Generate a new piece of advice by clicking the dice icon
- Solution URL: Add solution URL here
- Live Site URL: Add live site URL here
I started with building HTML. I used semenatics where it was possible and planned future classes for CSS and IDs of elements for script. I met difficulties working with svg as they are apparently not allowed in <picture>
tag so i used a CSS display property and media queries to replace the on correct screens. I followed a guide of colors and screen sizes given to this project. Later i implemented JavaScript and using fetch API I have got a slip of advice fro Advice Slip API.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- SVG
- Fetch API, Advice Slip API
- Git and GitHub
- Google Fonts
#dice-background {
position: absolute;
left: calc(50% - 2rem);
bottom: calc(0% - 2rem);
background-color: var(--neon-green);
height: 4rem;
width: 4rem;
border-radius: 2rem;
}
#dice {
transform: translateY(1.2rem);
}
const adviceCard = document.querySelector(".advice");
const adviceIDel = document.querySelector("#advice-id");
const diceEl = document.querySelector("#dice-background");
async function getAdvice() {
const response = await fetch('https://api.adviceslip.com/advice');
const advice = await response.json();
if(!advice) {
return alert("Something went wrong"); //do alternative message within an advice card
}
// update advice card with response from ADVICE SLIP API
console.log(advice);
adviceIDel.textContent = advice.slip.id;
adviceCard.textContent = advice.slip.advice;
}
diceEl.addEventListener("click",getAdvice);
I want to focus on fetching datas with APIs and know more about JavaScript modules and/or frameworks. So that later i can use them in proffesional projects, deploy complex websites for marketing, responsive, useful and pretty.
- MDN docs about fetch API - i could understand how Fetch API works and how to write it to use GET. Hopefully in future uploading will not be a problem for me either.
- Reqbin - allows for fast check if API respond
- Github - Szablitho
- Frontend Mentor - @yourusername
- LinkedIn - Wiktor Szablewski
MDN helped me understand Fetch API bot on my way i also found few good explanations abouts SVG in Web. Thank you developers for knowledge and ressources, Thank you FrontEnd mentor for allowing me make this project.
Also, on FrontEnt mentor I found a solution made with React. I liked effects so much that i implemented them myself using CSS and JavaScript.