From 5010a7239c00640bad3913f598bfa266216c2910 Mon Sep 17 00:00:00 2001 From: Anshul Kumar <84836148+ianshulx@users.noreply.github.com> Date: Mon, 21 Oct 2024 15:33:58 +0530 Subject: [PATCH] Delete .history directory --- .history/projects_20241018182946.js | 261 --------------------------- .history/projects_20241018184418.js | 262 --------------------------- .history/projects_20241018184421.js | 262 --------------------------- .history/projects_20241018184423.js | 262 --------------------------- .history/projects_20241018184430.js | 268 ---------------------------- .history/projects_20241018184439.js | 268 ---------------------------- .history/projects_20241018184445.js | 268 ---------------------------- .history/projects_20241018184453.js | 268 ---------------------------- .history/projects_20241018184501.js | 268 ---------------------------- .history/projects_20241018184504.js | 268 ---------------------------- .history/projects_20241018184512.js | 268 ---------------------------- .history/projects_20241018184520.js | 268 ---------------------------- .history/projects_20241018184523.js | 268 ---------------------------- .history/projects_20241018184527.js | 268 ---------------------------- .history/projects_20241018184530.js | 268 ---------------------------- .history/projects_20241018184536.js | 268 ---------------------------- .history/projects_20241018184541.js | 268 ---------------------------- .history/projects_20241018184543.js | 268 ---------------------------- .history/projects_20241018184546.js | 268 ---------------------------- .history/projects_20241018184552.js | 268 ---------------------------- .history/projects_20241018184558.js | 268 ---------------------------- .history/projects_20241018184612.js | 268 ---------------------------- .history/projects_20241018184614.js | 268 ---------------------------- .history/projects_20241018184650.js | 268 ---------------------------- .history/projects_20241018184651.js | 268 ---------------------------- .history/projects_20241018184705.js | 268 ---------------------------- .history/projects_20241018184737.js | 268 ---------------------------- .history/projects_20241018184739.js | 268 ---------------------------- .history/projects_20241018184740.js | 268 ---------------------------- .history/projects_20241018184757.js | 268 ---------------------------- 30 files changed, 8015 deletions(-) delete mode 100644 .history/projects_20241018182946.js delete mode 100644 .history/projects_20241018184418.js delete mode 100644 .history/projects_20241018184421.js delete mode 100644 .history/projects_20241018184423.js delete mode 100644 .history/projects_20241018184430.js delete mode 100644 .history/projects_20241018184439.js delete mode 100644 .history/projects_20241018184445.js delete mode 100644 .history/projects_20241018184453.js delete mode 100644 .history/projects_20241018184501.js delete mode 100644 .history/projects_20241018184504.js delete mode 100644 .history/projects_20241018184512.js delete mode 100644 .history/projects_20241018184520.js delete mode 100644 .history/projects_20241018184523.js delete mode 100644 .history/projects_20241018184527.js delete mode 100644 .history/projects_20241018184530.js delete mode 100644 .history/projects_20241018184536.js delete mode 100644 .history/projects_20241018184541.js delete mode 100644 .history/projects_20241018184543.js delete mode 100644 .history/projects_20241018184546.js delete mode 100644 .history/projects_20241018184552.js delete mode 100644 .history/projects_20241018184558.js delete mode 100644 .history/projects_20241018184612.js delete mode 100644 .history/projects_20241018184614.js delete mode 100644 .history/projects_20241018184650.js delete mode 100644 .history/projects_20241018184651.js delete mode 100644 .history/projects_20241018184705.js delete mode 100644 .history/projects_20241018184737.js delete mode 100644 .history/projects_20241018184739.js delete mode 100644 .history/projects_20241018184740.js delete mode 100644 .history/projects_20241018184757.js diff --git a/.history/projects_20241018182946.js b/.history/projects_20241018182946.js deleted file mode 100644 index 5c3bbbed..00000000 --- a/.history/projects_20241018182946.js +++ /dev/null @@ -1,261 +0,0 @@ -// Please add your project details in the below array. -const projects = [ - { - title: "React Todo App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-todo-app", - description: "Start your coding journey with a beginner-friendly React Todo App, perfect for learning task management and basic web development", - imgSrc: "assets/todo.png" - }, - { - title: "React Weather app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Weather-app", - description: "Explore weather effortlessly with a beginner-friendly React Weather App, providing real-time forecasts and an intuitive user experience.", - imgSrc: "assets/weather.png" - }, - { - title: "React Stopwatch app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-stopwatch", - description: "Solidify your javascript concepts by making a React Stopwatch. You will learn how to manage javascript objects as state in React.", - imgSrc: "assets/stopwatch.png" - }, - { - title: "React Bank UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Bank-UI", - description: "Create an attractive landing page of your choice that will improve your designing skills.", - imgSrc: "assets/bank.png" - }, - { - title: "Movie Database App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Create a simple movie database app where you can search about movies. In this project you will learn about Card Components & how to manage dynamic data on page.", - imgSrc: "assets/movie.png" - }, - { - title: "React Expense Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/expense-tracker-react", - description: "Learn more about state management by creating an Expense Tracker.", - imgSrc: "assets/expense.png" - }, - { - title: "E-commerce Website React", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/E-commerce%20Website", - description: "React-based e-commerce site: Sleek design, vast product range, and secure checkout redefine online shopping.", - imgSrc: "assets/ecom.png" - }, - { - title: "GIF Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/GIF%20Generator", - description: "Experience the fun of GIF creation with our React-based GIF Generator. Easily create, customize, and share animated GIFs, adding excitement to your online conversations.", - imgSrc: "assets/gif.png" - }, - { - title: "Calculator App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/calculator-react", - description: "Experience the power of React with our intuitive Calculator app. Perform quick and accurate calculations with a sleek and user-friendly interface.", - imgSrc: "assets/calculator.png" - }, - { - title: "Meme App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/meme-app-react", - description: "Unleash your creativity with our React-powered Meme App. Craft and share hilarious memes effortlessly, adding humor to your social media.", - imgSrc: "assets/meme.png" - }, - { - title: "React Music App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-music-player", - description: "Immerse yourself in the world of music with our React-based Music Player. Enjoy seamless playback, playlist management, and a dynamic audio experience.", - imgSrc: "assets/music.png" - }, - { - title: "Quote Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/quotesgenerator", - description: "Get inspired with our React-based Quote Generator. Discover wisdom, motivation, and creativity at your fingertips, one quote at a time.", - imgSrc: "assets/quote.png" - }, - { - title: "Password Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react_password_generator", - description: "Boost your online security with our React Password Generator. Create strong, randomized passwords effortlessly to safeguard your digital life.", - imgSrc: "assets/password.png" - }, - { - title: "Score Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Score", - description: "ScoreKeeper app is applicable to any points-based game. It helps in accurately managing and keeping track of the score board, and displays the winner as well.", - imgSrc: "assets/score.png" - }, - { - title: "Riot Games Clone UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Riot-Games-Landing-Page-Clone", - description: "Riot Games Clone: A React project replicating the essence of Riot Games' popular gaming platform, offering a diverse gaming experience.", - imgSrc: "assets/riot.png" - }, - { - title: "Stock Dashboard", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Stock_Dashboard", - description: "This project gives the stock results for the unique company details and uses charts to display their historical and future predictions.", - imgSrc: "assets/stock.png" - }, - { - title: "QR Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/QR_Generator", - description: "A dynamic QR Code Generator that generates new QR codes for every input text or URL.", - imgSrc: "assets/qr.png" - }, - { - title: "Color Palette Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Color-Palette-Generator", - description: "A beautiful Color Palette Generator that generates harmonious color schemes with a click and easily copies hex codes. A useful tool for designers and developers.", - imgSrc: "assets/color.png" - }, - { - title: "Blob Generator", - url: "https://github.com/ojasggg/React-projects-for-beginners/tree/main/Blob_Generator", - description: "Simple Application useful for creators and designers who require unique Blob CSS code.", - imgSrc: "assets/blob.png" - }, - { - title: "Sorting Algorithm Visualizer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/soritng_algorithm_visualizer", - description: "This application has most of the sorting algorithms used in DSA and has a visual representation of how these sorting algorithms work in the background using clean UI in React.", - imgSrc: "assets/algorithm.png" - }, - { - title: "Web3 Theme Landing Page", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/web3_landing_page", - description: "Landing Page for Web3 applications. Used TailwindCSS for design and aos for minor animations.", - imgSrc: "assets/web3.png" - }, - { - title: "Text to Speech Converter", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/text_to_speech", - description: "Simple Website helpful to convert text written in the text area into voices. Controller of voice, sound, pitch and speed options are also provided.", - imgSrc: "assets/text2speech.png" - }, - { - title: "YouTube Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/youtube-clone", - description: "Explore this YouTube clone project where I've recreated the core functionalities of YouTube using React, HTML, CSS, and JavaScript. Experience seamless video playback, user authentication, and video upload functionalities in this beginner-friendly project.", - imgSrc: "assets/youtube.png" - }, - { - title: "Tic-Tac-Toe Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Tic-Tac-toe", - description: "Tic-Tac-Toe Game is a classic two-player game where opponents strategically place Xs and Os on a 3x3 grid, aiming to achieve a winning pattern of three in a row, column, or diagonal.", - imgSrc: "assets/tic.png" - }, - { - title: "Taskify Project", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Taskify-Project", - description: "Taskify-Project is an organizational tool designed to streamline project management, enabling users to create, assign, and track tasks efficiently within a collaborative environment.", - imgSrc: "assets/task.png" - }, - { - title: "Simple Movie Search", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Simple Movie Search is a straightforward tool allowing users to search for movies by title, providing basic information such as release year, genre, and synopsis.", - imgSrc: "assets/smovie.png" - }, - { - title: "Shopapp Redux", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/shopapp%20redux", - description: "Shop App Redux is a streamlined shopping experience powered by Redux, enhancing state management for seamless user interactions and efficient data handling.", - imgSrc: "assets/shop.png" - }, - { - title: "React Tenzies App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-tenzies-game", - description: "React Tenzies App is a web application built using the React JavaScript library, simulating the dice game Tenzi where players race to roll their dice to match a specific pattern, showcasing React's dynamic user interface capabilities.", - imgSrc: "assets/teniz.png" - }, - { - title: "Quiz Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Quiz-Game", - description: "Quiz Game is an interactive application that challenges players with questions on various topics, providing entertainment and opportunities for learning and testing knowledge.", - imgSrc: "assets/quiz.png" - }, - { - title: "Personal Portfolio", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Personal%20Portfolio", - description: "Personal Portfolio is a digital showcase of an individual's work, skills, and achievements, serving as a professional portfolio to highlight expertise and attract potential clients or employers.", - imgSrc: "assets/portfolio.png" - }, - { - title: "Dice App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Dice-App", - description: "A virtual dice-rolling application that simulates the randomness of traditional dice, offering convenience for various tabletop games and decision-making scenarios.", - imgSrc: "assets/dice.png" - }, - { - title: "Covid-19 Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Covid-19_Tracker", - description: "A tool for monitoring and visualizing real-time data on coronavirus cases, including infections, recoveries, and fatalities globally or regionally.", - imgSrc: "assets/covid.png" - }, - { - title: "Bank-KYC Form", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Bank-KYC-Form", - description: "A document where customers provide personal information and identification documents to comply with Know Your Customer regulations, ensuring legal and security compliance for banking services.", - imgSrc: "assets/kyc.png" - }, - { - title: "Guess the Number Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Guess-the-number-react-app-main", - description: "In the React Guess the Number Game, you try to figure out a secret number by making guesses.", - imgSrc: "assets/guess.png" - }, - { - title: "Myth Weaver - Ai Story Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Myth-Weaver", - description: "Myth Weaver is a story-creating AI model. Just give a few prompts, and it will provide you with 5 short stories, each 60 words long.", - imgSrc: "assets/story.png" - }, - { - title: "Twitter Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/twitter_clone/Twitter-Final-main", - description: "This is a simple Twitter Clone implementing the core features of Twitter.", - imgSrc: "assets/twitter.png" - }, - { - title: "Spotify Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Spotify-Clone", - description: "This is a simple Spotify Clone implementing the core features of Spotify. All the important functionalities of Spotify are implemented and the backend part is there for those who need it.", - imgSrc: "assets/spotify.png" - }, - { - title: "Markdown Previewer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Markdown-Previewer", - description: "Text to show on Hover", - imgSrc: "assets/mark.png" - }, - { - title: "Kanban: Drag & Drop Board", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/draganddrop-board", - description: "Its a simple drag and drop kanban style board to manage tasks", - imgSrc: "assets/drag-and-drop.png" - }, - { - title: "ChatGram - Real Time Chat Application", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/chatgram", - description: "Real Time Chatting Application", - imgSrc: "assets/ChatGram.png" - } -]; - -const container = document.getElementById('projects-container'); - -projects.forEach(project => { - const projectDiv = document.createElement('div'); - projectDiv.className = 'col-md-2 mb-4 d-md-inline-block'; - projectDiv.innerHTML = ` -
- React App -
- -
${project.title}
-
-
-
- `; - container.appendChild(projectDiv); -}); \ No newline at end of file diff --git a/.history/projects_20241018184418.js b/.history/projects_20241018184418.js deleted file mode 100644 index 8fb03e5e..00000000 --- a/.history/projects_20241018184418.js +++ /dev/null @@ -1,262 +0,0 @@ -// Please add your project details in the below array. -const projects = [ - { - title: "React Todo App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-todo-app", - description: "Start your coding journey with a beginner-friendly React Todo App, perfect for learning task management and basic web development", - imgSrc: "assets/todo.png" - }, - { - title: "React Weather app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Weather-app", - description: "Explore weather effortlessly with a beginner-friendly React Weather App, providing real-time forecasts and an intuitive user experience.", - imgSrc: "assets/weather.png" - }, - { - title: "React Stopwatch app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-stopwatch", - description: "Solidify your javascript concepts by making a React Stopwatch. You will learn how to manage javascript objects as state in React.", - imgSrc: "assets/stopwatch.png" - }, - { - title: "React Bank UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Bank-UI", - description: "Create an attractive landing page of your choice that will improve your designing skills.", - imgSrc: "assets/bank.png" - }, - { - title: "Movie Database App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Create a simple movie database app where you can search about movies. In this project you will learn about Card Components & how to manage dynamic data on page.", - imgSrc: "assets/movie.png" - }, - { - title: "React Expense Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/expense-tracker-react", - description: "Learn more about state management by creating an Expense Tracker.", - imgSrc: "assets/expense.png" - }, - { - title: "E-commerce Website React", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/E-commerce%20Website", - description: "React-based e-commerce site: Sleek design, vast product range, and secure checkout redefine online shopping.", - imgSrc: "assets/ecom.png" - }, - { - title: "GIF Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/GIF%20Generator", - description: "Experience the fun of GIF creation with our React-based GIF Generator. Easily create, customize, and share animated GIFs, adding excitement to your online conversations.", - imgSrc: "assets/gif.png" - }, - { - title: "Calculator App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/calculator-react", - description: "Experience the power of React with our intuitive Calculator app. Perform quick and accurate calculations with a sleek and user-friendly interface.", - imgSrc: "assets/calculator.png" - }, - { - title: "Meme App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/meme-app-react", - description: "Unleash your creativity with our React-powered Meme App. Craft and share hilarious memes effortlessly, adding humor to your social media.", - imgSrc: "assets/meme.png" - }, - { - title: "React Music App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-music-player", - description: "Immerse yourself in the world of music with our React-based Music Player. Enjoy seamless playback, playlist management, and a dynamic audio experience.", - imgSrc: "assets/music.png" - }, - { - title: "Quote Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/quotesgenerator", - description: "Get inspired with our React-based Quote Generator. Discover wisdom, motivation, and creativity at your fingertips, one quote at a time.", - imgSrc: "assets/quote.png" - }, - { - title: "Password Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react_password_generator", - description: "Boost your online security with our React Password Generator. Create strong, randomized passwords effortlessly to safeguard your digital life.", - imgSrc: "assets/password.png" - }, - { - title: "Score Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Score", - description: "ScoreKeeper app is applicable to any points-based game. It helps in accurately managing and keeping track of the score board, and displays the winner as well.", - imgSrc: "assets/score.png" - }, - { - title: "Riot Games Clone UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Riot-Games-Landing-Page-Clone", - description: "Riot Games Clone: A React project replicating the essence of Riot Games' popular gaming platform, offering a diverse gaming experience.", - imgSrc: "assets/riot.png" - }, - { - title: "Stock Dashboard", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Stock_Dashboard", - description: "This project gives the stock results for the unique company details and uses charts to display their historical and future predictions.", - imgSrc: "assets/stock.png" - }, - { - title: "QR Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/QR_Generator", - description: "A dynamic QR Code Generator that generates new QR codes for every input text or URL.", - imgSrc: "assets/qr.png" - }, - { - title: "Color Palette Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Color-Palette-Generator", - description: "A beautiful Color Palette Generator that generates harmonious color schemes with a click and easily copies hex codes. A useful tool for designers and developers.", - imgSrc: "assets/color.png" - }, - { - title: "Blob Generator", - url: "https://github.com/ojasggg/React-projects-for-beginners/tree/main/Blob_Generator", - description: "Simple Application useful for creators and designers who require unique Blob CSS code.", - imgSrc: "assets/blob.png" - }, - { - title: "Sorting Algorithm Visualizer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/soritng_algorithm_visualizer", - description: "This application has most of the sorting algorithms used in DSA and has a visual representation of how these sorting algorithms work in the background using clean UI in React.", - imgSrc: "assets/algorithm.png" - }, - { - title: "Web3 Theme Landing Page", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/web3_landing_page", - description: "Landing Page for Web3 applications. Used TailwindCSS for design and aos for minor animations.", - imgSrc: "assets/web3.png" - }, - { - title: "Text to Speech Converter", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/text_to_speech", - description: "Simple Website helpful to convert text written in the text area into voices. Controller of voice, sound, pitch and speed options are also provided.", - imgSrc: "assets/text2speech.png" - }, - { - title: "YouTube Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/youtube-clone", - description: "Explore this YouTube clone project where I've recreated the core functionalities of YouTube using React, HTML, CSS, and JavaScript. Experience seamless video playback, user authentication, and video upload functionalities in this beginner-friendly project.", - imgSrc: "assets/youtube.png" - }, - { - title: "Tic-Tac-Toe Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Tic-Tac-toe", - description: "Tic-Tac-Toe Game is a classic two-player game where opponents strategically place Xs and Os on a 3x3 grid, aiming to achieve a winning pattern of three in a row, column, or diagonal.", - imgSrc: "assets/tic.png" - }, - { - title: "Taskify Project", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Taskify-Project", - description: "Taskify-Project is an organizational tool designed to streamline project management, enabling users to create, assign, and track tasks efficiently within a collaborative environment.", - imgSrc: "assets/task.png" - }, - { - title: "Simple Movie Search", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Simple Movie Search is a straightforward tool allowing users to search for movies by title, providing basic information such as release year, genre, and synopsis.", - imgSrc: "assets/smovie.png" - }, - { - title: "Shopapp Redux", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/shopapp%20redux", - description: "Shop App Redux is a streamlined shopping experience powered by Redux, enhancing state management for seamless user interactions and efficient data handling.", - imgSrc: "assets/shop.png" - }, - { - title: "React Tenzies App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-tenzies-game", - description: "React Tenzies App is a web application built using the React JavaScript library, simulating the dice game Tenzi where players race to roll their dice to match a specific pattern, showcasing React's dynamic user interface capabilities.", - imgSrc: "assets/teniz.png" - }, - { - title: "Quiz Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Quiz-Game", - description: "Quiz Game is an interactive application that challenges players with questions on various topics, providing entertainment and opportunities for learning and testing knowledge.", - imgSrc: "assets/quiz.png" - }, - { - title: "Personal Portfolio", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Personal%20Portfolio", - description: "Personal Portfolio is a digital showcase of an individual's work, skills, and achievements, serving as a professional portfolio to highlight expertise and attract potential clients or employers.", - imgSrc: "assets/portfolio.png" - }, - { - title: "Dice App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Dice-App", - description: "A virtual dice-rolling application that simulates the randomness of traditional dice, offering convenience for various tabletop games and decision-making scenarios.", - imgSrc: "assets/dice.png" - }, - { - title: "Covid-19 Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Covid-19_Tracker", - description: "A tool for monitoring and visualizing real-time data on coronavirus cases, including infections, recoveries, and fatalities globally or regionally.", - imgSrc: "assets/covid.png" - }, - { - title: "Bank-KYC Form", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Bank-KYC-Form", - description: "A document where customers provide personal information and identification documents to comply with Know Your Customer regulations, ensuring legal and security compliance for banking services.", - imgSrc: "assets/kyc.png" - }, - { - title: "Guess the Number Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Guess-the-number-react-app-main", - description: "In the React Guess the Number Game, you try to figure out a secret number by making guesses.", - imgSrc: "assets/guess.png" - }, - { - title: "Myth Weaver - Ai Story Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Myth-Weaver", - description: "Myth Weaver is a story-creating AI model. Just give a few prompts, and it will provide you with 5 short stories, each 60 words long.", - imgSrc: "assets/story.png" - }, - { - title: "Twitter Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/twitter_clone/Twitter-Final-main", - description: "This is a simple Twitter Clone implementing the core features of Twitter.", - imgSrc: "assets/twitter.png" - }, - { - title: "Spotify Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Spotify-Clone", - description: "This is a simple Spotify Clone implementing the core features of Spotify. All the important functionalities of Spotify are implemented and the backend part is there for those who need it.", - imgSrc: "assets/spotify.png" - }, - { - title: "Markdown Previewer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Markdown-Previewer", - description: "Text to show on Hover", - imgSrc: "assets/mark.png" - }, - { - title: "Kanban: Drag & Drop Board", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/draganddrop-board", - description: "Its a simple drag and drop kanban style board to manage tasks", - imgSrc: "assets/drag-and-drop.png" - }, - { - title: "ChatGram - Real Time Chat Application", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/chatgram", - description: "Real Time Chatting Application", - imgSrc: "assets/ChatGram.png" - }, - -]; - -const container = document.getElementById('projects-container'); - -projects.forEach(project => { - const projectDiv = document.createElement('div'); - projectDiv.className = 'col-md-2 mb-4 d-md-inline-block'; - projectDiv.innerHTML = ` -
- React App -
- -
${project.title}
-
-
-
- `; - container.appendChild(projectDiv); -}); \ No newline at end of file diff --git a/.history/projects_20241018184421.js b/.history/projects_20241018184421.js deleted file mode 100644 index 454d04e8..00000000 --- a/.history/projects_20241018184421.js +++ /dev/null @@ -1,262 +0,0 @@ -// Please add your project details in the below array. -const projects = [ - { - title: "React Todo App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-todo-app", - description: "Start your coding journey with a beginner-friendly React Todo App, perfect for learning task management and basic web development", - imgSrc: "assets/todo.png" - }, - { - title: "React Weather app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Weather-app", - description: "Explore weather effortlessly with a beginner-friendly React Weather App, providing real-time forecasts and an intuitive user experience.", - imgSrc: "assets/weather.png" - }, - { - title: "React Stopwatch app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-stopwatch", - description: "Solidify your javascript concepts by making a React Stopwatch. You will learn how to manage javascript objects as state in React.", - imgSrc: "assets/stopwatch.png" - }, - { - title: "React Bank UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Bank-UI", - description: "Create an attractive landing page of your choice that will improve your designing skills.", - imgSrc: "assets/bank.png" - }, - { - title: "Movie Database App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Create a simple movie database app where you can search about movies. In this project you will learn about Card Components & how to manage dynamic data on page.", - imgSrc: "assets/movie.png" - }, - { - title: "React Expense Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/expense-tracker-react", - description: "Learn more about state management by creating an Expense Tracker.", - imgSrc: "assets/expense.png" - }, - { - title: "E-commerce Website React", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/E-commerce%20Website", - description: "React-based e-commerce site: Sleek design, vast product range, and secure checkout redefine online shopping.", - imgSrc: "assets/ecom.png" - }, - { - title: "GIF Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/GIF%20Generator", - description: "Experience the fun of GIF creation with our React-based GIF Generator. Easily create, customize, and share animated GIFs, adding excitement to your online conversations.", - imgSrc: "assets/gif.png" - }, - { - title: "Calculator App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/calculator-react", - description: "Experience the power of React with our intuitive Calculator app. Perform quick and accurate calculations with a sleek and user-friendly interface.", - imgSrc: "assets/calculator.png" - }, - { - title: "Meme App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/meme-app-react", - description: "Unleash your creativity with our React-powered Meme App. Craft and share hilarious memes effortlessly, adding humor to your social media.", - imgSrc: "assets/meme.png" - }, - { - title: "React Music App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-music-player", - description: "Immerse yourself in the world of music with our React-based Music Player. Enjoy seamless playback, playlist management, and a dynamic audio experience.", - imgSrc: "assets/music.png" - }, - { - title: "Quote Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/quotesgenerator", - description: "Get inspired with our React-based Quote Generator. Discover wisdom, motivation, and creativity at your fingertips, one quote at a time.", - imgSrc: "assets/quote.png" - }, - { - title: "Password Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react_password_generator", - description: "Boost your online security with our React Password Generator. Create strong, randomized passwords effortlessly to safeguard your digital life.", - imgSrc: "assets/password.png" - }, - { - title: "Score Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Score", - description: "ScoreKeeper app is applicable to any points-based game. It helps in accurately managing and keeping track of the score board, and displays the winner as well.", - imgSrc: "assets/score.png" - }, - { - title: "Riot Games Clone UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Riot-Games-Landing-Page-Clone", - description: "Riot Games Clone: A React project replicating the essence of Riot Games' popular gaming platform, offering a diverse gaming experience.", - imgSrc: "assets/riot.png" - }, - { - title: "Stock Dashboard", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Stock_Dashboard", - description: "This project gives the stock results for the unique company details and uses charts to display their historical and future predictions.", - imgSrc: "assets/stock.png" - }, - { - title: "QR Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/QR_Generator", - description: "A dynamic QR Code Generator that generates new QR codes for every input text or URL.", - imgSrc: "assets/qr.png" - }, - { - title: "Color Palette Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Color-Palette-Generator", - description: "A beautiful Color Palette Generator that generates harmonious color schemes with a click and easily copies hex codes. A useful tool for designers and developers.", - imgSrc: "assets/color.png" - }, - { - title: "Blob Generator", - url: "https://github.com/ojasggg/React-projects-for-beginners/tree/main/Blob_Generator", - description: "Simple Application useful for creators and designers who require unique Blob CSS code.", - imgSrc: "assets/blob.png" - }, - { - title: "Sorting Algorithm Visualizer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/soritng_algorithm_visualizer", - description: "This application has most of the sorting algorithms used in DSA and has a visual representation of how these sorting algorithms work in the background using clean UI in React.", - imgSrc: "assets/algorithm.png" - }, - { - title: "Web3 Theme Landing Page", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/web3_landing_page", - description: "Landing Page for Web3 applications. Used TailwindCSS for design and aos for minor animations.", - imgSrc: "assets/web3.png" - }, - { - title: "Text to Speech Converter", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/text_to_speech", - description: "Simple Website helpful to convert text written in the text area into voices. Controller of voice, sound, pitch and speed options are also provided.", - imgSrc: "assets/text2speech.png" - }, - { - title: "YouTube Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/youtube-clone", - description: "Explore this YouTube clone project where I've recreated the core functionalities of YouTube using React, HTML, CSS, and JavaScript. Experience seamless video playback, user authentication, and video upload functionalities in this beginner-friendly project.", - imgSrc: "assets/youtube.png" - }, - { - title: "Tic-Tac-Toe Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Tic-Tac-toe", - description: "Tic-Tac-Toe Game is a classic two-player game where opponents strategically place Xs and Os on a 3x3 grid, aiming to achieve a winning pattern of three in a row, column, or diagonal.", - imgSrc: "assets/tic.png" - }, - { - title: "Taskify Project", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Taskify-Project", - description: "Taskify-Project is an organizational tool designed to streamline project management, enabling users to create, assign, and track tasks efficiently within a collaborative environment.", - imgSrc: "assets/task.png" - }, - { - title: "Simple Movie Search", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Simple Movie Search is a straightforward tool allowing users to search for movies by title, providing basic information such as release year, genre, and synopsis.", - imgSrc: "assets/smovie.png" - }, - { - title: "Shopapp Redux", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/shopapp%20redux", - description: "Shop App Redux is a streamlined shopping experience powered by Redux, enhancing state management for seamless user interactions and efficient data handling.", - imgSrc: "assets/shop.png" - }, - { - title: "React Tenzies App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-tenzies-game", - description: "React Tenzies App is a web application built using the React JavaScript library, simulating the dice game Tenzi where players race to roll their dice to match a specific pattern, showcasing React's dynamic user interface capabilities.", - imgSrc: "assets/teniz.png" - }, - { - title: "Quiz Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Quiz-Game", - description: "Quiz Game is an interactive application that challenges players with questions on various topics, providing entertainment and opportunities for learning and testing knowledge.", - imgSrc: "assets/quiz.png" - }, - { - title: "Personal Portfolio", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Personal%20Portfolio", - description: "Personal Portfolio is a digital showcase of an individual's work, skills, and achievements, serving as a professional portfolio to highlight expertise and attract potential clients or employers.", - imgSrc: "assets/portfolio.png" - }, - { - title: "Dice App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Dice-App", - description: "A virtual dice-rolling application that simulates the randomness of traditional dice, offering convenience for various tabletop games and decision-making scenarios.", - imgSrc: "assets/dice.png" - }, - { - title: "Covid-19 Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Covid-19_Tracker", - description: "A tool for monitoring and visualizing real-time data on coronavirus cases, including infections, recoveries, and fatalities globally or regionally.", - imgSrc: "assets/covid.png" - }, - { - title: "Bank-KYC Form", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Bank-KYC-Form", - description: "A document where customers provide personal information and identification documents to comply with Know Your Customer regulations, ensuring legal and security compliance for banking services.", - imgSrc: "assets/kyc.png" - }, - { - title: "Guess the Number Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Guess-the-number-react-app-main", - description: "In the React Guess the Number Game, you try to figure out a secret number by making guesses.", - imgSrc: "assets/guess.png" - }, - { - title: "Myth Weaver - Ai Story Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Myth-Weaver", - description: "Myth Weaver is a story-creating AI model. Just give a few prompts, and it will provide you with 5 short stories, each 60 words long.", - imgSrc: "assets/story.png" - }, - { - title: "Twitter Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/twitter_clone/Twitter-Final-main", - description: "This is a simple Twitter Clone implementing the core features of Twitter.", - imgSrc: "assets/twitter.png" - }, - { - title: "Spotify Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Spotify-Clone", - description: "This is a simple Spotify Clone implementing the core features of Spotify. All the important functionalities of Spotify are implemented and the backend part is there for those who need it.", - imgSrc: "assets/spotify.png" - }, - { - title: "Markdown Previewer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Markdown-Previewer", - description: "Text to show on Hover", - imgSrc: "assets/mark.png" - }, - { - title: "Kanban: Drag & Drop Board", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/draganddrop-board", - description: "Its a simple drag and drop kanban style board to manage tasks", - imgSrc: "assets/drag-and-drop.png" - }, -]; -{ - title: "ChatGram - Real Time Chat Application", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/chatgram", - description: "Real Time Chatting Application", - imgSrc: "assets/ChatGram.png" -}, - - -const container = document.getElementById('projects-container'); - -projects.forEach(project => { - const projectDiv = document.createElement('div'); - projectDiv.className = 'col-md-2 mb-4 d-md-inline-block'; - projectDiv.innerHTML = ` -
- React App -
- -
${project.title}
-
-
-
- `; - container.appendChild(projectDiv); -}); \ No newline at end of file diff --git a/.history/projects_20241018184423.js b/.history/projects_20241018184423.js deleted file mode 100644 index 8fb03e5e..00000000 --- a/.history/projects_20241018184423.js +++ /dev/null @@ -1,262 +0,0 @@ -// Please add your project details in the below array. -const projects = [ - { - title: "React Todo App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-todo-app", - description: "Start your coding journey with a beginner-friendly React Todo App, perfect for learning task management and basic web development", - imgSrc: "assets/todo.png" - }, - { - title: "React Weather app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Weather-app", - description: "Explore weather effortlessly with a beginner-friendly React Weather App, providing real-time forecasts and an intuitive user experience.", - imgSrc: "assets/weather.png" - }, - { - title: "React Stopwatch app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-stopwatch", - description: "Solidify your javascript concepts by making a React Stopwatch. You will learn how to manage javascript objects as state in React.", - imgSrc: "assets/stopwatch.png" - }, - { - title: "React Bank UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Bank-UI", - description: "Create an attractive landing page of your choice that will improve your designing skills.", - imgSrc: "assets/bank.png" - }, - { - title: "Movie Database App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Create a simple movie database app where you can search about movies. In this project you will learn about Card Components & how to manage dynamic data on page.", - imgSrc: "assets/movie.png" - }, - { - title: "React Expense Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/expense-tracker-react", - description: "Learn more about state management by creating an Expense Tracker.", - imgSrc: "assets/expense.png" - }, - { - title: "E-commerce Website React", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/E-commerce%20Website", - description: "React-based e-commerce site: Sleek design, vast product range, and secure checkout redefine online shopping.", - imgSrc: "assets/ecom.png" - }, - { - title: "GIF Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/GIF%20Generator", - description: "Experience the fun of GIF creation with our React-based GIF Generator. Easily create, customize, and share animated GIFs, adding excitement to your online conversations.", - imgSrc: "assets/gif.png" - }, - { - title: "Calculator App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/calculator-react", - description: "Experience the power of React with our intuitive Calculator app. Perform quick and accurate calculations with a sleek and user-friendly interface.", - imgSrc: "assets/calculator.png" - }, - { - title: "Meme App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/meme-app-react", - description: "Unleash your creativity with our React-powered Meme App. Craft and share hilarious memes effortlessly, adding humor to your social media.", - imgSrc: "assets/meme.png" - }, - { - title: "React Music App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-music-player", - description: "Immerse yourself in the world of music with our React-based Music Player. Enjoy seamless playback, playlist management, and a dynamic audio experience.", - imgSrc: "assets/music.png" - }, - { - title: "Quote Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/quotesgenerator", - description: "Get inspired with our React-based Quote Generator. Discover wisdom, motivation, and creativity at your fingertips, one quote at a time.", - imgSrc: "assets/quote.png" - }, - { - title: "Password Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react_password_generator", - description: "Boost your online security with our React Password Generator. Create strong, randomized passwords effortlessly to safeguard your digital life.", - imgSrc: "assets/password.png" - }, - { - title: "Score Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Score", - description: "ScoreKeeper app is applicable to any points-based game. It helps in accurately managing and keeping track of the score board, and displays the winner as well.", - imgSrc: "assets/score.png" - }, - { - title: "Riot Games Clone UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Riot-Games-Landing-Page-Clone", - description: "Riot Games Clone: A React project replicating the essence of Riot Games' popular gaming platform, offering a diverse gaming experience.", - imgSrc: "assets/riot.png" - }, - { - title: "Stock Dashboard", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Stock_Dashboard", - description: "This project gives the stock results for the unique company details and uses charts to display their historical and future predictions.", - imgSrc: "assets/stock.png" - }, - { - title: "QR Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/QR_Generator", - description: "A dynamic QR Code Generator that generates new QR codes for every input text or URL.", - imgSrc: "assets/qr.png" - }, - { - title: "Color Palette Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Color-Palette-Generator", - description: "A beautiful Color Palette Generator that generates harmonious color schemes with a click and easily copies hex codes. A useful tool for designers and developers.", - imgSrc: "assets/color.png" - }, - { - title: "Blob Generator", - url: "https://github.com/ojasggg/React-projects-for-beginners/tree/main/Blob_Generator", - description: "Simple Application useful for creators and designers who require unique Blob CSS code.", - imgSrc: "assets/blob.png" - }, - { - title: "Sorting Algorithm Visualizer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/soritng_algorithm_visualizer", - description: "This application has most of the sorting algorithms used in DSA and has a visual representation of how these sorting algorithms work in the background using clean UI in React.", - imgSrc: "assets/algorithm.png" - }, - { - title: "Web3 Theme Landing Page", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/web3_landing_page", - description: "Landing Page for Web3 applications. Used TailwindCSS for design and aos for minor animations.", - imgSrc: "assets/web3.png" - }, - { - title: "Text to Speech Converter", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/text_to_speech", - description: "Simple Website helpful to convert text written in the text area into voices. Controller of voice, sound, pitch and speed options are also provided.", - imgSrc: "assets/text2speech.png" - }, - { - title: "YouTube Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/youtube-clone", - description: "Explore this YouTube clone project where I've recreated the core functionalities of YouTube using React, HTML, CSS, and JavaScript. Experience seamless video playback, user authentication, and video upload functionalities in this beginner-friendly project.", - imgSrc: "assets/youtube.png" - }, - { - title: "Tic-Tac-Toe Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Tic-Tac-toe", - description: "Tic-Tac-Toe Game is a classic two-player game where opponents strategically place Xs and Os on a 3x3 grid, aiming to achieve a winning pattern of three in a row, column, or diagonal.", - imgSrc: "assets/tic.png" - }, - { - title: "Taskify Project", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Taskify-Project", - description: "Taskify-Project is an organizational tool designed to streamline project management, enabling users to create, assign, and track tasks efficiently within a collaborative environment.", - imgSrc: "assets/task.png" - }, - { - title: "Simple Movie Search", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Simple Movie Search is a straightforward tool allowing users to search for movies by title, providing basic information such as release year, genre, and synopsis.", - imgSrc: "assets/smovie.png" - }, - { - title: "Shopapp Redux", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/shopapp%20redux", - description: "Shop App Redux is a streamlined shopping experience powered by Redux, enhancing state management for seamless user interactions and efficient data handling.", - imgSrc: "assets/shop.png" - }, - { - title: "React Tenzies App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-tenzies-game", - description: "React Tenzies App is a web application built using the React JavaScript library, simulating the dice game Tenzi where players race to roll their dice to match a specific pattern, showcasing React's dynamic user interface capabilities.", - imgSrc: "assets/teniz.png" - }, - { - title: "Quiz Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Quiz-Game", - description: "Quiz Game is an interactive application that challenges players with questions on various topics, providing entertainment and opportunities for learning and testing knowledge.", - imgSrc: "assets/quiz.png" - }, - { - title: "Personal Portfolio", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Personal%20Portfolio", - description: "Personal Portfolio is a digital showcase of an individual's work, skills, and achievements, serving as a professional portfolio to highlight expertise and attract potential clients or employers.", - imgSrc: "assets/portfolio.png" - }, - { - title: "Dice App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Dice-App", - description: "A virtual dice-rolling application that simulates the randomness of traditional dice, offering convenience for various tabletop games and decision-making scenarios.", - imgSrc: "assets/dice.png" - }, - { - title: "Covid-19 Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Covid-19_Tracker", - description: "A tool for monitoring and visualizing real-time data on coronavirus cases, including infections, recoveries, and fatalities globally or regionally.", - imgSrc: "assets/covid.png" - }, - { - title: "Bank-KYC Form", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Bank-KYC-Form", - description: "A document where customers provide personal information and identification documents to comply with Know Your Customer regulations, ensuring legal and security compliance for banking services.", - imgSrc: "assets/kyc.png" - }, - { - title: "Guess the Number Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Guess-the-number-react-app-main", - description: "In the React Guess the Number Game, you try to figure out a secret number by making guesses.", - imgSrc: "assets/guess.png" - }, - { - title: "Myth Weaver - Ai Story Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Myth-Weaver", - description: "Myth Weaver is a story-creating AI model. Just give a few prompts, and it will provide you with 5 short stories, each 60 words long.", - imgSrc: "assets/story.png" - }, - { - title: "Twitter Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/twitter_clone/Twitter-Final-main", - description: "This is a simple Twitter Clone implementing the core features of Twitter.", - imgSrc: "assets/twitter.png" - }, - { - title: "Spotify Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Spotify-Clone", - description: "This is a simple Spotify Clone implementing the core features of Spotify. All the important functionalities of Spotify are implemented and the backend part is there for those who need it.", - imgSrc: "assets/spotify.png" - }, - { - title: "Markdown Previewer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Markdown-Previewer", - description: "Text to show on Hover", - imgSrc: "assets/mark.png" - }, - { - title: "Kanban: Drag & Drop Board", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/draganddrop-board", - description: "Its a simple drag and drop kanban style board to manage tasks", - imgSrc: "assets/drag-and-drop.png" - }, - { - title: "ChatGram - Real Time Chat Application", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/chatgram", - description: "Real Time Chatting Application", - imgSrc: "assets/ChatGram.png" - }, - -]; - -const container = document.getElementById('projects-container'); - -projects.forEach(project => { - const projectDiv = document.createElement('div'); - projectDiv.className = 'col-md-2 mb-4 d-md-inline-block'; - projectDiv.innerHTML = ` -
- React App -
- -
${project.title}
-
-
-
- `; - container.appendChild(projectDiv); -}); \ No newline at end of file diff --git a/.history/projects_20241018184430.js b/.history/projects_20241018184430.js deleted file mode 100644 index 02a439c5..00000000 --- a/.history/projects_20241018184430.js +++ /dev/null @@ -1,268 +0,0 @@ -// Please add your project details in the below array. -const projects = [ - { - title: "React Todo App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-todo-app", - description: "Start your coding journey with a beginner-friendly React Todo App, perfect for learning task management and basic web development", - imgSrc: "assets/todo.png" - }, - { - title: "React Weather app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Weather-app", - description: "Explore weather effortlessly with a beginner-friendly React Weather App, providing real-time forecasts and an intuitive user experience.", - imgSrc: "assets/weather.png" - }, - { - title: "React Stopwatch app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-stopwatch", - description: "Solidify your javascript concepts by making a React Stopwatch. You will learn how to manage javascript objects as state in React.", - imgSrc: "assets/stopwatch.png" - }, - { - title: "React Bank UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Bank-UI", - description: "Create an attractive landing page of your choice that will improve your designing skills.", - imgSrc: "assets/bank.png" - }, - { - title: "Movie Database App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Create a simple movie database app where you can search about movies. In this project you will learn about Card Components & how to manage dynamic data on page.", - imgSrc: "assets/movie.png" - }, - { - title: "React Expense Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/expense-tracker-react", - description: "Learn more about state management by creating an Expense Tracker.", - imgSrc: "assets/expense.png" - }, - { - title: "E-commerce Website React", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/E-commerce%20Website", - description: "React-based e-commerce site: Sleek design, vast product range, and secure checkout redefine online shopping.", - imgSrc: "assets/ecom.png" - }, - { - title: "GIF Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/GIF%20Generator", - description: "Experience the fun of GIF creation with our React-based GIF Generator. Easily create, customize, and share animated GIFs, adding excitement to your online conversations.", - imgSrc: "assets/gif.png" - }, - { - title: "Calculator App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/calculator-react", - description: "Experience the power of React with our intuitive Calculator app. Perform quick and accurate calculations with a sleek and user-friendly interface.", - imgSrc: "assets/calculator.png" - }, - { - title: "Meme App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/meme-app-react", - description: "Unleash your creativity with our React-powered Meme App. Craft and share hilarious memes effortlessly, adding humor to your social media.", - imgSrc: "assets/meme.png" - }, - { - title: "React Music App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-music-player", - description: "Immerse yourself in the world of music with our React-based Music Player. Enjoy seamless playback, playlist management, and a dynamic audio experience.", - imgSrc: "assets/music.png" - }, - { - title: "Quote Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/quotesgenerator", - description: "Get inspired with our React-based Quote Generator. Discover wisdom, motivation, and creativity at your fingertips, one quote at a time.", - imgSrc: "assets/quote.png" - }, - { - title: "Password Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react_password_generator", - description: "Boost your online security with our React Password Generator. Create strong, randomized passwords effortlessly to safeguard your digital life.", - imgSrc: "assets/password.png" - }, - { - title: "Score Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Score", - description: "ScoreKeeper app is applicable to any points-based game. It helps in accurately managing and keeping track of the score board, and displays the winner as well.", - imgSrc: "assets/score.png" - }, - { - title: "Riot Games Clone UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Riot-Games-Landing-Page-Clone", - description: "Riot Games Clone: A React project replicating the essence of Riot Games' popular gaming platform, offering a diverse gaming experience.", - imgSrc: "assets/riot.png" - }, - { - title: "Stock Dashboard", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Stock_Dashboard", - description: "This project gives the stock results for the unique company details and uses charts to display their historical and future predictions.", - imgSrc: "assets/stock.png" - }, - { - title: "QR Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/QR_Generator", - description: "A dynamic QR Code Generator that generates new QR codes for every input text or URL.", - imgSrc: "assets/qr.png" - }, - { - title: "Color Palette Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Color-Palette-Generator", - description: "A beautiful Color Palette Generator that generates harmonious color schemes with a click and easily copies hex codes. A useful tool for designers and developers.", - imgSrc: "assets/color.png" - }, - { - title: "Blob Generator", - url: "https://github.com/ojasggg/React-projects-for-beginners/tree/main/Blob_Generator", - description: "Simple Application useful for creators and designers who require unique Blob CSS code.", - imgSrc: "assets/blob.png" - }, - { - title: "Sorting Algorithm Visualizer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/soritng_algorithm_visualizer", - description: "This application has most of the sorting algorithms used in DSA and has a visual representation of how these sorting algorithms work in the background using clean UI in React.", - imgSrc: "assets/algorithm.png" - }, - { - title: "Web3 Theme Landing Page", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/web3_landing_page", - description: "Landing Page for Web3 applications. Used TailwindCSS for design and aos for minor animations.", - imgSrc: "assets/web3.png" - }, - { - title: "Text to Speech Converter", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/text_to_speech", - description: "Simple Website helpful to convert text written in the text area into voices. Controller of voice, sound, pitch and speed options are also provided.", - imgSrc: "assets/text2speech.png" - }, - { - title: "YouTube Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/youtube-clone", - description: "Explore this YouTube clone project where I've recreated the core functionalities of YouTube using React, HTML, CSS, and JavaScript. Experience seamless video playback, user authentication, and video upload functionalities in this beginner-friendly project.", - imgSrc: "assets/youtube.png" - }, - { - title: "Tic-Tac-Toe Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Tic-Tac-toe", - description: "Tic-Tac-Toe Game is a classic two-player game where opponents strategically place Xs and Os on a 3x3 grid, aiming to achieve a winning pattern of three in a row, column, or diagonal.", - imgSrc: "assets/tic.png" - }, - { - title: "Taskify Project", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Taskify-Project", - description: "Taskify-Project is an organizational tool designed to streamline project management, enabling users to create, assign, and track tasks efficiently within a collaborative environment.", - imgSrc: "assets/task.png" - }, - { - title: "Simple Movie Search", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Simple Movie Search is a straightforward tool allowing users to search for movies by title, providing basic information such as release year, genre, and synopsis.", - imgSrc: "assets/smovie.png" - }, - { - title: "Shopapp Redux", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/shopapp%20redux", - description: "Shop App Redux is a streamlined shopping experience powered by Redux, enhancing state management for seamless user interactions and efficient data handling.", - imgSrc: "assets/shop.png" - }, - { - title: "React Tenzies App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-tenzies-game", - description: "React Tenzies App is a web application built using the React JavaScript library, simulating the dice game Tenzi where players race to roll their dice to match a specific pattern, showcasing React's dynamic user interface capabilities.", - imgSrc: "assets/teniz.png" - }, - { - title: "Quiz Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Quiz-Game", - description: "Quiz Game is an interactive application that challenges players with questions on various topics, providing entertainment and opportunities for learning and testing knowledge.", - imgSrc: "assets/quiz.png" - }, - { - title: "Personal Portfolio", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Personal%20Portfolio", - description: "Personal Portfolio is a digital showcase of an individual's work, skills, and achievements, serving as a professional portfolio to highlight expertise and attract potential clients or employers.", - imgSrc: "assets/portfolio.png" - }, - { - title: "Dice App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Dice-App", - description: "A virtual dice-rolling application that simulates the randomness of traditional dice, offering convenience for various tabletop games and decision-making scenarios.", - imgSrc: "assets/dice.png" - }, - { - title: "Covid-19 Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Covid-19_Tracker", - description: "A tool for monitoring and visualizing real-time data on coronavirus cases, including infections, recoveries, and fatalities globally or regionally.", - imgSrc: "assets/covid.png" - }, - { - title: "Bank-KYC Form", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Bank-KYC-Form", - description: "A document where customers provide personal information and identification documents to comply with Know Your Customer regulations, ensuring legal and security compliance for banking services.", - imgSrc: "assets/kyc.png" - }, - { - title: "Guess the Number Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Guess-the-number-react-app-main", - description: "In the React Guess the Number Game, you try to figure out a secret number by making guesses.", - imgSrc: "assets/guess.png" - }, - { - title: "Myth Weaver - Ai Story Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Myth-Weaver", - description: "Myth Weaver is a story-creating AI model. Just give a few prompts, and it will provide you with 5 short stories, each 60 words long.", - imgSrc: "assets/story.png" - }, - { - title: "Twitter Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/twitter_clone/Twitter-Final-main", - description: "This is a simple Twitter Clone implementing the core features of Twitter.", - imgSrc: "assets/twitter.png" - }, - { - title: "Spotify Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Spotify-Clone", - description: "This is a simple Spotify Clone implementing the core features of Spotify. All the important functionalities of Spotify are implemented and the backend part is there for those who need it.", - imgSrc: "assets/spotify.png" - }, - { - title: "Markdown Previewer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Markdown-Previewer", - description: "Text to show on Hover", - imgSrc: "assets/mark.png" - }, - { - title: "Kanban: Drag & Drop Board", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/draganddrop-board", - description: "Its a simple drag and drop kanban style board to manage tasks", - imgSrc: "assets/drag-and-drop.png" - }, - { - title: "ChatGram - Real Time Chat Application", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/chatgram", - description: "Real Time Chatting Application", - imgSrc: "assets/ChatGram.png" - }, - { - title: "ChatGram - Real Time Chat Application", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/chatgram", - description: "Real Time Chatting Application", - imgSrc: "assets/ChatGram.png" - }, - -]; - -const container = document.getElementById('projects-container'); - -projects.forEach(project => { - const projectDiv = document.createElement('div'); - projectDiv.className = 'col-md-2 mb-4 d-md-inline-block'; - projectDiv.innerHTML = ` -
- React App -
- -
${project.title}
-
-
-
- `; - container.appendChild(projectDiv); -}); \ No newline at end of file diff --git a/.history/projects_20241018184439.js b/.history/projects_20241018184439.js deleted file mode 100644 index be9c033d..00000000 --- a/.history/projects_20241018184439.js +++ /dev/null @@ -1,268 +0,0 @@ -// Please add your project details in the below array. -const projects = [ - { - title: "React Todo App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-todo-app", - description: "Start your coding journey with a beginner-friendly React Todo App, perfect for learning task management and basic web development", - imgSrc: "assets/todo.png" - }, - { - title: "React Weather app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Weather-app", - description: "Explore weather effortlessly with a beginner-friendly React Weather App, providing real-time forecasts and an intuitive user experience.", - imgSrc: "assets/weather.png" - }, - { - title: "React Stopwatch app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-stopwatch", - description: "Solidify your javascript concepts by making a React Stopwatch. You will learn how to manage javascript objects as state in React.", - imgSrc: "assets/stopwatch.png" - }, - { - title: "React Bank UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Bank-UI", - description: "Create an attractive landing page of your choice that will improve your designing skills.", - imgSrc: "assets/bank.png" - }, - { - title: "Movie Database App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Create a simple movie database app where you can search about movies. In this project you will learn about Card Components & how to manage dynamic data on page.", - imgSrc: "assets/movie.png" - }, - { - title: "React Expense Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/expense-tracker-react", - description: "Learn more about state management by creating an Expense Tracker.", - imgSrc: "assets/expense.png" - }, - { - title: "E-commerce Website React", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/E-commerce%20Website", - description: "React-based e-commerce site: Sleek design, vast product range, and secure checkout redefine online shopping.", - imgSrc: "assets/ecom.png" - }, - { - title: "GIF Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/GIF%20Generator", - description: "Experience the fun of GIF creation with our React-based GIF Generator. Easily create, customize, and share animated GIFs, adding excitement to your online conversations.", - imgSrc: "assets/gif.png" - }, - { - title: "Calculator App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/calculator-react", - description: "Experience the power of React with our intuitive Calculator app. Perform quick and accurate calculations with a sleek and user-friendly interface.", - imgSrc: "assets/calculator.png" - }, - { - title: "Meme App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/meme-app-react", - description: "Unleash your creativity with our React-powered Meme App. Craft and share hilarious memes effortlessly, adding humor to your social media.", - imgSrc: "assets/meme.png" - }, - { - title: "React Music App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-music-player", - description: "Immerse yourself in the world of music with our React-based Music Player. Enjoy seamless playback, playlist management, and a dynamic audio experience.", - imgSrc: "assets/music.png" - }, - { - title: "Quote Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/quotesgenerator", - description: "Get inspired with our React-based Quote Generator. Discover wisdom, motivation, and creativity at your fingertips, one quote at a time.", - imgSrc: "assets/quote.png" - }, - { - title: "Password Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react_password_generator", - description: "Boost your online security with our React Password Generator. Create strong, randomized passwords effortlessly to safeguard your digital life.", - imgSrc: "assets/password.png" - }, - { - title: "Score Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Score", - description: "ScoreKeeper app is applicable to any points-based game. It helps in accurately managing and keeping track of the score board, and displays the winner as well.", - imgSrc: "assets/score.png" - }, - { - title: "Riot Games Clone UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Riot-Games-Landing-Page-Clone", - description: "Riot Games Clone: A React project replicating the essence of Riot Games' popular gaming platform, offering a diverse gaming experience.", - imgSrc: "assets/riot.png" - }, - { - title: "Stock Dashboard", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Stock_Dashboard", - description: "This project gives the stock results for the unique company details and uses charts to display their historical and future predictions.", - imgSrc: "assets/stock.png" - }, - { - title: "QR Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/QR_Generator", - description: "A dynamic QR Code Generator that generates new QR codes for every input text or URL.", - imgSrc: "assets/qr.png" - }, - { - title: "Color Palette Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Color-Palette-Generator", - description: "A beautiful Color Palette Generator that generates harmonious color schemes with a click and easily copies hex codes. A useful tool for designers and developers.", - imgSrc: "assets/color.png" - }, - { - title: "Blob Generator", - url: "https://github.com/ojasggg/React-projects-for-beginners/tree/main/Blob_Generator", - description: "Simple Application useful for creators and designers who require unique Blob CSS code.", - imgSrc: "assets/blob.png" - }, - { - title: "Sorting Algorithm Visualizer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/soritng_algorithm_visualizer", - description: "This application has most of the sorting algorithms used in DSA and has a visual representation of how these sorting algorithms work in the background using clean UI in React.", - imgSrc: "assets/algorithm.png" - }, - { - title: "Web3 Theme Landing Page", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/web3_landing_page", - description: "Landing Page for Web3 applications. Used TailwindCSS for design and aos for minor animations.", - imgSrc: "assets/web3.png" - }, - { - title: "Text to Speech Converter", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/text_to_speech", - description: "Simple Website helpful to convert text written in the text area into voices. Controller of voice, sound, pitch and speed options are also provided.", - imgSrc: "assets/text2speech.png" - }, - { - title: "YouTube Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/youtube-clone", - description: "Explore this YouTube clone project where I've recreated the core functionalities of YouTube using React, HTML, CSS, and JavaScript. Experience seamless video playback, user authentication, and video upload functionalities in this beginner-friendly project.", - imgSrc: "assets/youtube.png" - }, - { - title: "Tic-Tac-Toe Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Tic-Tac-toe", - description: "Tic-Tac-Toe Game is a classic two-player game where opponents strategically place Xs and Os on a 3x3 grid, aiming to achieve a winning pattern of three in a row, column, or diagonal.", - imgSrc: "assets/tic.png" - }, - { - title: "Taskify Project", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Taskify-Project", - description: "Taskify-Project is an organizational tool designed to streamline project management, enabling users to create, assign, and track tasks efficiently within a collaborative environment.", - imgSrc: "assets/task.png" - }, - { - title: "Simple Movie Search", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Simple Movie Search is a straightforward tool allowing users to search for movies by title, providing basic information such as release year, genre, and synopsis.", - imgSrc: "assets/smovie.png" - }, - { - title: "Shopapp Redux", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/shopapp%20redux", - description: "Shop App Redux is a streamlined shopping experience powered by Redux, enhancing state management for seamless user interactions and efficient data handling.", - imgSrc: "assets/shop.png" - }, - { - title: "React Tenzies App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-tenzies-game", - description: "React Tenzies App is a web application built using the React JavaScript library, simulating the dice game Tenzi where players race to roll their dice to match a specific pattern, showcasing React's dynamic user interface capabilities.", - imgSrc: "assets/teniz.png" - }, - { - title: "Quiz Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Quiz-Game", - description: "Quiz Game is an interactive application that challenges players with questions on various topics, providing entertainment and opportunities for learning and testing knowledge.", - imgSrc: "assets/quiz.png" - }, - { - title: "Personal Portfolio", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Personal%20Portfolio", - description: "Personal Portfolio is a digital showcase of an individual's work, skills, and achievements, serving as a professional portfolio to highlight expertise and attract potential clients or employers.", - imgSrc: "assets/portfolio.png" - }, - { - title: "Dice App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Dice-App", - description: "A virtual dice-rolling application that simulates the randomness of traditional dice, offering convenience for various tabletop games and decision-making scenarios.", - imgSrc: "assets/dice.png" - }, - { - title: "Covid-19 Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Covid-19_Tracker", - description: "A tool for monitoring and visualizing real-time data on coronavirus cases, including infections, recoveries, and fatalities globally or regionally.", - imgSrc: "assets/covid.png" - }, - { - title: "Bank-KYC Form", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Bank-KYC-Form", - description: "A document where customers provide personal information and identification documents to comply with Know Your Customer regulations, ensuring legal and security compliance for banking services.", - imgSrc: "assets/kyc.png" - }, - { - title: "Guess the Number Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Guess-the-number-react-app-main", - description: "In the React Guess the Number Game, you try to figure out a secret number by making guesses.", - imgSrc: "assets/guess.png" - }, - { - title: "Myth Weaver - Ai Story Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Myth-Weaver", - description: "Myth Weaver is a story-creating AI model. Just give a few prompts, and it will provide you with 5 short stories, each 60 words long.", - imgSrc: "assets/story.png" - }, - { - title: "Twitter Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/twitter_clone/Twitter-Final-main", - description: "This is a simple Twitter Clone implementing the core features of Twitter.", - imgSrc: "assets/twitter.png" - }, - { - title: "Spotify Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Spotify-Clone", - description: "This is a simple Spotify Clone implementing the core features of Spotify. All the important functionalities of Spotify are implemented and the backend part is there for those who need it.", - imgSrc: "assets/spotify.png" - }, - { - title: "Markdown Previewer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Markdown-Previewer", - description: "Text to show on Hover", - imgSrc: "assets/mark.png" - }, - { - title: "Kanban: Drag & Drop Board", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/draganddrop-board", - description: "Its a simple drag and drop kanban style board to manage tasks", - imgSrc: "assets/drag-and-drop.png" - }, - { - title: "ChatGram - Real Time Chat Application", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/chatgram", - description: "Real Time Chatting Application", - imgSrc: "assets/ChatGram.png" - }, - { - title: "ChatGram - Real Time Chat Application", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/chatgram", - description: "Real Time Chatting Application", - imgSrc: "assets/ChatGram.png" - } - -]; - -const container = document.getElementById('projects-container'); - -projects.forEach(project => { - const projectDiv = document.createElement('div'); - projectDiv.className = 'col-md-2 mb-4 d-md-inline-block'; - projectDiv.innerHTML = ` -
- React App -
- -
${project.title}
-
-
-
- `; - container.appendChild(projectDiv); -}); \ No newline at end of file diff --git a/.history/projects_20241018184445.js b/.history/projects_20241018184445.js deleted file mode 100644 index d4af63e3..00000000 --- a/.history/projects_20241018184445.js +++ /dev/null @@ -1,268 +0,0 @@ -// Please add your project details in the below array. -const projects = [ - { - title: "React Todo App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-todo-app", - description: "Start your coding journey with a beginner-friendly React Todo App, perfect for learning task management and basic web development", - imgSrc: "assets/todo.png" - }, - { - title: "React Weather app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Weather-app", - description: "Explore weather effortlessly with a beginner-friendly React Weather App, providing real-time forecasts and an intuitive user experience.", - imgSrc: "assets/weather.png" - }, - { - title: "React Stopwatch app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-stopwatch", - description: "Solidify your javascript concepts by making a React Stopwatch. You will learn how to manage javascript objects as state in React.", - imgSrc: "assets/stopwatch.png" - }, - { - title: "React Bank UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Bank-UI", - description: "Create an attractive landing page of your choice that will improve your designing skills.", - imgSrc: "assets/bank.png" - }, - { - title: "Movie Database App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Create a simple movie database app where you can search about movies. In this project you will learn about Card Components & how to manage dynamic data on page.", - imgSrc: "assets/movie.png" - }, - { - title: "React Expense Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/expense-tracker-react", - description: "Learn more about state management by creating an Expense Tracker.", - imgSrc: "assets/expense.png" - }, - { - title: "E-commerce Website React", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/E-commerce%20Website", - description: "React-based e-commerce site: Sleek design, vast product range, and secure checkout redefine online shopping.", - imgSrc: "assets/ecom.png" - }, - { - title: "GIF Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/GIF%20Generator", - description: "Experience the fun of GIF creation with our React-based GIF Generator. Easily create, customize, and share animated GIFs, adding excitement to your online conversations.", - imgSrc: "assets/gif.png" - }, - { - title: "Calculator App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/calculator-react", - description: "Experience the power of React with our intuitive Calculator app. Perform quick and accurate calculations with a sleek and user-friendly interface.", - imgSrc: "assets/calculator.png" - }, - { - title: "Meme App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/meme-app-react", - description: "Unleash your creativity with our React-powered Meme App. Craft and share hilarious memes effortlessly, adding humor to your social media.", - imgSrc: "assets/meme.png" - }, - { - title: "React Music App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-music-player", - description: "Immerse yourself in the world of music with our React-based Music Player. Enjoy seamless playback, playlist management, and a dynamic audio experience.", - imgSrc: "assets/music.png" - }, - { - title: "Quote Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/quotesgenerator", - description: "Get inspired with our React-based Quote Generator. Discover wisdom, motivation, and creativity at your fingertips, one quote at a time.", - imgSrc: "assets/quote.png" - }, - { - title: "Password Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react_password_generator", - description: "Boost your online security with our React Password Generator. Create strong, randomized passwords effortlessly to safeguard your digital life.", - imgSrc: "assets/password.png" - }, - { - title: "Score Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Score", - description: "ScoreKeeper app is applicable to any points-based game. It helps in accurately managing and keeping track of the score board, and displays the winner as well.", - imgSrc: "assets/score.png" - }, - { - title: "Riot Games Clone UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Riot-Games-Landing-Page-Clone", - description: "Riot Games Clone: A React project replicating the essence of Riot Games' popular gaming platform, offering a diverse gaming experience.", - imgSrc: "assets/riot.png" - }, - { - title: "Stock Dashboard", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Stock_Dashboard", - description: "This project gives the stock results for the unique company details and uses charts to display their historical and future predictions.", - imgSrc: "assets/stock.png" - }, - { - title: "QR Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/QR_Generator", - description: "A dynamic QR Code Generator that generates new QR codes for every input text or URL.", - imgSrc: "assets/qr.png" - }, - { - title: "Color Palette Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Color-Palette-Generator", - description: "A beautiful Color Palette Generator that generates harmonious color schemes with a click and easily copies hex codes. A useful tool for designers and developers.", - imgSrc: "assets/color.png" - }, - { - title: "Blob Generator", - url: "https://github.com/ojasggg/React-projects-for-beginners/tree/main/Blob_Generator", - description: "Simple Application useful for creators and designers who require unique Blob CSS code.", - imgSrc: "assets/blob.png" - }, - { - title: "Sorting Algorithm Visualizer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/soritng_algorithm_visualizer", - description: "This application has most of the sorting algorithms used in DSA and has a visual representation of how these sorting algorithms work in the background using clean UI in React.", - imgSrc: "assets/algorithm.png" - }, - { - title: "Web3 Theme Landing Page", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/web3_landing_page", - description: "Landing Page for Web3 applications. Used TailwindCSS for design and aos for minor animations.", - imgSrc: "assets/web3.png" - }, - { - title: "Text to Speech Converter", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/text_to_speech", - description: "Simple Website helpful to convert text written in the text area into voices. Controller of voice, sound, pitch and speed options are also provided.", - imgSrc: "assets/text2speech.png" - }, - { - title: "YouTube Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/youtube-clone", - description: "Explore this YouTube clone project where I've recreated the core functionalities of YouTube using React, HTML, CSS, and JavaScript. Experience seamless video playback, user authentication, and video upload functionalities in this beginner-friendly project.", - imgSrc: "assets/youtube.png" - }, - { - title: "Tic-Tac-Toe Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Tic-Tac-toe", - description: "Tic-Tac-Toe Game is a classic two-player game where opponents strategically place Xs and Os on a 3x3 grid, aiming to achieve a winning pattern of three in a row, column, or diagonal.", - imgSrc: "assets/tic.png" - }, - { - title: "Taskify Project", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Taskify-Project", - description: "Taskify-Project is an organizational tool designed to streamline project management, enabling users to create, assign, and track tasks efficiently within a collaborative environment.", - imgSrc: "assets/task.png" - }, - { - title: "Simple Movie Search", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Simple Movie Search is a straightforward tool allowing users to search for movies by title, providing basic information such as release year, genre, and synopsis.", - imgSrc: "assets/smovie.png" - }, - { - title: "Shopapp Redux", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/shopapp%20redux", - description: "Shop App Redux is a streamlined shopping experience powered by Redux, enhancing state management for seamless user interactions and efficient data handling.", - imgSrc: "assets/shop.png" - }, - { - title: "React Tenzies App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-tenzies-game", - description: "React Tenzies App is a web application built using the React JavaScript library, simulating the dice game Tenzi where players race to roll their dice to match a specific pattern, showcasing React's dynamic user interface capabilities.", - imgSrc: "assets/teniz.png" - }, - { - title: "Quiz Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Quiz-Game", - description: "Quiz Game is an interactive application that challenges players with questions on various topics, providing entertainment and opportunities for learning and testing knowledge.", - imgSrc: "assets/quiz.png" - }, - { - title: "Personal Portfolio", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Personal%20Portfolio", - description: "Personal Portfolio is a digital showcase of an individual's work, skills, and achievements, serving as a professional portfolio to highlight expertise and attract potential clients or employers.", - imgSrc: "assets/portfolio.png" - }, - { - title: "Dice App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Dice-App", - description: "A virtual dice-rolling application that simulates the randomness of traditional dice, offering convenience for various tabletop games and decision-making scenarios.", - imgSrc: "assets/dice.png" - }, - { - title: "Covid-19 Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Covid-19_Tracker", - description: "A tool for monitoring and visualizing real-time data on coronavirus cases, including infections, recoveries, and fatalities globally or regionally.", - imgSrc: "assets/covid.png" - }, - { - title: "Bank-KYC Form", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Bank-KYC-Form", - description: "A document where customers provide personal information and identification documents to comply with Know Your Customer regulations, ensuring legal and security compliance for banking services.", - imgSrc: "assets/kyc.png" - }, - { - title: "Guess the Number Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Guess-the-number-react-app-main", - description: "In the React Guess the Number Game, you try to figure out a secret number by making guesses.", - imgSrc: "assets/guess.png" - }, - { - title: "Myth Weaver - Ai Story Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Myth-Weaver", - description: "Myth Weaver is a story-creating AI model. Just give a few prompts, and it will provide you with 5 short stories, each 60 words long.", - imgSrc: "assets/story.png" - }, - { - title: "Twitter Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/twitter_clone/Twitter-Final-main", - description: "This is a simple Twitter Clone implementing the core features of Twitter.", - imgSrc: "assets/twitter.png" - }, - { - title: "Spotify Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Spotify-Clone", - description: "This is a simple Spotify Clone implementing the core features of Spotify. All the important functionalities of Spotify are implemented and the backend part is there for those who need it.", - imgSrc: "assets/spotify.png" - }, - { - title: "Markdown Previewer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Markdown-Previewer", - description: "Text to show on Hover", - imgSrc: "assets/mark.png" - }, - { - title: "Kanban: Drag & Drop Board", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/draganddrop-board", - description: "Its a simple drag and drop kanban style board to manage tasks", - imgSrc: "assets/drag-and-drop.png" - }, - { - title: "ChatGram - Real Time Chat Application", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/chatgram", - description: "Real Time Chatting Application", - imgSrc: "assets/ChatGram.png" - }, - { - title: "Farming", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/chatgram", - description: "Real Time Chatting Application", - imgSrc: "assets/ChatGram.png" - } - -]; - -const container = document.getElementById('projects-container'); - -projects.forEach(project => { - const projectDiv = document.createElement('div'); - projectDiv.className = 'col-md-2 mb-4 d-md-inline-block'; - projectDiv.innerHTML = ` -
- React App -
- -
${project.title}
-
-
-
- `; - container.appendChild(projectDiv); -}); \ No newline at end of file diff --git a/.history/projects_20241018184453.js b/.history/projects_20241018184453.js deleted file mode 100644 index 9b27eedb..00000000 --- a/.history/projects_20241018184453.js +++ /dev/null @@ -1,268 +0,0 @@ -// Please add your project details in the below array. -const projects = [ - { - title: "React Todo App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-todo-app", - description: "Start your coding journey with a beginner-friendly React Todo App, perfect for learning task management and basic web development", - imgSrc: "assets/todo.png" - }, - { - title: "React Weather app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Weather-app", - description: "Explore weather effortlessly with a beginner-friendly React Weather App, providing real-time forecasts and an intuitive user experience.", - imgSrc: "assets/weather.png" - }, - { - title: "React Stopwatch app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-stopwatch", - description: "Solidify your javascript concepts by making a React Stopwatch. You will learn how to manage javascript objects as state in React.", - imgSrc: "assets/stopwatch.png" - }, - { - title: "React Bank UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Bank-UI", - description: "Create an attractive landing page of your choice that will improve your designing skills.", - imgSrc: "assets/bank.png" - }, - { - title: "Movie Database App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Create a simple movie database app where you can search about movies. In this project you will learn about Card Components & how to manage dynamic data on page.", - imgSrc: "assets/movie.png" - }, - { - title: "React Expense Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/expense-tracker-react", - description: "Learn more about state management by creating an Expense Tracker.", - imgSrc: "assets/expense.png" - }, - { - title: "E-commerce Website React", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/E-commerce%20Website", - description: "React-based e-commerce site: Sleek design, vast product range, and secure checkout redefine online shopping.", - imgSrc: "assets/ecom.png" - }, - { - title: "GIF Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/GIF%20Generator", - description: "Experience the fun of GIF creation with our React-based GIF Generator. Easily create, customize, and share animated GIFs, adding excitement to your online conversations.", - imgSrc: "assets/gif.png" - }, - { - title: "Calculator App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/calculator-react", - description: "Experience the power of React with our intuitive Calculator app. Perform quick and accurate calculations with a sleek and user-friendly interface.", - imgSrc: "assets/calculator.png" - }, - { - title: "Meme App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/meme-app-react", - description: "Unleash your creativity with our React-powered Meme App. Craft and share hilarious memes effortlessly, adding humor to your social media.", - imgSrc: "assets/meme.png" - }, - { - title: "React Music App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-music-player", - description: "Immerse yourself in the world of music with our React-based Music Player. Enjoy seamless playback, playlist management, and a dynamic audio experience.", - imgSrc: "assets/music.png" - }, - { - title: "Quote Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/quotesgenerator", - description: "Get inspired with our React-based Quote Generator. Discover wisdom, motivation, and creativity at your fingertips, one quote at a time.", - imgSrc: "assets/quote.png" - }, - { - title: "Password Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react_password_generator", - description: "Boost your online security with our React Password Generator. Create strong, randomized passwords effortlessly to safeguard your digital life.", - imgSrc: "assets/password.png" - }, - { - title: "Score Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Score", - description: "ScoreKeeper app is applicable to any points-based game. It helps in accurately managing and keeping track of the score board, and displays the winner as well.", - imgSrc: "assets/score.png" - }, - { - title: "Riot Games Clone UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Riot-Games-Landing-Page-Clone", - description: "Riot Games Clone: A React project replicating the essence of Riot Games' popular gaming platform, offering a diverse gaming experience.", - imgSrc: "assets/riot.png" - }, - { - title: "Stock Dashboard", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Stock_Dashboard", - description: "This project gives the stock results for the unique company details and uses charts to display their historical and future predictions.", - imgSrc: "assets/stock.png" - }, - { - title: "QR Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/QR_Generator", - description: "A dynamic QR Code Generator that generates new QR codes for every input text or URL.", - imgSrc: "assets/qr.png" - }, - { - title: "Color Palette Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Color-Palette-Generator", - description: "A beautiful Color Palette Generator that generates harmonious color schemes with a click and easily copies hex codes. A useful tool for designers and developers.", - imgSrc: "assets/color.png" - }, - { - title: "Blob Generator", - url: "https://github.com/ojasggg/React-projects-for-beginners/tree/main/Blob_Generator", - description: "Simple Application useful for creators and designers who require unique Blob CSS code.", - imgSrc: "assets/blob.png" - }, - { - title: "Sorting Algorithm Visualizer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/soritng_algorithm_visualizer", - description: "This application has most of the sorting algorithms used in DSA and has a visual representation of how these sorting algorithms work in the background using clean UI in React.", - imgSrc: "assets/algorithm.png" - }, - { - title: "Web3 Theme Landing Page", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/web3_landing_page", - description: "Landing Page for Web3 applications. Used TailwindCSS for design and aos for minor animations.", - imgSrc: "assets/web3.png" - }, - { - title: "Text to Speech Converter", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/text_to_speech", - description: "Simple Website helpful to convert text written in the text area into voices. Controller of voice, sound, pitch and speed options are also provided.", - imgSrc: "assets/text2speech.png" - }, - { - title: "YouTube Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/youtube-clone", - description: "Explore this YouTube clone project where I've recreated the core functionalities of YouTube using React, HTML, CSS, and JavaScript. Experience seamless video playback, user authentication, and video upload functionalities in this beginner-friendly project.", - imgSrc: "assets/youtube.png" - }, - { - title: "Tic-Tac-Toe Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Tic-Tac-toe", - description: "Tic-Tac-Toe Game is a classic two-player game where opponents strategically place Xs and Os on a 3x3 grid, aiming to achieve a winning pattern of three in a row, column, or diagonal.", - imgSrc: "assets/tic.png" - }, - { - title: "Taskify Project", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Taskify-Project", - description: "Taskify-Project is an organizational tool designed to streamline project management, enabling users to create, assign, and track tasks efficiently within a collaborative environment.", - imgSrc: "assets/task.png" - }, - { - title: "Simple Movie Search", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Simple Movie Search is a straightforward tool allowing users to search for movies by title, providing basic information such as release year, genre, and synopsis.", - imgSrc: "assets/smovie.png" - }, - { - title: "Shopapp Redux", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/shopapp%20redux", - description: "Shop App Redux is a streamlined shopping experience powered by Redux, enhancing state management for seamless user interactions and efficient data handling.", - imgSrc: "assets/shop.png" - }, - { - title: "React Tenzies App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-tenzies-game", - description: "React Tenzies App is a web application built using the React JavaScript library, simulating the dice game Tenzi where players race to roll their dice to match a specific pattern, showcasing React's dynamic user interface capabilities.", - imgSrc: "assets/teniz.png" - }, - { - title: "Quiz Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Quiz-Game", - description: "Quiz Game is an interactive application that challenges players with questions on various topics, providing entertainment and opportunities for learning and testing knowledge.", - imgSrc: "assets/quiz.png" - }, - { - title: "Personal Portfolio", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Personal%20Portfolio", - description: "Personal Portfolio is a digital showcase of an individual's work, skills, and achievements, serving as a professional portfolio to highlight expertise and attract potential clients or employers.", - imgSrc: "assets/portfolio.png" - }, - { - title: "Dice App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Dice-App", - description: "A virtual dice-rolling application that simulates the randomness of traditional dice, offering convenience for various tabletop games and decision-making scenarios.", - imgSrc: "assets/dice.png" - }, - { - title: "Covid-19 Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Covid-19_Tracker", - description: "A tool for monitoring and visualizing real-time data on coronavirus cases, including infections, recoveries, and fatalities globally or regionally.", - imgSrc: "assets/covid.png" - }, - { - title: "Bank-KYC Form", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Bank-KYC-Form", - description: "A document where customers provide personal information and identification documents to comply with Know Your Customer regulations, ensuring legal and security compliance for banking services.", - imgSrc: "assets/kyc.png" - }, - { - title: "Guess the Number Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Guess-the-number-react-app-main", - description: "In the React Guess the Number Game, you try to figure out a secret number by making guesses.", - imgSrc: "assets/guess.png" - }, - { - title: "Myth Weaver - Ai Story Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Myth-Weaver", - description: "Myth Weaver is a story-creating AI model. Just give a few prompts, and it will provide you with 5 short stories, each 60 words long.", - imgSrc: "assets/story.png" - }, - { - title: "Twitter Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/twitter_clone/Twitter-Final-main", - description: "This is a simple Twitter Clone implementing the core features of Twitter.", - imgSrc: "assets/twitter.png" - }, - { - title: "Spotify Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Spotify-Clone", - description: "This is a simple Spotify Clone implementing the core features of Spotify. All the important functionalities of Spotify are implemented and the backend part is there for those who need it.", - imgSrc: "assets/spotify.png" - }, - { - title: "Markdown Previewer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Markdown-Previewer", - description: "Text to show on Hover", - imgSrc: "assets/mark.png" - }, - { - title: "Kanban: Drag & Drop Board", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/draganddrop-board", - description: "Its a simple drag and drop kanban style board to manage tasks", - imgSrc: "assets/drag-and-drop.png" - }, - { - title: "ChatGram - Real Time Chat Application", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/chatgram", - description: "Real Time Chatting Application", - imgSrc: "assets/ChatGram.png" - }, - { - title: "Farming-Landingpage", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/chatgram", - description: "Real Time Chatting Application", - imgSrc: "assets/ChatGram.png" - } - -]; - -const container = document.getElementById('projects-container'); - -projects.forEach(project => { - const projectDiv = document.createElement('div'); - projectDiv.className = 'col-md-2 mb-4 d-md-inline-block'; - projectDiv.innerHTML = ` -
- React App -
- -
${project.title}
-
-
-
- `; - container.appendChild(projectDiv); -}); \ No newline at end of file diff --git a/.history/projects_20241018184501.js b/.history/projects_20241018184501.js deleted file mode 100644 index 3aab8b20..00000000 --- a/.history/projects_20241018184501.js +++ /dev/null @@ -1,268 +0,0 @@ -// Please add your project details in the below array. -const projects = [ - { - title: "React Todo App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-todo-app", - description: "Start your coding journey with a beginner-friendly React Todo App, perfect for learning task management and basic web development", - imgSrc: "assets/todo.png" - }, - { - title: "React Weather app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Weather-app", - description: "Explore weather effortlessly with a beginner-friendly React Weather App, providing real-time forecasts and an intuitive user experience.", - imgSrc: "assets/weather.png" - }, - { - title: "React Stopwatch app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-stopwatch", - description: "Solidify your javascript concepts by making a React Stopwatch. You will learn how to manage javascript objects as state in React.", - imgSrc: "assets/stopwatch.png" - }, - { - title: "React Bank UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Bank-UI", - description: "Create an attractive landing page of your choice that will improve your designing skills.", - imgSrc: "assets/bank.png" - }, - { - title: "Movie Database App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Create a simple movie database app where you can search about movies. In this project you will learn about Card Components & how to manage dynamic data on page.", - imgSrc: "assets/movie.png" - }, - { - title: "React Expense Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/expense-tracker-react", - description: "Learn more about state management by creating an Expense Tracker.", - imgSrc: "assets/expense.png" - }, - { - title: "E-commerce Website React", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/E-commerce%20Website", - description: "React-based e-commerce site: Sleek design, vast product range, and secure checkout redefine online shopping.", - imgSrc: "assets/ecom.png" - }, - { - title: "GIF Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/GIF%20Generator", - description: "Experience the fun of GIF creation with our React-based GIF Generator. Easily create, customize, and share animated GIFs, adding excitement to your online conversations.", - imgSrc: "assets/gif.png" - }, - { - title: "Calculator App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/calculator-react", - description: "Experience the power of React with our intuitive Calculator app. Perform quick and accurate calculations with a sleek and user-friendly interface.", - imgSrc: "assets/calculator.png" - }, - { - title: "Meme App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/meme-app-react", - description: "Unleash your creativity with our React-powered Meme App. Craft and share hilarious memes effortlessly, adding humor to your social media.", - imgSrc: "assets/meme.png" - }, - { - title: "React Music App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-music-player", - description: "Immerse yourself in the world of music with our React-based Music Player. Enjoy seamless playback, playlist management, and a dynamic audio experience.", - imgSrc: "assets/music.png" - }, - { - title: "Quote Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/quotesgenerator", - description: "Get inspired with our React-based Quote Generator. Discover wisdom, motivation, and creativity at your fingertips, one quote at a time.", - imgSrc: "assets/quote.png" - }, - { - title: "Password Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react_password_generator", - description: "Boost your online security with our React Password Generator. Create strong, randomized passwords effortlessly to safeguard your digital life.", - imgSrc: "assets/password.png" - }, - { - title: "Score Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Score", - description: "ScoreKeeper app is applicable to any points-based game. It helps in accurately managing and keeping track of the score board, and displays the winner as well.", - imgSrc: "assets/score.png" - }, - { - title: "Riot Games Clone UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Riot-Games-Landing-Page-Clone", - description: "Riot Games Clone: A React project replicating the essence of Riot Games' popular gaming platform, offering a diverse gaming experience.", - imgSrc: "assets/riot.png" - }, - { - title: "Stock Dashboard", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Stock_Dashboard", - description: "This project gives the stock results for the unique company details and uses charts to display their historical and future predictions.", - imgSrc: "assets/stock.png" - }, - { - title: "QR Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/QR_Generator", - description: "A dynamic QR Code Generator that generates new QR codes for every input text or URL.", - imgSrc: "assets/qr.png" - }, - { - title: "Color Palette Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Color-Palette-Generator", - description: "A beautiful Color Palette Generator that generates harmonious color schemes with a click and easily copies hex codes. A useful tool for designers and developers.", - imgSrc: "assets/color.png" - }, - { - title: "Blob Generator", - url: "https://github.com/ojasggg/React-projects-for-beginners/tree/main/Blob_Generator", - description: "Simple Application useful for creators and designers who require unique Blob CSS code.", - imgSrc: "assets/blob.png" - }, - { - title: "Sorting Algorithm Visualizer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/soritng_algorithm_visualizer", - description: "This application has most of the sorting algorithms used in DSA and has a visual representation of how these sorting algorithms work in the background using clean UI in React.", - imgSrc: "assets/algorithm.png" - }, - { - title: "Web3 Theme Landing Page", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/web3_landing_page", - description: "Landing Page for Web3 applications. Used TailwindCSS for design and aos for minor animations.", - imgSrc: "assets/web3.png" - }, - { - title: "Text to Speech Converter", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/text_to_speech", - description: "Simple Website helpful to convert text written in the text area into voices. Controller of voice, sound, pitch and speed options are also provided.", - imgSrc: "assets/text2speech.png" - }, - { - title: "YouTube Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/youtube-clone", - description: "Explore this YouTube clone project where I've recreated the core functionalities of YouTube using React, HTML, CSS, and JavaScript. Experience seamless video playback, user authentication, and video upload functionalities in this beginner-friendly project.", - imgSrc: "assets/youtube.png" - }, - { - title: "Tic-Tac-Toe Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Tic-Tac-toe", - description: "Tic-Tac-Toe Game is a classic two-player game where opponents strategically place Xs and Os on a 3x3 grid, aiming to achieve a winning pattern of three in a row, column, or diagonal.", - imgSrc: "assets/tic.png" - }, - { - title: "Taskify Project", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Taskify-Project", - description: "Taskify-Project is an organizational tool designed to streamline project management, enabling users to create, assign, and track tasks efficiently within a collaborative environment.", - imgSrc: "assets/task.png" - }, - { - title: "Simple Movie Search", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Simple Movie Search is a straightforward tool allowing users to search for movies by title, providing basic information such as release year, genre, and synopsis.", - imgSrc: "assets/smovie.png" - }, - { - title: "Shopapp Redux", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/shopapp%20redux", - description: "Shop App Redux is a streamlined shopping experience powered by Redux, enhancing state management for seamless user interactions and efficient data handling.", - imgSrc: "assets/shop.png" - }, - { - title: "React Tenzies App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-tenzies-game", - description: "React Tenzies App is a web application built using the React JavaScript library, simulating the dice game Tenzi where players race to roll their dice to match a specific pattern, showcasing React's dynamic user interface capabilities.", - imgSrc: "assets/teniz.png" - }, - { - title: "Quiz Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Quiz-Game", - description: "Quiz Game is an interactive application that challenges players with questions on various topics, providing entertainment and opportunities for learning and testing knowledge.", - imgSrc: "assets/quiz.png" - }, - { - title: "Personal Portfolio", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Personal%20Portfolio", - description: "Personal Portfolio is a digital showcase of an individual's work, skills, and achievements, serving as a professional portfolio to highlight expertise and attract potential clients or employers.", - imgSrc: "assets/portfolio.png" - }, - { - title: "Dice App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Dice-App", - description: "A virtual dice-rolling application that simulates the randomness of traditional dice, offering convenience for various tabletop games and decision-making scenarios.", - imgSrc: "assets/dice.png" - }, - { - title: "Covid-19 Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Covid-19_Tracker", - description: "A tool for monitoring and visualizing real-time data on coronavirus cases, including infections, recoveries, and fatalities globally or regionally.", - imgSrc: "assets/covid.png" - }, - { - title: "Bank-KYC Form", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Bank-KYC-Form", - description: "A document where customers provide personal information and identification documents to comply with Know Your Customer regulations, ensuring legal and security compliance for banking services.", - imgSrc: "assets/kyc.png" - }, - { - title: "Guess the Number Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Guess-the-number-react-app-main", - description: "In the React Guess the Number Game, you try to figure out a secret number by making guesses.", - imgSrc: "assets/guess.png" - }, - { - title: "Myth Weaver - Ai Story Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Myth-Weaver", - description: "Myth Weaver is a story-creating AI model. Just give a few prompts, and it will provide you with 5 short stories, each 60 words long.", - imgSrc: "assets/story.png" - }, - { - title: "Twitter Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/twitter_clone/Twitter-Final-main", - description: "This is a simple Twitter Clone implementing the core features of Twitter.", - imgSrc: "assets/twitter.png" - }, - { - title: "Spotify Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Spotify-Clone", - description: "This is a simple Spotify Clone implementing the core features of Spotify. All the important functionalities of Spotify are implemented and the backend part is there for those who need it.", - imgSrc: "assets/spotify.png" - }, - { - title: "Markdown Previewer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Markdown-Previewer", - description: "Text to show on Hover", - imgSrc: "assets/mark.png" - }, - { - title: "Kanban: Drag & Drop Board", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/draganddrop-board", - description: "Its a simple drag and drop kanban style board to manage tasks", - imgSrc: "assets/drag-and-drop.png" - }, - { - title: "ChatGram - Real Time Chat Application", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/chatgram", - description: "Real Time Chatting Application", - imgSrc: "assets/ChatGram.png" - }, - { - title: "", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/chatgram", - description: "Real Time Chatting Application", - imgSrc: "assets/ChatGram.png" - } - -]; - -const container = document.getElementById('projects-container'); - -projects.forEach(project => { - const projectDiv = document.createElement('div'); - projectDiv.className = 'col-md-2 mb-4 d-md-inline-block'; - projectDiv.innerHTML = ` -
- React App -
- -
${project.title}
-
-
-
- `; - container.appendChild(projectDiv); -}); \ No newline at end of file diff --git a/.history/projects_20241018184504.js b/.history/projects_20241018184504.js deleted file mode 100644 index bfe04493..00000000 --- a/.history/projects_20241018184504.js +++ /dev/null @@ -1,268 +0,0 @@ -// Please add your project details in the below array. -const projects = [ - { - title: "React Todo App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-todo-app", - description: "Start your coding journey with a beginner-friendly React Todo App, perfect for learning task management and basic web development", - imgSrc: "assets/todo.png" - }, - { - title: "React Weather app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Weather-app", - description: "Explore weather effortlessly with a beginner-friendly React Weather App, providing real-time forecasts and an intuitive user experience.", - imgSrc: "assets/weather.png" - }, - { - title: "React Stopwatch app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-stopwatch", - description: "Solidify your javascript concepts by making a React Stopwatch. You will learn how to manage javascript objects as state in React.", - imgSrc: "assets/stopwatch.png" - }, - { - title: "React Bank UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Bank-UI", - description: "Create an attractive landing page of your choice that will improve your designing skills.", - imgSrc: "assets/bank.png" - }, - { - title: "Movie Database App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Create a simple movie database app where you can search about movies. In this project you will learn about Card Components & how to manage dynamic data on page.", - imgSrc: "assets/movie.png" - }, - { - title: "React Expense Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/expense-tracker-react", - description: "Learn more about state management by creating an Expense Tracker.", - imgSrc: "assets/expense.png" - }, - { - title: "E-commerce Website React", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/E-commerce%20Website", - description: "React-based e-commerce site: Sleek design, vast product range, and secure checkout redefine online shopping.", - imgSrc: "assets/ecom.png" - }, - { - title: "GIF Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/GIF%20Generator", - description: "Experience the fun of GIF creation with our React-based GIF Generator. Easily create, customize, and share animated GIFs, adding excitement to your online conversations.", - imgSrc: "assets/gif.png" - }, - { - title: "Calculator App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/calculator-react", - description: "Experience the power of React with our intuitive Calculator app. Perform quick and accurate calculations with a sleek and user-friendly interface.", - imgSrc: "assets/calculator.png" - }, - { - title: "Meme App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/meme-app-react", - description: "Unleash your creativity with our React-powered Meme App. Craft and share hilarious memes effortlessly, adding humor to your social media.", - imgSrc: "assets/meme.png" - }, - { - title: "React Music App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-music-player", - description: "Immerse yourself in the world of music with our React-based Music Player. Enjoy seamless playback, playlist management, and a dynamic audio experience.", - imgSrc: "assets/music.png" - }, - { - title: "Quote Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/quotesgenerator", - description: "Get inspired with our React-based Quote Generator. Discover wisdom, motivation, and creativity at your fingertips, one quote at a time.", - imgSrc: "assets/quote.png" - }, - { - title: "Password Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react_password_generator", - description: "Boost your online security with our React Password Generator. Create strong, randomized passwords effortlessly to safeguard your digital life.", - imgSrc: "assets/password.png" - }, - { - title: "Score Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Score", - description: "ScoreKeeper app is applicable to any points-based game. It helps in accurately managing and keeping track of the score board, and displays the winner as well.", - imgSrc: "assets/score.png" - }, - { - title: "Riot Games Clone UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Riot-Games-Landing-Page-Clone", - description: "Riot Games Clone: A React project replicating the essence of Riot Games' popular gaming platform, offering a diverse gaming experience.", - imgSrc: "assets/riot.png" - }, - { - title: "Stock Dashboard", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Stock_Dashboard", - description: "This project gives the stock results for the unique company details and uses charts to display their historical and future predictions.", - imgSrc: "assets/stock.png" - }, - { - title: "QR Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/QR_Generator", - description: "A dynamic QR Code Generator that generates new QR codes for every input text or URL.", - imgSrc: "assets/qr.png" - }, - { - title: "Color Palette Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Color-Palette-Generator", - description: "A beautiful Color Palette Generator that generates harmonious color schemes with a click and easily copies hex codes. A useful tool for designers and developers.", - imgSrc: "assets/color.png" - }, - { - title: "Blob Generator", - url: "https://github.com/ojasggg/React-projects-for-beginners/tree/main/Blob_Generator", - description: "Simple Application useful for creators and designers who require unique Blob CSS code.", - imgSrc: "assets/blob.png" - }, - { - title: "Sorting Algorithm Visualizer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/soritng_algorithm_visualizer", - description: "This application has most of the sorting algorithms used in DSA and has a visual representation of how these sorting algorithms work in the background using clean UI in React.", - imgSrc: "assets/algorithm.png" - }, - { - title: "Web3 Theme Landing Page", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/web3_landing_page", - description: "Landing Page for Web3 applications. Used TailwindCSS for design and aos for minor animations.", - imgSrc: "assets/web3.png" - }, - { - title: "Text to Speech Converter", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/text_to_speech", - description: "Simple Website helpful to convert text written in the text area into voices. Controller of voice, sound, pitch and speed options are also provided.", - imgSrc: "assets/text2speech.png" - }, - { - title: "YouTube Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/youtube-clone", - description: "Explore this YouTube clone project where I've recreated the core functionalities of YouTube using React, HTML, CSS, and JavaScript. Experience seamless video playback, user authentication, and video upload functionalities in this beginner-friendly project.", - imgSrc: "assets/youtube.png" - }, - { - title: "Tic-Tac-Toe Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Tic-Tac-toe", - description: "Tic-Tac-Toe Game is a classic two-player game where opponents strategically place Xs and Os on a 3x3 grid, aiming to achieve a winning pattern of three in a row, column, or diagonal.", - imgSrc: "assets/tic.png" - }, - { - title: "Taskify Project", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Taskify-Project", - description: "Taskify-Project is an organizational tool designed to streamline project management, enabling users to create, assign, and track tasks efficiently within a collaborative environment.", - imgSrc: "assets/task.png" - }, - { - title: "Simple Movie Search", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Simple Movie Search is a straightforward tool allowing users to search for movies by title, providing basic information such as release year, genre, and synopsis.", - imgSrc: "assets/smovie.png" - }, - { - title: "Shopapp Redux", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/shopapp%20redux", - description: "Shop App Redux is a streamlined shopping experience powered by Redux, enhancing state management for seamless user interactions and efficient data handling.", - imgSrc: "assets/shop.png" - }, - { - title: "React Tenzies App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-tenzies-game", - description: "React Tenzies App is a web application built using the React JavaScript library, simulating the dice game Tenzi where players race to roll their dice to match a specific pattern, showcasing React's dynamic user interface capabilities.", - imgSrc: "assets/teniz.png" - }, - { - title: "Quiz Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Quiz-Game", - description: "Quiz Game is an interactive application that challenges players with questions on various topics, providing entertainment and opportunities for learning and testing knowledge.", - imgSrc: "assets/quiz.png" - }, - { - title: "Personal Portfolio", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Personal%20Portfolio", - description: "Personal Portfolio is a digital showcase of an individual's work, skills, and achievements, serving as a professional portfolio to highlight expertise and attract potential clients or employers.", - imgSrc: "assets/portfolio.png" - }, - { - title: "Dice App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Dice-App", - description: "A virtual dice-rolling application that simulates the randomness of traditional dice, offering convenience for various tabletop games and decision-making scenarios.", - imgSrc: "assets/dice.png" - }, - { - title: "Covid-19 Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Covid-19_Tracker", - description: "A tool for monitoring and visualizing real-time data on coronavirus cases, including infections, recoveries, and fatalities globally or regionally.", - imgSrc: "assets/covid.png" - }, - { - title: "Bank-KYC Form", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Bank-KYC-Form", - description: "A document where customers provide personal information and identification documents to comply with Know Your Customer regulations, ensuring legal and security compliance for banking services.", - imgSrc: "assets/kyc.png" - }, - { - title: "Guess the Number Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Guess-the-number-react-app-main", - description: "In the React Guess the Number Game, you try to figure out a secret number by making guesses.", - imgSrc: "assets/guess.png" - }, - { - title: "Myth Weaver - Ai Story Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Myth-Weaver", - description: "Myth Weaver is a story-creating AI model. Just give a few prompts, and it will provide you with 5 short stories, each 60 words long.", - imgSrc: "assets/story.png" - }, - { - title: "Twitter Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/twitter_clone/Twitter-Final-main", - description: "This is a simple Twitter Clone implementing the core features of Twitter.", - imgSrc: "assets/twitter.png" - }, - { - title: "Spotify Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Spotify-Clone", - description: "This is a simple Spotify Clone implementing the core features of Spotify. All the important functionalities of Spotify are implemented and the backend part is there for those who need it.", - imgSrc: "assets/spotify.png" - }, - { - title: "Markdown Previewer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Markdown-Previewer", - description: "Text to show on Hover", - imgSrc: "assets/mark.png" - }, - { - title: "Kanban: Drag & Drop Board", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/draganddrop-board", - description: "Its a simple drag and drop kanban style board to manage tasks", - imgSrc: "assets/drag-and-drop.png" - }, - { - title: "ChatGram - Real Time Chat Application", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/chatgram", - description: "Real Time Chatting Application", - imgSrc: "assets/ChatGram.png" - }, - { - title: "Comman ", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/chatgram", - description: "Real Time Chatting Application", - imgSrc: "assets/ChatGram.png" - } - -]; - -const container = document.getElementById('projects-container'); - -projects.forEach(project => { - const projectDiv = document.createElement('div'); - projectDiv.className = 'col-md-2 mb-4 d-md-inline-block'; - projectDiv.innerHTML = ` -
- React App -
- -
${project.title}
-
-
-
- `; - container.appendChild(projectDiv); -}); \ No newline at end of file diff --git a/.history/projects_20241018184512.js b/.history/projects_20241018184512.js deleted file mode 100644 index c2ea3996..00000000 --- a/.history/projects_20241018184512.js +++ /dev/null @@ -1,268 +0,0 @@ -// Please add your project details in the below array. -const projects = [ - { - title: "React Todo App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-todo-app", - description: "Start your coding journey with a beginner-friendly React Todo App, perfect for learning task management and basic web development", - imgSrc: "assets/todo.png" - }, - { - title: "React Weather app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Weather-app", - description: "Explore weather effortlessly with a beginner-friendly React Weather App, providing real-time forecasts and an intuitive user experience.", - imgSrc: "assets/weather.png" - }, - { - title: "React Stopwatch app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-stopwatch", - description: "Solidify your javascript concepts by making a React Stopwatch. You will learn how to manage javascript objects as state in React.", - imgSrc: "assets/stopwatch.png" - }, - { - title: "React Bank UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Bank-UI", - description: "Create an attractive landing page of your choice that will improve your designing skills.", - imgSrc: "assets/bank.png" - }, - { - title: "Movie Database App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Create a simple movie database app where you can search about movies. In this project you will learn about Card Components & how to manage dynamic data on page.", - imgSrc: "assets/movie.png" - }, - { - title: "React Expense Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/expense-tracker-react", - description: "Learn more about state management by creating an Expense Tracker.", - imgSrc: "assets/expense.png" - }, - { - title: "E-commerce Website React", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/E-commerce%20Website", - description: "React-based e-commerce site: Sleek design, vast product range, and secure checkout redefine online shopping.", - imgSrc: "assets/ecom.png" - }, - { - title: "GIF Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/GIF%20Generator", - description: "Experience the fun of GIF creation with our React-based GIF Generator. Easily create, customize, and share animated GIFs, adding excitement to your online conversations.", - imgSrc: "assets/gif.png" - }, - { - title: "Calculator App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/calculator-react", - description: "Experience the power of React with our intuitive Calculator app. Perform quick and accurate calculations with a sleek and user-friendly interface.", - imgSrc: "assets/calculator.png" - }, - { - title: "Meme App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/meme-app-react", - description: "Unleash your creativity with our React-powered Meme App. Craft and share hilarious memes effortlessly, adding humor to your social media.", - imgSrc: "assets/meme.png" - }, - { - title: "React Music App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-music-player", - description: "Immerse yourself in the world of music with our React-based Music Player. Enjoy seamless playback, playlist management, and a dynamic audio experience.", - imgSrc: "assets/music.png" - }, - { - title: "Quote Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/quotesgenerator", - description: "Get inspired with our React-based Quote Generator. Discover wisdom, motivation, and creativity at your fingertips, one quote at a time.", - imgSrc: "assets/quote.png" - }, - { - title: "Password Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react_password_generator", - description: "Boost your online security with our React Password Generator. Create strong, randomized passwords effortlessly to safeguard your digital life.", - imgSrc: "assets/password.png" - }, - { - title: "Score Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Score", - description: "ScoreKeeper app is applicable to any points-based game. It helps in accurately managing and keeping track of the score board, and displays the winner as well.", - imgSrc: "assets/score.png" - }, - { - title: "Riot Games Clone UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Riot-Games-Landing-Page-Clone", - description: "Riot Games Clone: A React project replicating the essence of Riot Games' popular gaming platform, offering a diverse gaming experience.", - imgSrc: "assets/riot.png" - }, - { - title: "Stock Dashboard", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Stock_Dashboard", - description: "This project gives the stock results for the unique company details and uses charts to display their historical and future predictions.", - imgSrc: "assets/stock.png" - }, - { - title: "QR Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/QR_Generator", - description: "A dynamic QR Code Generator that generates new QR codes for every input text or URL.", - imgSrc: "assets/qr.png" - }, - { - title: "Color Palette Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Color-Palette-Generator", - description: "A beautiful Color Palette Generator that generates harmonious color schemes with a click and easily copies hex codes. A useful tool for designers and developers.", - imgSrc: "assets/color.png" - }, - { - title: "Blob Generator", - url: "https://github.com/ojasggg/React-projects-for-beginners/tree/main/Blob_Generator", - description: "Simple Application useful for creators and designers who require unique Blob CSS code.", - imgSrc: "assets/blob.png" - }, - { - title: "Sorting Algorithm Visualizer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/soritng_algorithm_visualizer", - description: "This application has most of the sorting algorithms used in DSA and has a visual representation of how these sorting algorithms work in the background using clean UI in React.", - imgSrc: "assets/algorithm.png" - }, - { - title: "Web3 Theme Landing Page", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/web3_landing_page", - description: "Landing Page for Web3 applications. Used TailwindCSS for design and aos for minor animations.", - imgSrc: "assets/web3.png" - }, - { - title: "Text to Speech Converter", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/text_to_speech", - description: "Simple Website helpful to convert text written in the text area into voices. Controller of voice, sound, pitch and speed options are also provided.", - imgSrc: "assets/text2speech.png" - }, - { - title: "YouTube Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/youtube-clone", - description: "Explore this YouTube clone project where I've recreated the core functionalities of YouTube using React, HTML, CSS, and JavaScript. Experience seamless video playback, user authentication, and video upload functionalities in this beginner-friendly project.", - imgSrc: "assets/youtube.png" - }, - { - title: "Tic-Tac-Toe Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Tic-Tac-toe", - description: "Tic-Tac-Toe Game is a classic two-player game where opponents strategically place Xs and Os on a 3x3 grid, aiming to achieve a winning pattern of three in a row, column, or diagonal.", - imgSrc: "assets/tic.png" - }, - { - title: "Taskify Project", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Taskify-Project", - description: "Taskify-Project is an organizational tool designed to streamline project management, enabling users to create, assign, and track tasks efficiently within a collaborative environment.", - imgSrc: "assets/task.png" - }, - { - title: "Simple Movie Search", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Simple Movie Search is a straightforward tool allowing users to search for movies by title, providing basic information such as release year, genre, and synopsis.", - imgSrc: "assets/smovie.png" - }, - { - title: "Shopapp Redux", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/shopapp%20redux", - description: "Shop App Redux is a streamlined shopping experience powered by Redux, enhancing state management for seamless user interactions and efficient data handling.", - imgSrc: "assets/shop.png" - }, - { - title: "React Tenzies App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-tenzies-game", - description: "React Tenzies App is a web application built using the React JavaScript library, simulating the dice game Tenzi where players race to roll their dice to match a specific pattern, showcasing React's dynamic user interface capabilities.", - imgSrc: "assets/teniz.png" - }, - { - title: "Quiz Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Quiz-Game", - description: "Quiz Game is an interactive application that challenges players with questions on various topics, providing entertainment and opportunities for learning and testing knowledge.", - imgSrc: "assets/quiz.png" - }, - { - title: "Personal Portfolio", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Personal%20Portfolio", - description: "Personal Portfolio is a digital showcase of an individual's work, skills, and achievements, serving as a professional portfolio to highlight expertise and attract potential clients or employers.", - imgSrc: "assets/portfolio.png" - }, - { - title: "Dice App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Dice-App", - description: "A virtual dice-rolling application that simulates the randomness of traditional dice, offering convenience for various tabletop games and decision-making scenarios.", - imgSrc: "assets/dice.png" - }, - { - title: "Covid-19 Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Covid-19_Tracker", - description: "A tool for monitoring and visualizing real-time data on coronavirus cases, including infections, recoveries, and fatalities globally or regionally.", - imgSrc: "assets/covid.png" - }, - { - title: "Bank-KYC Form", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Bank-KYC-Form", - description: "A document where customers provide personal information and identification documents to comply with Know Your Customer regulations, ensuring legal and security compliance for banking services.", - imgSrc: "assets/kyc.png" - }, - { - title: "Guess the Number Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Guess-the-number-react-app-main", - description: "In the React Guess the Number Game, you try to figure out a secret number by making guesses.", - imgSrc: "assets/guess.png" - }, - { - title: "Myth Weaver - Ai Story Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Myth-Weaver", - description: "Myth Weaver is a story-creating AI model. Just give a few prompts, and it will provide you with 5 short stories, each 60 words long.", - imgSrc: "assets/story.png" - }, - { - title: "Twitter Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/twitter_clone/Twitter-Final-main", - description: "This is a simple Twitter Clone implementing the core features of Twitter.", - imgSrc: "assets/twitter.png" - }, - { - title: "Spotify Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Spotify-Clone", - description: "This is a simple Spotify Clone implementing the core features of Spotify. All the important functionalities of Spotify are implemented and the backend part is there for those who need it.", - imgSrc: "assets/spotify.png" - }, - { - title: "Markdown Previewer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Markdown-Previewer", - description: "Text to show on Hover", - imgSrc: "assets/mark.png" - }, - { - title: "Kanban: Drag & Drop Board", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/draganddrop-board", - description: "Its a simple drag and drop kanban style board to manage tasks", - imgSrc: "assets/drag-and-drop.png" - }, - { - title: "ChatGram - Real Time Chat Application", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/chatgram", - description: "Real Time Chatting Application", - imgSrc: "assets/ChatGram.png" - }, - { - title: "Farmer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/chatgram", - description: "Real Time Chatting Application", - imgSrc: "assets/ChatGram.png" - } - -]; - -const container = document.getElementById('projects-container'); - -projects.forEach(project => { - const projectDiv = document.createElement('div'); - projectDiv.className = 'col-md-2 mb-4 d-md-inline-block'; - projectDiv.innerHTML = ` -
- React App -
- -
${project.title}
-
-
-
- `; - container.appendChild(projectDiv); -}); \ No newline at end of file diff --git a/.history/projects_20241018184520.js b/.history/projects_20241018184520.js deleted file mode 100644 index d45a368a..00000000 --- a/.history/projects_20241018184520.js +++ /dev/null @@ -1,268 +0,0 @@ -// Please add your project details in the below array. -const projects = [ - { - title: "React Todo App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-todo-app", - description: "Start your coding journey with a beginner-friendly React Todo App, perfect for learning task management and basic web development", - imgSrc: "assets/todo.png" - }, - { - title: "React Weather app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Weather-app", - description: "Explore weather effortlessly with a beginner-friendly React Weather App, providing real-time forecasts and an intuitive user experience.", - imgSrc: "assets/weather.png" - }, - { - title: "React Stopwatch app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-stopwatch", - description: "Solidify your javascript concepts by making a React Stopwatch. You will learn how to manage javascript objects as state in React.", - imgSrc: "assets/stopwatch.png" - }, - { - title: "React Bank UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Bank-UI", - description: "Create an attractive landing page of your choice that will improve your designing skills.", - imgSrc: "assets/bank.png" - }, - { - title: "Movie Database App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Create a simple movie database app where you can search about movies. In this project you will learn about Card Components & how to manage dynamic data on page.", - imgSrc: "assets/movie.png" - }, - { - title: "React Expense Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/expense-tracker-react", - description: "Learn more about state management by creating an Expense Tracker.", - imgSrc: "assets/expense.png" - }, - { - title: "E-commerce Website React", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/E-commerce%20Website", - description: "React-based e-commerce site: Sleek design, vast product range, and secure checkout redefine online shopping.", - imgSrc: "assets/ecom.png" - }, - { - title: "GIF Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/GIF%20Generator", - description: "Experience the fun of GIF creation with our React-based GIF Generator. Easily create, customize, and share animated GIFs, adding excitement to your online conversations.", - imgSrc: "assets/gif.png" - }, - { - title: "Calculator App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/calculator-react", - description: "Experience the power of React with our intuitive Calculator app. Perform quick and accurate calculations with a sleek and user-friendly interface.", - imgSrc: "assets/calculator.png" - }, - { - title: "Meme App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/meme-app-react", - description: "Unleash your creativity with our React-powered Meme App. Craft and share hilarious memes effortlessly, adding humor to your social media.", - imgSrc: "assets/meme.png" - }, - { - title: "React Music App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-music-player", - description: "Immerse yourself in the world of music with our React-based Music Player. Enjoy seamless playback, playlist management, and a dynamic audio experience.", - imgSrc: "assets/music.png" - }, - { - title: "Quote Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/quotesgenerator", - description: "Get inspired with our React-based Quote Generator. Discover wisdom, motivation, and creativity at your fingertips, one quote at a time.", - imgSrc: "assets/quote.png" - }, - { - title: "Password Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react_password_generator", - description: "Boost your online security with our React Password Generator. Create strong, randomized passwords effortlessly to safeguard your digital life.", - imgSrc: "assets/password.png" - }, - { - title: "Score Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Score", - description: "ScoreKeeper app is applicable to any points-based game. It helps in accurately managing and keeping track of the score board, and displays the winner as well.", - imgSrc: "assets/score.png" - }, - { - title: "Riot Games Clone UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Riot-Games-Landing-Page-Clone", - description: "Riot Games Clone: A React project replicating the essence of Riot Games' popular gaming platform, offering a diverse gaming experience.", - imgSrc: "assets/riot.png" - }, - { - title: "Stock Dashboard", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Stock_Dashboard", - description: "This project gives the stock results for the unique company details and uses charts to display their historical and future predictions.", - imgSrc: "assets/stock.png" - }, - { - title: "QR Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/QR_Generator", - description: "A dynamic QR Code Generator that generates new QR codes for every input text or URL.", - imgSrc: "assets/qr.png" - }, - { - title: "Color Palette Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Color-Palette-Generator", - description: "A beautiful Color Palette Generator that generates harmonious color schemes with a click and easily copies hex codes. A useful tool for designers and developers.", - imgSrc: "assets/color.png" - }, - { - title: "Blob Generator", - url: "https://github.com/ojasggg/React-projects-for-beginners/tree/main/Blob_Generator", - description: "Simple Application useful for creators and designers who require unique Blob CSS code.", - imgSrc: "assets/blob.png" - }, - { - title: "Sorting Algorithm Visualizer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/soritng_algorithm_visualizer", - description: "This application has most of the sorting algorithms used in DSA and has a visual representation of how these sorting algorithms work in the background using clean UI in React.", - imgSrc: "assets/algorithm.png" - }, - { - title: "Web3 Theme Landing Page", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/web3_landing_page", - description: "Landing Page for Web3 applications. Used TailwindCSS for design and aos for minor animations.", - imgSrc: "assets/web3.png" - }, - { - title: "Text to Speech Converter", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/text_to_speech", - description: "Simple Website helpful to convert text written in the text area into voices. Controller of voice, sound, pitch and speed options are also provided.", - imgSrc: "assets/text2speech.png" - }, - { - title: "YouTube Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/youtube-clone", - description: "Explore this YouTube clone project where I've recreated the core functionalities of YouTube using React, HTML, CSS, and JavaScript. Experience seamless video playback, user authentication, and video upload functionalities in this beginner-friendly project.", - imgSrc: "assets/youtube.png" - }, - { - title: "Tic-Tac-Toe Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Tic-Tac-toe", - description: "Tic-Tac-Toe Game is a classic two-player game where opponents strategically place Xs and Os on a 3x3 grid, aiming to achieve a winning pattern of three in a row, column, or diagonal.", - imgSrc: "assets/tic.png" - }, - { - title: "Taskify Project", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Taskify-Project", - description: "Taskify-Project is an organizational tool designed to streamline project management, enabling users to create, assign, and track tasks efficiently within a collaborative environment.", - imgSrc: "assets/task.png" - }, - { - title: "Simple Movie Search", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Simple Movie Search is a straightforward tool allowing users to search for movies by title, providing basic information such as release year, genre, and synopsis.", - imgSrc: "assets/smovie.png" - }, - { - title: "Shopapp Redux", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/shopapp%20redux", - description: "Shop App Redux is a streamlined shopping experience powered by Redux, enhancing state management for seamless user interactions and efficient data handling.", - imgSrc: "assets/shop.png" - }, - { - title: "React Tenzies App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-tenzies-game", - description: "React Tenzies App is a web application built using the React JavaScript library, simulating the dice game Tenzi where players race to roll their dice to match a specific pattern, showcasing React's dynamic user interface capabilities.", - imgSrc: "assets/teniz.png" - }, - { - title: "Quiz Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Quiz-Game", - description: "Quiz Game is an interactive application that challenges players with questions on various topics, providing entertainment and opportunities for learning and testing knowledge.", - imgSrc: "assets/quiz.png" - }, - { - title: "Personal Portfolio", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Personal%20Portfolio", - description: "Personal Portfolio is a digital showcase of an individual's work, skills, and achievements, serving as a professional portfolio to highlight expertise and attract potential clients or employers.", - imgSrc: "assets/portfolio.png" - }, - { - title: "Dice App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Dice-App", - description: "A virtual dice-rolling application that simulates the randomness of traditional dice, offering convenience for various tabletop games and decision-making scenarios.", - imgSrc: "assets/dice.png" - }, - { - title: "Covid-19 Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Covid-19_Tracker", - description: "A tool for monitoring and visualizing real-time data on coronavirus cases, including infections, recoveries, and fatalities globally or regionally.", - imgSrc: "assets/covid.png" - }, - { - title: "Bank-KYC Form", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Bank-KYC-Form", - description: "A document where customers provide personal information and identification documents to comply with Know Your Customer regulations, ensuring legal and security compliance for banking services.", - imgSrc: "assets/kyc.png" - }, - { - title: "Guess the Number Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Guess-the-number-react-app-main", - description: "In the React Guess the Number Game, you try to figure out a secret number by making guesses.", - imgSrc: "assets/guess.png" - }, - { - title: "Myth Weaver - Ai Story Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Myth-Weaver", - description: "Myth Weaver is a story-creating AI model. Just give a few prompts, and it will provide you with 5 short stories, each 60 words long.", - imgSrc: "assets/story.png" - }, - { - title: "Twitter Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/twitter_clone/Twitter-Final-main", - description: "This is a simple Twitter Clone implementing the core features of Twitter.", - imgSrc: "assets/twitter.png" - }, - { - title: "Spotify Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Spotify-Clone", - description: "This is a simple Spotify Clone implementing the core features of Spotify. All the important functionalities of Spotify are implemented and the backend part is there for those who need it.", - imgSrc: "assets/spotify.png" - }, - { - title: "Markdown Previewer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Markdown-Previewer", - description: "Text to show on Hover", - imgSrc: "assets/mark.png" - }, - { - title: "Kanban: Drag & Drop Board", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/draganddrop-board", - description: "Its a simple drag and drop kanban style board to manage tasks", - imgSrc: "assets/drag-and-drop.png" - }, - { - title: "ChatGram - Real Time Chat Application", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/chatgram", - description: "Real Time Chatting Application", - imgSrc: "assets/ChatGram.png" - }, - { - title: "Farme", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/chatgram", - description: "Real Time Chatting Application", - imgSrc: "assets/ChatGram.png" - } - -]; - -const container = document.getElementById('projects-container'); - -projects.forEach(project => { - const projectDiv = document.createElement('div'); - projectDiv.className = 'col-md-2 mb-4 d-md-inline-block'; - projectDiv.innerHTML = ` -
- React App -
- -
${project.title}
-
-
-
- `; - container.appendChild(projectDiv); -}); \ No newline at end of file diff --git a/.history/projects_20241018184523.js b/.history/projects_20241018184523.js deleted file mode 100644 index c2ea3996..00000000 --- a/.history/projects_20241018184523.js +++ /dev/null @@ -1,268 +0,0 @@ -// Please add your project details in the below array. -const projects = [ - { - title: "React Todo App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-todo-app", - description: "Start your coding journey with a beginner-friendly React Todo App, perfect for learning task management and basic web development", - imgSrc: "assets/todo.png" - }, - { - title: "React Weather app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Weather-app", - description: "Explore weather effortlessly with a beginner-friendly React Weather App, providing real-time forecasts and an intuitive user experience.", - imgSrc: "assets/weather.png" - }, - { - title: "React Stopwatch app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-stopwatch", - description: "Solidify your javascript concepts by making a React Stopwatch. You will learn how to manage javascript objects as state in React.", - imgSrc: "assets/stopwatch.png" - }, - { - title: "React Bank UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Bank-UI", - description: "Create an attractive landing page of your choice that will improve your designing skills.", - imgSrc: "assets/bank.png" - }, - { - title: "Movie Database App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Create a simple movie database app where you can search about movies. In this project you will learn about Card Components & how to manage dynamic data on page.", - imgSrc: "assets/movie.png" - }, - { - title: "React Expense Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/expense-tracker-react", - description: "Learn more about state management by creating an Expense Tracker.", - imgSrc: "assets/expense.png" - }, - { - title: "E-commerce Website React", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/E-commerce%20Website", - description: "React-based e-commerce site: Sleek design, vast product range, and secure checkout redefine online shopping.", - imgSrc: "assets/ecom.png" - }, - { - title: "GIF Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/GIF%20Generator", - description: "Experience the fun of GIF creation with our React-based GIF Generator. Easily create, customize, and share animated GIFs, adding excitement to your online conversations.", - imgSrc: "assets/gif.png" - }, - { - title: "Calculator App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/calculator-react", - description: "Experience the power of React with our intuitive Calculator app. Perform quick and accurate calculations with a sleek and user-friendly interface.", - imgSrc: "assets/calculator.png" - }, - { - title: "Meme App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/meme-app-react", - description: "Unleash your creativity with our React-powered Meme App. Craft and share hilarious memes effortlessly, adding humor to your social media.", - imgSrc: "assets/meme.png" - }, - { - title: "React Music App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-music-player", - description: "Immerse yourself in the world of music with our React-based Music Player. Enjoy seamless playback, playlist management, and a dynamic audio experience.", - imgSrc: "assets/music.png" - }, - { - title: "Quote Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/quotesgenerator", - description: "Get inspired with our React-based Quote Generator. Discover wisdom, motivation, and creativity at your fingertips, one quote at a time.", - imgSrc: "assets/quote.png" - }, - { - title: "Password Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react_password_generator", - description: "Boost your online security with our React Password Generator. Create strong, randomized passwords effortlessly to safeguard your digital life.", - imgSrc: "assets/password.png" - }, - { - title: "Score Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Score", - description: "ScoreKeeper app is applicable to any points-based game. It helps in accurately managing and keeping track of the score board, and displays the winner as well.", - imgSrc: "assets/score.png" - }, - { - title: "Riot Games Clone UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Riot-Games-Landing-Page-Clone", - description: "Riot Games Clone: A React project replicating the essence of Riot Games' popular gaming platform, offering a diverse gaming experience.", - imgSrc: "assets/riot.png" - }, - { - title: "Stock Dashboard", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Stock_Dashboard", - description: "This project gives the stock results for the unique company details and uses charts to display their historical and future predictions.", - imgSrc: "assets/stock.png" - }, - { - title: "QR Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/QR_Generator", - description: "A dynamic QR Code Generator that generates new QR codes for every input text or URL.", - imgSrc: "assets/qr.png" - }, - { - title: "Color Palette Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Color-Palette-Generator", - description: "A beautiful Color Palette Generator that generates harmonious color schemes with a click and easily copies hex codes. A useful tool for designers and developers.", - imgSrc: "assets/color.png" - }, - { - title: "Blob Generator", - url: "https://github.com/ojasggg/React-projects-for-beginners/tree/main/Blob_Generator", - description: "Simple Application useful for creators and designers who require unique Blob CSS code.", - imgSrc: "assets/blob.png" - }, - { - title: "Sorting Algorithm Visualizer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/soritng_algorithm_visualizer", - description: "This application has most of the sorting algorithms used in DSA and has a visual representation of how these sorting algorithms work in the background using clean UI in React.", - imgSrc: "assets/algorithm.png" - }, - { - title: "Web3 Theme Landing Page", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/web3_landing_page", - description: "Landing Page for Web3 applications. Used TailwindCSS for design and aos for minor animations.", - imgSrc: "assets/web3.png" - }, - { - title: "Text to Speech Converter", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/text_to_speech", - description: "Simple Website helpful to convert text written in the text area into voices. Controller of voice, sound, pitch and speed options are also provided.", - imgSrc: "assets/text2speech.png" - }, - { - title: "YouTube Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/youtube-clone", - description: "Explore this YouTube clone project where I've recreated the core functionalities of YouTube using React, HTML, CSS, and JavaScript. Experience seamless video playback, user authentication, and video upload functionalities in this beginner-friendly project.", - imgSrc: "assets/youtube.png" - }, - { - title: "Tic-Tac-Toe Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Tic-Tac-toe", - description: "Tic-Tac-Toe Game is a classic two-player game where opponents strategically place Xs and Os on a 3x3 grid, aiming to achieve a winning pattern of three in a row, column, or diagonal.", - imgSrc: "assets/tic.png" - }, - { - title: "Taskify Project", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Taskify-Project", - description: "Taskify-Project is an organizational tool designed to streamline project management, enabling users to create, assign, and track tasks efficiently within a collaborative environment.", - imgSrc: "assets/task.png" - }, - { - title: "Simple Movie Search", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Simple Movie Search is a straightforward tool allowing users to search for movies by title, providing basic information such as release year, genre, and synopsis.", - imgSrc: "assets/smovie.png" - }, - { - title: "Shopapp Redux", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/shopapp%20redux", - description: "Shop App Redux is a streamlined shopping experience powered by Redux, enhancing state management for seamless user interactions and efficient data handling.", - imgSrc: "assets/shop.png" - }, - { - title: "React Tenzies App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-tenzies-game", - description: "React Tenzies App is a web application built using the React JavaScript library, simulating the dice game Tenzi where players race to roll their dice to match a specific pattern, showcasing React's dynamic user interface capabilities.", - imgSrc: "assets/teniz.png" - }, - { - title: "Quiz Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Quiz-Game", - description: "Quiz Game is an interactive application that challenges players with questions on various topics, providing entertainment and opportunities for learning and testing knowledge.", - imgSrc: "assets/quiz.png" - }, - { - title: "Personal Portfolio", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Personal%20Portfolio", - description: "Personal Portfolio is a digital showcase of an individual's work, skills, and achievements, serving as a professional portfolio to highlight expertise and attract potential clients or employers.", - imgSrc: "assets/portfolio.png" - }, - { - title: "Dice App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Dice-App", - description: "A virtual dice-rolling application that simulates the randomness of traditional dice, offering convenience for various tabletop games and decision-making scenarios.", - imgSrc: "assets/dice.png" - }, - { - title: "Covid-19 Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Covid-19_Tracker", - description: "A tool for monitoring and visualizing real-time data on coronavirus cases, including infections, recoveries, and fatalities globally or regionally.", - imgSrc: "assets/covid.png" - }, - { - title: "Bank-KYC Form", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Bank-KYC-Form", - description: "A document where customers provide personal information and identification documents to comply with Know Your Customer regulations, ensuring legal and security compliance for banking services.", - imgSrc: "assets/kyc.png" - }, - { - title: "Guess the Number Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Guess-the-number-react-app-main", - description: "In the React Guess the Number Game, you try to figure out a secret number by making guesses.", - imgSrc: "assets/guess.png" - }, - { - title: "Myth Weaver - Ai Story Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Myth-Weaver", - description: "Myth Weaver is a story-creating AI model. Just give a few prompts, and it will provide you with 5 short stories, each 60 words long.", - imgSrc: "assets/story.png" - }, - { - title: "Twitter Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/twitter_clone/Twitter-Final-main", - description: "This is a simple Twitter Clone implementing the core features of Twitter.", - imgSrc: "assets/twitter.png" - }, - { - title: "Spotify Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Spotify-Clone", - description: "This is a simple Spotify Clone implementing the core features of Spotify. All the important functionalities of Spotify are implemented and the backend part is there for those who need it.", - imgSrc: "assets/spotify.png" - }, - { - title: "Markdown Previewer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Markdown-Previewer", - description: "Text to show on Hover", - imgSrc: "assets/mark.png" - }, - { - title: "Kanban: Drag & Drop Board", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/draganddrop-board", - description: "Its a simple drag and drop kanban style board to manage tasks", - imgSrc: "assets/drag-and-drop.png" - }, - { - title: "ChatGram - Real Time Chat Application", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/chatgram", - description: "Real Time Chatting Application", - imgSrc: "assets/ChatGram.png" - }, - { - title: "Farmer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/chatgram", - description: "Real Time Chatting Application", - imgSrc: "assets/ChatGram.png" - } - -]; - -const container = document.getElementById('projects-container'); - -projects.forEach(project => { - const projectDiv = document.createElement('div'); - projectDiv.className = 'col-md-2 mb-4 d-md-inline-block'; - projectDiv.innerHTML = ` -
- React App -
- -
${project.title}
-
-
-
- `; - container.appendChild(projectDiv); -}); \ No newline at end of file diff --git a/.history/projects_20241018184527.js b/.history/projects_20241018184527.js deleted file mode 100644 index 4d464b20..00000000 --- a/.history/projects_20241018184527.js +++ /dev/null @@ -1,268 +0,0 @@ -// Please add your project details in the below array. -const projects = [ - { - title: "React Todo App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-todo-app", - description: "Start your coding journey with a beginner-friendly React Todo App, perfect for learning task management and basic web development", - imgSrc: "assets/todo.png" - }, - { - title: "React Weather app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Weather-app", - description: "Explore weather effortlessly with a beginner-friendly React Weather App, providing real-time forecasts and an intuitive user experience.", - imgSrc: "assets/weather.png" - }, - { - title: "React Stopwatch app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-stopwatch", - description: "Solidify your javascript concepts by making a React Stopwatch. You will learn how to manage javascript objects as state in React.", - imgSrc: "assets/stopwatch.png" - }, - { - title: "React Bank UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Bank-UI", - description: "Create an attractive landing page of your choice that will improve your designing skills.", - imgSrc: "assets/bank.png" - }, - { - title: "Movie Database App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Create a simple movie database app where you can search about movies. In this project you will learn about Card Components & how to manage dynamic data on page.", - imgSrc: "assets/movie.png" - }, - { - title: "React Expense Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/expense-tracker-react", - description: "Learn more about state management by creating an Expense Tracker.", - imgSrc: "assets/expense.png" - }, - { - title: "E-commerce Website React", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/E-commerce%20Website", - description: "React-based e-commerce site: Sleek design, vast product range, and secure checkout redefine online shopping.", - imgSrc: "assets/ecom.png" - }, - { - title: "GIF Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/GIF%20Generator", - description: "Experience the fun of GIF creation with our React-based GIF Generator. Easily create, customize, and share animated GIFs, adding excitement to your online conversations.", - imgSrc: "assets/gif.png" - }, - { - title: "Calculator App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/calculator-react", - description: "Experience the power of React with our intuitive Calculator app. Perform quick and accurate calculations with a sleek and user-friendly interface.", - imgSrc: "assets/calculator.png" - }, - { - title: "Meme App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/meme-app-react", - description: "Unleash your creativity with our React-powered Meme App. Craft and share hilarious memes effortlessly, adding humor to your social media.", - imgSrc: "assets/meme.png" - }, - { - title: "React Music App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-music-player", - description: "Immerse yourself in the world of music with our React-based Music Player. Enjoy seamless playback, playlist management, and a dynamic audio experience.", - imgSrc: "assets/music.png" - }, - { - title: "Quote Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/quotesgenerator", - description: "Get inspired with our React-based Quote Generator. Discover wisdom, motivation, and creativity at your fingertips, one quote at a time.", - imgSrc: "assets/quote.png" - }, - { - title: "Password Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react_password_generator", - description: "Boost your online security with our React Password Generator. Create strong, randomized passwords effortlessly to safeguard your digital life.", - imgSrc: "assets/password.png" - }, - { - title: "Score Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Score", - description: "ScoreKeeper app is applicable to any points-based game. It helps in accurately managing and keeping track of the score board, and displays the winner as well.", - imgSrc: "assets/score.png" - }, - { - title: "Riot Games Clone UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Riot-Games-Landing-Page-Clone", - description: "Riot Games Clone: A React project replicating the essence of Riot Games' popular gaming platform, offering a diverse gaming experience.", - imgSrc: "assets/riot.png" - }, - { - title: "Stock Dashboard", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Stock_Dashboard", - description: "This project gives the stock results for the unique company details and uses charts to display their historical and future predictions.", - imgSrc: "assets/stock.png" - }, - { - title: "QR Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/QR_Generator", - description: "A dynamic QR Code Generator that generates new QR codes for every input text or URL.", - imgSrc: "assets/qr.png" - }, - { - title: "Color Palette Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Color-Palette-Generator", - description: "A beautiful Color Palette Generator that generates harmonious color schemes with a click and easily copies hex codes. A useful tool for designers and developers.", - imgSrc: "assets/color.png" - }, - { - title: "Blob Generator", - url: "https://github.com/ojasggg/React-projects-for-beginners/tree/main/Blob_Generator", - description: "Simple Application useful for creators and designers who require unique Blob CSS code.", - imgSrc: "assets/blob.png" - }, - { - title: "Sorting Algorithm Visualizer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/soritng_algorithm_visualizer", - description: "This application has most of the sorting algorithms used in DSA and has a visual representation of how these sorting algorithms work in the background using clean UI in React.", - imgSrc: "assets/algorithm.png" - }, - { - title: "Web3 Theme Landing Page", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/web3_landing_page", - description: "Landing Page for Web3 applications. Used TailwindCSS for design and aos for minor animations.", - imgSrc: "assets/web3.png" - }, - { - title: "Text to Speech Converter", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/text_to_speech", - description: "Simple Website helpful to convert text written in the text area into voices. Controller of voice, sound, pitch and speed options are also provided.", - imgSrc: "assets/text2speech.png" - }, - { - title: "YouTube Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/youtube-clone", - description: "Explore this YouTube clone project where I've recreated the core functionalities of YouTube using React, HTML, CSS, and JavaScript. Experience seamless video playback, user authentication, and video upload functionalities in this beginner-friendly project.", - imgSrc: "assets/youtube.png" - }, - { - title: "Tic-Tac-Toe Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Tic-Tac-toe", - description: "Tic-Tac-Toe Game is a classic two-player game where opponents strategically place Xs and Os on a 3x3 grid, aiming to achieve a winning pattern of three in a row, column, or diagonal.", - imgSrc: "assets/tic.png" - }, - { - title: "Taskify Project", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Taskify-Project", - description: "Taskify-Project is an organizational tool designed to streamline project management, enabling users to create, assign, and track tasks efficiently within a collaborative environment.", - imgSrc: "assets/task.png" - }, - { - title: "Simple Movie Search", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Simple Movie Search is a straightforward tool allowing users to search for movies by title, providing basic information such as release year, genre, and synopsis.", - imgSrc: "assets/smovie.png" - }, - { - title: "Shopapp Redux", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/shopapp%20redux", - description: "Shop App Redux is a streamlined shopping experience powered by Redux, enhancing state management for seamless user interactions and efficient data handling.", - imgSrc: "assets/shop.png" - }, - { - title: "React Tenzies App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-tenzies-game", - description: "React Tenzies App is a web application built using the React JavaScript library, simulating the dice game Tenzi where players race to roll their dice to match a specific pattern, showcasing React's dynamic user interface capabilities.", - imgSrc: "assets/teniz.png" - }, - { - title: "Quiz Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Quiz-Game", - description: "Quiz Game is an interactive application that challenges players with questions on various topics, providing entertainment and opportunities for learning and testing knowledge.", - imgSrc: "assets/quiz.png" - }, - { - title: "Personal Portfolio", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Personal%20Portfolio", - description: "Personal Portfolio is a digital showcase of an individual's work, skills, and achievements, serving as a professional portfolio to highlight expertise and attract potential clients or employers.", - imgSrc: "assets/portfolio.png" - }, - { - title: "Dice App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Dice-App", - description: "A virtual dice-rolling application that simulates the randomness of traditional dice, offering convenience for various tabletop games and decision-making scenarios.", - imgSrc: "assets/dice.png" - }, - { - title: "Covid-19 Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Covid-19_Tracker", - description: "A tool for monitoring and visualizing real-time data on coronavirus cases, including infections, recoveries, and fatalities globally or regionally.", - imgSrc: "assets/covid.png" - }, - { - title: "Bank-KYC Form", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Bank-KYC-Form", - description: "A document where customers provide personal information and identification documents to comply with Know Your Customer regulations, ensuring legal and security compliance for banking services.", - imgSrc: "assets/kyc.png" - }, - { - title: "Guess the Number Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Guess-the-number-react-app-main", - description: "In the React Guess the Number Game, you try to figure out a secret number by making guesses.", - imgSrc: "assets/guess.png" - }, - { - title: "Myth Weaver - Ai Story Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Myth-Weaver", - description: "Myth Weaver is a story-creating AI model. Just give a few prompts, and it will provide you with 5 short stories, each 60 words long.", - imgSrc: "assets/story.png" - }, - { - title: "Twitter Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/twitter_clone/Twitter-Final-main", - description: "This is a simple Twitter Clone implementing the core features of Twitter.", - imgSrc: "assets/twitter.png" - }, - { - title: "Spotify Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Spotify-Clone", - description: "This is a simple Spotify Clone implementing the core features of Spotify. All the important functionalities of Spotify are implemented and the backend part is there for those who need it.", - imgSrc: "assets/spotify.png" - }, - { - title: "Markdown Previewer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Markdown-Previewer", - description: "Text to show on Hover", - imgSrc: "assets/mark.png" - }, - { - title: "Kanban: Drag & Drop Board", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/draganddrop-board", - description: "Its a simple drag and drop kanban style board to manage tasks", - imgSrc: "assets/drag-and-drop.png" - }, - { - title: "ChatGram - Real Time Chat Application", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/chatgram", - description: "Real Time Chatting Application", - imgSrc: "assets/ChatGram.png" - }, - { - title: "Farmer - Landing", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/chatgram", - description: "Real Time Chatting Application", - imgSrc: "assets/ChatGram.png" - } - -]; - -const container = document.getElementById('projects-container'); - -projects.forEach(project => { - const projectDiv = document.createElement('div'); - projectDiv.className = 'col-md-2 mb-4 d-md-inline-block'; - projectDiv.innerHTML = ` -
- React App -
- -
${project.title}
-
-
-
- `; - container.appendChild(projectDiv); -}); \ No newline at end of file diff --git a/.history/projects_20241018184530.js b/.history/projects_20241018184530.js deleted file mode 100644 index 355d4ac0..00000000 --- a/.history/projects_20241018184530.js +++ /dev/null @@ -1,268 +0,0 @@ -// Please add your project details in the below array. -const projects = [ - { - title: "React Todo App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-todo-app", - description: "Start your coding journey with a beginner-friendly React Todo App, perfect for learning task management and basic web development", - imgSrc: "assets/todo.png" - }, - { - title: "React Weather app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Weather-app", - description: "Explore weather effortlessly with a beginner-friendly React Weather App, providing real-time forecasts and an intuitive user experience.", - imgSrc: "assets/weather.png" - }, - { - title: "React Stopwatch app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-stopwatch", - description: "Solidify your javascript concepts by making a React Stopwatch. You will learn how to manage javascript objects as state in React.", - imgSrc: "assets/stopwatch.png" - }, - { - title: "React Bank UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Bank-UI", - description: "Create an attractive landing page of your choice that will improve your designing skills.", - imgSrc: "assets/bank.png" - }, - { - title: "Movie Database App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Create a simple movie database app where you can search about movies. In this project you will learn about Card Components & how to manage dynamic data on page.", - imgSrc: "assets/movie.png" - }, - { - title: "React Expense Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/expense-tracker-react", - description: "Learn more about state management by creating an Expense Tracker.", - imgSrc: "assets/expense.png" - }, - { - title: "E-commerce Website React", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/E-commerce%20Website", - description: "React-based e-commerce site: Sleek design, vast product range, and secure checkout redefine online shopping.", - imgSrc: "assets/ecom.png" - }, - { - title: "GIF Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/GIF%20Generator", - description: "Experience the fun of GIF creation with our React-based GIF Generator. Easily create, customize, and share animated GIFs, adding excitement to your online conversations.", - imgSrc: "assets/gif.png" - }, - { - title: "Calculator App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/calculator-react", - description: "Experience the power of React with our intuitive Calculator app. Perform quick and accurate calculations with a sleek and user-friendly interface.", - imgSrc: "assets/calculator.png" - }, - { - title: "Meme App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/meme-app-react", - description: "Unleash your creativity with our React-powered Meme App. Craft and share hilarious memes effortlessly, adding humor to your social media.", - imgSrc: "assets/meme.png" - }, - { - title: "React Music App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-music-player", - description: "Immerse yourself in the world of music with our React-based Music Player. Enjoy seamless playback, playlist management, and a dynamic audio experience.", - imgSrc: "assets/music.png" - }, - { - title: "Quote Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/quotesgenerator", - description: "Get inspired with our React-based Quote Generator. Discover wisdom, motivation, and creativity at your fingertips, one quote at a time.", - imgSrc: "assets/quote.png" - }, - { - title: "Password Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react_password_generator", - description: "Boost your online security with our React Password Generator. Create strong, randomized passwords effortlessly to safeguard your digital life.", - imgSrc: "assets/password.png" - }, - { - title: "Score Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Score", - description: "ScoreKeeper app is applicable to any points-based game. It helps in accurately managing and keeping track of the score board, and displays the winner as well.", - imgSrc: "assets/score.png" - }, - { - title: "Riot Games Clone UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Riot-Games-Landing-Page-Clone", - description: "Riot Games Clone: A React project replicating the essence of Riot Games' popular gaming platform, offering a diverse gaming experience.", - imgSrc: "assets/riot.png" - }, - { - title: "Stock Dashboard", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Stock_Dashboard", - description: "This project gives the stock results for the unique company details and uses charts to display their historical and future predictions.", - imgSrc: "assets/stock.png" - }, - { - title: "QR Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/QR_Generator", - description: "A dynamic QR Code Generator that generates new QR codes for every input text or URL.", - imgSrc: "assets/qr.png" - }, - { - title: "Color Palette Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Color-Palette-Generator", - description: "A beautiful Color Palette Generator that generates harmonious color schemes with a click and easily copies hex codes. A useful tool for designers and developers.", - imgSrc: "assets/color.png" - }, - { - title: "Blob Generator", - url: "https://github.com/ojasggg/React-projects-for-beginners/tree/main/Blob_Generator", - description: "Simple Application useful for creators and designers who require unique Blob CSS code.", - imgSrc: "assets/blob.png" - }, - { - title: "Sorting Algorithm Visualizer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/soritng_algorithm_visualizer", - description: "This application has most of the sorting algorithms used in DSA and has a visual representation of how these sorting algorithms work in the background using clean UI in React.", - imgSrc: "assets/algorithm.png" - }, - { - title: "Web3 Theme Landing Page", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/web3_landing_page", - description: "Landing Page for Web3 applications. Used TailwindCSS for design and aos for minor animations.", - imgSrc: "assets/web3.png" - }, - { - title: "Text to Speech Converter", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/text_to_speech", - description: "Simple Website helpful to convert text written in the text area into voices. Controller of voice, sound, pitch and speed options are also provided.", - imgSrc: "assets/text2speech.png" - }, - { - title: "YouTube Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/youtube-clone", - description: "Explore this YouTube clone project where I've recreated the core functionalities of YouTube using React, HTML, CSS, and JavaScript. Experience seamless video playback, user authentication, and video upload functionalities in this beginner-friendly project.", - imgSrc: "assets/youtube.png" - }, - { - title: "Tic-Tac-Toe Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Tic-Tac-toe", - description: "Tic-Tac-Toe Game is a classic two-player game where opponents strategically place Xs and Os on a 3x3 grid, aiming to achieve a winning pattern of three in a row, column, or diagonal.", - imgSrc: "assets/tic.png" - }, - { - title: "Taskify Project", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Taskify-Project", - description: "Taskify-Project is an organizational tool designed to streamline project management, enabling users to create, assign, and track tasks efficiently within a collaborative environment.", - imgSrc: "assets/task.png" - }, - { - title: "Simple Movie Search", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Simple Movie Search is a straightforward tool allowing users to search for movies by title, providing basic information such as release year, genre, and synopsis.", - imgSrc: "assets/smovie.png" - }, - { - title: "Shopapp Redux", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/shopapp%20redux", - description: "Shop App Redux is a streamlined shopping experience powered by Redux, enhancing state management for seamless user interactions and efficient data handling.", - imgSrc: "assets/shop.png" - }, - { - title: "React Tenzies App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-tenzies-game", - description: "React Tenzies App is a web application built using the React JavaScript library, simulating the dice game Tenzi where players race to roll their dice to match a specific pattern, showcasing React's dynamic user interface capabilities.", - imgSrc: "assets/teniz.png" - }, - { - title: "Quiz Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Quiz-Game", - description: "Quiz Game is an interactive application that challenges players with questions on various topics, providing entertainment and opportunities for learning and testing knowledge.", - imgSrc: "assets/quiz.png" - }, - { - title: "Personal Portfolio", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Personal%20Portfolio", - description: "Personal Portfolio is a digital showcase of an individual's work, skills, and achievements, serving as a professional portfolio to highlight expertise and attract potential clients or employers.", - imgSrc: "assets/portfolio.png" - }, - { - title: "Dice App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Dice-App", - description: "A virtual dice-rolling application that simulates the randomness of traditional dice, offering convenience for various tabletop games and decision-making scenarios.", - imgSrc: "assets/dice.png" - }, - { - title: "Covid-19 Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Covid-19_Tracker", - description: "A tool for monitoring and visualizing real-time data on coronavirus cases, including infections, recoveries, and fatalities globally or regionally.", - imgSrc: "assets/covid.png" - }, - { - title: "Bank-KYC Form", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Bank-KYC-Form", - description: "A document where customers provide personal information and identification documents to comply with Know Your Customer regulations, ensuring legal and security compliance for banking services.", - imgSrc: "assets/kyc.png" - }, - { - title: "Guess the Number Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Guess-the-number-react-app-main", - description: "In the React Guess the Number Game, you try to figure out a secret number by making guesses.", - imgSrc: "assets/guess.png" - }, - { - title: "Myth Weaver - Ai Story Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Myth-Weaver", - description: "Myth Weaver is a story-creating AI model. Just give a few prompts, and it will provide you with 5 short stories, each 60 words long.", - imgSrc: "assets/story.png" - }, - { - title: "Twitter Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/twitter_clone/Twitter-Final-main", - description: "This is a simple Twitter Clone implementing the core features of Twitter.", - imgSrc: "assets/twitter.png" - }, - { - title: "Spotify Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Spotify-Clone", - description: "This is a simple Spotify Clone implementing the core features of Spotify. All the important functionalities of Spotify are implemented and the backend part is there for those who need it.", - imgSrc: "assets/spotify.png" - }, - { - title: "Markdown Previewer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Markdown-Previewer", - description: "Text to show on Hover", - imgSrc: "assets/mark.png" - }, - { - title: "Kanban: Drag & Drop Board", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/draganddrop-board", - description: "Its a simple drag and drop kanban style board to manage tasks", - imgSrc: "assets/drag-and-drop.png" - }, - { - title: "ChatGram - Real Time Chat Application", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/chatgram", - description: "Real Time Chatting Application", - imgSrc: "assets/ChatGram.png" - }, - { - title: "Farmer - Landing Page", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/chatgram", - description: "Real Time Chatting Application", - imgSrc: "assets/ChatGram.png" - } - -]; - -const container = document.getElementById('projects-container'); - -projects.forEach(project => { - const projectDiv = document.createElement('div'); - projectDiv.className = 'col-md-2 mb-4 d-md-inline-block'; - projectDiv.innerHTML = ` -
- React App -
- -
${project.title}
-
-
-
- `; - container.appendChild(projectDiv); -}); \ No newline at end of file diff --git a/.history/projects_20241018184536.js b/.history/projects_20241018184536.js deleted file mode 100644 index dfa88b5c..00000000 --- a/.history/projects_20241018184536.js +++ /dev/null @@ -1,268 +0,0 @@ -// Please add your project details in the below array. -const projects = [ - { - title: "React Todo App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-todo-app", - description: "Start your coding journey with a beginner-friendly React Todo App, perfect for learning task management and basic web development", - imgSrc: "assets/todo.png" - }, - { - title: "React Weather app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Weather-app", - description: "Explore weather effortlessly with a beginner-friendly React Weather App, providing real-time forecasts and an intuitive user experience.", - imgSrc: "assets/weather.png" - }, - { - title: "React Stopwatch app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-stopwatch", - description: "Solidify your javascript concepts by making a React Stopwatch. You will learn how to manage javascript objects as state in React.", - imgSrc: "assets/stopwatch.png" - }, - { - title: "React Bank UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Bank-UI", - description: "Create an attractive landing page of your choice that will improve your designing skills.", - imgSrc: "assets/bank.png" - }, - { - title: "Movie Database App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Create a simple movie database app where you can search about movies. In this project you will learn about Card Components & how to manage dynamic data on page.", - imgSrc: "assets/movie.png" - }, - { - title: "React Expense Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/expense-tracker-react", - description: "Learn more about state management by creating an Expense Tracker.", - imgSrc: "assets/expense.png" - }, - { - title: "E-commerce Website React", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/E-commerce%20Website", - description: "React-based e-commerce site: Sleek design, vast product range, and secure checkout redefine online shopping.", - imgSrc: "assets/ecom.png" - }, - { - title: "GIF Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/GIF%20Generator", - description: "Experience the fun of GIF creation with our React-based GIF Generator. Easily create, customize, and share animated GIFs, adding excitement to your online conversations.", - imgSrc: "assets/gif.png" - }, - { - title: "Calculator App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/calculator-react", - description: "Experience the power of React with our intuitive Calculator app. Perform quick and accurate calculations with a sleek and user-friendly interface.", - imgSrc: "assets/calculator.png" - }, - { - title: "Meme App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/meme-app-react", - description: "Unleash your creativity with our React-powered Meme App. Craft and share hilarious memes effortlessly, adding humor to your social media.", - imgSrc: "assets/meme.png" - }, - { - title: "React Music App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-music-player", - description: "Immerse yourself in the world of music with our React-based Music Player. Enjoy seamless playback, playlist management, and a dynamic audio experience.", - imgSrc: "assets/music.png" - }, - { - title: "Quote Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/quotesgenerator", - description: "Get inspired with our React-based Quote Generator. Discover wisdom, motivation, and creativity at your fingertips, one quote at a time.", - imgSrc: "assets/quote.png" - }, - { - title: "Password Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react_password_generator", - description: "Boost your online security with our React Password Generator. Create strong, randomized passwords effortlessly to safeguard your digital life.", - imgSrc: "assets/password.png" - }, - { - title: "Score Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Score", - description: "ScoreKeeper app is applicable to any points-based game. It helps in accurately managing and keeping track of the score board, and displays the winner as well.", - imgSrc: "assets/score.png" - }, - { - title: "Riot Games Clone UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Riot-Games-Landing-Page-Clone", - description: "Riot Games Clone: A React project replicating the essence of Riot Games' popular gaming platform, offering a diverse gaming experience.", - imgSrc: "assets/riot.png" - }, - { - title: "Stock Dashboard", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Stock_Dashboard", - description: "This project gives the stock results for the unique company details and uses charts to display their historical and future predictions.", - imgSrc: "assets/stock.png" - }, - { - title: "QR Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/QR_Generator", - description: "A dynamic QR Code Generator that generates new QR codes for every input text or URL.", - imgSrc: "assets/qr.png" - }, - { - title: "Color Palette Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Color-Palette-Generator", - description: "A beautiful Color Palette Generator that generates harmonious color schemes with a click and easily copies hex codes. A useful tool for designers and developers.", - imgSrc: "assets/color.png" - }, - { - title: "Blob Generator", - url: "https://github.com/ojasggg/React-projects-for-beginners/tree/main/Blob_Generator", - description: "Simple Application useful for creators and designers who require unique Blob CSS code.", - imgSrc: "assets/blob.png" - }, - { - title: "Sorting Algorithm Visualizer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/soritng_algorithm_visualizer", - description: "This application has most of the sorting algorithms used in DSA and has a visual representation of how these sorting algorithms work in the background using clean UI in React.", - imgSrc: "assets/algorithm.png" - }, - { - title: "Web3 Theme Landing Page", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/web3_landing_page", - description: "Landing Page for Web3 applications. Used TailwindCSS for design and aos for minor animations.", - imgSrc: "assets/web3.png" - }, - { - title: "Text to Speech Converter", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/text_to_speech", - description: "Simple Website helpful to convert text written in the text area into voices. Controller of voice, sound, pitch and speed options are also provided.", - imgSrc: "assets/text2speech.png" - }, - { - title: "YouTube Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/youtube-clone", - description: "Explore this YouTube clone project where I've recreated the core functionalities of YouTube using React, HTML, CSS, and JavaScript. Experience seamless video playback, user authentication, and video upload functionalities in this beginner-friendly project.", - imgSrc: "assets/youtube.png" - }, - { - title: "Tic-Tac-Toe Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Tic-Tac-toe", - description: "Tic-Tac-Toe Game is a classic two-player game where opponents strategically place Xs and Os on a 3x3 grid, aiming to achieve a winning pattern of three in a row, column, or diagonal.", - imgSrc: "assets/tic.png" - }, - { - title: "Taskify Project", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Taskify-Project", - description: "Taskify-Project is an organizational tool designed to streamline project management, enabling users to create, assign, and track tasks efficiently within a collaborative environment.", - imgSrc: "assets/task.png" - }, - { - title: "Simple Movie Search", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Simple Movie Search is a straightforward tool allowing users to search for movies by title, providing basic information such as release year, genre, and synopsis.", - imgSrc: "assets/smovie.png" - }, - { - title: "Shopapp Redux", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/shopapp%20redux", - description: "Shop App Redux is a streamlined shopping experience powered by Redux, enhancing state management for seamless user interactions and efficient data handling.", - imgSrc: "assets/shop.png" - }, - { - title: "React Tenzies App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-tenzies-game", - description: "React Tenzies App is a web application built using the React JavaScript library, simulating the dice game Tenzi where players race to roll their dice to match a specific pattern, showcasing React's dynamic user interface capabilities.", - imgSrc: "assets/teniz.png" - }, - { - title: "Quiz Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Quiz-Game", - description: "Quiz Game is an interactive application that challenges players with questions on various topics, providing entertainment and opportunities for learning and testing knowledge.", - imgSrc: "assets/quiz.png" - }, - { - title: "Personal Portfolio", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Personal%20Portfolio", - description: "Personal Portfolio is a digital showcase of an individual's work, skills, and achievements, serving as a professional portfolio to highlight expertise and attract potential clients or employers.", - imgSrc: "assets/portfolio.png" - }, - { - title: "Dice App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Dice-App", - description: "A virtual dice-rolling application that simulates the randomness of traditional dice, offering convenience for various tabletop games and decision-making scenarios.", - imgSrc: "assets/dice.png" - }, - { - title: "Covid-19 Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Covid-19_Tracker", - description: "A tool for monitoring and visualizing real-time data on coronavirus cases, including infections, recoveries, and fatalities globally or regionally.", - imgSrc: "assets/covid.png" - }, - { - title: "Bank-KYC Form", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Bank-KYC-Form", - description: "A document where customers provide personal information and identification documents to comply with Know Your Customer regulations, ensuring legal and security compliance for banking services.", - imgSrc: "assets/kyc.png" - }, - { - title: "Guess the Number Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Guess-the-number-react-app-main", - description: "In the React Guess the Number Game, you try to figure out a secret number by making guesses.", - imgSrc: "assets/guess.png" - }, - { - title: "Myth Weaver - Ai Story Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Myth-Weaver", - description: "Myth Weaver is a story-creating AI model. Just give a few prompts, and it will provide you with 5 short stories, each 60 words long.", - imgSrc: "assets/story.png" - }, - { - title: "Twitter Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/twitter_clone/Twitter-Final-main", - description: "This is a simple Twitter Clone implementing the core features of Twitter.", - imgSrc: "assets/twitter.png" - }, - { - title: "Spotify Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Spotify-Clone", - description: "This is a simple Spotify Clone implementing the core features of Spotify. All the important functionalities of Spotify are implemented and the backend part is there for those who need it.", - imgSrc: "assets/spotify.png" - }, - { - title: "Markdown Previewer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Markdown-Previewer", - description: "Text to show on Hover", - imgSrc: "assets/mark.png" - }, - { - title: "Kanban: Drag & Drop Board", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/draganddrop-board", - description: "Its a simple drag and drop kanban style board to manage tasks", - imgSrc: "assets/drag-and-drop.png" - }, - { - title: "ChatGram - Real Time Chat Application", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/chatgram", - description: "Real Time Chatting Application", - imgSrc: "assets/ChatGram.png" - }, - { - title: "Farmer - Landing Page", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/chatgram", - description: "", - imgSrc: "assets/ChatGram.png" - } - -]; - -const container = document.getElementById('projects-container'); - -projects.forEach(project => { - const projectDiv = document.createElement('div'); - projectDiv.className = 'col-md-2 mb-4 d-md-inline-block'; - projectDiv.innerHTML = ` -
- React App -
- -
${project.title}
-
-
-
- `; - container.appendChild(projectDiv); -}); \ No newline at end of file diff --git a/.history/projects_20241018184541.js b/.history/projects_20241018184541.js deleted file mode 100644 index d547e804..00000000 --- a/.history/projects_20241018184541.js +++ /dev/null @@ -1,268 +0,0 @@ -// Please add your project details in the below array. -const projects = [ - { - title: "React Todo App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-todo-app", - description: "Start your coding journey with a beginner-friendly React Todo App, perfect for learning task management and basic web development", - imgSrc: "assets/todo.png" - }, - { - title: "React Weather app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Weather-app", - description: "Explore weather effortlessly with a beginner-friendly React Weather App, providing real-time forecasts and an intuitive user experience.", - imgSrc: "assets/weather.png" - }, - { - title: "React Stopwatch app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-stopwatch", - description: "Solidify your javascript concepts by making a React Stopwatch. You will learn how to manage javascript objects as state in React.", - imgSrc: "assets/stopwatch.png" - }, - { - title: "React Bank UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Bank-UI", - description: "Create an attractive landing page of your choice that will improve your designing skills.", - imgSrc: "assets/bank.png" - }, - { - title: "Movie Database App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Create a simple movie database app where you can search about movies. In this project you will learn about Card Components & how to manage dynamic data on page.", - imgSrc: "assets/movie.png" - }, - { - title: "React Expense Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/expense-tracker-react", - description: "Learn more about state management by creating an Expense Tracker.", - imgSrc: "assets/expense.png" - }, - { - title: "E-commerce Website React", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/E-commerce%20Website", - description: "React-based e-commerce site: Sleek design, vast product range, and secure checkout redefine online shopping.", - imgSrc: "assets/ecom.png" - }, - { - title: "GIF Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/GIF%20Generator", - description: "Experience the fun of GIF creation with our React-based GIF Generator. Easily create, customize, and share animated GIFs, adding excitement to your online conversations.", - imgSrc: "assets/gif.png" - }, - { - title: "Calculator App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/calculator-react", - description: "Experience the power of React with our intuitive Calculator app. Perform quick and accurate calculations with a sleek and user-friendly interface.", - imgSrc: "assets/calculator.png" - }, - { - title: "Meme App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/meme-app-react", - description: "Unleash your creativity with our React-powered Meme App. Craft and share hilarious memes effortlessly, adding humor to your social media.", - imgSrc: "assets/meme.png" - }, - { - title: "React Music App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-music-player", - description: "Immerse yourself in the world of music with our React-based Music Player. Enjoy seamless playback, playlist management, and a dynamic audio experience.", - imgSrc: "assets/music.png" - }, - { - title: "Quote Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/quotesgenerator", - description: "Get inspired with our React-based Quote Generator. Discover wisdom, motivation, and creativity at your fingertips, one quote at a time.", - imgSrc: "assets/quote.png" - }, - { - title: "Password Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react_password_generator", - description: "Boost your online security with our React Password Generator. Create strong, randomized passwords effortlessly to safeguard your digital life.", - imgSrc: "assets/password.png" - }, - { - title: "Score Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Score", - description: "ScoreKeeper app is applicable to any points-based game. It helps in accurately managing and keeping track of the score board, and displays the winner as well.", - imgSrc: "assets/score.png" - }, - { - title: "Riot Games Clone UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Riot-Games-Landing-Page-Clone", - description: "Riot Games Clone: A React project replicating the essence of Riot Games' popular gaming platform, offering a diverse gaming experience.", - imgSrc: "assets/riot.png" - }, - { - title: "Stock Dashboard", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Stock_Dashboard", - description: "This project gives the stock results for the unique company details and uses charts to display their historical and future predictions.", - imgSrc: "assets/stock.png" - }, - { - title: "QR Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/QR_Generator", - description: "A dynamic QR Code Generator that generates new QR codes for every input text or URL.", - imgSrc: "assets/qr.png" - }, - { - title: "Color Palette Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Color-Palette-Generator", - description: "A beautiful Color Palette Generator that generates harmonious color schemes with a click and easily copies hex codes. A useful tool for designers and developers.", - imgSrc: "assets/color.png" - }, - { - title: "Blob Generator", - url: "https://github.com/ojasggg/React-projects-for-beginners/tree/main/Blob_Generator", - description: "Simple Application useful for creators and designers who require unique Blob CSS code.", - imgSrc: "assets/blob.png" - }, - { - title: "Sorting Algorithm Visualizer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/soritng_algorithm_visualizer", - description: "This application has most of the sorting algorithms used in DSA and has a visual representation of how these sorting algorithms work in the background using clean UI in React.", - imgSrc: "assets/algorithm.png" - }, - { - title: "Web3 Theme Landing Page", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/web3_landing_page", - description: "Landing Page for Web3 applications. Used TailwindCSS for design and aos for minor animations.", - imgSrc: "assets/web3.png" - }, - { - title: "Text to Speech Converter", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/text_to_speech", - description: "Simple Website helpful to convert text written in the text area into voices. Controller of voice, sound, pitch and speed options are also provided.", - imgSrc: "assets/text2speech.png" - }, - { - title: "YouTube Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/youtube-clone", - description: "Explore this YouTube clone project where I've recreated the core functionalities of YouTube using React, HTML, CSS, and JavaScript. Experience seamless video playback, user authentication, and video upload functionalities in this beginner-friendly project.", - imgSrc: "assets/youtube.png" - }, - { - title: "Tic-Tac-Toe Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Tic-Tac-toe", - description: "Tic-Tac-Toe Game is a classic two-player game where opponents strategically place Xs and Os on a 3x3 grid, aiming to achieve a winning pattern of three in a row, column, or diagonal.", - imgSrc: "assets/tic.png" - }, - { - title: "Taskify Project", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Taskify-Project", - description: "Taskify-Project is an organizational tool designed to streamline project management, enabling users to create, assign, and track tasks efficiently within a collaborative environment.", - imgSrc: "assets/task.png" - }, - { - title: "Simple Movie Search", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Simple Movie Search is a straightforward tool allowing users to search for movies by title, providing basic information such as release year, genre, and synopsis.", - imgSrc: "assets/smovie.png" - }, - { - title: "Shopapp Redux", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/shopapp%20redux", - description: "Shop App Redux is a streamlined shopping experience powered by Redux, enhancing state management for seamless user interactions and efficient data handling.", - imgSrc: "assets/shop.png" - }, - { - title: "React Tenzies App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-tenzies-game", - description: "React Tenzies App is a web application built using the React JavaScript library, simulating the dice game Tenzi where players race to roll their dice to match a specific pattern, showcasing React's dynamic user interface capabilities.", - imgSrc: "assets/teniz.png" - }, - { - title: "Quiz Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Quiz-Game", - description: "Quiz Game is an interactive application that challenges players with questions on various topics, providing entertainment and opportunities for learning and testing knowledge.", - imgSrc: "assets/quiz.png" - }, - { - title: "Personal Portfolio", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Personal%20Portfolio", - description: "Personal Portfolio is a digital showcase of an individual's work, skills, and achievements, serving as a professional portfolio to highlight expertise and attract potential clients or employers.", - imgSrc: "assets/portfolio.png" - }, - { - title: "Dice App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Dice-App", - description: "A virtual dice-rolling application that simulates the randomness of traditional dice, offering convenience for various tabletop games and decision-making scenarios.", - imgSrc: "assets/dice.png" - }, - { - title: "Covid-19 Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Covid-19_Tracker", - description: "A tool for monitoring and visualizing real-time data on coronavirus cases, including infections, recoveries, and fatalities globally or regionally.", - imgSrc: "assets/covid.png" - }, - { - title: "Bank-KYC Form", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Bank-KYC-Form", - description: "A document where customers provide personal information and identification documents to comply with Know Your Customer regulations, ensuring legal and security compliance for banking services.", - imgSrc: "assets/kyc.png" - }, - { - title: "Guess the Number Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Guess-the-number-react-app-main", - description: "In the React Guess the Number Game, you try to figure out a secret number by making guesses.", - imgSrc: "assets/guess.png" - }, - { - title: "Myth Weaver - Ai Story Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Myth-Weaver", - description: "Myth Weaver is a story-creating AI model. Just give a few prompts, and it will provide you with 5 short stories, each 60 words long.", - imgSrc: "assets/story.png" - }, - { - title: "Twitter Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/twitter_clone/Twitter-Final-main", - description: "This is a simple Twitter Clone implementing the core features of Twitter.", - imgSrc: "assets/twitter.png" - }, - { - title: "Spotify Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Spotify-Clone", - description: "This is a simple Spotify Clone implementing the core features of Spotify. All the important functionalities of Spotify are implemented and the backend part is there for those who need it.", - imgSrc: "assets/spotify.png" - }, - { - title: "Markdown Previewer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Markdown-Previewer", - description: "Text to show on Hover", - imgSrc: "assets/mark.png" - }, - { - title: "Kanban: Drag & Drop Board", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/draganddrop-board", - description: "Its a simple drag and drop kanban style board to manage tasks", - imgSrc: "assets/drag-and-drop.png" - }, - { - title: "ChatGram - Real Time Chat Application", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/chatgram", - description: "Real Time Chatting Application", - imgSrc: "assets/ChatGram.png" - }, - { - title: "Farmer - Landing Page", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/chatgram", - description: "Landing ", - imgSrc: "assets/ChatGram.png" - } - -]; - -const container = document.getElementById('projects-container'); - -projects.forEach(project => { - const projectDiv = document.createElement('div'); - projectDiv.className = 'col-md-2 mb-4 d-md-inline-block'; - projectDiv.innerHTML = ` -
- React App -
- -
${project.title}
-
-
-
- `; - container.appendChild(projectDiv); -}); \ No newline at end of file diff --git a/.history/projects_20241018184543.js b/.history/projects_20241018184543.js deleted file mode 100644 index dfa88b5c..00000000 --- a/.history/projects_20241018184543.js +++ /dev/null @@ -1,268 +0,0 @@ -// Please add your project details in the below array. -const projects = [ - { - title: "React Todo App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-todo-app", - description: "Start your coding journey with a beginner-friendly React Todo App, perfect for learning task management and basic web development", - imgSrc: "assets/todo.png" - }, - { - title: "React Weather app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Weather-app", - description: "Explore weather effortlessly with a beginner-friendly React Weather App, providing real-time forecasts and an intuitive user experience.", - imgSrc: "assets/weather.png" - }, - { - title: "React Stopwatch app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-stopwatch", - description: "Solidify your javascript concepts by making a React Stopwatch. You will learn how to manage javascript objects as state in React.", - imgSrc: "assets/stopwatch.png" - }, - { - title: "React Bank UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Bank-UI", - description: "Create an attractive landing page of your choice that will improve your designing skills.", - imgSrc: "assets/bank.png" - }, - { - title: "Movie Database App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Create a simple movie database app where you can search about movies. In this project you will learn about Card Components & how to manage dynamic data on page.", - imgSrc: "assets/movie.png" - }, - { - title: "React Expense Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/expense-tracker-react", - description: "Learn more about state management by creating an Expense Tracker.", - imgSrc: "assets/expense.png" - }, - { - title: "E-commerce Website React", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/E-commerce%20Website", - description: "React-based e-commerce site: Sleek design, vast product range, and secure checkout redefine online shopping.", - imgSrc: "assets/ecom.png" - }, - { - title: "GIF Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/GIF%20Generator", - description: "Experience the fun of GIF creation with our React-based GIF Generator. Easily create, customize, and share animated GIFs, adding excitement to your online conversations.", - imgSrc: "assets/gif.png" - }, - { - title: "Calculator App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/calculator-react", - description: "Experience the power of React with our intuitive Calculator app. Perform quick and accurate calculations with a sleek and user-friendly interface.", - imgSrc: "assets/calculator.png" - }, - { - title: "Meme App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/meme-app-react", - description: "Unleash your creativity with our React-powered Meme App. Craft and share hilarious memes effortlessly, adding humor to your social media.", - imgSrc: "assets/meme.png" - }, - { - title: "React Music App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-music-player", - description: "Immerse yourself in the world of music with our React-based Music Player. Enjoy seamless playback, playlist management, and a dynamic audio experience.", - imgSrc: "assets/music.png" - }, - { - title: "Quote Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/quotesgenerator", - description: "Get inspired with our React-based Quote Generator. Discover wisdom, motivation, and creativity at your fingertips, one quote at a time.", - imgSrc: "assets/quote.png" - }, - { - title: "Password Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react_password_generator", - description: "Boost your online security with our React Password Generator. Create strong, randomized passwords effortlessly to safeguard your digital life.", - imgSrc: "assets/password.png" - }, - { - title: "Score Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Score", - description: "ScoreKeeper app is applicable to any points-based game. It helps in accurately managing and keeping track of the score board, and displays the winner as well.", - imgSrc: "assets/score.png" - }, - { - title: "Riot Games Clone UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Riot-Games-Landing-Page-Clone", - description: "Riot Games Clone: A React project replicating the essence of Riot Games' popular gaming platform, offering a diverse gaming experience.", - imgSrc: "assets/riot.png" - }, - { - title: "Stock Dashboard", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Stock_Dashboard", - description: "This project gives the stock results for the unique company details and uses charts to display their historical and future predictions.", - imgSrc: "assets/stock.png" - }, - { - title: "QR Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/QR_Generator", - description: "A dynamic QR Code Generator that generates new QR codes for every input text or URL.", - imgSrc: "assets/qr.png" - }, - { - title: "Color Palette Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Color-Palette-Generator", - description: "A beautiful Color Palette Generator that generates harmonious color schemes with a click and easily copies hex codes. A useful tool for designers and developers.", - imgSrc: "assets/color.png" - }, - { - title: "Blob Generator", - url: "https://github.com/ojasggg/React-projects-for-beginners/tree/main/Blob_Generator", - description: "Simple Application useful for creators and designers who require unique Blob CSS code.", - imgSrc: "assets/blob.png" - }, - { - title: "Sorting Algorithm Visualizer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/soritng_algorithm_visualizer", - description: "This application has most of the sorting algorithms used in DSA and has a visual representation of how these sorting algorithms work in the background using clean UI in React.", - imgSrc: "assets/algorithm.png" - }, - { - title: "Web3 Theme Landing Page", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/web3_landing_page", - description: "Landing Page for Web3 applications. Used TailwindCSS for design and aos for minor animations.", - imgSrc: "assets/web3.png" - }, - { - title: "Text to Speech Converter", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/text_to_speech", - description: "Simple Website helpful to convert text written in the text area into voices. Controller of voice, sound, pitch and speed options are also provided.", - imgSrc: "assets/text2speech.png" - }, - { - title: "YouTube Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/youtube-clone", - description: "Explore this YouTube clone project where I've recreated the core functionalities of YouTube using React, HTML, CSS, and JavaScript. Experience seamless video playback, user authentication, and video upload functionalities in this beginner-friendly project.", - imgSrc: "assets/youtube.png" - }, - { - title: "Tic-Tac-Toe Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Tic-Tac-toe", - description: "Tic-Tac-Toe Game is a classic two-player game where opponents strategically place Xs and Os on a 3x3 grid, aiming to achieve a winning pattern of three in a row, column, or diagonal.", - imgSrc: "assets/tic.png" - }, - { - title: "Taskify Project", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Taskify-Project", - description: "Taskify-Project is an organizational tool designed to streamline project management, enabling users to create, assign, and track tasks efficiently within a collaborative environment.", - imgSrc: "assets/task.png" - }, - { - title: "Simple Movie Search", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Simple Movie Search is a straightforward tool allowing users to search for movies by title, providing basic information such as release year, genre, and synopsis.", - imgSrc: "assets/smovie.png" - }, - { - title: "Shopapp Redux", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/shopapp%20redux", - description: "Shop App Redux is a streamlined shopping experience powered by Redux, enhancing state management for seamless user interactions and efficient data handling.", - imgSrc: "assets/shop.png" - }, - { - title: "React Tenzies App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-tenzies-game", - description: "React Tenzies App is a web application built using the React JavaScript library, simulating the dice game Tenzi where players race to roll their dice to match a specific pattern, showcasing React's dynamic user interface capabilities.", - imgSrc: "assets/teniz.png" - }, - { - title: "Quiz Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Quiz-Game", - description: "Quiz Game is an interactive application that challenges players with questions on various topics, providing entertainment and opportunities for learning and testing knowledge.", - imgSrc: "assets/quiz.png" - }, - { - title: "Personal Portfolio", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Personal%20Portfolio", - description: "Personal Portfolio is a digital showcase of an individual's work, skills, and achievements, serving as a professional portfolio to highlight expertise and attract potential clients or employers.", - imgSrc: "assets/portfolio.png" - }, - { - title: "Dice App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Dice-App", - description: "A virtual dice-rolling application that simulates the randomness of traditional dice, offering convenience for various tabletop games and decision-making scenarios.", - imgSrc: "assets/dice.png" - }, - { - title: "Covid-19 Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Covid-19_Tracker", - description: "A tool for monitoring and visualizing real-time data on coronavirus cases, including infections, recoveries, and fatalities globally or regionally.", - imgSrc: "assets/covid.png" - }, - { - title: "Bank-KYC Form", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Bank-KYC-Form", - description: "A document where customers provide personal information and identification documents to comply with Know Your Customer regulations, ensuring legal and security compliance for banking services.", - imgSrc: "assets/kyc.png" - }, - { - title: "Guess the Number Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Guess-the-number-react-app-main", - description: "In the React Guess the Number Game, you try to figure out a secret number by making guesses.", - imgSrc: "assets/guess.png" - }, - { - title: "Myth Weaver - Ai Story Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Myth-Weaver", - description: "Myth Weaver is a story-creating AI model. Just give a few prompts, and it will provide you with 5 short stories, each 60 words long.", - imgSrc: "assets/story.png" - }, - { - title: "Twitter Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/twitter_clone/Twitter-Final-main", - description: "This is a simple Twitter Clone implementing the core features of Twitter.", - imgSrc: "assets/twitter.png" - }, - { - title: "Spotify Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Spotify-Clone", - description: "This is a simple Spotify Clone implementing the core features of Spotify. All the important functionalities of Spotify are implemented and the backend part is there for those who need it.", - imgSrc: "assets/spotify.png" - }, - { - title: "Markdown Previewer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Markdown-Previewer", - description: "Text to show on Hover", - imgSrc: "assets/mark.png" - }, - { - title: "Kanban: Drag & Drop Board", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/draganddrop-board", - description: "Its a simple drag and drop kanban style board to manage tasks", - imgSrc: "assets/drag-and-drop.png" - }, - { - title: "ChatGram - Real Time Chat Application", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/chatgram", - description: "Real Time Chatting Application", - imgSrc: "assets/ChatGram.png" - }, - { - title: "Farmer - Landing Page", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/chatgram", - description: "", - imgSrc: "assets/ChatGram.png" - } - -]; - -const container = document.getElementById('projects-container'); - -projects.forEach(project => { - const projectDiv = document.createElement('div'); - projectDiv.className = 'col-md-2 mb-4 d-md-inline-block'; - projectDiv.innerHTML = ` -
- React App -
- -
${project.title}
-
-
-
- `; - container.appendChild(projectDiv); -}); \ No newline at end of file diff --git a/.history/projects_20241018184546.js b/.history/projects_20241018184546.js deleted file mode 100644 index 26ee7ed5..00000000 --- a/.history/projects_20241018184546.js +++ /dev/null @@ -1,268 +0,0 @@ -// Please add your project details in the below array. -const projects = [ - { - title: "React Todo App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-todo-app", - description: "Start your coding journey with a beginner-friendly React Todo App, perfect for learning task management and basic web development", - imgSrc: "assets/todo.png" - }, - { - title: "React Weather app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Weather-app", - description: "Explore weather effortlessly with a beginner-friendly React Weather App, providing real-time forecasts and an intuitive user experience.", - imgSrc: "assets/weather.png" - }, - { - title: "React Stopwatch app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-stopwatch", - description: "Solidify your javascript concepts by making a React Stopwatch. You will learn how to manage javascript objects as state in React.", - imgSrc: "assets/stopwatch.png" - }, - { - title: "React Bank UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Bank-UI", - description: "Create an attractive landing page of your choice that will improve your designing skills.", - imgSrc: "assets/bank.png" - }, - { - title: "Movie Database App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Create a simple movie database app where you can search about movies. In this project you will learn about Card Components & how to manage dynamic data on page.", - imgSrc: "assets/movie.png" - }, - { - title: "React Expense Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/expense-tracker-react", - description: "Learn more about state management by creating an Expense Tracker.", - imgSrc: "assets/expense.png" - }, - { - title: "E-commerce Website React", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/E-commerce%20Website", - description: "React-based e-commerce site: Sleek design, vast product range, and secure checkout redefine online shopping.", - imgSrc: "assets/ecom.png" - }, - { - title: "GIF Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/GIF%20Generator", - description: "Experience the fun of GIF creation with our React-based GIF Generator. Easily create, customize, and share animated GIFs, adding excitement to your online conversations.", - imgSrc: "assets/gif.png" - }, - { - title: "Calculator App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/calculator-react", - description: "Experience the power of React with our intuitive Calculator app. Perform quick and accurate calculations with a sleek and user-friendly interface.", - imgSrc: "assets/calculator.png" - }, - { - title: "Meme App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/meme-app-react", - description: "Unleash your creativity with our React-powered Meme App. Craft and share hilarious memes effortlessly, adding humor to your social media.", - imgSrc: "assets/meme.png" - }, - { - title: "React Music App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-music-player", - description: "Immerse yourself in the world of music with our React-based Music Player. Enjoy seamless playback, playlist management, and a dynamic audio experience.", - imgSrc: "assets/music.png" - }, - { - title: "Quote Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/quotesgenerator", - description: "Get inspired with our React-based Quote Generator. Discover wisdom, motivation, and creativity at your fingertips, one quote at a time.", - imgSrc: "assets/quote.png" - }, - { - title: "Password Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react_password_generator", - description: "Boost your online security with our React Password Generator. Create strong, randomized passwords effortlessly to safeguard your digital life.", - imgSrc: "assets/password.png" - }, - { - title: "Score Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Score", - description: "ScoreKeeper app is applicable to any points-based game. It helps in accurately managing and keeping track of the score board, and displays the winner as well.", - imgSrc: "assets/score.png" - }, - { - title: "Riot Games Clone UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Riot-Games-Landing-Page-Clone", - description: "Riot Games Clone: A React project replicating the essence of Riot Games' popular gaming platform, offering a diverse gaming experience.", - imgSrc: "assets/riot.png" - }, - { - title: "Stock Dashboard", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Stock_Dashboard", - description: "This project gives the stock results for the unique company details and uses charts to display their historical and future predictions.", - imgSrc: "assets/stock.png" - }, - { - title: "QR Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/QR_Generator", - description: "A dynamic QR Code Generator that generates new QR codes for every input text or URL.", - imgSrc: "assets/qr.png" - }, - { - title: "Color Palette Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Color-Palette-Generator", - description: "A beautiful Color Palette Generator that generates harmonious color schemes with a click and easily copies hex codes. A useful tool for designers and developers.", - imgSrc: "assets/color.png" - }, - { - title: "Blob Generator", - url: "https://github.com/ojasggg/React-projects-for-beginners/tree/main/Blob_Generator", - description: "Simple Application useful for creators and designers who require unique Blob CSS code.", - imgSrc: "assets/blob.png" - }, - { - title: "Sorting Algorithm Visualizer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/soritng_algorithm_visualizer", - description: "This application has most of the sorting algorithms used in DSA and has a visual representation of how these sorting algorithms work in the background using clean UI in React.", - imgSrc: "assets/algorithm.png" - }, - { - title: "Web3 Theme Landing Page", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/web3_landing_page", - description: "Landing Page for Web3 applications. Used TailwindCSS for design and aos for minor animations.", - imgSrc: "assets/web3.png" - }, - { - title: "Text to Speech Converter", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/text_to_speech", - description: "Simple Website helpful to convert text written in the text area into voices. Controller of voice, sound, pitch and speed options are also provided.", - imgSrc: "assets/text2speech.png" - }, - { - title: "YouTube Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/youtube-clone", - description: "Explore this YouTube clone project where I've recreated the core functionalities of YouTube using React, HTML, CSS, and JavaScript. Experience seamless video playback, user authentication, and video upload functionalities in this beginner-friendly project.", - imgSrc: "assets/youtube.png" - }, - { - title: "Tic-Tac-Toe Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Tic-Tac-toe", - description: "Tic-Tac-Toe Game is a classic two-player game where opponents strategically place Xs and Os on a 3x3 grid, aiming to achieve a winning pattern of three in a row, column, or diagonal.", - imgSrc: "assets/tic.png" - }, - { - title: "Taskify Project", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Taskify-Project", - description: "Taskify-Project is an organizational tool designed to streamline project management, enabling users to create, assign, and track tasks efficiently within a collaborative environment.", - imgSrc: "assets/task.png" - }, - { - title: "Simple Movie Search", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Simple Movie Search is a straightforward tool allowing users to search for movies by title, providing basic information such as release year, genre, and synopsis.", - imgSrc: "assets/smovie.png" - }, - { - title: "Shopapp Redux", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/shopapp%20redux", - description: "Shop App Redux is a streamlined shopping experience powered by Redux, enhancing state management for seamless user interactions and efficient data handling.", - imgSrc: "assets/shop.png" - }, - { - title: "React Tenzies App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-tenzies-game", - description: "React Tenzies App is a web application built using the React JavaScript library, simulating the dice game Tenzi where players race to roll their dice to match a specific pattern, showcasing React's dynamic user interface capabilities.", - imgSrc: "assets/teniz.png" - }, - { - title: "Quiz Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Quiz-Game", - description: "Quiz Game is an interactive application that challenges players with questions on various topics, providing entertainment and opportunities for learning and testing knowledge.", - imgSrc: "assets/quiz.png" - }, - { - title: "Personal Portfolio", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Personal%20Portfolio", - description: "Personal Portfolio is a digital showcase of an individual's work, skills, and achievements, serving as a professional portfolio to highlight expertise and attract potential clients or employers.", - imgSrc: "assets/portfolio.png" - }, - { - title: "Dice App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Dice-App", - description: "A virtual dice-rolling application that simulates the randomness of traditional dice, offering convenience for various tabletop games and decision-making scenarios.", - imgSrc: "assets/dice.png" - }, - { - title: "Covid-19 Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Covid-19_Tracker", - description: "A tool for monitoring and visualizing real-time data on coronavirus cases, including infections, recoveries, and fatalities globally or regionally.", - imgSrc: "assets/covid.png" - }, - { - title: "Bank-KYC Form", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Bank-KYC-Form", - description: "A document where customers provide personal information and identification documents to comply with Know Your Customer regulations, ensuring legal and security compliance for banking services.", - imgSrc: "assets/kyc.png" - }, - { - title: "Guess the Number Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Guess-the-number-react-app-main", - description: "In the React Guess the Number Game, you try to figure out a secret number by making guesses.", - imgSrc: "assets/guess.png" - }, - { - title: "Myth Weaver - Ai Story Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Myth-Weaver", - description: "Myth Weaver is a story-creating AI model. Just give a few prompts, and it will provide you with 5 short stories, each 60 words long.", - imgSrc: "assets/story.png" - }, - { - title: "Twitter Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/twitter_clone/Twitter-Final-main", - description: "This is a simple Twitter Clone implementing the core features of Twitter.", - imgSrc: "assets/twitter.png" - }, - { - title: "Spotify Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Spotify-Clone", - description: "This is a simple Spotify Clone implementing the core features of Spotify. All the important functionalities of Spotify are implemented and the backend part is there for those who need it.", - imgSrc: "assets/spotify.png" - }, - { - title: "Markdown Previewer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Markdown-Previewer", - description: "Text to show on Hover", - imgSrc: "assets/mark.png" - }, - { - title: "Kanban: Drag & Drop Board", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/draganddrop-board", - description: "Its a simple drag and drop kanban style board to manage tasks", - imgSrc: "assets/drag-and-drop.png" - }, - { - title: "ChatGram - Real Time Chat Application", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/chatgram", - description: "Real Time Chatting Application", - imgSrc: "assets/ChatGram.png" - }, - { - title: "Farmer - Landing Page", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/chatgram", - description: "Command L", - imgSrc: "assets/ChatGram.png" - } - -]; - -const container = document.getElementById('projects-container'); - -projects.forEach(project => { - const projectDiv = document.createElement('div'); - projectDiv.className = 'col-md-2 mb-4 d-md-inline-block'; - projectDiv.innerHTML = ` -
- React App -
- -
${project.title}
-
-
-
- `; - container.appendChild(projectDiv); -}); \ No newline at end of file diff --git a/.history/projects_20241018184552.js b/.history/projects_20241018184552.js deleted file mode 100644 index aceffb13..00000000 --- a/.history/projects_20241018184552.js +++ /dev/null @@ -1,268 +0,0 @@ -// Please add your project details in the below array. -const projects = [ - { - title: "React Todo App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-todo-app", - description: "Start your coding journey with a beginner-friendly React Todo App, perfect for learning task management and basic web development", - imgSrc: "assets/todo.png" - }, - { - title: "React Weather app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Weather-app", - description: "Explore weather effortlessly with a beginner-friendly React Weather App, providing real-time forecasts and an intuitive user experience.", - imgSrc: "assets/weather.png" - }, - { - title: "React Stopwatch app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-stopwatch", - description: "Solidify your javascript concepts by making a React Stopwatch. You will learn how to manage javascript objects as state in React.", - imgSrc: "assets/stopwatch.png" - }, - { - title: "React Bank UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Bank-UI", - description: "Create an attractive landing page of your choice that will improve your designing skills.", - imgSrc: "assets/bank.png" - }, - { - title: "Movie Database App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Create a simple movie database app where you can search about movies. In this project you will learn about Card Components & how to manage dynamic data on page.", - imgSrc: "assets/movie.png" - }, - { - title: "React Expense Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/expense-tracker-react", - description: "Learn more about state management by creating an Expense Tracker.", - imgSrc: "assets/expense.png" - }, - { - title: "E-commerce Website React", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/E-commerce%20Website", - description: "React-based e-commerce site: Sleek design, vast product range, and secure checkout redefine online shopping.", - imgSrc: "assets/ecom.png" - }, - { - title: "GIF Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/GIF%20Generator", - description: "Experience the fun of GIF creation with our React-based GIF Generator. Easily create, customize, and share animated GIFs, adding excitement to your online conversations.", - imgSrc: "assets/gif.png" - }, - { - title: "Calculator App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/calculator-react", - description: "Experience the power of React with our intuitive Calculator app. Perform quick and accurate calculations with a sleek and user-friendly interface.", - imgSrc: "assets/calculator.png" - }, - { - title: "Meme App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/meme-app-react", - description: "Unleash your creativity with our React-powered Meme App. Craft and share hilarious memes effortlessly, adding humor to your social media.", - imgSrc: "assets/meme.png" - }, - { - title: "React Music App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-music-player", - description: "Immerse yourself in the world of music with our React-based Music Player. Enjoy seamless playback, playlist management, and a dynamic audio experience.", - imgSrc: "assets/music.png" - }, - { - title: "Quote Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/quotesgenerator", - description: "Get inspired with our React-based Quote Generator. Discover wisdom, motivation, and creativity at your fingertips, one quote at a time.", - imgSrc: "assets/quote.png" - }, - { - title: "Password Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react_password_generator", - description: "Boost your online security with our React Password Generator. Create strong, randomized passwords effortlessly to safeguard your digital life.", - imgSrc: "assets/password.png" - }, - { - title: "Score Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Score", - description: "ScoreKeeper app is applicable to any points-based game. It helps in accurately managing and keeping track of the score board, and displays the winner as well.", - imgSrc: "assets/score.png" - }, - { - title: "Riot Games Clone UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Riot-Games-Landing-Page-Clone", - description: "Riot Games Clone: A React project replicating the essence of Riot Games' popular gaming platform, offering a diverse gaming experience.", - imgSrc: "assets/riot.png" - }, - { - title: "Stock Dashboard", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Stock_Dashboard", - description: "This project gives the stock results for the unique company details and uses charts to display their historical and future predictions.", - imgSrc: "assets/stock.png" - }, - { - title: "QR Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/QR_Generator", - description: "A dynamic QR Code Generator that generates new QR codes for every input text or URL.", - imgSrc: "assets/qr.png" - }, - { - title: "Color Palette Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Color-Palette-Generator", - description: "A beautiful Color Palette Generator that generates harmonious color schemes with a click and easily copies hex codes. A useful tool for designers and developers.", - imgSrc: "assets/color.png" - }, - { - title: "Blob Generator", - url: "https://github.com/ojasggg/React-projects-for-beginners/tree/main/Blob_Generator", - description: "Simple Application useful for creators and designers who require unique Blob CSS code.", - imgSrc: "assets/blob.png" - }, - { - title: "Sorting Algorithm Visualizer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/soritng_algorithm_visualizer", - description: "This application has most of the sorting algorithms used in DSA and has a visual representation of how these sorting algorithms work in the background using clean UI in React.", - imgSrc: "assets/algorithm.png" - }, - { - title: "Web3 Theme Landing Page", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/web3_landing_page", - description: "Landing Page for Web3 applications. Used TailwindCSS for design and aos for minor animations.", - imgSrc: "assets/web3.png" - }, - { - title: "Text to Speech Converter", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/text_to_speech", - description: "Simple Website helpful to convert text written in the text area into voices. Controller of voice, sound, pitch and speed options are also provided.", - imgSrc: "assets/text2speech.png" - }, - { - title: "YouTube Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/youtube-clone", - description: "Explore this YouTube clone project where I've recreated the core functionalities of YouTube using React, HTML, CSS, and JavaScript. Experience seamless video playback, user authentication, and video upload functionalities in this beginner-friendly project.", - imgSrc: "assets/youtube.png" - }, - { - title: "Tic-Tac-Toe Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Tic-Tac-toe", - description: "Tic-Tac-Toe Game is a classic two-player game where opponents strategically place Xs and Os on a 3x3 grid, aiming to achieve a winning pattern of three in a row, column, or diagonal.", - imgSrc: "assets/tic.png" - }, - { - title: "Taskify Project", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Taskify-Project", - description: "Taskify-Project is an organizational tool designed to streamline project management, enabling users to create, assign, and track tasks efficiently within a collaborative environment.", - imgSrc: "assets/task.png" - }, - { - title: "Simple Movie Search", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Simple Movie Search is a straightforward tool allowing users to search for movies by title, providing basic information such as release year, genre, and synopsis.", - imgSrc: "assets/smovie.png" - }, - { - title: "Shopapp Redux", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/shopapp%20redux", - description: "Shop App Redux is a streamlined shopping experience powered by Redux, enhancing state management for seamless user interactions and efficient data handling.", - imgSrc: "assets/shop.png" - }, - { - title: "React Tenzies App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-tenzies-game", - description: "React Tenzies App is a web application built using the React JavaScript library, simulating the dice game Tenzi where players race to roll their dice to match a specific pattern, showcasing React's dynamic user interface capabilities.", - imgSrc: "assets/teniz.png" - }, - { - title: "Quiz Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Quiz-Game", - description: "Quiz Game is an interactive application that challenges players with questions on various topics, providing entertainment and opportunities for learning and testing knowledge.", - imgSrc: "assets/quiz.png" - }, - { - title: "Personal Portfolio", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Personal%20Portfolio", - description: "Personal Portfolio is a digital showcase of an individual's work, skills, and achievements, serving as a professional portfolio to highlight expertise and attract potential clients or employers.", - imgSrc: "assets/portfolio.png" - }, - { - title: "Dice App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Dice-App", - description: "A virtual dice-rolling application that simulates the randomness of traditional dice, offering convenience for various tabletop games and decision-making scenarios.", - imgSrc: "assets/dice.png" - }, - { - title: "Covid-19 Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Covid-19_Tracker", - description: "A tool for monitoring and visualizing real-time data on coronavirus cases, including infections, recoveries, and fatalities globally or regionally.", - imgSrc: "assets/covid.png" - }, - { - title: "Bank-KYC Form", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Bank-KYC-Form", - description: "A document where customers provide personal information and identification documents to comply with Know Your Customer regulations, ensuring legal and security compliance for banking services.", - imgSrc: "assets/kyc.png" - }, - { - title: "Guess the Number Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Guess-the-number-react-app-main", - description: "In the React Guess the Number Game, you try to figure out a secret number by making guesses.", - imgSrc: "assets/guess.png" - }, - { - title: "Myth Weaver - Ai Story Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Myth-Weaver", - description: "Myth Weaver is a story-creating AI model. Just give a few prompts, and it will provide you with 5 short stories, each 60 words long.", - imgSrc: "assets/story.png" - }, - { - title: "Twitter Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/twitter_clone/Twitter-Final-main", - description: "This is a simple Twitter Clone implementing the core features of Twitter.", - imgSrc: "assets/twitter.png" - }, - { - title: "Spotify Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Spotify-Clone", - description: "This is a simple Spotify Clone implementing the core features of Spotify. All the important functionalities of Spotify are implemented and the backend part is there for those who need it.", - imgSrc: "assets/spotify.png" - }, - { - title: "Markdown Previewer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Markdown-Previewer", - description: "Text to show on Hover", - imgSrc: "assets/mark.png" - }, - { - title: "Kanban: Drag & Drop Board", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/draganddrop-board", - description: "Its a simple drag and drop kanban style board to manage tasks", - imgSrc: "assets/drag-and-drop.png" - }, - { - title: "ChatGram - Real Time Chat Application", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/chatgram", - description: "Real Time Chatting Application", - imgSrc: "assets/ChatGram.png" - }, - { - title: "Farmer - Landing Page", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/chatgram", - description: "Comman Landing p", - imgSrc: "assets/ChatGram.png" - } - -]; - -const container = document.getElementById('projects-container'); - -projects.forEach(project => { - const projectDiv = document.createElement('div'); - projectDiv.className = 'col-md-2 mb-4 d-md-inline-block'; - projectDiv.innerHTML = ` -
- React App -
- -
${project.title}
-
-
-
- `; - container.appendChild(projectDiv); -}); \ No newline at end of file diff --git a/.history/projects_20241018184558.js b/.history/projects_20241018184558.js deleted file mode 100644 index b74c5189..00000000 --- a/.history/projects_20241018184558.js +++ /dev/null @@ -1,268 +0,0 @@ -// Please add your project details in the below array. -const projects = [ - { - title: "React Todo App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-todo-app", - description: "Start your coding journey with a beginner-friendly React Todo App, perfect for learning task management and basic web development", - imgSrc: "assets/todo.png" - }, - { - title: "React Weather app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Weather-app", - description: "Explore weather effortlessly with a beginner-friendly React Weather App, providing real-time forecasts and an intuitive user experience.", - imgSrc: "assets/weather.png" - }, - { - title: "React Stopwatch app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-stopwatch", - description: "Solidify your javascript concepts by making a React Stopwatch. You will learn how to manage javascript objects as state in React.", - imgSrc: "assets/stopwatch.png" - }, - { - title: "React Bank UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Bank-UI", - description: "Create an attractive landing page of your choice that will improve your designing skills.", - imgSrc: "assets/bank.png" - }, - { - title: "Movie Database App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Create a simple movie database app where you can search about movies. In this project you will learn about Card Components & how to manage dynamic data on page.", - imgSrc: "assets/movie.png" - }, - { - title: "React Expense Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/expense-tracker-react", - description: "Learn more about state management by creating an Expense Tracker.", - imgSrc: "assets/expense.png" - }, - { - title: "E-commerce Website React", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/E-commerce%20Website", - description: "React-based e-commerce site: Sleek design, vast product range, and secure checkout redefine online shopping.", - imgSrc: "assets/ecom.png" - }, - { - title: "GIF Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/GIF%20Generator", - description: "Experience the fun of GIF creation with our React-based GIF Generator. Easily create, customize, and share animated GIFs, adding excitement to your online conversations.", - imgSrc: "assets/gif.png" - }, - { - title: "Calculator App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/calculator-react", - description: "Experience the power of React with our intuitive Calculator app. Perform quick and accurate calculations with a sleek and user-friendly interface.", - imgSrc: "assets/calculator.png" - }, - { - title: "Meme App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/meme-app-react", - description: "Unleash your creativity with our React-powered Meme App. Craft and share hilarious memes effortlessly, adding humor to your social media.", - imgSrc: "assets/meme.png" - }, - { - title: "React Music App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-music-player", - description: "Immerse yourself in the world of music with our React-based Music Player. Enjoy seamless playback, playlist management, and a dynamic audio experience.", - imgSrc: "assets/music.png" - }, - { - title: "Quote Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/quotesgenerator", - description: "Get inspired with our React-based Quote Generator. Discover wisdom, motivation, and creativity at your fingertips, one quote at a time.", - imgSrc: "assets/quote.png" - }, - { - title: "Password Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react_password_generator", - description: "Boost your online security with our React Password Generator. Create strong, randomized passwords effortlessly to safeguard your digital life.", - imgSrc: "assets/password.png" - }, - { - title: "Score Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Score", - description: "ScoreKeeper app is applicable to any points-based game. It helps in accurately managing and keeping track of the score board, and displays the winner as well.", - imgSrc: "assets/score.png" - }, - { - title: "Riot Games Clone UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Riot-Games-Landing-Page-Clone", - description: "Riot Games Clone: A React project replicating the essence of Riot Games' popular gaming platform, offering a diverse gaming experience.", - imgSrc: "assets/riot.png" - }, - { - title: "Stock Dashboard", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Stock_Dashboard", - description: "This project gives the stock results for the unique company details and uses charts to display their historical and future predictions.", - imgSrc: "assets/stock.png" - }, - { - title: "QR Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/QR_Generator", - description: "A dynamic QR Code Generator that generates new QR codes for every input text or URL.", - imgSrc: "assets/qr.png" - }, - { - title: "Color Palette Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Color-Palette-Generator", - description: "A beautiful Color Palette Generator that generates harmonious color schemes with a click and easily copies hex codes. A useful tool for designers and developers.", - imgSrc: "assets/color.png" - }, - { - title: "Blob Generator", - url: "https://github.com/ojasggg/React-projects-for-beginners/tree/main/Blob_Generator", - description: "Simple Application useful for creators and designers who require unique Blob CSS code.", - imgSrc: "assets/blob.png" - }, - { - title: "Sorting Algorithm Visualizer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/soritng_algorithm_visualizer", - description: "This application has most of the sorting algorithms used in DSA and has a visual representation of how these sorting algorithms work in the background using clean UI in React.", - imgSrc: "assets/algorithm.png" - }, - { - title: "Web3 Theme Landing Page", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/web3_landing_page", - description: "Landing Page for Web3 applications. Used TailwindCSS for design and aos for minor animations.", - imgSrc: "assets/web3.png" - }, - { - title: "Text to Speech Converter", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/text_to_speech", - description: "Simple Website helpful to convert text written in the text area into voices. Controller of voice, sound, pitch and speed options are also provided.", - imgSrc: "assets/text2speech.png" - }, - { - title: "YouTube Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/youtube-clone", - description: "Explore this YouTube clone project where I've recreated the core functionalities of YouTube using React, HTML, CSS, and JavaScript. Experience seamless video playback, user authentication, and video upload functionalities in this beginner-friendly project.", - imgSrc: "assets/youtube.png" - }, - { - title: "Tic-Tac-Toe Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Tic-Tac-toe", - description: "Tic-Tac-Toe Game is a classic two-player game where opponents strategically place Xs and Os on a 3x3 grid, aiming to achieve a winning pattern of three in a row, column, or diagonal.", - imgSrc: "assets/tic.png" - }, - { - title: "Taskify Project", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Taskify-Project", - description: "Taskify-Project is an organizational tool designed to streamline project management, enabling users to create, assign, and track tasks efficiently within a collaborative environment.", - imgSrc: "assets/task.png" - }, - { - title: "Simple Movie Search", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Simple Movie Search is a straightforward tool allowing users to search for movies by title, providing basic information such as release year, genre, and synopsis.", - imgSrc: "assets/smovie.png" - }, - { - title: "Shopapp Redux", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/shopapp%20redux", - description: "Shop App Redux is a streamlined shopping experience powered by Redux, enhancing state management for seamless user interactions and efficient data handling.", - imgSrc: "assets/shop.png" - }, - { - title: "React Tenzies App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-tenzies-game", - description: "React Tenzies App is a web application built using the React JavaScript library, simulating the dice game Tenzi where players race to roll their dice to match a specific pattern, showcasing React's dynamic user interface capabilities.", - imgSrc: "assets/teniz.png" - }, - { - title: "Quiz Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Quiz-Game", - description: "Quiz Game is an interactive application that challenges players with questions on various topics, providing entertainment and opportunities for learning and testing knowledge.", - imgSrc: "assets/quiz.png" - }, - { - title: "Personal Portfolio", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Personal%20Portfolio", - description: "Personal Portfolio is a digital showcase of an individual's work, skills, and achievements, serving as a professional portfolio to highlight expertise and attract potential clients or employers.", - imgSrc: "assets/portfolio.png" - }, - { - title: "Dice App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Dice-App", - description: "A virtual dice-rolling application that simulates the randomness of traditional dice, offering convenience for various tabletop games and decision-making scenarios.", - imgSrc: "assets/dice.png" - }, - { - title: "Covid-19 Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Covid-19_Tracker", - description: "A tool for monitoring and visualizing real-time data on coronavirus cases, including infections, recoveries, and fatalities globally or regionally.", - imgSrc: "assets/covid.png" - }, - { - title: "Bank-KYC Form", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Bank-KYC-Form", - description: "A document where customers provide personal information and identification documents to comply with Know Your Customer regulations, ensuring legal and security compliance for banking services.", - imgSrc: "assets/kyc.png" - }, - { - title: "Guess the Number Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Guess-the-number-react-app-main", - description: "In the React Guess the Number Game, you try to figure out a secret number by making guesses.", - imgSrc: "assets/guess.png" - }, - { - title: "Myth Weaver - Ai Story Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Myth-Weaver", - description: "Myth Weaver is a story-creating AI model. Just give a few prompts, and it will provide you with 5 short stories, each 60 words long.", - imgSrc: "assets/story.png" - }, - { - title: "Twitter Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/twitter_clone/Twitter-Final-main", - description: "This is a simple Twitter Clone implementing the core features of Twitter.", - imgSrc: "assets/twitter.png" - }, - { - title: "Spotify Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Spotify-Clone", - description: "This is a simple Spotify Clone implementing the core features of Spotify. All the important functionalities of Spotify are implemented and the backend part is there for those who need it.", - imgSrc: "assets/spotify.png" - }, - { - title: "Markdown Previewer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Markdown-Previewer", - description: "Text to show on Hover", - imgSrc: "assets/mark.png" - }, - { - title: "Kanban: Drag & Drop Board", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/draganddrop-board", - description: "Its a simple drag and drop kanban style board to manage tasks", - imgSrc: "assets/drag-and-drop.png" - }, - { - title: "ChatGram - Real Time Chat Application", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/chatgram", - description: "Real Time Chatting Application", - imgSrc: "assets/ChatGram.png" - }, - { - title: "Farmer - Landing Page", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/chatgram", - description: "Comman Landing Page for farmers", - imgSrc: "assets/ChatGram.png" - } - -]; - -const container = document.getElementById('projects-container'); - -projects.forEach(project => { - const projectDiv = document.createElement('div'); - projectDiv.className = 'col-md-2 mb-4 d-md-inline-block'; - projectDiv.innerHTML = ` -
- React App -
- -
${project.title}
-
-
-
- `; - container.appendChild(projectDiv); -}); \ No newline at end of file diff --git a/.history/projects_20241018184612.js b/.history/projects_20241018184612.js deleted file mode 100644 index f362a1e3..00000000 --- a/.history/projects_20241018184612.js +++ /dev/null @@ -1,268 +0,0 @@ -// Please add your project details in the below array. -const projects = [ - { - title: "React Todo App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-todo-app", - description: "Start your coding journey with a beginner-friendly React Todo App, perfect for learning task management and basic web development", - imgSrc: "assets/todo.png" - }, - { - title: "React Weather app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Weather-app", - description: "Explore weather effortlessly with a beginner-friendly React Weather App, providing real-time forecasts and an intuitive user experience.", - imgSrc: "assets/weather.png" - }, - { - title: "React Stopwatch app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-stopwatch", - description: "Solidify your javascript concepts by making a React Stopwatch. You will learn how to manage javascript objects as state in React.", - imgSrc: "assets/stopwatch.png" - }, - { - title: "React Bank UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Bank-UI", - description: "Create an attractive landing page of your choice that will improve your designing skills.", - imgSrc: "assets/bank.png" - }, - { - title: "Movie Database App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Create a simple movie database app where you can search about movies. In this project you will learn about Card Components & how to manage dynamic data on page.", - imgSrc: "assets/movie.png" - }, - { - title: "React Expense Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/expense-tracker-react", - description: "Learn more about state management by creating an Expense Tracker.", - imgSrc: "assets/expense.png" - }, - { - title: "E-commerce Website React", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/E-commerce%20Website", - description: "React-based e-commerce site: Sleek design, vast product range, and secure checkout redefine online shopping.", - imgSrc: "assets/ecom.png" - }, - { - title: "GIF Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/GIF%20Generator", - description: "Experience the fun of GIF creation with our React-based GIF Generator. Easily create, customize, and share animated GIFs, adding excitement to your online conversations.", - imgSrc: "assets/gif.png" - }, - { - title: "Calculator App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/calculator-react", - description: "Experience the power of React with our intuitive Calculator app. Perform quick and accurate calculations with a sleek and user-friendly interface.", - imgSrc: "assets/calculator.png" - }, - { - title: "Meme App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/meme-app-react", - description: "Unleash your creativity with our React-powered Meme App. Craft and share hilarious memes effortlessly, adding humor to your social media.", - imgSrc: "assets/meme.png" - }, - { - title: "React Music App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-music-player", - description: "Immerse yourself in the world of music with our React-based Music Player. Enjoy seamless playback, playlist management, and a dynamic audio experience.", - imgSrc: "assets/music.png" - }, - { - title: "Quote Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/quotesgenerator", - description: "Get inspired with our React-based Quote Generator. Discover wisdom, motivation, and creativity at your fingertips, one quote at a time.", - imgSrc: "assets/quote.png" - }, - { - title: "Password Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react_password_generator", - description: "Boost your online security with our React Password Generator. Create strong, randomized passwords effortlessly to safeguard your digital life.", - imgSrc: "assets/password.png" - }, - { - title: "Score Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Score", - description: "ScoreKeeper app is applicable to any points-based game. It helps in accurately managing and keeping track of the score board, and displays the winner as well.", - imgSrc: "assets/score.png" - }, - { - title: "Riot Games Clone UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Riot-Games-Landing-Page-Clone", - description: "Riot Games Clone: A React project replicating the essence of Riot Games' popular gaming platform, offering a diverse gaming experience.", - imgSrc: "assets/riot.png" - }, - { - title: "Stock Dashboard", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Stock_Dashboard", - description: "This project gives the stock results for the unique company details and uses charts to display their historical and future predictions.", - imgSrc: "assets/stock.png" - }, - { - title: "QR Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/QR_Generator", - description: "A dynamic QR Code Generator that generates new QR codes for every input text or URL.", - imgSrc: "assets/qr.png" - }, - { - title: "Color Palette Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Color-Palette-Generator", - description: "A beautiful Color Palette Generator that generates harmonious color schemes with a click and easily copies hex codes. A useful tool for designers and developers.", - imgSrc: "assets/color.png" - }, - { - title: "Blob Generator", - url: "https://github.com/ojasggg/React-projects-for-beginners/tree/main/Blob_Generator", - description: "Simple Application useful for creators and designers who require unique Blob CSS code.", - imgSrc: "assets/blob.png" - }, - { - title: "Sorting Algorithm Visualizer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/soritng_algorithm_visualizer", - description: "This application has most of the sorting algorithms used in DSA and has a visual representation of how these sorting algorithms work in the background using clean UI in React.", - imgSrc: "assets/algorithm.png" - }, - { - title: "Web3 Theme Landing Page", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/web3_landing_page", - description: "Landing Page for Web3 applications. Used TailwindCSS for design and aos for minor animations.", - imgSrc: "assets/web3.png" - }, - { - title: "Text to Speech Converter", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/text_to_speech", - description: "Simple Website helpful to convert text written in the text area into voices. Controller of voice, sound, pitch and speed options are also provided.", - imgSrc: "assets/text2speech.png" - }, - { - title: "YouTube Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/youtube-clone", - description: "Explore this YouTube clone project where I've recreated the core functionalities of YouTube using React, HTML, CSS, and JavaScript. Experience seamless video playback, user authentication, and video upload functionalities in this beginner-friendly project.", - imgSrc: "assets/youtube.png" - }, - { - title: "Tic-Tac-Toe Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Tic-Tac-toe", - description: "Tic-Tac-Toe Game is a classic two-player game where opponents strategically place Xs and Os on a 3x3 grid, aiming to achieve a winning pattern of three in a row, column, or diagonal.", - imgSrc: "assets/tic.png" - }, - { - title: "Taskify Project", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Taskify-Project", - description: "Taskify-Project is an organizational tool designed to streamline project management, enabling users to create, assign, and track tasks efficiently within a collaborative environment.", - imgSrc: "assets/task.png" - }, - { - title: "Simple Movie Search", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Simple Movie Search is a straightforward tool allowing users to search for movies by title, providing basic information such as release year, genre, and synopsis.", - imgSrc: "assets/smovie.png" - }, - { - title: "Shopapp Redux", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/shopapp%20redux", - description: "Shop App Redux is a streamlined shopping experience powered by Redux, enhancing state management for seamless user interactions and efficient data handling.", - imgSrc: "assets/shop.png" - }, - { - title: "React Tenzies App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-tenzies-game", - description: "React Tenzies App is a web application built using the React JavaScript library, simulating the dice game Tenzi where players race to roll their dice to match a specific pattern, showcasing React's dynamic user interface capabilities.", - imgSrc: "assets/teniz.png" - }, - { - title: "Quiz Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Quiz-Game", - description: "Quiz Game is an interactive application that challenges players with questions on various topics, providing entertainment and opportunities for learning and testing knowledge.", - imgSrc: "assets/quiz.png" - }, - { - title: "Personal Portfolio", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Personal%20Portfolio", - description: "Personal Portfolio is a digital showcase of an individual's work, skills, and achievements, serving as a professional portfolio to highlight expertise and attract potential clients or employers.", - imgSrc: "assets/portfolio.png" - }, - { - title: "Dice App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Dice-App", - description: "A virtual dice-rolling application that simulates the randomness of traditional dice, offering convenience for various tabletop games and decision-making scenarios.", - imgSrc: "assets/dice.png" - }, - { - title: "Covid-19 Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Covid-19_Tracker", - description: "A tool for monitoring and visualizing real-time data on coronavirus cases, including infections, recoveries, and fatalities globally or regionally.", - imgSrc: "assets/covid.png" - }, - { - title: "Bank-KYC Form", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Bank-KYC-Form", - description: "A document where customers provide personal information and identification documents to comply with Know Your Customer regulations, ensuring legal and security compliance for banking services.", - imgSrc: "assets/kyc.png" - }, - { - title: "Guess the Number Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Guess-the-number-react-app-main", - description: "In the React Guess the Number Game, you try to figure out a secret number by making guesses.", - imgSrc: "assets/guess.png" - }, - { - title: "Myth Weaver - Ai Story Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Myth-Weaver", - description: "Myth Weaver is a story-creating AI model. Just give a few prompts, and it will provide you with 5 short stories, each 60 words long.", - imgSrc: "assets/story.png" - }, - { - title: "Twitter Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/twitter_clone/Twitter-Final-main", - description: "This is a simple Twitter Clone implementing the core features of Twitter.", - imgSrc: "assets/twitter.png" - }, - { - title: "Spotify Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Spotify-Clone", - description: "This is a simple Spotify Clone implementing the core features of Spotify. All the important functionalities of Spotify are implemented and the backend part is there for those who need it.", - imgSrc: "assets/spotify.png" - }, - { - title: "Markdown Previewer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Markdown-Previewer", - description: "Text to show on Hover", - imgSrc: "assets/mark.png" - }, - { - title: "Kanban: Drag & Drop Board", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/draganddrop-board", - description: "Its a simple drag and drop kanban style board to manage tasks", - imgSrc: "assets/drag-and-drop.png" - }, - { - title: "ChatGram - Real Time Chat Application", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/chatgram", - description: "Real Time Chatting Application", - imgSrc: "assets/ChatGram.png" - }, - { - title: "Farmer - Landing Page", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/chatgram", - description: "Comman Landing Page for farmers", - imgSrc: "assets/Comman Landing Page for farmers.png" - } - -]; - -const container = document.getElementById('projects-container'); - -projects.forEach(project => { - const projectDiv = document.createElement('div'); - projectDiv.className = 'col-md-2 mb-4 d-md-inline-block'; - projectDiv.innerHTML = ` -
- React App -
- -
${project.title}
-
-
-
- `; - container.appendChild(projectDiv); -}); \ No newline at end of file diff --git a/.history/projects_20241018184614.js b/.history/projects_20241018184614.js deleted file mode 100644 index b74c5189..00000000 --- a/.history/projects_20241018184614.js +++ /dev/null @@ -1,268 +0,0 @@ -// Please add your project details in the below array. -const projects = [ - { - title: "React Todo App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-todo-app", - description: "Start your coding journey with a beginner-friendly React Todo App, perfect for learning task management and basic web development", - imgSrc: "assets/todo.png" - }, - { - title: "React Weather app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Weather-app", - description: "Explore weather effortlessly with a beginner-friendly React Weather App, providing real-time forecasts and an intuitive user experience.", - imgSrc: "assets/weather.png" - }, - { - title: "React Stopwatch app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-stopwatch", - description: "Solidify your javascript concepts by making a React Stopwatch. You will learn how to manage javascript objects as state in React.", - imgSrc: "assets/stopwatch.png" - }, - { - title: "React Bank UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Bank-UI", - description: "Create an attractive landing page of your choice that will improve your designing skills.", - imgSrc: "assets/bank.png" - }, - { - title: "Movie Database App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Create a simple movie database app where you can search about movies. In this project you will learn about Card Components & how to manage dynamic data on page.", - imgSrc: "assets/movie.png" - }, - { - title: "React Expense Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/expense-tracker-react", - description: "Learn more about state management by creating an Expense Tracker.", - imgSrc: "assets/expense.png" - }, - { - title: "E-commerce Website React", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/E-commerce%20Website", - description: "React-based e-commerce site: Sleek design, vast product range, and secure checkout redefine online shopping.", - imgSrc: "assets/ecom.png" - }, - { - title: "GIF Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/GIF%20Generator", - description: "Experience the fun of GIF creation with our React-based GIF Generator. Easily create, customize, and share animated GIFs, adding excitement to your online conversations.", - imgSrc: "assets/gif.png" - }, - { - title: "Calculator App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/calculator-react", - description: "Experience the power of React with our intuitive Calculator app. Perform quick and accurate calculations with a sleek and user-friendly interface.", - imgSrc: "assets/calculator.png" - }, - { - title: "Meme App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/meme-app-react", - description: "Unleash your creativity with our React-powered Meme App. Craft and share hilarious memes effortlessly, adding humor to your social media.", - imgSrc: "assets/meme.png" - }, - { - title: "React Music App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-music-player", - description: "Immerse yourself in the world of music with our React-based Music Player. Enjoy seamless playback, playlist management, and a dynamic audio experience.", - imgSrc: "assets/music.png" - }, - { - title: "Quote Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/quotesgenerator", - description: "Get inspired with our React-based Quote Generator. Discover wisdom, motivation, and creativity at your fingertips, one quote at a time.", - imgSrc: "assets/quote.png" - }, - { - title: "Password Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react_password_generator", - description: "Boost your online security with our React Password Generator. Create strong, randomized passwords effortlessly to safeguard your digital life.", - imgSrc: "assets/password.png" - }, - { - title: "Score Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Score", - description: "ScoreKeeper app is applicable to any points-based game. It helps in accurately managing and keeping track of the score board, and displays the winner as well.", - imgSrc: "assets/score.png" - }, - { - title: "Riot Games Clone UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Riot-Games-Landing-Page-Clone", - description: "Riot Games Clone: A React project replicating the essence of Riot Games' popular gaming platform, offering a diverse gaming experience.", - imgSrc: "assets/riot.png" - }, - { - title: "Stock Dashboard", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Stock_Dashboard", - description: "This project gives the stock results for the unique company details and uses charts to display their historical and future predictions.", - imgSrc: "assets/stock.png" - }, - { - title: "QR Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/QR_Generator", - description: "A dynamic QR Code Generator that generates new QR codes for every input text or URL.", - imgSrc: "assets/qr.png" - }, - { - title: "Color Palette Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Color-Palette-Generator", - description: "A beautiful Color Palette Generator that generates harmonious color schemes with a click and easily copies hex codes. A useful tool for designers and developers.", - imgSrc: "assets/color.png" - }, - { - title: "Blob Generator", - url: "https://github.com/ojasggg/React-projects-for-beginners/tree/main/Blob_Generator", - description: "Simple Application useful for creators and designers who require unique Blob CSS code.", - imgSrc: "assets/blob.png" - }, - { - title: "Sorting Algorithm Visualizer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/soritng_algorithm_visualizer", - description: "This application has most of the sorting algorithms used in DSA and has a visual representation of how these sorting algorithms work in the background using clean UI in React.", - imgSrc: "assets/algorithm.png" - }, - { - title: "Web3 Theme Landing Page", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/web3_landing_page", - description: "Landing Page for Web3 applications. Used TailwindCSS for design and aos for minor animations.", - imgSrc: "assets/web3.png" - }, - { - title: "Text to Speech Converter", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/text_to_speech", - description: "Simple Website helpful to convert text written in the text area into voices. Controller of voice, sound, pitch and speed options are also provided.", - imgSrc: "assets/text2speech.png" - }, - { - title: "YouTube Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/youtube-clone", - description: "Explore this YouTube clone project where I've recreated the core functionalities of YouTube using React, HTML, CSS, and JavaScript. Experience seamless video playback, user authentication, and video upload functionalities in this beginner-friendly project.", - imgSrc: "assets/youtube.png" - }, - { - title: "Tic-Tac-Toe Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Tic-Tac-toe", - description: "Tic-Tac-Toe Game is a classic two-player game where opponents strategically place Xs and Os on a 3x3 grid, aiming to achieve a winning pattern of three in a row, column, or diagonal.", - imgSrc: "assets/tic.png" - }, - { - title: "Taskify Project", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Taskify-Project", - description: "Taskify-Project is an organizational tool designed to streamline project management, enabling users to create, assign, and track tasks efficiently within a collaborative environment.", - imgSrc: "assets/task.png" - }, - { - title: "Simple Movie Search", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Simple Movie Search is a straightforward tool allowing users to search for movies by title, providing basic information such as release year, genre, and synopsis.", - imgSrc: "assets/smovie.png" - }, - { - title: "Shopapp Redux", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/shopapp%20redux", - description: "Shop App Redux is a streamlined shopping experience powered by Redux, enhancing state management for seamless user interactions and efficient data handling.", - imgSrc: "assets/shop.png" - }, - { - title: "React Tenzies App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-tenzies-game", - description: "React Tenzies App is a web application built using the React JavaScript library, simulating the dice game Tenzi where players race to roll their dice to match a specific pattern, showcasing React's dynamic user interface capabilities.", - imgSrc: "assets/teniz.png" - }, - { - title: "Quiz Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Quiz-Game", - description: "Quiz Game is an interactive application that challenges players with questions on various topics, providing entertainment and opportunities for learning and testing knowledge.", - imgSrc: "assets/quiz.png" - }, - { - title: "Personal Portfolio", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Personal%20Portfolio", - description: "Personal Portfolio is a digital showcase of an individual's work, skills, and achievements, serving as a professional portfolio to highlight expertise and attract potential clients or employers.", - imgSrc: "assets/portfolio.png" - }, - { - title: "Dice App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Dice-App", - description: "A virtual dice-rolling application that simulates the randomness of traditional dice, offering convenience for various tabletop games and decision-making scenarios.", - imgSrc: "assets/dice.png" - }, - { - title: "Covid-19 Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Covid-19_Tracker", - description: "A tool for monitoring and visualizing real-time data on coronavirus cases, including infections, recoveries, and fatalities globally or regionally.", - imgSrc: "assets/covid.png" - }, - { - title: "Bank-KYC Form", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Bank-KYC-Form", - description: "A document where customers provide personal information and identification documents to comply with Know Your Customer regulations, ensuring legal and security compliance for banking services.", - imgSrc: "assets/kyc.png" - }, - { - title: "Guess the Number Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Guess-the-number-react-app-main", - description: "In the React Guess the Number Game, you try to figure out a secret number by making guesses.", - imgSrc: "assets/guess.png" - }, - { - title: "Myth Weaver - Ai Story Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Myth-Weaver", - description: "Myth Weaver is a story-creating AI model. Just give a few prompts, and it will provide you with 5 short stories, each 60 words long.", - imgSrc: "assets/story.png" - }, - { - title: "Twitter Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/twitter_clone/Twitter-Final-main", - description: "This is a simple Twitter Clone implementing the core features of Twitter.", - imgSrc: "assets/twitter.png" - }, - { - title: "Spotify Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Spotify-Clone", - description: "This is a simple Spotify Clone implementing the core features of Spotify. All the important functionalities of Spotify are implemented and the backend part is there for those who need it.", - imgSrc: "assets/spotify.png" - }, - { - title: "Markdown Previewer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Markdown-Previewer", - description: "Text to show on Hover", - imgSrc: "assets/mark.png" - }, - { - title: "Kanban: Drag & Drop Board", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/draganddrop-board", - description: "Its a simple drag and drop kanban style board to manage tasks", - imgSrc: "assets/drag-and-drop.png" - }, - { - title: "ChatGram - Real Time Chat Application", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/chatgram", - description: "Real Time Chatting Application", - imgSrc: "assets/ChatGram.png" - }, - { - title: "Farmer - Landing Page", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/chatgram", - description: "Comman Landing Page for farmers", - imgSrc: "assets/ChatGram.png" - } - -]; - -const container = document.getElementById('projects-container'); - -projects.forEach(project => { - const projectDiv = document.createElement('div'); - projectDiv.className = 'col-md-2 mb-4 d-md-inline-block'; - projectDiv.innerHTML = ` -
- React App -
- -
${project.title}
-
-
-
- `; - container.appendChild(projectDiv); -}); \ No newline at end of file diff --git a/.history/projects_20241018184650.js b/.history/projects_20241018184650.js deleted file mode 100644 index 68c7e687..00000000 --- a/.history/projects_20241018184650.js +++ /dev/null @@ -1,268 +0,0 @@ -// Please add your project details in the below array. -const projects = [ - { - title: "React Todo App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-todo-app", - description: "Start your coding journey with a beginner-friendly React Todo App, perfect for learning task management and basic web development", - imgSrc: "assets/todo.png" - }, - { - title: "React Weather app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Weather-app", - description: "Explore weather effortlessly with a beginner-friendly React Weather App, providing real-time forecasts and an intuitive user experience.", - imgSrc: "assets/weather.png" - }, - { - title: "React Stopwatch app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-stopwatch", - description: "Solidify your javascript concepts by making a React Stopwatch. You will learn how to manage javascript objects as state in React.", - imgSrc: "assets/stopwatch.png" - }, - { - title: "React Bank UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Bank-UI", - description: "Create an attractive landing page of your choice that will improve your designing skills.", - imgSrc: "assets/bank.png" - }, - { - title: "Movie Database App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Create a simple movie database app where you can search about movies. In this project you will learn about Card Components & how to manage dynamic data on page.", - imgSrc: "assets/movie.png" - }, - { - title: "React Expense Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/expense-tracker-react", - description: "Learn more about state management by creating an Expense Tracker.", - imgSrc: "assets/expense.png" - }, - { - title: "E-commerce Website React", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/E-commerce%20Website", - description: "React-based e-commerce site: Sleek design, vast product range, and secure checkout redefine online shopping.", - imgSrc: "assets/ecom.png" - }, - { - title: "GIF Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/GIF%20Generator", - description: "Experience the fun of GIF creation with our React-based GIF Generator. Easily create, customize, and share animated GIFs, adding excitement to your online conversations.", - imgSrc: "assets/gif.png" - }, - { - title: "Calculator App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/calculator-react", - description: "Experience the power of React with our intuitive Calculator app. Perform quick and accurate calculations with a sleek and user-friendly interface.", - imgSrc: "assets/calculator.png" - }, - { - title: "Meme App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/meme-app-react", - description: "Unleash your creativity with our React-powered Meme App. Craft and share hilarious memes effortlessly, adding humor to your social media.", - imgSrc: "assets/meme.png" - }, - { - title: "React Music App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-music-player", - description: "Immerse yourself in the world of music with our React-based Music Player. Enjoy seamless playback, playlist management, and a dynamic audio experience.", - imgSrc: "assets/music.png" - }, - { - title: "Quote Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/quotesgenerator", - description: "Get inspired with our React-based Quote Generator. Discover wisdom, motivation, and creativity at your fingertips, one quote at a time.", - imgSrc: "assets/quote.png" - }, - { - title: "Password Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react_password_generator", - description: "Boost your online security with our React Password Generator. Create strong, randomized passwords effortlessly to safeguard your digital life.", - imgSrc: "assets/password.png" - }, - { - title: "Score Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Score", - description: "ScoreKeeper app is applicable to any points-based game. It helps in accurately managing and keeping track of the score board, and displays the winner as well.", - imgSrc: "assets/score.png" - }, - { - title: "Riot Games Clone UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Riot-Games-Landing-Page-Clone", - description: "Riot Games Clone: A React project replicating the essence of Riot Games' popular gaming platform, offering a diverse gaming experience.", - imgSrc: "assets/riot.png" - }, - { - title: "Stock Dashboard", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Stock_Dashboard", - description: "This project gives the stock results for the unique company details and uses charts to display their historical and future predictions.", - imgSrc: "assets/stock.png" - }, - { - title: "QR Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/QR_Generator", - description: "A dynamic QR Code Generator that generates new QR codes for every input text or URL.", - imgSrc: "assets/qr.png" - }, - { - title: "Color Palette Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Color-Palette-Generator", - description: "A beautiful Color Palette Generator that generates harmonious color schemes with a click and easily copies hex codes. A useful tool for designers and developers.", - imgSrc: "assets/color.png" - }, - { - title: "Blob Generator", - url: "https://github.com/ojasggg/React-projects-for-beginners/tree/main/Blob_Generator", - description: "Simple Application useful for creators and designers who require unique Blob CSS code.", - imgSrc: "assets/blob.png" - }, - { - title: "Sorting Algorithm Visualizer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/soritng_algorithm_visualizer", - description: "This application has most of the sorting algorithms used in DSA and has a visual representation of how these sorting algorithms work in the background using clean UI in React.", - imgSrc: "assets/algorithm.png" - }, - { - title: "Web3 Theme Landing Page", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/web3_landing_page", - description: "Landing Page for Web3 applications. Used TailwindCSS for design and aos for minor animations.", - imgSrc: "assets/web3.png" - }, - { - title: "Text to Speech Converter", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/text_to_speech", - description: "Simple Website helpful to convert text written in the text area into voices. Controller of voice, sound, pitch and speed options are also provided.", - imgSrc: "assets/text2speech.png" - }, - { - title: "YouTube Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/youtube-clone", - description: "Explore this YouTube clone project where I've recreated the core functionalities of YouTube using React, HTML, CSS, and JavaScript. Experience seamless video playback, user authentication, and video upload functionalities in this beginner-friendly project.", - imgSrc: "assets/youtube.png" - }, - { - title: "Tic-Tac-Toe Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Tic-Tac-toe", - description: "Tic-Tac-Toe Game is a classic two-player game where opponents strategically place Xs and Os on a 3x3 grid, aiming to achieve a winning pattern of three in a row, column, or diagonal.", - imgSrc: "assets/tic.png" - }, - { - title: "Taskify Project", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Taskify-Project", - description: "Taskify-Project is an organizational tool designed to streamline project management, enabling users to create, assign, and track tasks efficiently within a collaborative environment.", - imgSrc: "assets/task.png" - }, - { - title: "Simple Movie Search", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Simple Movie Search is a straightforward tool allowing users to search for movies by title, providing basic information such as release year, genre, and synopsis.", - imgSrc: "assets/smovie.png" - }, - { - title: "Shopapp Redux", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/shopapp%20redux", - description: "Shop App Redux is a streamlined shopping experience powered by Redux, enhancing state management for seamless user interactions and efficient data handling.", - imgSrc: "assets/shop.png" - }, - { - title: "React Tenzies App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-tenzies-game", - description: "React Tenzies App is a web application built using the React JavaScript library, simulating the dice game Tenzi where players race to roll their dice to match a specific pattern, showcasing React's dynamic user interface capabilities.", - imgSrc: "assets/teniz.png" - }, - { - title: "Quiz Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Quiz-Game", - description: "Quiz Game is an interactive application that challenges players with questions on various topics, providing entertainment and opportunities for learning and testing knowledge.", - imgSrc: "assets/quiz.png" - }, - { - title: "Personal Portfolio", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Personal%20Portfolio", - description: "Personal Portfolio is a digital showcase of an individual's work, skills, and achievements, serving as a professional portfolio to highlight expertise and attract potential clients or employers.", - imgSrc: "assets/portfolio.png" - }, - { - title: "Dice App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Dice-App", - description: "A virtual dice-rolling application that simulates the randomness of traditional dice, offering convenience for various tabletop games and decision-making scenarios.", - imgSrc: "assets/dice.png" - }, - { - title: "Covid-19 Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Covid-19_Tracker", - description: "A tool for monitoring and visualizing real-time data on coronavirus cases, including infections, recoveries, and fatalities globally or regionally.", - imgSrc: "assets/covid.png" - }, - { - title: "Bank-KYC Form", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Bank-KYC-Form", - description: "A document where customers provide personal information and identification documents to comply with Know Your Customer regulations, ensuring legal and security compliance for banking services.", - imgSrc: "assets/kyc.png" - }, - { - title: "Guess the Number Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Guess-the-number-react-app-main", - description: "In the React Guess the Number Game, you try to figure out a secret number by making guesses.", - imgSrc: "assets/guess.png" - }, - { - title: "Myth Weaver - Ai Story Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Myth-Weaver", - description: "Myth Weaver is a story-creating AI model. Just give a few prompts, and it will provide you with 5 short stories, each 60 words long.", - imgSrc: "assets/story.png" - }, - { - title: "Twitter Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/twitter_clone/Twitter-Final-main", - description: "This is a simple Twitter Clone implementing the core features of Twitter.", - imgSrc: "assets/twitter.png" - }, - { - title: "Spotify Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Spotify-Clone", - description: "This is a simple Spotify Clone implementing the core features of Spotify. All the important functionalities of Spotify are implemented and the backend part is there for those who need it.", - imgSrc: "assets/spotify.png" - }, - { - title: "Markdown Previewer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Markdown-Previewer", - description: "Text to show on Hover", - imgSrc: "assets/mark.png" - }, - { - title: "Kanban: Drag & Drop Board", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/draganddrop-board", - description: "Its a simple drag and drop kanban style board to manage tasks", - imgSrc: "assets/drag-and-drop.png" - }, - { - title: "ChatGram - Real Time Chat Application", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/chatgram", - description: "Real Time Chatting Application", - imgSrc: "assets/ChatGram.png" - }, - { - title: "Farmer - Landing Page", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/chatgram", - description: "Comman Landing Page for farmers", - imgSrc: "assets/" - } - -]; - -const container = document.getElementById('projects-container'); - -projects.forEach(project => { - const projectDiv = document.createElement('div'); - projectDiv.className = 'col-md-2 mb-4 d-md-inline-block'; - projectDiv.innerHTML = ` -
- React App -
- -
${project.title}
-
-
-
- `; - container.appendChild(projectDiv); -}); \ No newline at end of file diff --git a/.history/projects_20241018184651.js b/.history/projects_20241018184651.js deleted file mode 100644 index 256b7b33..00000000 --- a/.history/projects_20241018184651.js +++ /dev/null @@ -1,268 +0,0 @@ -// Please add your project details in the below array. -const projects = [ - { - title: "React Todo App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-todo-app", - description: "Start your coding journey with a beginner-friendly React Todo App, perfect for learning task management and basic web development", - imgSrc: "assets/todo.png" - }, - { - title: "React Weather app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Weather-app", - description: "Explore weather effortlessly with a beginner-friendly React Weather App, providing real-time forecasts and an intuitive user experience.", - imgSrc: "assets/weather.png" - }, - { - title: "React Stopwatch app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-stopwatch", - description: "Solidify your javascript concepts by making a React Stopwatch. You will learn how to manage javascript objects as state in React.", - imgSrc: "assets/stopwatch.png" - }, - { - title: "React Bank UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Bank-UI", - description: "Create an attractive landing page of your choice that will improve your designing skills.", - imgSrc: "assets/bank.png" - }, - { - title: "Movie Database App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Create a simple movie database app where you can search about movies. In this project you will learn about Card Components & how to manage dynamic data on page.", - imgSrc: "assets/movie.png" - }, - { - title: "React Expense Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/expense-tracker-react", - description: "Learn more about state management by creating an Expense Tracker.", - imgSrc: "assets/expense.png" - }, - { - title: "E-commerce Website React", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/E-commerce%20Website", - description: "React-based e-commerce site: Sleek design, vast product range, and secure checkout redefine online shopping.", - imgSrc: "assets/ecom.png" - }, - { - title: "GIF Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/GIF%20Generator", - description: "Experience the fun of GIF creation with our React-based GIF Generator. Easily create, customize, and share animated GIFs, adding excitement to your online conversations.", - imgSrc: "assets/gif.png" - }, - { - title: "Calculator App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/calculator-react", - description: "Experience the power of React with our intuitive Calculator app. Perform quick and accurate calculations with a sleek and user-friendly interface.", - imgSrc: "assets/calculator.png" - }, - { - title: "Meme App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/meme-app-react", - description: "Unleash your creativity with our React-powered Meme App. Craft and share hilarious memes effortlessly, adding humor to your social media.", - imgSrc: "assets/meme.png" - }, - { - title: "React Music App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-music-player", - description: "Immerse yourself in the world of music with our React-based Music Player. Enjoy seamless playback, playlist management, and a dynamic audio experience.", - imgSrc: "assets/music.png" - }, - { - title: "Quote Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/quotesgenerator", - description: "Get inspired with our React-based Quote Generator. Discover wisdom, motivation, and creativity at your fingertips, one quote at a time.", - imgSrc: "assets/quote.png" - }, - { - title: "Password Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react_password_generator", - description: "Boost your online security with our React Password Generator. Create strong, randomized passwords effortlessly to safeguard your digital life.", - imgSrc: "assets/password.png" - }, - { - title: "Score Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Score", - description: "ScoreKeeper app is applicable to any points-based game. It helps in accurately managing and keeping track of the score board, and displays the winner as well.", - imgSrc: "assets/score.png" - }, - { - title: "Riot Games Clone UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Riot-Games-Landing-Page-Clone", - description: "Riot Games Clone: A React project replicating the essence of Riot Games' popular gaming platform, offering a diverse gaming experience.", - imgSrc: "assets/riot.png" - }, - { - title: "Stock Dashboard", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Stock_Dashboard", - description: "This project gives the stock results for the unique company details and uses charts to display their historical and future predictions.", - imgSrc: "assets/stock.png" - }, - { - title: "QR Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/QR_Generator", - description: "A dynamic QR Code Generator that generates new QR codes for every input text or URL.", - imgSrc: "assets/qr.png" - }, - { - title: "Color Palette Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Color-Palette-Generator", - description: "A beautiful Color Palette Generator that generates harmonious color schemes with a click and easily copies hex codes. A useful tool for designers and developers.", - imgSrc: "assets/color.png" - }, - { - title: "Blob Generator", - url: "https://github.com/ojasggg/React-projects-for-beginners/tree/main/Blob_Generator", - description: "Simple Application useful for creators and designers who require unique Blob CSS code.", - imgSrc: "assets/blob.png" - }, - { - title: "Sorting Algorithm Visualizer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/soritng_algorithm_visualizer", - description: "This application has most of the sorting algorithms used in DSA and has a visual representation of how these sorting algorithms work in the background using clean UI in React.", - imgSrc: "assets/algorithm.png" - }, - { - title: "Web3 Theme Landing Page", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/web3_landing_page", - description: "Landing Page for Web3 applications. Used TailwindCSS for design and aos for minor animations.", - imgSrc: "assets/web3.png" - }, - { - title: "Text to Speech Converter", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/text_to_speech", - description: "Simple Website helpful to convert text written in the text area into voices. Controller of voice, sound, pitch and speed options are also provided.", - imgSrc: "assets/text2speech.png" - }, - { - title: "YouTube Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/youtube-clone", - description: "Explore this YouTube clone project where I've recreated the core functionalities of YouTube using React, HTML, CSS, and JavaScript. Experience seamless video playback, user authentication, and video upload functionalities in this beginner-friendly project.", - imgSrc: "assets/youtube.png" - }, - { - title: "Tic-Tac-Toe Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Tic-Tac-toe", - description: "Tic-Tac-Toe Game is a classic two-player game where opponents strategically place Xs and Os on a 3x3 grid, aiming to achieve a winning pattern of three in a row, column, or diagonal.", - imgSrc: "assets/tic.png" - }, - { - title: "Taskify Project", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Taskify-Project", - description: "Taskify-Project is an organizational tool designed to streamline project management, enabling users to create, assign, and track tasks efficiently within a collaborative environment.", - imgSrc: "assets/task.png" - }, - { - title: "Simple Movie Search", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Simple Movie Search is a straightforward tool allowing users to search for movies by title, providing basic information such as release year, genre, and synopsis.", - imgSrc: "assets/smovie.png" - }, - { - title: "Shopapp Redux", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/shopapp%20redux", - description: "Shop App Redux is a streamlined shopping experience powered by Redux, enhancing state management for seamless user interactions and efficient data handling.", - imgSrc: "assets/shop.png" - }, - { - title: "React Tenzies App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-tenzies-game", - description: "React Tenzies App is a web application built using the React JavaScript library, simulating the dice game Tenzi where players race to roll their dice to match a specific pattern, showcasing React's dynamic user interface capabilities.", - imgSrc: "assets/teniz.png" - }, - { - title: "Quiz Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Quiz-Game", - description: "Quiz Game is an interactive application that challenges players with questions on various topics, providing entertainment and opportunities for learning and testing knowledge.", - imgSrc: "assets/quiz.png" - }, - { - title: "Personal Portfolio", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Personal%20Portfolio", - description: "Personal Portfolio is a digital showcase of an individual's work, skills, and achievements, serving as a professional portfolio to highlight expertise and attract potential clients or employers.", - imgSrc: "assets/portfolio.png" - }, - { - title: "Dice App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Dice-App", - description: "A virtual dice-rolling application that simulates the randomness of traditional dice, offering convenience for various tabletop games and decision-making scenarios.", - imgSrc: "assets/dice.png" - }, - { - title: "Covid-19 Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Covid-19_Tracker", - description: "A tool for monitoring and visualizing real-time data on coronavirus cases, including infections, recoveries, and fatalities globally or regionally.", - imgSrc: "assets/covid.png" - }, - { - title: "Bank-KYC Form", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Bank-KYC-Form", - description: "A document where customers provide personal information and identification documents to comply with Know Your Customer regulations, ensuring legal and security compliance for banking services.", - imgSrc: "assets/kyc.png" - }, - { - title: "Guess the Number Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Guess-the-number-react-app-main", - description: "In the React Guess the Number Game, you try to figure out a secret number by making guesses.", - imgSrc: "assets/guess.png" - }, - { - title: "Myth Weaver - Ai Story Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Myth-Weaver", - description: "Myth Weaver is a story-creating AI model. Just give a few prompts, and it will provide you with 5 short stories, each 60 words long.", - imgSrc: "assets/story.png" - }, - { - title: "Twitter Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/twitter_clone/Twitter-Final-main", - description: "This is a simple Twitter Clone implementing the core features of Twitter.", - imgSrc: "assets/twitter.png" - }, - { - title: "Spotify Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Spotify-Clone", - description: "This is a simple Spotify Clone implementing the core features of Spotify. All the important functionalities of Spotify are implemented and the backend part is there for those who need it.", - imgSrc: "assets/spotify.png" - }, - { - title: "Markdown Previewer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Markdown-Previewer", - description: "Text to show on Hover", - imgSrc: "assets/mark.png" - }, - { - title: "Kanban: Drag & Drop Board", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/draganddrop-board", - description: "Its a simple drag and drop kanban style board to manage tasks", - imgSrc: "assets/drag-and-drop.png" - }, - { - title: "ChatGram - Real Time Chat Application", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/chatgram", - description: "Real Time Chatting Application", - imgSrc: "assets/ChatGram.png" - }, - { - title: "Farmer - Landing Page", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/chatgram", - description: "Comman Landing Page for farmers", - imgSrc: "assets/Farmer-landing.png" - } - -]; - -const container = document.getElementById('projects-container'); - -projects.forEach(project => { - const projectDiv = document.createElement('div'); - projectDiv.className = 'col-md-2 mb-4 d-md-inline-block'; - projectDiv.innerHTML = ` -
- React App -
- -
${project.title}
-
-
-
- `; - container.appendChild(projectDiv); -}); \ No newline at end of file diff --git a/.history/projects_20241018184705.js b/.history/projects_20241018184705.js deleted file mode 100644 index cdd76ff8..00000000 --- a/.history/projects_20241018184705.js +++ /dev/null @@ -1,268 +0,0 @@ -// Please add your project details in the below array. -const projects = [ - { - title: "React Todo App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-todo-app", - description: "Start your coding journey with a beginner-friendly React Todo App, perfect for learning task management and basic web development", - imgSrc: "assets/todo.png" - }, - { - title: "React Weather app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Weather-app", - description: "Explore weather effortlessly with a beginner-friendly React Weather App, providing real-time forecasts and an intuitive user experience.", - imgSrc: "assets/weather.png" - }, - { - title: "React Stopwatch app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-stopwatch", - description: "Solidify your javascript concepts by making a React Stopwatch. You will learn how to manage javascript objects as state in React.", - imgSrc: "assets/stopwatch.png" - }, - { - title: "React Bank UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Bank-UI", - description: "Create an attractive landing page of your choice that will improve your designing skills.", - imgSrc: "assets/bank.png" - }, - { - title: "Movie Database App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Create a simple movie database app where you can search about movies. In this project you will learn about Card Components & how to manage dynamic data on page.", - imgSrc: "assets/movie.png" - }, - { - title: "React Expense Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/expense-tracker-react", - description: "Learn more about state management by creating an Expense Tracker.", - imgSrc: "assets/expense.png" - }, - { - title: "E-commerce Website React", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/E-commerce%20Website", - description: "React-based e-commerce site: Sleek design, vast product range, and secure checkout redefine online shopping.", - imgSrc: "assets/ecom.png" - }, - { - title: "GIF Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/GIF%20Generator", - description: "Experience the fun of GIF creation with our React-based GIF Generator. Easily create, customize, and share animated GIFs, adding excitement to your online conversations.", - imgSrc: "assets/gif.png" - }, - { - title: "Calculator App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/calculator-react", - description: "Experience the power of React with our intuitive Calculator app. Perform quick and accurate calculations with a sleek and user-friendly interface.", - imgSrc: "assets/calculator.png" - }, - { - title: "Meme App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/meme-app-react", - description: "Unleash your creativity with our React-powered Meme App. Craft and share hilarious memes effortlessly, adding humor to your social media.", - imgSrc: "assets/meme.png" - }, - { - title: "React Music App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-music-player", - description: "Immerse yourself in the world of music with our React-based Music Player. Enjoy seamless playback, playlist management, and a dynamic audio experience.", - imgSrc: "assets/music.png" - }, - { - title: "Quote Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/quotesgenerator", - description: "Get inspired with our React-based Quote Generator. Discover wisdom, motivation, and creativity at your fingertips, one quote at a time.", - imgSrc: "assets/quote.png" - }, - { - title: "Password Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react_password_generator", - description: "Boost your online security with our React Password Generator. Create strong, randomized passwords effortlessly to safeguard your digital life.", - imgSrc: "assets/password.png" - }, - { - title: "Score Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Score", - description: "ScoreKeeper app is applicable to any points-based game. It helps in accurately managing and keeping track of the score board, and displays the winner as well.", - imgSrc: "assets/score.png" - }, - { - title: "Riot Games Clone UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Riot-Games-Landing-Page-Clone", - description: "Riot Games Clone: A React project replicating the essence of Riot Games' popular gaming platform, offering a diverse gaming experience.", - imgSrc: "assets/riot.png" - }, - { - title: "Stock Dashboard", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Stock_Dashboard", - description: "This project gives the stock results for the unique company details and uses charts to display their historical and future predictions.", - imgSrc: "assets/stock.png" - }, - { - title: "QR Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/QR_Generator", - description: "A dynamic QR Code Generator that generates new QR codes for every input text or URL.", - imgSrc: "assets/qr.png" - }, - { - title: "Color Palette Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Color-Palette-Generator", - description: "A beautiful Color Palette Generator that generates harmonious color schemes with a click and easily copies hex codes. A useful tool for designers and developers.", - imgSrc: "assets/color.png" - }, - { - title: "Blob Generator", - url: "https://github.com/ojasggg/React-projects-for-beginners/tree/main/Blob_Generator", - description: "Simple Application useful for creators and designers who require unique Blob CSS code.", - imgSrc: "assets/blob.png" - }, - { - title: "Sorting Algorithm Visualizer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/soritng_algorithm_visualizer", - description: "This application has most of the sorting algorithms used in DSA and has a visual representation of how these sorting algorithms work in the background using clean UI in React.", - imgSrc: "assets/algorithm.png" - }, - { - title: "Web3 Theme Landing Page", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/web3_landing_page", - description: "Landing Page for Web3 applications. Used TailwindCSS for design and aos for minor animations.", - imgSrc: "assets/web3.png" - }, - { - title: "Text to Speech Converter", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/text_to_speech", - description: "Simple Website helpful to convert text written in the text area into voices. Controller of voice, sound, pitch and speed options are also provided.", - imgSrc: "assets/text2speech.png" - }, - { - title: "YouTube Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/youtube-clone", - description: "Explore this YouTube clone project where I've recreated the core functionalities of YouTube using React, HTML, CSS, and JavaScript. Experience seamless video playback, user authentication, and video upload functionalities in this beginner-friendly project.", - imgSrc: "assets/youtube.png" - }, - { - title: "Tic-Tac-Toe Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Tic-Tac-toe", - description: "Tic-Tac-Toe Game is a classic two-player game where opponents strategically place Xs and Os on a 3x3 grid, aiming to achieve a winning pattern of three in a row, column, or diagonal.", - imgSrc: "assets/tic.png" - }, - { - title: "Taskify Project", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Taskify-Project", - description: "Taskify-Project is an organizational tool designed to streamline project management, enabling users to create, assign, and track tasks efficiently within a collaborative environment.", - imgSrc: "assets/task.png" - }, - { - title: "Simple Movie Search", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Simple Movie Search is a straightforward tool allowing users to search for movies by title, providing basic information such as release year, genre, and synopsis.", - imgSrc: "assets/smovie.png" - }, - { - title: "Shopapp Redux", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/shopapp%20redux", - description: "Shop App Redux is a streamlined shopping experience powered by Redux, enhancing state management for seamless user interactions and efficient data handling.", - imgSrc: "assets/shop.png" - }, - { - title: "React Tenzies App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-tenzies-game", - description: "React Tenzies App is a web application built using the React JavaScript library, simulating the dice game Tenzi where players race to roll their dice to match a specific pattern, showcasing React's dynamic user interface capabilities.", - imgSrc: "assets/teniz.png" - }, - { - title: "Quiz Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Quiz-Game", - description: "Quiz Game is an interactive application that challenges players with questions on various topics, providing entertainment and opportunities for learning and testing knowledge.", - imgSrc: "assets/quiz.png" - }, - { - title: "Personal Portfolio", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Personal%20Portfolio", - description: "Personal Portfolio is a digital showcase of an individual's work, skills, and achievements, serving as a professional portfolio to highlight expertise and attract potential clients or employers.", - imgSrc: "assets/portfolio.png" - }, - { - title: "Dice App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Dice-App", - description: "A virtual dice-rolling application that simulates the randomness of traditional dice, offering convenience for various tabletop games and decision-making scenarios.", - imgSrc: "assets/dice.png" - }, - { - title: "Covid-19 Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Covid-19_Tracker", - description: "A tool for monitoring and visualizing real-time data on coronavirus cases, including infections, recoveries, and fatalities globally or regionally.", - imgSrc: "assets/covid.png" - }, - { - title: "Bank-KYC Form", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Bank-KYC-Form", - description: "A document where customers provide personal information and identification documents to comply with Know Your Customer regulations, ensuring legal and security compliance for banking services.", - imgSrc: "assets/kyc.png" - }, - { - title: "Guess the Number Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Guess-the-number-react-app-main", - description: "In the React Guess the Number Game, you try to figure out a secret number by making guesses.", - imgSrc: "assets/guess.png" - }, - { - title: "Myth Weaver - Ai Story Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Myth-Weaver", - description: "Myth Weaver is a story-creating AI model. Just give a few prompts, and it will provide you with 5 short stories, each 60 words long.", - imgSrc: "assets/story.png" - }, - { - title: "Twitter Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/twitter_clone/Twitter-Final-main", - description: "This is a simple Twitter Clone implementing the core features of Twitter.", - imgSrc: "assets/twitter.png" - }, - { - title: "Spotify Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Spotify-Clone", - description: "This is a simple Spotify Clone implementing the core features of Spotify. All the important functionalities of Spotify are implemented and the backend part is there for those who need it.", - imgSrc: "assets/spotify.png" - }, - { - title: "Markdown Previewer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Markdown-Previewer", - description: "Text to show on Hover", - imgSrc: "assets/mark.png" - }, - { - title: "Kanban: Drag & Drop Board", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/draganddrop-board", - description: "Its a simple drag and drop kanban style board to manage tasks", - imgSrc: "assets/drag-and-drop.png" - }, - { - title: "ChatGram - Real Time Chat Application", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/chatgram", - description: "Real Time Chatting Application", - imgSrc: "assets/ChatGram.png" - }, - { - title: "Farmer - Landing Page", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/chatgram", - description: "Common Landing Page for farmers", - imgSrc: "assets/Farmer-landing.png" - } - -]; - -const container = document.getElementById('projects-container'); - -projects.forEach(project => { - const projectDiv = document.createElement('div'); - projectDiv.className = 'col-md-2 mb-4 d-md-inline-block'; - projectDiv.innerHTML = ` -
- React App -
- -
${project.title}
-
-
-
- `; - container.appendChild(projectDiv); -}); \ No newline at end of file diff --git a/.history/projects_20241018184737.js b/.history/projects_20241018184737.js deleted file mode 100644 index 544ceeb3..00000000 --- a/.history/projects_20241018184737.js +++ /dev/null @@ -1,268 +0,0 @@ -// Please add your project details in the below array. -const projects = [ - { - title: "React Todo App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-todo-app", - description: "Start your coding journey with a beginner-friendly React Todo App, perfect for learning task management and basic web development", - imgSrc: "assets/todo.png" - }, - { - title: "React Weather app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Weather-app", - description: "Explore weather effortlessly with a beginner-friendly React Weather App, providing real-time forecasts and an intuitive user experience.", - imgSrc: "assets/weather.png" - }, - { - title: "React Stopwatch app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-stopwatch", - description: "Solidify your javascript concepts by making a React Stopwatch. You will learn how to manage javascript objects as state in React.", - imgSrc: "assets/stopwatch.png" - }, - { - title: "React Bank UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Bank-UI", - description: "Create an attractive landing page of your choice that will improve your designing skills.", - imgSrc: "assets/bank.png" - }, - { - title: "Movie Database App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Create a simple movie database app where you can search about movies. In this project you will learn about Card Components & how to manage dynamic data on page.", - imgSrc: "assets/movie.png" - }, - { - title: "React Expense Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/expense-tracker-react", - description: "Learn more about state management by creating an Expense Tracker.", - imgSrc: "assets/expense.png" - }, - { - title: "E-commerce Website React", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/E-commerce%20Website", - description: "React-based e-commerce site: Sleek design, vast product range, and secure checkout redefine online shopping.", - imgSrc: "assets/ecom.png" - }, - { - title: "GIF Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/GIF%20Generator", - description: "Experience the fun of GIF creation with our React-based GIF Generator. Easily create, customize, and share animated GIFs, adding excitement to your online conversations.", - imgSrc: "assets/gif.png" - }, - { - title: "Calculator App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/calculator-react", - description: "Experience the power of React with our intuitive Calculator app. Perform quick and accurate calculations with a sleek and user-friendly interface.", - imgSrc: "assets/calculator.png" - }, - { - title: "Meme App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/meme-app-react", - description: "Unleash your creativity with our React-powered Meme App. Craft and share hilarious memes effortlessly, adding humor to your social media.", - imgSrc: "assets/meme.png" - }, - { - title: "React Music App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-music-player", - description: "Immerse yourself in the world of music with our React-based Music Player. Enjoy seamless playback, playlist management, and a dynamic audio experience.", - imgSrc: "assets/music.png" - }, - { - title: "Quote Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/quotesgenerator", - description: "Get inspired with our React-based Quote Generator. Discover wisdom, motivation, and creativity at your fingertips, one quote at a time.", - imgSrc: "assets/quote.png" - }, - { - title: "Password Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react_password_generator", - description: "Boost your online security with our React Password Generator. Create strong, randomized passwords effortlessly to safeguard your digital life.", - imgSrc: "assets/password.png" - }, - { - title: "Score Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Score", - description: "ScoreKeeper app is applicable to any points-based game. It helps in accurately managing and keeping track of the score board, and displays the winner as well.", - imgSrc: "assets/score.png" - }, - { - title: "Riot Games Clone UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Riot-Games-Landing-Page-Clone", - description: "Riot Games Clone: A React project replicating the essence of Riot Games' popular gaming platform, offering a diverse gaming experience.", - imgSrc: "assets/riot.png" - }, - { - title: "Stock Dashboard", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Stock_Dashboard", - description: "This project gives the stock results for the unique company details and uses charts to display their historical and future predictions.", - imgSrc: "assets/stock.png" - }, - { - title: "QR Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/QR_Generator", - description: "A dynamic QR Code Generator that generates new QR codes for every input text or URL.", - imgSrc: "assets/qr.png" - }, - { - title: "Color Palette Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Color-Palette-Generator", - description: "A beautiful Color Palette Generator that generates harmonious color schemes with a click and easily copies hex codes. A useful tool for designers and developers.", - imgSrc: "assets/color.png" - }, - { - title: "Blob Generator", - url: "https://github.com/ojasggg/React-projects-for-beginners/tree/main/Blob_Generator", - description: "Simple Application useful for creators and designers who require unique Blob CSS code.", - imgSrc: "assets/blob.png" - }, - { - title: "Sorting Algorithm Visualizer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/soritng_algorithm_visualizer", - description: "This application has most of the sorting algorithms used in DSA and has a visual representation of how these sorting algorithms work in the background using clean UI in React.", - imgSrc: "assets/algorithm.png" - }, - { - title: "Web3 Theme Landing Page", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/web3_landing_page", - description: "Landing Page for Web3 applications. Used TailwindCSS for design and aos for minor animations.", - imgSrc: "assets/web3.png" - }, - { - title: "Text to Speech Converter", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/text_to_speech", - description: "Simple Website helpful to convert text written in the text area into voices. Controller of voice, sound, pitch and speed options are also provided.", - imgSrc: "assets/text2speech.png" - }, - { - title: "YouTube Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/youtube-clone", - description: "Explore this YouTube clone project where I've recreated the core functionalities of YouTube using React, HTML, CSS, and JavaScript. Experience seamless video playback, user authentication, and video upload functionalities in this beginner-friendly project.", - imgSrc: "assets/youtube.png" - }, - { - title: "Tic-Tac-Toe Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Tic-Tac-toe", - description: "Tic-Tac-Toe Game is a classic two-player game where opponents strategically place Xs and Os on a 3x3 grid, aiming to achieve a winning pattern of three in a row, column, or diagonal.", - imgSrc: "assets/tic.png" - }, - { - title: "Taskify Project", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Taskify-Project", - description: "Taskify-Project is an organizational tool designed to streamline project management, enabling users to create, assign, and track tasks efficiently within a collaborative environment.", - imgSrc: "assets/task.png" - }, - { - title: "Simple Movie Search", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Simple Movie Search is a straightforward tool allowing users to search for movies by title, providing basic information such as release year, genre, and synopsis.", - imgSrc: "assets/smovie.png" - }, - { - title: "Shopapp Redux", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/shopapp%20redux", - description: "Shop App Redux is a streamlined shopping experience powered by Redux, enhancing state management for seamless user interactions and efficient data handling.", - imgSrc: "assets/shop.png" - }, - { - title: "React Tenzies App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-tenzies-game", - description: "React Tenzies App is a web application built using the React JavaScript library, simulating the dice game Tenzi where players race to roll their dice to match a specific pattern, showcasing React's dynamic user interface capabilities.", - imgSrc: "assets/teniz.png" - }, - { - title: "Quiz Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Quiz-Game", - description: "Quiz Game is an interactive application that challenges players with questions on various topics, providing entertainment and opportunities for learning and testing knowledge.", - imgSrc: "assets/quiz.png" - }, - { - title: "Personal Portfolio", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Personal%20Portfolio", - description: "Personal Portfolio is a digital showcase of an individual's work, skills, and achievements, serving as a professional portfolio to highlight expertise and attract potential clients or employers.", - imgSrc: "assets/portfolio.png" - }, - { - title: "Dice App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Dice-App", - description: "A virtual dice-rolling application that simulates the randomness of traditional dice, offering convenience for various tabletop games and decision-making scenarios.", - imgSrc: "assets/dice.png" - }, - { - title: "Covid-19 Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Covid-19_Tracker", - description: "A tool for monitoring and visualizing real-time data on coronavirus cases, including infections, recoveries, and fatalities globally or regionally.", - imgSrc: "assets/covid.png" - }, - { - title: "Bank-KYC Form", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Bank-KYC-Form", - description: "A document where customers provide personal information and identification documents to comply with Know Your Customer regulations, ensuring legal and security compliance for banking services.", - imgSrc: "assets/kyc.png" - }, - { - title: "Guess the Number Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Guess-the-number-react-app-main", - description: "In the React Guess the Number Game, you try to figure out a secret number by making guesses.", - imgSrc: "assets/guess.png" - }, - { - title: "Myth Weaver - Ai Story Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Myth-Weaver", - description: "Myth Weaver is a story-creating AI model. Just give a few prompts, and it will provide you with 5 short stories, each 60 words long.", - imgSrc: "assets/story.png" - }, - { - title: "Twitter Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/twitter_clone/Twitter-Final-main", - description: "This is a simple Twitter Clone implementing the core features of Twitter.", - imgSrc: "assets/twitter.png" - }, - { - title: "Spotify Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Spotify-Clone", - description: "This is a simple Spotify Clone implementing the core features of Spotify. All the important functionalities of Spotify are implemented and the backend part is there for those who need it.", - imgSrc: "assets/spotify.png" - }, - { - title: "Markdown Previewer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Markdown-Previewer", - description: "Text to show on Hover", - imgSrc: "assets/mark.png" - }, - { - title: "Kanban: Drag & Drop Board", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/draganddrop-board", - description: "Its a simple drag and drop kanban style board to manage tasks", - imgSrc: "assets/drag-and-drop.png" - }, - { - title: "ChatGram - Real Time Chat Application", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/chatgram", - description: "Real Time Chatting Application", - imgSrc: "assets/ChatGram.png" - }, - { - title: "Farmer - Landing Page", - url: ", - description: "Common Landing Page for farmers", - imgSrc: "assets/Farmer-landing.png" - } - -]; - -const container = document.getElementById('projects-container'); - -projects.forEach(project => { - const projectDiv = document.createElement('div'); - projectDiv.className = 'col-md-2 mb-4 d-md-inline-block'; - projectDiv.innerHTML = ` -
- React App -
- -
${project.title}
-
-
-
- `; - container.appendChild(projectDiv); -}); \ No newline at end of file diff --git a/.history/projects_20241018184739.js b/.history/projects_20241018184739.js deleted file mode 100644 index 569dac1d..00000000 --- a/.history/projects_20241018184739.js +++ /dev/null @@ -1,268 +0,0 @@ -// Please add your project details in the below array. -const projects = [ - { - title: "React Todo App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-todo-app", - description: "Start your coding journey with a beginner-friendly React Todo App, perfect for learning task management and basic web development", - imgSrc: "assets/todo.png" - }, - { - title: "React Weather app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Weather-app", - description: "Explore weather effortlessly with a beginner-friendly React Weather App, providing real-time forecasts and an intuitive user experience.", - imgSrc: "assets/weather.png" - }, - { - title: "React Stopwatch app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-stopwatch", - description: "Solidify your javascript concepts by making a React Stopwatch. You will learn how to manage javascript objects as state in React.", - imgSrc: "assets/stopwatch.png" - }, - { - title: "React Bank UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Bank-UI", - description: "Create an attractive landing page of your choice that will improve your designing skills.", - imgSrc: "assets/bank.png" - }, - { - title: "Movie Database App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Create a simple movie database app where you can search about movies. In this project you will learn about Card Components & how to manage dynamic data on page.", - imgSrc: "assets/movie.png" - }, - { - title: "React Expense Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/expense-tracker-react", - description: "Learn more about state management by creating an Expense Tracker.", - imgSrc: "assets/expense.png" - }, - { - title: "E-commerce Website React", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/E-commerce%20Website", - description: "React-based e-commerce site: Sleek design, vast product range, and secure checkout redefine online shopping.", - imgSrc: "assets/ecom.png" - }, - { - title: "GIF Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/GIF%20Generator", - description: "Experience the fun of GIF creation with our React-based GIF Generator. Easily create, customize, and share animated GIFs, adding excitement to your online conversations.", - imgSrc: "assets/gif.png" - }, - { - title: "Calculator App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/calculator-react", - description: "Experience the power of React with our intuitive Calculator app. Perform quick and accurate calculations with a sleek and user-friendly interface.", - imgSrc: "assets/calculator.png" - }, - { - title: "Meme App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/meme-app-react", - description: "Unleash your creativity with our React-powered Meme App. Craft and share hilarious memes effortlessly, adding humor to your social media.", - imgSrc: "assets/meme.png" - }, - { - title: "React Music App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-music-player", - description: "Immerse yourself in the world of music with our React-based Music Player. Enjoy seamless playback, playlist management, and a dynamic audio experience.", - imgSrc: "assets/music.png" - }, - { - title: "Quote Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/quotesgenerator", - description: "Get inspired with our React-based Quote Generator. Discover wisdom, motivation, and creativity at your fingertips, one quote at a time.", - imgSrc: "assets/quote.png" - }, - { - title: "Password Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react_password_generator", - description: "Boost your online security with our React Password Generator. Create strong, randomized passwords effortlessly to safeguard your digital life.", - imgSrc: "assets/password.png" - }, - { - title: "Score Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Score", - description: "ScoreKeeper app is applicable to any points-based game. It helps in accurately managing and keeping track of the score board, and displays the winner as well.", - imgSrc: "assets/score.png" - }, - { - title: "Riot Games Clone UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Riot-Games-Landing-Page-Clone", - description: "Riot Games Clone: A React project replicating the essence of Riot Games' popular gaming platform, offering a diverse gaming experience.", - imgSrc: "assets/riot.png" - }, - { - title: "Stock Dashboard", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Stock_Dashboard", - description: "This project gives the stock results for the unique company details and uses charts to display their historical and future predictions.", - imgSrc: "assets/stock.png" - }, - { - title: "QR Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/QR_Generator", - description: "A dynamic QR Code Generator that generates new QR codes for every input text or URL.", - imgSrc: "assets/qr.png" - }, - { - title: "Color Palette Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Color-Palette-Generator", - description: "A beautiful Color Palette Generator that generates harmonious color schemes with a click and easily copies hex codes. A useful tool for designers and developers.", - imgSrc: "assets/color.png" - }, - { - title: "Blob Generator", - url: "https://github.com/ojasggg/React-projects-for-beginners/tree/main/Blob_Generator", - description: "Simple Application useful for creators and designers who require unique Blob CSS code.", - imgSrc: "assets/blob.png" - }, - { - title: "Sorting Algorithm Visualizer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/soritng_algorithm_visualizer", - description: "This application has most of the sorting algorithms used in DSA and has a visual representation of how these sorting algorithms work in the background using clean UI in React.", - imgSrc: "assets/algorithm.png" - }, - { - title: "Web3 Theme Landing Page", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/web3_landing_page", - description: "Landing Page for Web3 applications. Used TailwindCSS for design and aos for minor animations.", - imgSrc: "assets/web3.png" - }, - { - title: "Text to Speech Converter", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/text_to_speech", - description: "Simple Website helpful to convert text written in the text area into voices. Controller of voice, sound, pitch and speed options are also provided.", - imgSrc: "assets/text2speech.png" - }, - { - title: "YouTube Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/youtube-clone", - description: "Explore this YouTube clone project where I've recreated the core functionalities of YouTube using React, HTML, CSS, and JavaScript. Experience seamless video playback, user authentication, and video upload functionalities in this beginner-friendly project.", - imgSrc: "assets/youtube.png" - }, - { - title: "Tic-Tac-Toe Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Tic-Tac-toe", - description: "Tic-Tac-Toe Game is a classic two-player game where opponents strategically place Xs and Os on a 3x3 grid, aiming to achieve a winning pattern of three in a row, column, or diagonal.", - imgSrc: "assets/tic.png" - }, - { - title: "Taskify Project", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Taskify-Project", - description: "Taskify-Project is an organizational tool designed to streamline project management, enabling users to create, assign, and track tasks efficiently within a collaborative environment.", - imgSrc: "assets/task.png" - }, - { - title: "Simple Movie Search", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Simple Movie Search is a straightforward tool allowing users to search for movies by title, providing basic information such as release year, genre, and synopsis.", - imgSrc: "assets/smovie.png" - }, - { - title: "Shopapp Redux", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/shopapp%20redux", - description: "Shop App Redux is a streamlined shopping experience powered by Redux, enhancing state management for seamless user interactions and efficient data handling.", - imgSrc: "assets/shop.png" - }, - { - title: "React Tenzies App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-tenzies-game", - description: "React Tenzies App is a web application built using the React JavaScript library, simulating the dice game Tenzi where players race to roll their dice to match a specific pattern, showcasing React's dynamic user interface capabilities.", - imgSrc: "assets/teniz.png" - }, - { - title: "Quiz Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Quiz-Game", - description: "Quiz Game is an interactive application that challenges players with questions on various topics, providing entertainment and opportunities for learning and testing knowledge.", - imgSrc: "assets/quiz.png" - }, - { - title: "Personal Portfolio", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Personal%20Portfolio", - description: "Personal Portfolio is a digital showcase of an individual's work, skills, and achievements, serving as a professional portfolio to highlight expertise and attract potential clients or employers.", - imgSrc: "assets/portfolio.png" - }, - { - title: "Dice App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Dice-App", - description: "A virtual dice-rolling application that simulates the randomness of traditional dice, offering convenience for various tabletop games and decision-making scenarios.", - imgSrc: "assets/dice.png" - }, - { - title: "Covid-19 Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Covid-19_Tracker", - description: "A tool for monitoring and visualizing real-time data on coronavirus cases, including infections, recoveries, and fatalities globally or regionally.", - imgSrc: "assets/covid.png" - }, - { - title: "Bank-KYC Form", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Bank-KYC-Form", - description: "A document where customers provide personal information and identification documents to comply with Know Your Customer regulations, ensuring legal and security compliance for banking services.", - imgSrc: "assets/kyc.png" - }, - { - title: "Guess the Number Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Guess-the-number-react-app-main", - description: "In the React Guess the Number Game, you try to figure out a secret number by making guesses.", - imgSrc: "assets/guess.png" - }, - { - title: "Myth Weaver - Ai Story Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Myth-Weaver", - description: "Myth Weaver is a story-creating AI model. Just give a few prompts, and it will provide you with 5 short stories, each 60 words long.", - imgSrc: "assets/story.png" - }, - { - title: "Twitter Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/twitter_clone/Twitter-Final-main", - description: "This is a simple Twitter Clone implementing the core features of Twitter.", - imgSrc: "assets/twitter.png" - }, - { - title: "Spotify Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Spotify-Clone", - description: "This is a simple Spotify Clone implementing the core features of Spotify. All the important functionalities of Spotify are implemented and the backend part is there for those who need it.", - imgSrc: "assets/spotify.png" - }, - { - title: "Markdown Previewer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Markdown-Previewer", - description: "Text to show on Hover", - imgSrc: "assets/mark.png" - }, - { - title: "Kanban: Drag & Drop Board", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/draganddrop-board", - description: "Its a simple drag and drop kanban style board to manage tasks", - imgSrc: "assets/drag-and-drop.png" - }, - { - title: "ChatGram - Real Time Chat Application", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/chatgram", - description: "Real Time Chatting Application", - imgSrc: "assets/ChatGram.png" - }, - { - title: "Farmer - Landing Page", - url: "", - description: "Common Landing Page for farmers", - imgSrc: "assets/Farmer-landing.png" - } - -]; - -const container = document.getElementById('projects-container'); - -projects.forEach(project => { - const projectDiv = document.createElement('div'); - projectDiv.className = 'col-md-2 mb-4 d-md-inline-block'; - projectDiv.innerHTML = ` -
- React App -
- -
${project.title}
-
-
-
- `; - container.appendChild(projectDiv); -}); \ No newline at end of file diff --git a/.history/projects_20241018184740.js b/.history/projects_20241018184740.js deleted file mode 100644 index 84567887..00000000 --- a/.history/projects_20241018184740.js +++ /dev/null @@ -1,268 +0,0 @@ -// Please add your project details in the below array. -const projects = [ - { - title: "React Todo App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-todo-app", - description: "Start your coding journey with a beginner-friendly React Todo App, perfect for learning task management and basic web development", - imgSrc: "assets/todo.png" - }, - { - title: "React Weather app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Weather-app", - description: "Explore weather effortlessly with a beginner-friendly React Weather App, providing real-time forecasts and an intuitive user experience.", - imgSrc: "assets/weather.png" - }, - { - title: "React Stopwatch app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-stopwatch", - description: "Solidify your javascript concepts by making a React Stopwatch. You will learn how to manage javascript objects as state in React.", - imgSrc: "assets/stopwatch.png" - }, - { - title: "React Bank UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Bank-UI", - description: "Create an attractive landing page of your choice that will improve your designing skills.", - imgSrc: "assets/bank.png" - }, - { - title: "Movie Database App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Create a simple movie database app where you can search about movies. In this project you will learn about Card Components & how to manage dynamic data on page.", - imgSrc: "assets/movie.png" - }, - { - title: "React Expense Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/expense-tracker-react", - description: "Learn more about state management by creating an Expense Tracker.", - imgSrc: "assets/expense.png" - }, - { - title: "E-commerce Website React", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/E-commerce%20Website", - description: "React-based e-commerce site: Sleek design, vast product range, and secure checkout redefine online shopping.", - imgSrc: "assets/ecom.png" - }, - { - title: "GIF Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/GIF%20Generator", - description: "Experience the fun of GIF creation with our React-based GIF Generator. Easily create, customize, and share animated GIFs, adding excitement to your online conversations.", - imgSrc: "assets/gif.png" - }, - { - title: "Calculator App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/calculator-react", - description: "Experience the power of React with our intuitive Calculator app. Perform quick and accurate calculations with a sleek and user-friendly interface.", - imgSrc: "assets/calculator.png" - }, - { - title: "Meme App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/meme-app-react", - description: "Unleash your creativity with our React-powered Meme App. Craft and share hilarious memes effortlessly, adding humor to your social media.", - imgSrc: "assets/meme.png" - }, - { - title: "React Music App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-music-player", - description: "Immerse yourself in the world of music with our React-based Music Player. Enjoy seamless playback, playlist management, and a dynamic audio experience.", - imgSrc: "assets/music.png" - }, - { - title: "Quote Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/quotesgenerator", - description: "Get inspired with our React-based Quote Generator. Discover wisdom, motivation, and creativity at your fingertips, one quote at a time.", - imgSrc: "assets/quote.png" - }, - { - title: "Password Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react_password_generator", - description: "Boost your online security with our React Password Generator. Create strong, randomized passwords effortlessly to safeguard your digital life.", - imgSrc: "assets/password.png" - }, - { - title: "Score Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Score", - description: "ScoreKeeper app is applicable to any points-based game. It helps in accurately managing and keeping track of the score board, and displays the winner as well.", - imgSrc: "assets/score.png" - }, - { - title: "Riot Games Clone UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Riot-Games-Landing-Page-Clone", - description: "Riot Games Clone: A React project replicating the essence of Riot Games' popular gaming platform, offering a diverse gaming experience.", - imgSrc: "assets/riot.png" - }, - { - title: "Stock Dashboard", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Stock_Dashboard", - description: "This project gives the stock results for the unique company details and uses charts to display their historical and future predictions.", - imgSrc: "assets/stock.png" - }, - { - title: "QR Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/QR_Generator", - description: "A dynamic QR Code Generator that generates new QR codes for every input text or URL.", - imgSrc: "assets/qr.png" - }, - { - title: "Color Palette Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Color-Palette-Generator", - description: "A beautiful Color Palette Generator that generates harmonious color schemes with a click and easily copies hex codes. A useful tool for designers and developers.", - imgSrc: "assets/color.png" - }, - { - title: "Blob Generator", - url: "https://github.com/ojasggg/React-projects-for-beginners/tree/main/Blob_Generator", - description: "Simple Application useful for creators and designers who require unique Blob CSS code.", - imgSrc: "assets/blob.png" - }, - { - title: "Sorting Algorithm Visualizer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/soritng_algorithm_visualizer", - description: "This application has most of the sorting algorithms used in DSA and has a visual representation of how these sorting algorithms work in the background using clean UI in React.", - imgSrc: "assets/algorithm.png" - }, - { - title: "Web3 Theme Landing Page", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/web3_landing_page", - description: "Landing Page for Web3 applications. Used TailwindCSS for design and aos for minor animations.", - imgSrc: "assets/web3.png" - }, - { - title: "Text to Speech Converter", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/text_to_speech", - description: "Simple Website helpful to convert text written in the text area into voices. Controller of voice, sound, pitch and speed options are also provided.", - imgSrc: "assets/text2speech.png" - }, - { - title: "YouTube Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/youtube-clone", - description: "Explore this YouTube clone project where I've recreated the core functionalities of YouTube using React, HTML, CSS, and JavaScript. Experience seamless video playback, user authentication, and video upload functionalities in this beginner-friendly project.", - imgSrc: "assets/youtube.png" - }, - { - title: "Tic-Tac-Toe Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Tic-Tac-toe", - description: "Tic-Tac-Toe Game is a classic two-player game where opponents strategically place Xs and Os on a 3x3 grid, aiming to achieve a winning pattern of three in a row, column, or diagonal.", - imgSrc: "assets/tic.png" - }, - { - title: "Taskify Project", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Taskify-Project", - description: "Taskify-Project is an organizational tool designed to streamline project management, enabling users to create, assign, and track tasks efficiently within a collaborative environment.", - imgSrc: "assets/task.png" - }, - { - title: "Simple Movie Search", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Simple Movie Search is a straightforward tool allowing users to search for movies by title, providing basic information such as release year, genre, and synopsis.", - imgSrc: "assets/smovie.png" - }, - { - title: "Shopapp Redux", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/shopapp%20redux", - description: "Shop App Redux is a streamlined shopping experience powered by Redux, enhancing state management for seamless user interactions and efficient data handling.", - imgSrc: "assets/shop.png" - }, - { - title: "React Tenzies App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-tenzies-game", - description: "React Tenzies App is a web application built using the React JavaScript library, simulating the dice game Tenzi where players race to roll their dice to match a specific pattern, showcasing React's dynamic user interface capabilities.", - imgSrc: "assets/teniz.png" - }, - { - title: "Quiz Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Quiz-Game", - description: "Quiz Game is an interactive application that challenges players with questions on various topics, providing entertainment and opportunities for learning and testing knowledge.", - imgSrc: "assets/quiz.png" - }, - { - title: "Personal Portfolio", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Personal%20Portfolio", - description: "Personal Portfolio is a digital showcase of an individual's work, skills, and achievements, serving as a professional portfolio to highlight expertise and attract potential clients or employers.", - imgSrc: "assets/portfolio.png" - }, - { - title: "Dice App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Dice-App", - description: "A virtual dice-rolling application that simulates the randomness of traditional dice, offering convenience for various tabletop games and decision-making scenarios.", - imgSrc: "assets/dice.png" - }, - { - title: "Covid-19 Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Covid-19_Tracker", - description: "A tool for monitoring and visualizing real-time data on coronavirus cases, including infections, recoveries, and fatalities globally or regionally.", - imgSrc: "assets/covid.png" - }, - { - title: "Bank-KYC Form", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Bank-KYC-Form", - description: "A document where customers provide personal information and identification documents to comply with Know Your Customer regulations, ensuring legal and security compliance for banking services.", - imgSrc: "assets/kyc.png" - }, - { - title: "Guess the Number Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Guess-the-number-react-app-main", - description: "In the React Guess the Number Game, you try to figure out a secret number by making guesses.", - imgSrc: "assets/guess.png" - }, - { - title: "Myth Weaver - Ai Story Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Myth-Weaver", - description: "Myth Weaver is a story-creating AI model. Just give a few prompts, and it will provide you with 5 short stories, each 60 words long.", - imgSrc: "assets/story.png" - }, - { - title: "Twitter Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/twitter_clone/Twitter-Final-main", - description: "This is a simple Twitter Clone implementing the core features of Twitter.", - imgSrc: "assets/twitter.png" - }, - { - title: "Spotify Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Spotify-Clone", - description: "This is a simple Spotify Clone implementing the core features of Spotify. All the important functionalities of Spotify are implemented and the backend part is there for those who need it.", - imgSrc: "assets/spotify.png" - }, - { - title: "Markdown Previewer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Markdown-Previewer", - description: "Text to show on Hover", - imgSrc: "assets/mark.png" - }, - { - title: "Kanban: Drag & Drop Board", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/draganddrop-board", - description: "Its a simple drag and drop kanban style board to manage tasks", - imgSrc: "assets/drag-and-drop.png" - }, - { - title: "ChatGram - Real Time Chat Application", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/chatgram", - description: "Real Time Chatting Application", - imgSrc: "assets/ChatGram.png" - }, - { - title: "Farmer - Landing Page", - url: "https://krushimitra.glitchastra.com/", - description: "Common Landing Page for farmers", - imgSrc: "assets/Farmer-landing.png" - } - -]; - -const container = document.getElementById('projects-container'); - -projects.forEach(project => { - const projectDiv = document.createElement('div'); - projectDiv.className = 'col-md-2 mb-4 d-md-inline-block'; - projectDiv.innerHTML = ` -
- React App -
- -
${project.title}
-
-
-
- `; - container.appendChild(projectDiv); -}); \ No newline at end of file diff --git a/.history/projects_20241018184757.js b/.history/projects_20241018184757.js deleted file mode 100644 index 14fb28b6..00000000 --- a/.history/projects_20241018184757.js +++ /dev/null @@ -1,268 +0,0 @@ -// Please add your project details in the below array. -const projects = [ - { - title: "React Todo App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-todo-app", - description: "Start your coding journey with a beginner-friendly React Todo App, perfect for learning task management and basic web development", - imgSrc: "assets/todo.png" - }, - { - title: "React Weather app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Weather-app", - description: "Explore weather effortlessly with a beginner-friendly React Weather App, providing real-time forecasts and an intuitive user experience.", - imgSrc: "assets/weather.png" - }, - { - title: "React Stopwatch app", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-stopwatch", - description: "Solidify your javascript concepts by making a React Stopwatch. You will learn how to manage javascript objects as state in React.", - imgSrc: "assets/stopwatch.png" - }, - { - title: "React Bank UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Bank-UI", - description: "Create an attractive landing page of your choice that will improve your designing skills.", - imgSrc: "assets/bank.png" - }, - { - title: "Movie Database App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Create a simple movie database app where you can search about movies. In this project you will learn about Card Components & how to manage dynamic data on page.", - imgSrc: "assets/movie.png" - }, - { - title: "React Expense Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/expense-tracker-react", - description: "Learn more about state management by creating an Expense Tracker.", - imgSrc: "assets/expense.png" - }, - { - title: "E-commerce Website React", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/E-commerce%20Website", - description: "React-based e-commerce site: Sleek design, vast product range, and secure checkout redefine online shopping.", - imgSrc: "assets/ecom.png" - }, - { - title: "GIF Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/GIF%20Generator", - description: "Experience the fun of GIF creation with our React-based GIF Generator. Easily create, customize, and share animated GIFs, adding excitement to your online conversations.", - imgSrc: "assets/gif.png" - }, - { - title: "Calculator App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/calculator-react", - description: "Experience the power of React with our intuitive Calculator app. Perform quick and accurate calculations with a sleek and user-friendly interface.", - imgSrc: "assets/calculator.png" - }, - { - title: "Meme App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/meme-app-react", - description: "Unleash your creativity with our React-powered Meme App. Craft and share hilarious memes effortlessly, adding humor to your social media.", - imgSrc: "assets/meme.png" - }, - { - title: "React Music App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-music-player", - description: "Immerse yourself in the world of music with our React-based Music Player. Enjoy seamless playback, playlist management, and a dynamic audio experience.", - imgSrc: "assets/music.png" - }, - { - title: "Quote Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/quotesgenerator", - description: "Get inspired with our React-based Quote Generator. Discover wisdom, motivation, and creativity at your fingertips, one quote at a time.", - imgSrc: "assets/quote.png" - }, - { - title: "Password Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react_password_generator", - description: "Boost your online security with our React Password Generator. Create strong, randomized passwords effortlessly to safeguard your digital life.", - imgSrc: "assets/password.png" - }, - { - title: "Score Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/React-Score", - description: "ScoreKeeper app is applicable to any points-based game. It helps in accurately managing and keeping track of the score board, and displays the winner as well.", - imgSrc: "assets/score.png" - }, - { - title: "Riot Games Clone UI", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Riot-Games-Landing-Page-Clone", - description: "Riot Games Clone: A React project replicating the essence of Riot Games' popular gaming platform, offering a diverse gaming experience.", - imgSrc: "assets/riot.png" - }, - { - title: "Stock Dashboard", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Stock_Dashboard", - description: "This project gives the stock results for the unique company details and uses charts to display their historical and future predictions.", - imgSrc: "assets/stock.png" - }, - { - title: "QR Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/QR_Generator", - description: "A dynamic QR Code Generator that generates new QR codes for every input text or URL.", - imgSrc: "assets/qr.png" - }, - { - title: "Color Palette Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Color-Palette-Generator", - description: "A beautiful Color Palette Generator that generates harmonious color schemes with a click and easily copies hex codes. A useful tool for designers and developers.", - imgSrc: "assets/color.png" - }, - { - title: "Blob Generator", - url: "https://github.com/ojasggg/React-projects-for-beginners/tree/main/Blob_Generator", - description: "Simple Application useful for creators and designers who require unique Blob CSS code.", - imgSrc: "assets/blob.png" - }, - { - title: "Sorting Algorithm Visualizer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/soritng_algorithm_visualizer", - description: "This application has most of the sorting algorithms used in DSA and has a visual representation of how these sorting algorithms work in the background using clean UI in React.", - imgSrc: "assets/algorithm.png" - }, - { - title: "Web3 Theme Landing Page", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/web3_landing_page", - description: "Landing Page for Web3 applications. Used TailwindCSS for design and aos for minor animations.", - imgSrc: "assets/web3.png" - }, - { - title: "Text to Speech Converter", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/text_to_speech", - description: "Simple Website helpful to convert text written in the text area into voices. Controller of voice, sound, pitch and speed options are also provided.", - imgSrc: "assets/text2speech.png" - }, - { - title: "YouTube Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/youtube-clone", - description: "Explore this YouTube clone project where I've recreated the core functionalities of YouTube using React, HTML, CSS, and JavaScript. Experience seamless video playback, user authentication, and video upload functionalities in this beginner-friendly project.", - imgSrc: "assets/youtube.png" - }, - { - title: "Tic-Tac-Toe Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Tic-Tac-toe", - description: "Tic-Tac-Toe Game is a classic two-player game where opponents strategically place Xs and Os on a 3x3 grid, aiming to achieve a winning pattern of three in a row, column, or diagonal.", - imgSrc: "assets/tic.png" - }, - { - title: "Taskify Project", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Taskify-Project", - description: "Taskify-Project is an organizational tool designed to streamline project management, enabling users to create, assign, and track tasks efficiently within a collaborative environment.", - imgSrc: "assets/task.png" - }, - { - title: "Simple Movie Search", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/simple-movie-search-app", - description: "Simple Movie Search is a straightforward tool allowing users to search for movies by title, providing basic information such as release year, genre, and synopsis.", - imgSrc: "assets/smovie.png" - }, - { - title: "Shopapp Redux", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/shopapp%20redux", - description: "Shop App Redux is a streamlined shopping experience powered by Redux, enhancing state management for seamless user interactions and efficient data handling.", - imgSrc: "assets/shop.png" - }, - { - title: "React Tenzies App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/react-tenzies-game", - description: "React Tenzies App is a web application built using the React JavaScript library, simulating the dice game Tenzi where players race to roll their dice to match a specific pattern, showcasing React's dynamic user interface capabilities.", - imgSrc: "assets/teniz.png" - }, - { - title: "Quiz Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Quiz-Game", - description: "Quiz Game is an interactive application that challenges players with questions on various topics, providing entertainment and opportunities for learning and testing knowledge.", - imgSrc: "assets/quiz.png" - }, - { - title: "Personal Portfolio", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Personal%20Portfolio", - description: "Personal Portfolio is a digital showcase of an individual's work, skills, and achievements, serving as a professional portfolio to highlight expertise and attract potential clients or employers.", - imgSrc: "assets/portfolio.png" - }, - { - title: "Dice App", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Dice-App", - description: "A virtual dice-rolling application that simulates the randomness of traditional dice, offering convenience for various tabletop games and decision-making scenarios.", - imgSrc: "assets/dice.png" - }, - { - title: "Covid-19 Tracker", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Covid-19_Tracker", - description: "A tool for monitoring and visualizing real-time data on coronavirus cases, including infections, recoveries, and fatalities globally or regionally.", - imgSrc: "assets/covid.png" - }, - { - title: "Bank-KYC Form", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Bank-KYC-Form", - description: "A document where customers provide personal information and identification documents to comply with Know Your Customer regulations, ensuring legal and security compliance for banking services.", - imgSrc: "assets/kyc.png" - }, - { - title: "Guess the Number Game", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Guess-the-number-react-app-main", - description: "In the React Guess the Number Game, you try to figure out a secret number by making guesses.", - imgSrc: "assets/guess.png" - }, - { - title: "Myth Weaver - Ai Story Generator", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Myth-Weaver", - description: "Myth Weaver is a story-creating AI model. Just give a few prompts, and it will provide you with 5 short stories, each 60 words long.", - imgSrc: "assets/story.png" - }, - { - title: "Twitter Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/twitter_clone/Twitter-Final-main", - description: "This is a simple Twitter Clone implementing the core features of Twitter.", - imgSrc: "assets/twitter.png" - }, - { - title: "Spotify Clone", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Spotify-Clone", - description: "This is a simple Spotify Clone implementing the core features of Spotify. All the important functionalities of Spotify are implemented and the backend part is there for those who need it.", - imgSrc: "assets/spotify.png" - }, - { - title: "Markdown Previewer", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/Markdown-Previewer", - description: "Text to show on Hover", - imgSrc: "assets/mark.png" - }, - { - title: "Kanban: Drag & Drop Board", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/draganddrop-board", - description: "Its a simple drag and drop kanban style board to manage tasks", - imgSrc: "assets/drag-and-drop.png" - }, - { - title: "ChatGram - Real Time Chat Application", - url: "https://github.com/ianshulx/React-projects-for-beginners/tree/main/chatgram", - description: "Real Time Chatting Application", - imgSrc: "assets/ChatGram.png" - }, - { - title: "Farmer - Landing Page", - url: "https://landing.glitchastra.com/", - description: "Common Landing Page for farmers", - imgSrc: "assets/Farmer-landing.png" - } - -]; - -const container = document.getElementById('projects-container'); - -projects.forEach(project => { - const projectDiv = document.createElement('div'); - projectDiv.className = 'col-md-2 mb-4 d-md-inline-block'; - projectDiv.innerHTML = ` -
- React App -
- -
${project.title}
-
-
-
- `; - container.appendChild(projectDiv); -}); \ No newline at end of file