CXDI - SERVE TECHNOLOGY

Top 50 JavaScript Project Ideas from Beginner to Advanced https://www.reddit.com/r/DevArt/comments/1dgbi4z/top_50_javascript_project_ideas_from_beginner_to/ Are you looking to improve your JavaScript skills through hands-on projects? Whether you're a beginner, intermediate, or advanced developer, working on real-world projects is one of the best ways to learn. Here’s a comprehensive list of 50 JavaScript project ideas that can help you level up your skills! Beginner Projects To-Do List : A simple app to add, delete, and mark tasks as complete. Calculator : Build a basic calculator that performs arithmetic operations. Quiz App : Create a quiz with multiple-choice questions and show the score at the end. Weather App : Use an API to display current weather information based on user's location. Digital Clock : Display the current time with hours, minutes, and seconds. Tip Calculator : Calculate the tip amount based on

Iteration vs Recursion in C: A Friendly Guide 🌟 Hello there, budding C programmers! 👋 Today, we’re diving into a fundamental concept in programming: Iteration vs Recursion. Both are essential tools in your coding toolbox, and understanding their differences can help you decide which to use in various situations. Let’s break it down! 🛠️ Iteration: The Looping Hero 🌀 Iteration is all about loops. Whether it's for , while , or do-while , iteration repeats a block of code multiple times until a condition is met. It's like having a diligent worker who keeps performing the same task over and over until the job is done. Here’s a simple example using a for loop to print numbers from 1 to 5: #include <stdio.h> int main () { for ( int i = 1 ; i <= 5 ; i ++ ) { printf ( "%d \n " , i ); } return 0 ; } Enter fullscreen mode Exit fullscreen mode

Source :- https://compile.blog/imgur-api-image-uploader/ See Example :- https://sh20raj.github.io/Gurimg/ Video Documentation :- https://youtu.be/Gh1ngxdIXAk {% youtube https://youtu.be/Gh1ngxdIXAk %} Codepen Demo :- https://codepen.io/SH20RAJ/pen/QWqoOrL Imgur is great for hosting images for free. There are other platforms like FileStack, Cloudinary, and UploadCare; but among all Imgur is the best for uploading images because it’s free for non-commercial usage. And, there is a simple way to set up the Imgur API to upload images directly from the local disk. Here’s how to do it: Imgur API Image Uploader Let’s break it into simple baby steps: Step #1 – Get the Imgur API First of all, you will have to register your application with the Imgur API. Go to the API page and register an application. It should look like the below screenshot: Fill in the following details in the respective fields: Application name: whatever you would like to name it Authorization type: OAut

GitHub :- https://github.com/openplayerjs/openplayerjs/ OpenPlayerJS :- https://www.openplayerjs.com/ Video < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/openplayerjs@latest/dist/openplayer.min.css" /> <!-- Adding Css CDN --> < video class = "op-player__media" id = "player" controls playsinline width = "100%" > < source src = "https://archive.org/download/sample-video_202306/SampleVideo.mp4" type = "video/mp4" /> </ video > < hr > < script src = "https://cdn.jsdelivr.net/npm/openplayerjs@latest/dist/openplayer.min.js" > </ script > <!-- Adding JavaScript CDN --> < script > // Check the `API and events` link below for more options const player = new OpenPlayerJS( 'player' ); player.init(); </ script > Audio < link re

Custom HTML5 Video Player with Vanilla JavaScript KWG Video Player is a free custom HTML5 video player. It is written in Vanilla JavaScript and no library is required for it to run. The video player can be used in different web projects freely. Multiple instances of the video player can be used in a single page. and the appearance of the player can be customized. Upon creating a KWG Video Player, an Object is created in which one of the members is html5 <video> element and all Media events, properties and methods are available for it. For the whole functionality of KWG Video Player , see documentation source . Integration 1. Load CDNs <link rel= "stylesheet" href= "https://cdn.jsdelivr.net/gh/webgadgets/KwgVideoPlayer@master/kwg-video-player.css" /> <script src= "https://cdn.jsdelivr.net/gh/webgadgets/KwgVideoPlayer@master/kwg-video-player.js" ></script>

Wholly API :- https://wholly-api.herokuapp.com/ See This is the API endpoint- https://wholly-api.herokuapp.com/websites/instagram.com/ Fetch Using JavaScript :- Ref. Google Users can fetch the websites content on there website even using Pure JavaScript . The different URLs will return you different results in JSON format. Just grab the JSON Using any Server Side or Client Side Language and Show on website. Some API Uses are Given Below :- Get Post's Images URL https://wholly-api.herokuapp.com/websites/instagram.com/get-post.php?id={{Your Post's id}} See Example Here :- https://wholly-api.herokuapp.com/websites/instagram.com/get.php?id=CXCI49ABauD It will return a JSON you something like this { "status" : 1 , "id" : "CXCI49ABauD" , "user" : "robertdowneyjr" , "userimage" : "https: \/\/ imageproxy.pimg.tw \/ resize?url=http

detectDeviceType() this function will return you a string value either "Mobile" or "Desktop".   const detectDeviceType = () => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ? 'Mobile' : 'Desktop'; // Example detectDeviceType(); // "Mobile" or "Desktop" See Demo on Codepen :- See the Pen Figure out if the device is a mobile or a desktop/laptop Using JavaScript by SH20RAJ ( @SH20RAJ ) on CodePen .

WebScrapperJS WebScrapperJS - Get Content/HTML of any website without being blocked by CORS even using JavaScript by WhollyAPI Website :- https://sh20raj.github.io/WebScrapperJS/ GitHub | Repl.it | Dev.to Article Grab the CDN or Download the JavaScript File <script src= "https://cdn.jsdelivr.net/gh/SH20RAJ/WebScrapperJS/WebScrapper.min.js" ></script> Enter fullscreen mode Exit fullscreen mode To Get HTML/Text Content of Any Website WebScrapper.gethtml() or WebScrapper.get() var url = ' https://google.com/ ' ; var html = WebScrapper . gethtml ( url ); //html of the url will be stored in this variable console . log ( html ); Enter fullscreen mode Exit fullscreen mode WebScrapper.gethtml() or WebScrapper.get() both are similar. Intialise own WebScrapper with URL new scrapper() let MyWebScrapp

Markdown is a lightweight markup language for creating formatted text using a plain-text editor. John Gruber and Aaron Swartz created Markdown in 2004 as a markup language that is appealing to human readers in its source code form. Wikipedia Using Markdown you will write(code) less and get more(static content). Code given below are basic JavaScript Codes. Easy to Understand you can modify it and make the functions more dynamic. We will Use - showdownjs  to do so :-  https://github.com/SH20RAJ/markdowntohtml   Here is the code you can use to change your markdown to HTML and show the html on your Website. <script src="https://cdn.jsdelivr.net/npm/showdown/dist/showdown.min.js"></script> <div id="mycontent"></div> <script> var converter = new showdown.Converter(); var md = '[**Showdown**](http://www.showdownjs.com) is *great*\n' + 'because:\n\n' +

 Hide or show Elements in HTML Using JavaScript and Css Steps :- For This Firstly create a . hidden class where the css display property is set to " none ". <style> .hidden{ display:none; } </style> Then Using JavaScript we will toggle (add / remove) the hidden class from the element. So that results hiding and showing of the div/any other  element. Creating a JavaScript function to hide/show elements. <script> function hideunhide(a){ document.querySelector(a).classList.toggle('hidden'); } </script> This function takes a parameter ( queryselector ) and select the element and add or remove hidden from the class list of the element. If hidden is present it will remove and vice-versa .That's the work of toggle. See the Demo Below or on CXDI - Tutorials :-  https://tutorials.sh20raj.repl.co/hide-or-show-elements-in-html-using-javascript-and-css/ . Demo Codes :-  htt

Code/Syntax Highlighting Using highlight.js - Show Codes on Website/Blogger Code/Syntax Highlighting Solutions Playlist :- Highlight.js is a syntax highlighter written in JavaScript. It works in the browser as well as on the server. It can work with pretty much any markup, doesn’t depend on any other frameworks, and has automatic language detection. Website   GitHub   See More Documentation on GitHub ->  https://github.com/highlightjs/highlight.js/blob/main/README.md See Doc on Repl.it  :-  https://replit.com/@SH20RAJ/Tutorials#highlightjs/index.html See Demo Here ( CXDI - Tutorials ) :-  https://tutorials.sh20raj.repl.co/highlightjs/ A Basic way to integrate hljs (for more see GitHub) +  Add the JavaScript CDN & Code Just before ending of <body> Tag. <link rel="stylesheet" href="https://unpkg