chore: typo (#239)

Author: selemondev

questions/1-hello-word/README.md

@@ -2,7 +2,7 @@
 
 Hello, World!
 
-In Vue.js Challenges, we use the Vue.js SFC Playground based on [vuejs/repl](https://github.com/vuejs/repl) to coding online.
+In Vue.js Challenges, we use the Vue.js SFC Playground based on [vuejs/repl](https://github.com/vuejs/repl) to code online.
 
 For this challenge, you will need to change the following code to make the page show "Hello World" correctly.
 
@@ -14,7 +14,7 @@ const msg = ref("Hello World")
 
 <template>
   <div>
-    <!-- The output of the page expected to be Hello World -->
+    <!-- The output of the page is expected to be Hello World -->
     <h1>msg</h1>
   </div>
 </template>

questions/10-lifecycle/README.md

@@ -1,7 +1,7 @@
 <!--info-header-start--><h1>Lifecycle Hooks <img src="https://img.shields.io/badge/-easy-7aad0c" alt="easy"/> <img src="https://img.shields.io/badge/-%23Composition%20API-999" alt="#Composition API"/> <img src="https://img.shields.io/badge/-%23Lifecycle-999" alt="#Lifecycle"/></h1><blockquote><p>By webfansplz <a href="https://github.com/webfansplz" target="_blank">@webfansplz</a></p></blockquote><p><a href="https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cCBsYW5nPVwidHNcIj5cbmltcG9ydCB7IHJlZiwgcHJvdmlkZSB9IGZyb20gXCJ2dWVcIlxuaW1wb3J0IENoaWxkIGZyb20gXCIuL0NoaWxkLnZ1ZVwiXG5cbmNvbnN0IHZpc2libGUgPSByZWYodHJ1ZSlcbmNvbnN0IHRpbWVyID0gcmVmKG51bGwpXG5jb25zdCBjb3VudCA9IHJlZigwKVxucHJvdmlkZShcInRpbWVyXCIsIHRpbWVyKVxucHJvdmlkZShcImNvdW50XCIsIGNvdW50KVxuXG5mdW5jdGlvbiB0b2dnbGUoKSB7XG4gIHZpc2libGUudmFsdWUgPSAhdmlzaWJsZS52YWx1ZVxufVxuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cbiAgPGRpdj5cbiAgICA8Q2hpbGQgdi1pZj1cInZpc2libGVcIiAvPlxuICAgIDxwPlxuICAgICAgPGJ1dHRvbiBAY2xpY2s9XCJ0b2dnbGVcIj5cbiAgICAgICAgVG9nZ2xlIENoaWxkIENvbXBvbmVudFxuICAgICAgPC9idXR0b24+XG4gICAgPC9wPlxuICA8L2Rpdj5cbjwvdGVtcGxhdGU+XG4iLCJDaGlsZC52dWUiOiI8c2NyaXB0IHNldHVwIGxhbmc9XCJ0c1wiPlxuaW1wb3J0IHsgb25Nb3VudGVkLCBpbmplY3QgfSBmcm9tIFwidnVlXCJcblxuY29uc3QgdGltZXIgPSBpbmplY3QoXCJ0aW1lclwiKVxuY29uc3QgY291bnQgPSBpbmplY3QoXCJjb3VudFwiKVxuXG5vbk1vdW50ZWQoKCkgPT4ge1xuICB0aW1lci52YWx1ZSA9IHdpbmRvdy5zZXRJbnRlcnZhbCgoKSA9PiB7XG4gICAgY291bnQudmFsdWUrK1xuICB9LCAxMDAwKVxufSlcblxuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cbiAgPGRpdj5cbiAgICA8cD5cbiAgICAgIENoaWxkIENvbXBvbmVudDoge3sgY291bnQgfX1cbiAgICA8L3A+XG4gIDwvZGl2PlxuPC90ZW1wbGF0ZT5cbiJ9" target="_blank"><img src="https://img.shields.io/badge/-Take%20the%20Challenge-213547?logo=vue.js&logoColor=42b883" alt="Take the Challenge"/></a> &nbsp;&nbsp;&nbsp;<a href="./README.zh-CN.md" target="_blank"><img src="https://img.shields.io/badge/-%E7%AE%80%E4%BD%93%E4%B8%AD%E6%96%87-gray" alt="简体中文"/></a> </p><!--info-header-end-->
 
 
-For this challenge, you'll use `Composition API: Lifecycle Hooks` to finish it. 
+For this challenge, you'll use the `Composition API: Lifecycle Hooks` to complete the challenge. 
 Here's what you need to implement 👇: 
 
 ```vue
@@ -15,7 +15,7 @@ const count = inject('count')
 
 
 onMounted(() => {
-  // The timer'll work unnormally while toggle child component,Let's go to fixed it.
+  // The timer will work abnormally when the child component is toggled. Lets fix it.
   timer.value = window.setInterval(() => {
     count.value++
   }, 1000)

questions/11-next-dom-update/App.vue

@@ -7,8 +7,8 @@ function increment() {
   count.value++
 
   /**
-   * DOM not yet updated, how to make sure the DOM udpated
-   * Make the output to be true
+   * DOM is not yet updated, how can we make sure that the DOM gets updated
+   * Make the output be true
   */
 
   console.log(+document.getElementById("counter").textContent === 1)

questions/11-next-dom-update/README.md

@@ -1,9 +1,9 @@
 <!--info-header-start--><h1>Next DOM update flush <img src="https://img.shields.io/badge/-easy-7aad0c" alt="easy"/> <img src="https://img.shields.io/badge/-%23Global%20API%3AGeneral-999" alt="#Global API:General"/></h1><blockquote><p>By webfansplz <a href="https://github.com/webfansplz" target="_blank">@webfansplz</a></p></blockquote><p><a href="https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmltcG9ydCB7IHJlZiB9IGZyb20gXCJ2dWVcIlxuXG5jb25zdCBjb3VudCA9IHJlZigwKVxuXG5mdW5jdGlvbiBpbmNyZW1lbnQoKSB7XG4gIGNvdW50LnZhbHVlKytcblxuICAvKipcbiAgICogRE9NIG5vdCB5ZXQgdXBkYXRlZCwgaG93IHRvIG1ha2Ugc3VyZSB0aGUgRE9NIHVkcGF0ZWRcbiAgICogTWFrZSB0aGUgb3V0cHV0IHRvIGJlIHRydWVcbiAgKi9cblxuICBjb25zb2xlLmxvZygrZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoXCJjb3VudGVyXCIpLnRleHRDb250ZW50ID09PSAxKVxufVxuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cbiAgPGJ1dHRvbiBpZD1cImNvdW50ZXJcIiBAY2xpY2s9XCJpbmNyZW1lbnRcIj5cbiAgICB7eyBjb3VudCB9fVxuICA8L2J1dHRvbj5cbjwvdGVtcGxhdGU+XG4ifQ==" target="_blank"><img src="https://img.shields.io/badge/-Take%20the%20Challenge-213547?logo=vue.js&logoColor=42b883" alt="Take the Challenge"/></a> &nbsp;&nbsp;&nbsp;<a href="./README.zh-CN.md" target="_blank"><img src="https://img.shields.io/badge/-%E7%AE%80%E4%BD%93%E4%B8%AD%E6%96%87-gray" alt="简体中文"/></a> </p><!--info-header-end-->
 
 
-When you mutate reactive state in `Vue.js`, the resulting DOM updates are not applied synchronously. 
+When you mutate a reactive state in `Vue.js`, the resulting DOM updates are not applied synchronously. 
 
-`Vue.js` provides a utility for waiting for the next DOM update flush, Let's Go 👇: 
+`Vue.js` provides a utility for waiting for the next DOM update flush. Lets Go 👇: 
 
 ```vue
 <script setup>
@@ -15,8 +15,8 @@ function increment() {
   count.value++
 
   /**
-   * DOM not yet updated, how to make sure the DOM udpated
-   * Make the output to be true
+   * DOM is not yet updated, how can we make sure that the DOM gets updated
+   * Make the output be true
   */
 
   console.log(+document.getElementById("counter").textContent === 1)

questions/12-optimize-perf-directive/README.md

@@ -1,9 +1,9 @@
 <!--info-header-start--><h1>Optimize performance directive <img src="https://img.shields.io/badge/-medium-d9901a" alt="medium"/> <img src="https://img.shields.io/badge/-%23Directives-999" alt="#Directives"/> <img src="https://img.shields.io/badge/-%23Built--ins-999" alt="#Built-ins"/></h1><blockquote><p>By webfansplz <a href="https://github.com/webfansplz" target="_blank">@webfansplz</a></p></blockquote><p><a href="https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmltcG9ydCB7IHJlZiB9IGZyb20gXCJ2dWVcIlxuXG5jb25zdCBjb3VudCA9IHJlZigwKVxuXG5zZXRJbnRlcnZhbCgoKSA9PiB7XG4gIGNvdW50LnZhbHVlKytcbn0sIDEwMDApXG48L3NjcmlwdD5cblxuPHRlbXBsYXRlPlxuICA8c3Bhbj5NYWtlIGl0IG5ldmVyIGNoYW5nZToge3sgY291bnQgfX08L3NwYW4+XG48L3RlbXBsYXRlPlxuIn0=" target="_blank"><img src="https://img.shields.io/badge/-Take%20the%20Challenge-213547?logo=vue.js&logoColor=42b883" alt="Take the Challenge"/></a> &nbsp;&nbsp;&nbsp;<a href="./README.zh-CN.md" target="_blank"><img src="https://img.shields.io/badge/-%E7%AE%80%E4%BD%93%E4%B8%AD%E6%96%87-gray" alt="简体中文"/></a> </p><!--info-header-end-->
 
 
-`Vue.js` provides a directive so that render the element and component once only, and skip future updates.
+`Vue.js` provides a directive that renders the element and the component only once, and skips future updates.
 
-Do you know what's it, Let's try it 👇: 
+Do you know what the directive is?. Lets try it 👇: 
 
 ```vue
 <script setup>
@@ -17,7 +17,7 @@ setInterval(() => {
 </script>
 
 <template>
-  <span>Make it never change: {{ count }}</span>
+  <span>Make it not to change: {{ count }}</span>
 </template>
 
 ```

questions/13-dom-portal/App.vue

@@ -5,6 +5,6 @@ const msg = "Hello World"
 </script>
 
 <template>
-  <!-- Renders its to a child element of the `body` -->
+  <!-- Renders it to a child element of the `body` -->
   <span>{{ msg }}</span>
 </template>

questions/13-dom-portal/README.md

@@ -3,7 +3,7 @@
 
 `Vue.js` provides a built-in component that renders its slot content to another part of the `DOM`. 
 
-Do you know what's it, Let's try it 👇: 
+Do you know the built-in component?. Lets try it 👇: 
 
 ```vue
 <script setup>
@@ -13,7 +13,7 @@ const msg = "Hello World"
 </script>
 
 <template>
-  <!-- Renders its to a child element of the `body` -->
+  <!-- Renders it to a child element of the `body` -->
   <span>{{ msg }}</span>
 </template>
 

questions/14-dynamic-css-values/README.md

@@ -1,9 +1,9 @@
 <!--info-header-start--><h1>Dynamic css values <img src="https://img.shields.io/badge/-easy-7aad0c" alt="easy"/> <img src="https://img.shields.io/badge/-%23CSS%20Features-999" alt="#CSS Features"/></h1><blockquote><p>By webfansplz <a href="https://github.com/webfansplz" target="_blank">@webfansplz</a></p></blockquote><p><a href="https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmltcG9ydCB7IHJlZiB9IGZyb20gXCJ2dWVcIlxuY29uc3QgdGhlbWUgPSByZWYoXCJyZWRcIilcblxuY29uc3QgY29sb3JzID0gW1wiYmx1ZVwiLCBcInllbGxvd1wiLCBcInJlZFwiLCBcImdyZWVuXCJdXG5cbnNldEludGVydmFsKCgpID0+IHtcbiAgdGhlbWUudmFsdWUgPSBjb2xvcnNbTWF0aC5mbG9vcihNYXRoLnJhbmRvbSgpICogNCldXG59LCAxMDAwKVxuXG48L3NjcmlwdD5cblxuPHRlbXBsYXRlPlxuICA8cD5oZWxsbzwvcD5cbjwvdGVtcGxhdGU+XG5cbjxzdHlsZSBzY29wZWQ+XG4vKiBNb2RpZnkgdGhlIGNvZGUgdG8gYmluZCB0aGUgZHluYW1pYyBjb2xvciAqL1xucCB7XG4gIGNvbG9yOiByZWRcbn1cbjwvc3R5bGU+XG4ifQ==" target="_blank"><img src="https://img.shields.io/badge/-Take%20the%20Challenge-213547?logo=vue.js&logoColor=42b883" alt="Take the Challenge"/></a> &nbsp;&nbsp;&nbsp;<a href="./README.zh-CN.md" target="_blank"><img src="https://img.shields.io/badge/-%E7%AE%80%E4%BD%93%E4%B8%AD%E6%96%87-gray" alt="简体中文"/></a> </p><!--info-header-end-->
 
 
-SFC `<style>` tags support linking CSS values to dynamic component.
+SFC `<style>` tags support linking CSS values to dynamic components.
 
-Do you know what's it, Let's try it 👇: 
+Do you know what it is?. Lets try it 👇: 
 
 ```vue
 <script setup>

questions/15-useToggle/App.vue

@@ -1,8 +1,8 @@
 <script setup lang='ts'>
 
 /**
- * Implement a composable function that toggle state
- * Make the function work fine
+ * Implement a composable function that toggles the state
+ * Make the function work correctly
 */
 function useToggle() {
 

questions/15-useToggle/README.md

@@ -1,15 +1,15 @@
 <!--info-header-start--><h1>useToggle <img src="https://img.shields.io/badge/-medium-d9901a" alt="medium"/> <img src="https://img.shields.io/badge/-%23Composable%20Function-999" alt="#Composable Function"/></h1><blockquote><p>By webfansplz <a href="https://github.com/webfansplz" target="_blank">@webfansplz</a></p></blockquote><p><a href="https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cCBsYW5nPSd0cyc+XG5cbi8qKlxuICogSW1wbGVtZW50IGEgY29tcG9zYWJsZSBmdW5jdGlvbiB0aGF0IHRvZ2dsZSBzdGF0ZVxuICogTWFrZSB0aGUgZnVuY3Rpb24gd29yayBmaW5lXG4qL1xuZnVuY3Rpb24gdXNlVG9nZ2xlKCkge1xuXG59XG5cbmNvbnN0IFtzdGF0ZSwgdG9nZ2xlXSA9IHVzZVRvZ2dsZShmYWxzZSlcblxuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cbiAgPHA+U3RhdGU6IHt7IHN0YXRlID8gJ09OJyA6ICdPRkYnIH19PC9wPlxuICA8cCBAY2xpY2s9XCJ0b2dnbGVcIj5cbiAgICBUb2dnbGUgc3RhdGVcbiAgPC9wPlxuPC90ZW1wbGF0ZT5cbiJ9" target="_blank"><img src="https://img.shields.io/badge/-Take%20the%20Challenge-213547?logo=vue.js&logoColor=42b883" alt="Take the Challenge"/></a> &nbsp;&nbsp;&nbsp;<a href="./README.zh-CN.md" target="_blank"><img src="https://img.shields.io/badge/-%E7%AE%80%E4%BD%93%E4%B8%AD%E6%96%87-gray" alt="简体中文"/></a> </p><!--info-header-end-->
 
 
-For this challenge, we'll start write composable function. Let's start with `useToggle` 👇: 
+For this challenge, we'll start by creating a composable function. Lets start with `useToggle` 👇: 
 
 
 ```vue
 <script setup lang='ts'>
 
 /**
- * Implement a composable function that toggle state
- * Make the function work fine
+ * Implement a composable function that toggles the state
+ * Make the function work correctly
 */
 function useToggle() {