Updated README

Author: vimode

README.md

@@ -5,7 +5,7 @@
 This repo is single mega repo for all my submissions for the Frontend Mentor Challenges.
 Challenges on FrontendMentor are categorised based on a difficulty level. So I am just using the same to categorise them for now.
 
-This repo currently holds 50 projects. The earlier challenges are vanilla JS projects and the later ones are in React. I have titled them to easily find them.
+This repo currently holds 52 projects. The earlier challenges are vanilla JS projects and the later ones are in React. I have titled them to easily find them.
 
 The goal of this challenge is to keep coding everyday even if the progress of the project is in small increments and learn and experiment new things along the way. I try to document my process, my difficulties and what I learned from each project in the project's repo. I would appreciate any feedback you have for me.
 
@@ -57,7 +57,7 @@ The goal of this challenge is to keep coding everyday even if the progress of th
 - [Advice generator app(React)](/advice-generator-app-react/)
 
 
-### Intermediate (12)
+### Intermediate (13)
 
 - [Bookmark landing page](/bookmark-landing-page/)
 - [Launch Countdown Timer](/launch-countdown-timer/)
@@ -71,6 +71,7 @@ The goal of this challenge is to keep coding everyday even if the progress of th
 - [Planets Fact Side (React)](/planets-fact-site-react/)
 - [Scoot Multipage Website (React)](/scoot-website-react/)
 - [Intro Section with Dropdown Nav (React)](/intro-section-with-dropdown-navigation-react/)
+- [IP Address Tracker(React)](/ip-address-tracker/)
 
 ### Advanced
 
@@ -84,5 +85,5 @@ Discord vimo#6620
 
 ###### Pending tasks for the repo
 
-- Filter projects to show in the showcase page  
+- Filter projects to show selected few on the showcase page  
 

fylo-dark-theme-landing-page/README.md

@@ -29,7 +29,7 @@ Your users should be able to:
 
 ## Experience, Challenges and Learning
 
-The layout was big  and had several components but most of it was easy to structure. 
+The layout was big and had several components but most of it was easy to structure. 
 There are few things I could not figure out how to do, I was unable to 
   - position the background image as per the specs. 
   - `.feature_link` has a svg icon with it. On hover, the link + the icon switch to color white, I am unable to change the svg's fill color to white with the link, it does only when hovered on the icon but not on the link. 
@@ -41,4 +41,4 @@ Apart from those hurdles everything else is as close to the specs as I can make
 ##### Pending tasks
 
 - Live solution screenshot(s)
-- Submit to frontendmentor and add Solution submitted  at Frontend Mentor - [Submission link]()
+- Submit to frontendmentor and add Solution submitted at Frontend Mentor - [Submission link]()

fylo-landing-page-with-two-column-layout/README.md

@@ -28,8 +28,8 @@ Your users should be able to:
 
 ## Experience, Challenges and Learning
 
-Layout was simple but tedious compared to newbie challenges. Footer had weird quirks mostly because of my markup decisions.
-The javascript for two email validations need to be worked on yet which seems a little different from previous challenges.
+Layout was simple but tedious compared to other newbie challenges. Footer had weird quirks mostly because of my mark-up decisions.
+The JavaScript for two email validations need to be worked on yet which seems a little different from previous challenges.
 
 There also seems to be a horizontal scroll on Chrome and not on Firefox, haven't figured out the problem yet. 
 
@@ -38,5 +38,5 @@ There also seems to be a horizontal scroll on Chrome and not on Firefox, haven't
 ##### Pending tasks
 
 - Email validation
-- Updated readme after javascript work
+- Updated readme after JavaScript work
 - Live solution screenshot(s)

github-user-search-app-v2/README.md

@@ -7,7 +7,6 @@ Pending tasks
 
 This is a redo of [GitHub user Search app](https://github.com/vimode/frontend-mentor-challenges/tree/master/github-user-search-app) in React
 
-# Getting Started with Create React App
 
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 
@@ -37,43 +36,3 @@ The build is minified and the filenames include the hashes.\
 Your app is ready to be deployed!
 
 See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `yarn eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can't go back!**
-
-If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
-
-You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
-
-### Code Splitting
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
-
-### Analyzing the Bundle Size
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
-
-### Making a Progressive Web App
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
-
-### Advanced Configuration
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
-
-### Deployment
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
-
-### `yarn build` fails to minify
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

github-user-search-app/README.md

@@ -32,12 +32,10 @@ Your users should be able to:
 
 ## Experience, Challenges and Learning
 
-_This will be updated periodically while the pending tasks are being worked on._
+This challenge was supposed to be a practice for using an API but with the dark mode it turned out solid CSS learning experience for me.
+The API call and handling its response was fairly simple (with my very basic implementation) but the dark mode especially with `prefers-color-sceheme` meant it had to be done systematically.
 
-This challenge was supposed to be a practice for using an API but with the dark mode it turned out solid CSS learning experieince for me.
-The API call and handling its response was fairly simple ( with my very basic implemention) but the dark mode especailly with `prefers-color-sceheme` meant it had to be done systematically.
-
-I learned a lot of new things in CSS. This Google/web.dev [article](https://web.dev/prefers-color-scheme) was epsecially very helpful. I learned about `window.matchMedia` [MDN link](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) and how it can be used to switch media queries or trigger an action based on the browser setting.  
+I learned a lot of new things in CSS. This Google/web.dev [article](https://web.dev/prefers-color-scheme) was especially very helpful. I learned about `window.matchMedia` [MDN link](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) and how it can be used to switch media queries or trigger an action based on the browser setting.  
 Using the same function I did the toggle switch for dark and light mode.
 
 And surprisingly a new thing about `toggle()` method, how it accepts an optional token too! [MDN for `toggle()`](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/sidebarAction/toggle)

huddle-landing-page-with-alternating-feature-blocks/README.md

@@ -26,8 +26,8 @@ Your users should be able to:
 
 ## Experience, Challenges and Learning
 
-Surprisingly the only thing that I struggled with was having a circle around fontawesome icons.
-The easier way would be to utilise [stacking icons](https://fontawesome.com/v5.15/how-to-use/on-the-web/styling/stacking-icons) but its result isn't very elegant and the circle is very thick so had to do custom CSS instead, which turned out to be not very straightfoward.
+Surprisingly the only thing that I struggled with was having a circle around font awesome icons.
+The easier way would be to utilise [stacking icons](https://fontawesome.com/v5.15/how-to-use/on-the-web/styling/stacking-icons) but its result isn't very elegant and the circle is very thick so had to do custom CSS instead, which turned out to be not very straightforward.
 
 I started with adding ```
 

huddle-landing-page-with-curved-sections/README.md

@@ -30,7 +30,7 @@ Your users should be able to:
 ## Experience, Challenges and Learning
 
 This challenge was particularly longer than most I have done in past. Overall the layout was easy to understand and replicate, the difficult parts were the background images/patterns  provided in the challenge. 
-The footer was challenging, and the positioning of its inner elements took  more time than expected. I was still not satisified with the way I ended up doing the footer but its very close to the design specs. 
+The footer was challenging, and the positioning of its inner elements took  more time than expected. I am still not satisfied with the way I ended up doing the footer but its very close to the design specs. 
 Most of the layout was done with Grid and with the help of flexbox I was able to align the inner elements well. I added some transition effects and animations to hover elements (buttons, social buttons) and animation for email validation success. 
 
 ----

insure-landing-page/README.md

@@ -28,7 +28,7 @@ Your users should be able to:
 ## Experience, Challenges and Learning
 Background image patterns were difficult to position as per the design specs and had to do a hybrid approach with them as some are as background images and some as img elements. 
 
-The overall layout was simple with the help of grid and flexbox but I overlooked the equal whitespace margins and how the elements were centered which required adding a fix width at the end to all sections to leave equal whitespace in the margins in all sections. 
+The overall layout was simple with the help of grid and flexbox but I overlooked the equal whitespace margins and how the elements were cantered which required adding a fix width at the end to all sections to leave equal whitespace in the margins in all sections. 
 
 There is no good tablet view for this challenge that I could think, currently it stretches to cover the viewport which isn't pleasant but its not very bad. 
 

interactive-pricing-component/README.md

@@ -60,7 +60,7 @@ There are few more resources that helped with during this challenge,
 
 - Managing the [range events](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/oninput) as I had never used them before. 
 
-- [animate()](https://developer.mozilla.org/en-US/docs/Web/API/Element/animate) method to create new animations through javascript. I used this to show a visual change in the values which are updated in the DOM by the javascript funtions for toggle and slider. I use this method in a very basic way to change the font-color of the updates values.
+- [animate()](https://developer.mozilla.org/en-US/docs/Web/API/Element/animate) method to create new animations through JavaScript. I used this to show a visual change in the values which are updated in the DOM by the JavaScript functions for toggle and slider. I use this method in a very basic way to change the font-color of the updates values.
 
 ```javascript
   pageviews.animate([

intro-section-with-dropdown-navigation-react/README.md

@@ -1,6 +1,6 @@
 # Intro section with dropdown navigation
 
-This is a solution to the [Intro section with dropdown navigattion](https://www.frontendmentor.io/challenges/intro-section-with-dropdown-navigation-ryaPetHE5).
+This is a solution to the [Intro section with dropdown navigation](https://www.frontendmentor.io/challenges/intro-section-with-dropdown-navigation-ryaPetHE5).
 
 ![Design preview for the Job listings with filtering coding challenge](./public/design/desktop-preview.jpg)
 
@@ -20,7 +20,7 @@ Your users should be able to:
 
 ### Built with
 
-- Semantic HTML5 markup
+- Semantic HTML5 mark-up
 - [React](https://reactjs.org/) - JS library
 - [Styled Components](https://styled-components.com/) - For styles
 - ViteJS

job-listings-with-filter-react/README.md

@@ -49,13 +49,11 @@ To add a filter, the user needs to click on the tablets on the right-side of the
 
 ### What I learned and continuous development
 
-_WIP_
+I finished the project filtering with option 2 of the challenge.
 
-Fulfilling the option 2 of the challenge.
+Using snowpack was fun. Its easy and as much as I like the CRA to spin up a quick React project it always feels like a black box which I cannot probe to fully understand.
 
-Using snowpack was fun. Its easy and as much as I like the CRA to spin up a quick React project it always feels like a blackbox which I cannot probe to fully understand.
-
-Snowpack on the other hand gives a lot of freedom + also helps understanding whats happening under the hood.
+Snowpack on the other hand gives a lot of freedom + also helps understanding what's happening under the hood.
 
 In this current project build, the hover state on click is retained for the tag. Unable to fix it as of now.
 

launch-countdown-timer/README.md

@@ -28,16 +28,14 @@ Your users should be able to:
 
 ## Experience, Challenges and Learning
 
-_This will be updated periodically while the pending tasks are being worked on._
-
-This was trickier than I expected it to be, for the animation to work on any change in the countdown number my solution was to add two indetical cards on top of each other.
-The countdown card and an indentical card have the same properities and show the same number via the countdown js the only difference being that the flip box animates on change. T
-Each card is then further divived into two halves, top and the bottom part, on change (with the help of CSS animation) the top and the bottom part flips.
+This was trickier than I expected it to be, for the animation to work on any change in the countdown number my solution was to add two identical cards on top of each other.
+The countdown card and an identical card have the same properities and show the same number via the countdown JavaScript, the only difference being that the flip box animates on change. 
+Each card is then further divided into two halves, top and the bottom part, on change (with the help of CSS animation) the top and the bottom part flips.
 With the help of `rotate3d()` the top card flips from top to the middle and the bottom card flips from middle to the end of the card.
-The animation still doesn't look perfect tand looks a little sticky and needs some work.
+The animation still doesn't look perfect and looks a little sticky and needs some work.
 
-The javascript too was fun, the logic is simple. Start the countdown, watch for change in the number and only then animate. For the animation part, it requires to add the animation and remove it otherwise it doesn't work continuously. So there is a callback function which is fired when `"animationend"` event happens.
-I really enjoyed learning about `animationend` at [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationend_event) had never heard of it or used it anyhwere. This opens a new possiblities of various quick CSS animations I could add via JavaScript.
+The JavaScript too was fun, the logic is simple. Start the countdown, watch for change in the number and only then animate. For the animation part, it requires to add the animation and remove it otherwise it doesn't work continuously. So there is a callback function which is fired when `"animationend"` event happens.
+I really enjoyed learning about `animationend` at [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationend_event) had never heard of it or used it anywhere. This opens a new possibilities of various quick CSS animations I could add via JavaScript.
 
 ---
 

loopstudios-landing-page/README.md

@@ -33,13 +33,13 @@ Your users should be able to:
 
 ## Experience, Challenges and Learning
 
-The layout of the challenge was very intuitive, liner and fun.  Almost all the images had some type of different effect on them. Enjoyed manipulating images by using filter for some, had to create a overlay for few images and even a color box for an image. 
-The positioning of the hero image is not exactly as per the specs but very close to it and I am quite happy about it works responsively. 
-Despite adding minimal gap and margin to the grid of images, I could not make it line up with the rest of the content of the site. It looks a  little offset. And on widescreen the grid adds a lot of gap between the images which I could not fix despite having a max-width to everything. 
+The layout of the challenge was very intuitive, liner and fun. Almost all the images had some type of different effect on them. Enjoyed manipulating images by using filter for some, had to create a overlay for few images and even a color box for an image. 
+The positioning of the hero image is not exactly as per the specs but very close to it and I am quite happy about it working  responsively. 
+Despite adding minimal gap and margin to the grid of images, I could not make it line up with the rest of the content of the site. It looks a little offset to me. And on widescreen the grid adds a lot of gap between the images which I could not fix despite having a max-width to everything. 
 
-The mobile nav is here is very different than I usually do. I wanted to fix a few things in my usual implementation of mobile navigation
+The mobile nav in here is very different than I usually do. I wanted to fix a few things in my usual implementation of mobile navigation
 - Remove the body scroll when nav is open. This was done by adding `overflowY:hidden` to the body when nav is opened. Other approach is to add `position:fixed` to the body which works too. 
-- Add some animation when the nav is opened like nav slides in from outside the viewport. To achieve this effect I opted to rotate from `transform:rotate(-90deg)` to  `transform:rotate(0deg)` but it isn't possible to do by simply adding transition effects to the element which changes from `display:none` to any other display property. The transition effects do not take place from nothing to 100%, it needs to be in 0% state for which `visibility:hidden` is perfect but that only hides the element from the view while taking up space in the canvas like invisible units in a game. So instead of transition animations, I added `@keyframes` CSS animations which I am still learning about. Now it works as intended but it does not work as beautifully as transition does. I think its the timing that needs to the tweaked. 
+- Add some animation when the nav is opened like nav slides in from outside the viewport. To achieve this effect I opted to rotate from `transform:rotate(-90deg)` to `transform:rotate(0deg)` but it isn't possible to do by simply adding transition effects to the element which changes from `display:none` to any other display property. The transition effects do not take place from nothing to 100%, it needs to be in 0% state for which `visibility:hidden` is perfect but that only hides the element from the view while taking up space in the canvas like invisible units in a game. So instead of transition animations, I added `@keyframes` CSS animations which I am still learning about. Now it works as intended but it does not work as beautifully as transition does. I think its the timing that needs to the tweaked. 
 
 -----
  ##### Pending tasks