Update all live preview links and add new ones

Author: selimbiber

AgeCalculator/README.md

@@ -1,12 +1,12 @@
 # Age Calculator | Yaş Hesaplayıcı
 
-Bu yaş hesaplama uygulaması ile kullanıcıdan doğum tarihi bilgileri gün, ay ve yıl şeklinde alınıyor. 
+Bu yaş hesaplama uygulaması ile kullanıcıdan doğum tarihi bilgileri gün, ay ve yıl şeklinde alınıyor.
 Doğum tarihi bilgileri, güncel tarih bilgisinden çıkartılarak kullanıcının mevcut yaşı hesaplanıyor.
-Kullanıcının mevcut yaşı uygulamanın sonuç kısmında kullanıcıya gösteriliyor. 
+Kullanıcının mevcut yaşı uygulamanın sonuç kısmında kullanıcıya gösteriliyor.
 Eğer tarih bilgisi girilmezse uygulamanın sonuç kısmında kullanıcıya uyarı mesajı gösteriliyor.
 
 ## Project Description | Proje Açıklaması
 
 Bu uygulamayı [bu adresteki](https://demo.100jsprojects.com/age-calculator) orijinal haline bağlı kalarak yapmaya çalıştım.
 
-### [Live Preview Link | Canlı Önizleme Bağlantısı](https://htmlpreview.github.io/?https://github.com/selimbiber/Pure-JavaScript-Projects/blob/main/AgeCalculator/index.html)
+### [Live Preview Link | Canlı Önizleme Bağlantısı](https://selimbiber.github.io/Pure-JavaScript-Projects/AgeCalculator/)

ArticlePreviewComponent/README.md

@@ -14,12 +14,13 @@ Your challenge is to build out this article preview component and get it looking
 
 You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
 
-Your users should be able to: 
+Your users should be able to:
 
-- View the optimal layout for the component depending on their device's screen size 
+- View the optimal layout for the component depending on their device's screen size
 - See the social media share links when they click the share icon
 
 ## Table of contents
+
 - [Frontend Mentor - Article Preview Component solution](#frontend-mentor---article-preview-component-solution)
   - [Welcome! 👋](#welcome-)
   - [The challenge](#the-challenge)
@@ -65,7 +66,7 @@ Your users should be able to:
 ### Links
 
 - [Solution URL](https://www.frontendmentor.io/solutions/article-preview-component-0aF5h1XfnW)
-- [Live Site URL](https://htmlpreview.github.io/?https://github.com/selimbiber/Pure-JavaScript-Projects/blob/main/ArticlePreviewComponent/index.html)
+- [Live Site URL](https://selimbiber.github.io/Pure-JavaScript-Projects/ArticlePreviewComponent/)
 
 ## My process
 

AsianKitchensMenu/README.md

@@ -4,4 +4,4 @@
 
 ## [Patika Academy - Frontend 101 - JavaScript Homework](https://academy.patika.dev/tr/courses/javascript/odev3)
 
-### [Preview Link](https://htmlpreview.github.io/?https://github.com/selimbiber/Pure-JavaScript-Projects/blob/main/AsianKitchensMenu/index.html)
+### [Preview Link](https://selimbiber.github.io/Pure-JavaScript-Projects/AsianKitchensMenu/)

CrowdfundingProductPage/README.md

@@ -16,16 +16,17 @@ Your challenge is to build out this Intro section with dropdown navigation and g
 
 You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
 
-Your users should be able to: 
+Your users should be able to:
 
-- View the optimal layout depending on their device's screen size 
-- See hover states for interactive elements 
-- Make a selection of which pledge to make 
-- See an updated progress bar and total money raised based on their pledge total after confirming a pledge 
-- See the number of total backers increment by one after confirming a pledge 
+- View the optimal layout depending on their device's screen size
+- See hover states for interactive elements
+- Make a selection of which pledge to make
+- See an updated progress bar and total money raised based on their pledge total after confirming a pledge
+- See the number of total backers increment by one after confirming a pledge
 - Toggle whether or not the product is bookmarked
 
 ## Table of contents
+
 - [Frontend Mentor - Crowdfunding product page](#frontend-mentor---crowdfunding-product-page)
   - [Welcome! 👋](#welcome-)
   - [The challenge](#the-challenge)
@@ -93,7 +94,7 @@ Your users should be able to:
 ### Links
 
 - [Solution URL](https://www.frontendmentor.io/solutions/crowdfunding-product-page-23zuFrCDhl)
-- [Live Site URL](https://htmlpreview.github.io/?https://github.com/selimbiber/Pure-JavaScript-Projects/blob/main/CrowdfundingProductPage/index.html)
+- [Live Site URL](https://selimbiber.github.io/Pure-JavaScript-Projects/CrowdfundingProductPage/)
 
 ## My process
 

DropdownNavigation/README.md

@@ -14,13 +14,14 @@ Your challenge is to build out this Intro section with dropdown navigation and g
 
 You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
 
-Your users should be able to: 
+Your users should be able to:
 
-- View the relevant dropdown menus on desktop and mobile when interacting with the navigation links 
-- View the optimal layout for the content depending on their device's screen size 
+- View the relevant dropdown menus on desktop and mobile when interacting with the navigation links
+- View the optimal layout for the content depending on their device's screen size
 - See hover states for all interactive elements on the page
 
 ## Table of contents
+
 - [Frontend Mentor - Intro section with dropdown navigation](#frontend-mentor---intro-section-with-dropdown-navigation)
   - [Welcome! 👋](#welcome-)
   - [The challenge](#the-challenge)
@@ -71,11 +72,10 @@ Your users should be able to:
 
 ![desktop-design-active](https://github.com/selimbiber/Pure-JavaScript-Projects/assets/117529414/3be4096a-6e25-464b-a9e1-dce24c57c944)
 
-
 ### Links
 
 - [Solution URL](https://www.frontendmentor.io/solutions/intro-section-with-dropdown-navigation-BDD3P2F3nd)
-- [Live Site URL](https://htmlpreview.github.io/?https://github.com/selimbiber/Pure-JavaScript-Projects/blob/main/DropdownNavigation/index.html)
+- [Live Site URL](https://selimbiber.github.io/Pure-JavaScript-Projects/DropdownNavigation/)
 
 ## My process
 

ExpensesChartComponent/README.md

@@ -8,23 +8,24 @@ Thanks for checking out this front-end coding challenge.
 
 **To do this challenge, you need a basic understanding of HTML, CSS and JavaScript.**
 
-## The challenge 
+## The challenge
 
-Your challenge is to build out this bar chart component and get it looking as close to the design as possible. 
-You can use any tools you like to help you complete the challenge. 
-So if you've got something you'd like to practice, feel free to give it a go. 
+Your challenge is to build out this bar chart component and get it looking as close to the design as possible.
+You can use any tools you like to help you complete the challenge.
+So if you've got something you'd like to practice, feel free to give it a go.
 
-We provide the data for the chart in a local `data.json` file. So you can use that to dynamically add the bars if you choose. 
+We provide the data for the chart in a local `data.json` file. So you can use that to dynamically add the bars if you choose.
 
-Your users should be able to: 
+Your users should be able to:
 
-- View the bar chart and hover over the individual bars to see the correct amounts for each day 
-- See the current day's bar highlighted in a different colour to the other bars 
-- View the optimal layout for the content depending on their device's screen size 
-- See hover states for all interactive elements on the page 
+- View the bar chart and hover over the individual bars to see the correct amounts for each day
+- See the current day's bar highlighted in a different colour to the other bars
+- View the optimal layout for the content depending on their device's screen size
+- See hover states for all interactive elements on the page
 - **Bonus**: See dynamically generated bars based on the data provided in the local JSON file
 
 ## Table of contents
+
 - [Frontend Mentor - Expenses chart component](#frontend-mentor---expenses-chart-component)
   - [Welcome! 👋](#welcome-)
   - [The challenge](#the-challenge)
@@ -70,7 +71,7 @@ Your users should be able to:
 ### Links
 
 - [Solution URL](https://www.frontendmentor.io/solutions/expenses-chart-component-7U0eSN0gjT)
-- [Live Site URL](https://htmlpreview.github.io/?https://github.com/selimbiber/Pure-JavaScript-Projects/blob/main/ExpensesChartComponent/index.html)
+- [Live Site URL](https://selimbiber.github.io/Pure-JavaScript-Projects/ExpensesChartComponent/)
 
 ## My process
 

FAQ-accordion-card/README.md

@@ -21,6 +21,7 @@ Users should be able to:
 - Hide/Show the answer to a question when the question is clicked
 
 ## Table of contents
+
 - [Frontend Mentor - FAQ accordion card solution](#frontend-mentor---faq-accordion-card-solution)
   - [Welcome! 👋](#welcome-)
   - [The challenge](#the-challenge)
@@ -62,7 +63,7 @@ Users should be able to:
 ### Links
 
 - [Solution URL](https://www.frontendmentor.io/solutions/faq-accordion-card-bjO2OipBRD)
-- [Live Site URL](https://htmlpreview.github.io/?https://github.com/selimbiber/Pure-JavaScript-Projects/blob/main/FAQ-accordion-card/index.html)
+- [Live Site URL](https://selimbiber.github.io/Pure-JavaScript-Projects/FAQ-accordion-card/)
 
 ## My process
 

InteractiveCardDetailsForm/README.md

@@ -14,25 +14,26 @@ Your challenge is to build out this Interactive card details form and get it loo
 
 You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
 
-Your users should be able to: 
+Your users should be able to:
 
-- Fill in the form and see the card details update in real-time 
-- Receive error messages when the form is submitted if: 
-  - Any input field is empty 
-  - The card number, expiry date, or CVC fields are in the wrong format 
-- View the optimal layout depending on their device's screen size 
+- Fill in the form and see the card details update in real-time
+- Receive error messages when the form is submitted if:
+  - Any input field is empty
+  - The card number, expiry date, or CVC fields are in the wrong format
+- View the optimal layout depending on their device's screen size
 - See hover, active, and focus states for interactive elements on the page
 
-## Expected behaviour 
+## Expected behaviour
 
-- Update the details on the card as the user fills in the fields 
-- Validate the form fields when the form is submitted 
-- If there are no errors, display the completed state 
-- Reset the form when the user clicks "Continue" on the completed state 
+- Update the details on the card as the user fills in the fields
+- Validate the form fields when the form is submitted
+- If there are no errors, display the completed state
+- Reset the form when the user clicks "Continue" on the completed state
 
 **⚠️ IMPORTANT ⚠️: When you create the live version of your project, we recommmend giving it a random name for the URL. This is because with it being a fake credit card form, some browsers will open a warning notice before people can access your project. So it's best to name the project something unrelated to credit cards so that browsers don't show the warning to people viewing your project.**
 
 ## Table of contents
+
 - [Frontend Mentor - Interactive card details form](#frontend-mentor---interactive-card-details-form)
   - [Welcome! 👋](#welcome-)
   - [The challenge](#the-challenge)
@@ -87,7 +88,7 @@ Your users should be able to:
 ### Links
 
 - [Solution URL](https://www.frontendmentor.io/solutions/interactive-card-details-form-crKczW-Sv5)
-- [Live Site URL](https://htmlpreview.github.io/?https://github.com/selimbiber/Pure-JavaScript-Projects/blob/main/InteractiveCardDetailsForm/index.html)
+- [Live Site URL](https://selimbiber.github.io/Pure-JavaScript-Projects/InteractiveCardDetailsForm/)
 
 ## My process
 

InteractivePricingComponent/README.md

@@ -33,6 +33,7 @@ Here are the different page view ranges and the corresponding monthly price tota
 If the visitor switches the toggle to yearly billing, a 25% discount should be applied to all prices.
 
 ## Table of contents
+
 - [Frontend Mentor - Interactive pricing component](#frontend-mentor---interactive-pricing-component)
   - [Welcome! 👋](#welcome-)
   - [The challenge](#the-challenge)
@@ -68,7 +69,7 @@ If the visitor switches the toggle to yearly billing, a 25% discount should be a
 ### Project Links
 
 - [Frontend Mentor Solution](https://www.frontendmentor.io/solutions/interactive-pricing-component-KLtXXBiFXn)
-- [Live Preview Link](https://htmlpreview.github.io/?https://github.com/selimbiber/Pure-JavaScript-Projects/blob/main/InteractivePricingComponent/dist/index.html)
+- [Live Preview Link](https://selimbiber.github.io/Pure-JavaScript-Projects/InteractivePricingComponent/dist/)
 
 ## Project Author
 

InteractiveRatingComponent/README.md

@@ -22,6 +22,7 @@ Your users should be able to:
 - See the "Thank you" card state after submitting a rating
 
 ## Table of contents
+
 - [Frontend Mentor - Interactive rating component](#frontend-mentor---interactive-rating-component)
   - [Welcome! 👋](#welcome-)
   - [The challenge](#the-challenge)
@@ -67,7 +68,7 @@ Your users should be able to:
 ### Links
 
 - [Solution URL](https://www.frontendmentor.io/solutions/interactive-rating-component-ufwwSpkAW0)
-- [Live Site URL](https://htmlpreview.github.io/?https://github.com/selimbiber/Pure-JavaScript-Projects/blob/main/InteractiveRatingComponent/index.html)
+- [Live Site URL](https://selimbiber.github.io/Pure-JavaScript-Projects/InteractiveRatingComponent/)
 
 ## My process
 

LoadingBar/README.md

@@ -6,7 +6,7 @@
 
 I find it easy and fun to make javascript projects from 100jsproject.com. My main goal in making these simple projects, even on a micro scale, is to use javascript more effectively and improve my skills in writing legible and maintainable code.
 
-### [Preview Link | Önizleme Bağlantısı](https://htmlpreview.github.io/?https://github.com/selimbiber/PureJavaScriptProjects/blob/main/LoadingBar/index.html)
+### [Preview Link | Önizleme Bağlantısı](https://selimbiber.github.io/Pure-JavaScript-Projects/LoadingBar/)
 
 #### [Profile Links | Profil Bağlantıları](https://github.com/selimbiber/)
 

LoanCalculator/README.md

@@ -6,7 +6,7 @@
 
 I find it easy and fun to make javascript projects from 100jsproject.com. My main goal in making these simple projects, even on a micro scale, is to use javascript more effectively and improve my skills in writing legible and maintainable code.
 
-### [Preview Link | Önizleme Bağlantısı](https://htmlpreview.github.io/?https://github.com/selimbiber/PureJavaScriptProjects/blob/main/LoanCalculator/index.html)
+### [Preview Link | Önizleme Bağlantısı](https://selimbiber.github.io/Pure-JavaScript-Projects/LoanCalculator/)
 
 #### [Profile Links | Profil Bağlantıları](https://github.com/selimbiber/)
 

MouseEvent/README.md

@@ -6,7 +6,7 @@
 
 I find it easy and fun to make javascript projects from 100jsproject.com. My main goal in making these simple projects, even on a micro scale, is to use javascript more effectively and improve my skills in writing legible and maintainable code.
 
-### [Preview Link | Önizleme Bağlantısı](https://htmlpreview.github.io/?https://github.com/selimbiber/PureJavaScriptProjects/blob/main/MouseEvent/index.html)
+### [Preview Link | Önizleme Bağlantısı](https://selimbiber.github.io/Pure-JavaScript-Projects/MouseEvent/)
 
 #### [Profile Links | Profil Bağlantıları](https://github.com/selimbiber/)
 

NewsHomepage/README.md

@@ -16,10 +16,11 @@ You can use any tools you like to help you complete the challenge. So if you've
 
 Your users should be able to:
 
--   View the optimal layout for the interface depending on their device's screen size
--   See hover and focus states for all interactive elements on the page
+- View the optimal layout for the interface depending on their device's screen size
+- See hover and focus states for all interactive elements on the page
 
 ## Table of contents
+
 - [Frontend Mentor - News homepage](#frontend-mentor---news-homepage)
   - [Welcome! 👋](#welcome-)
   - [The challenge](#the-challenge)
@@ -67,7 +68,7 @@ Your users should be able to:
 ### Links
 
 - [Solution URL](https://www.frontendmentor.io/solutions/news-homepage-fHj_5HNMGJ)
-- [Live Site URL](https://htmlpreview.github.io/?https://github.com/selimbiber/Pure-JavaScript-Projects/blob/main/NewsHomepage/index.html)
+- [Live Site URL](https://selimbiber.github.io/Pure-JavaScript-Projects/NewsHomepage/)
 
 ## My process
 

NewsletterSign-upForm/README.md

@@ -14,17 +14,18 @@ Your challenge is to build out this Newsletter sign-up form with success message
 
 You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
 
-Your users should be able to: 
-
-- Add their email and submit the form 
-- See a success message with their email after successfully submitting the form 
-- See form validation messages if: 
-  - The field is left empty 
-  - The email address is not formatted correctly 
-- View the optimal layout for the interface depending on their device's screen size 
+Your users should be able to:
+
+- Add their email and submit the form
+- See a success message with their email after successfully submitting the form
+- See form validation messages if:
+  - The field is left empty
+  - The email address is not formatted correctly
+- View the optimal layout for the interface depending on their device's screen size
 - See hover and focus states for all interactive elements on the page
 
 ## Table of contents
+
 - [Frontend Mentor - Newsletter sign-up form with success message](#frontend-mentor---newsletter-sign-up-form-with-success-message)
   - [Welcome! 👋](#welcome-)
   - [The challenge](#the-challenge)
@@ -82,7 +83,7 @@ Your users should be able to:
 ### Links
 
 - [Solution URL](https://www.frontendmentor.io/solutions/newsletter-signup-form-WaNlEvgV4q)
-- [Live Site URL](https://htmlpreview.github.io/?https://github.com/selimbiber/Pure-JavaScript-Projects/blob/main/NewsletterSign-upForm/index.html)
+- [Live Site URL](https://selimbiber.github.io/Pure-JavaScript-Projects/NewsletterSign-upForm/)
 
 ## My process
 

OnlineLibrary/README.md

@@ -22,4 +22,4 @@ Features planned to be developed in later versions of the project:
 - Mobile-first workflow
 - Pure JavaScript
 
-#### [Live Site URL](https://htmlpreview.github.io/?https://github.com/selimbiber/Pure-JavaScript-Projects/blob/main/OnlineLibrary/index.html)
+#### [Live Site URL](https://selimbiber.github.io/Pure-JavaScript-Projects/OnlineLibrary/)

PingComingSoonPage/README.md

@@ -14,15 +14,16 @@ Your challenge is to build out this Sign-up Form and get it looking as close to
 
 You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
 
-Your users should be able to: 
+Your users should be able to:
 
-- View the optimal layout for the site depending on their device's screen size 
-- See hover states for all interactive elements on the page 
-- Submit their email address using an `input` field 
-- Receive an error message when the `form` is submitted if: 
-  - The `input` field is empty. The message for this error should say *"Whoops! It looks like you forgot to add your email"* - The email address is not formatted correctly (i.e. a correct email address should have this structure: `[email protected]`). The message for this error should say *"Please provide a valid email address"*
+- View the optimal layout for the site depending on their device's screen size
+- See hover states for all interactive elements on the page
+- Submit their email address using an `input` field
+- Receive an error message when the `form` is submitted if:
+  - The `input` field is empty. The message for this error should say _"Whoops! It looks like you forgot to add your email"_ - The email address is not formatted correctly (i.e. a correct email address should have this structure: `[email protected]`). The message for this error should say _"Please provide a valid email address"_
 
 ## Table of contents
+
 - [Frontend Mentor - Ping coming soon page](#frontend-mentor---ping-coming-soon-page)
   - [Welcome! 👋](#welcome-)
   - [The challenge](#the-challenge)
@@ -69,7 +70,7 @@ Your users should be able to:
 ### Links
 
 - [Solution URL](https://www.frontendmentor.io/solutions/ping-coming-soon-page-J2-zFOVhQi)
-- [Live Site URL](https://htmlpreview.github.io/?https://github.com/selimbiber/Pure-JavaScript-Projects/blob/main/PingComingSoonPage/index.html)
+- [Live Site URL](https://selimbiber.github.io/Pure-JavaScript-Projects/PingComingSoonPage/)
 
 ## My process