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: https://github.com/MuskanJain13/demo-task
- Live Site URL: https://demo-task.vercel.app/
So, I started with studying the design which I got in the challenge. Then I figured out how the structure would be created, i.e., how many divisions would be there, and what will come first. Then I started creating the outer structure and followed by the inner structure. Then, added sample styles to it, to see how close it was getting. Then I took each element in the design and started working on it precisely to get more precise results, and once an element was completed, I switched to the next one. Then, I started working on the API part to fetch data and display it. Once, it was completed I started with adding the final styles to the whole project. And this is how, I came more closer to the desired result.
- HTML5
- CSS3
- Flexbox
- JavaScript
Some new things which I learned through this project are fetching data from API using "JavaScript". And shadow in the particular way as used here. And I struggled in placing elements in center with respect to each other. So, somehow after some hit and trials and figured it out.
<div class="center">
<div id="dice-shape" class="center" onclick="display()">
<img src="assets/icon-dice.svg" alt="dice">
</div>
</div>
#dice-shape:hover{
box-shadow: 0px 0px 30px 2px hsl(150, 100%, 66%);
}
console.log(data.slip.advice);
var advice = data.slip.advice;
var id = data.slip.id;
// Changing the advice text in HTML div
document.getElementById('advice-body').innerHTML = '“'+advice+'”';
document.getElementById('advice-title').innerHTML = 'ADVICE #'+id;
-
Example resource 1 - This helped me for fetching the data from API using JavaScript. Previously, I have worked with PHP while working web projects, so I didn't knew how to fetch the data using JavaScript. So, with the help of this resource, I got a base for how to use JavaScript and I tried to apply their steps in my project, to complete the purpose. After few hit and tries and I understood the use of that code, and implemented the same in this project.
-
Example resource 2 - This resource helped me understand using media queries with JavaScript.
- LinkedIn - Muskan Jain
I took references from Internet wherever I felt to, at places, for knowing a trick for centering a HTML div or whenever I was stuck in the code, and to exploring the new concepts, which were necessary to complete this project.