Made good use of Math. Random
What challenges did you encounter, and how did you overcome them?How to I develop the API instead of using an array
What specific areas of your project would you like help with?API
Hello Agyemang99,
You can make API Calls in JavaScript using the fetch API like this:
const makeRequest = async () => {
try {
const url = "https://api.adviceslip.com/advice"
const response = await fetch(url)
const data = response.json()
return data
} catch (error) {
// error handling
console.log(error)
}
}
// use the function to display the quote
const displayQuote = async () => {
const advice = await makeRequest()
document.querySelector("h1").textContent = advice.slip.advice
document.querySelector("p").textContent = advice.slip.id
}
displayQuote()
I am using async/await syntax. If you would like to know more about how it works I recommend this video.
Please mark this feedback as helpful if it was and let me know if you have further questions.
Happy Coding
Luca
any feedback is greatly appreciated!
Hello Azzy dvyastia kesuma,
you submitted a great solution. I had a look at your design and your code and want to help you. Please consider this feedback.
Setting right dimensions for background patterns: Consider changing only the width or the height value because that leave the aspect ratio untouched. Furthermore, you may change its position. In this case I would suggest to set position: absolute so it does not change your layout.
Changing svg fill: When referencing a svg using an img tag you cannot change its fill. You have to include the svg code in your file so you can change it like this:
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" fill="blue" id="circle" />
</svg>
const circle = document.getElementById("circle")
circle.setAttribute(fill, "green")
If you're using React you can assign a variable and reference it in your svg like this:
const SVG = () => {
const [fill, setFill] = useState("blue")
return (
<>
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" fill={fill} id="circle" />
</svg>
<button onClick={() => setFill("green")}>Change fill</button>
</>
)
}
Achieving pixel perfect design: There are some browser extensions that allow you to stack the design file on top of your viewport so you can compare both of them, e. g. this chrome extension called PerfectPixel
Please mark this feedback as helpful if it was and let me know if you have additional questions.
Kind Regards
Luca
Everything I guess ;)
What challenges did you encounter, and how did you overcome them?I loved the fact that we can use svg as background.
What specific areas of your project would you like help with?Nothing as of now, but when maybe when I will work with frameworks.
Hello there,
Congrats on submitting your solution.
I would consider some minor changes:
styles
Why did you set font-size: 62.5% on the html tag? The styled-guide.md file states you should not change the default value of 16px
white space
Consider changing your margin values to improve your design, e. g. moving your heading and description together to emphasize these elements belong together.
In my opionion, you should decrease the box-shadow value to match the design even better. I would suggest box-shadow: 0 18px 16px rgba(0, 0, 0, 0.24)
Let me know if you have any questions left and consider marking this answer as useful
I am proud I was able to complete and submit this project. It took a lot to submit but I scaled through. Next time I would look for tutorials as faster methods to solving problems
What challenges did you encounter, and how did you overcome them?I had problems hosting the live project. I was able to solve this problem by not giving up and finding a solution on Youtube.
What specific areas of your project would you like help with?Font styling.
Hello there,
Your submission looks really good however I would implement some minor changes:
styles
Consider adding a reset, e. g.
`* {
margin: 0;
padding: 0;
box-sizing: border-box;
}`
This removes default padding from elements like headings and allows you to anticipate how these elements are going to behave.
semantic html
Please use an <h1> element for your heading. Overall there are six headings from <h1> to <h6>. <h1> being most important and <h6> least important.
font
If you use an <h1> element for your heading you'll notice the font-size and font-weight will increase. Manually adjust the font-size and your submission will be even closer to the Design.
If you want to learn more about fonts consider checking out this website: Fonts | MDN.
units
Consider using relative units like vw or percentages for widths and heights so your submission will be responsive. However using px or rem for border-radius or font-size is okay