Today #Day64 of #100DaysOfCode, I Finally completed Re-Building my Backup Calculator.
As shown above, I created an HTML page for my backup calculator project.
CSS
Use media queries to adapt your content to the view port,
I put a total of 6 media queries to make responsive to the view window, showing only 2,
@media screen and (width<1475px) {
.p1div {
grid-template-columns: 16vw 7vw 10vw;
}
}
@media screen and (941px<width<1460px) {
.p1div {
grid-template-columns: 17em 8em 10em;
}
.q4 {
min-width: 18em;
}
.main-dropdownbox {
min-width: 8em;
}
.q5 {
min-width: 12em;
}
}
JavaScript
Now, I gonna dump my JS code
It consists of calculations for my project.
Problems
Problem - 1
Finally,
Fixed the responsiveness using media queries.
Lessons I learned, I didn't provide the min-width and max-width I will implement this concept in the next responsive design.
Conclusion
I Finally Completed my re-coding of my Backup calculator project with a new design and colors and was completely responsive to the view window and mobile friendly as shown.
JS code
CSS media queries
Lot of CSS
My Code
Code [ video showing responsiveness [link] ]
