CodemySite_Web development

  When you watch Youtube, there is a miniplayer in the right corner which is same as picture in picture function. I think this is very useful for mordern people's life,who can do multiple thing at the same time,such as browsering website while watching some videos or doing notes when having class on one screen.  The video screen can be dragged anywhere you want and resize to any size you want. Efficient tool. When searching picture in picture,there is a chrome extension choice.Here is the customize version for developer. CODE SEPERATE BELOW: HTML video tag is the container for video display with the button to trigger. CSS font from Google font as you choice. First,make sure all the stuff in the center of the body,just for displaying. Giving button some animations,like box-shadow and background. JAVASCRIPT Get the DOM with ID. First, the broswer needs to fetch the screen with Screen Capture API. captureStream = await navigator . mediaDevices . getDisplayMedia ( displayMediaOpti

  Infinite scrolling is the popular JS tech for better customers experience,especially with images loading while scrolling,no need to refresh page to fetch new ones.  The images from unsplash api link here CODE SEPERATE BELOW: HTML HEAD I only set the tab label icon here. HTML BODY Loader is the svg from loading.io Image-container is for all the images fetching from api. yeah ,don't forget to link js file . CSS Import fonts from Google fonts as needed. The background is the pattern shape. The title does stroke stylish. The loader is the svg, positioning in the center of screen. For responsive small screen, it's neccessary to change the styles . JAVASCRIPT Get the DOM with getElementById. Initial setup for variable. Go to unsplash api. And create the api , then you will get the apiKey.  copy it in the code. Then it's able to fetch the data in the console.log(). When first load the page,it will fetch the 5 images,when scrolling to the bottom of page,the count should be update

  Quote generator can be used for wallpaper, which random selects the data with Javascript. And the twitter share api helps to share the content with one click. TALK SEPERATE BELOW: HEAD I linked the font-awesome here because of the icon of brain shape contained in the content. If not,just ignore. And the tab label too,just for customizing.  The important one is linking css file. BODY The container includes three big parts,which is quote-text,quote-author and buttons.  There are two buttons: twitter share button and next new quote button. And don't forget to link the script file.  The loader is the extra for smoothing experience,because the data loading for awhile sometimes.  CSS import font 'satisfy' from google fonts ,as your choice. display flex : set the content in the center of site. add some hover effects for border and color. Loader is the basic spin from w3c ,change color if needed. And I found out we need set the min-width and min-height to make it circle, because