CodemySite_Web development

  course from Brad Traversy Github code  Features: drag and drop HTML API Array.prototype.sort() closest() getAttribute()   data-index HTML draggable list is a unsorted list the button is for checking  if the list after manipulating is sorted correctlly CSS when list item add class named over, the draggable should have a colored  background after checking the order, if the order number is right, colored to blue ,if wrong, colored to red JS select elements draggable list and check button the data is a richestPeople array string with richest first ordered listItem  is to store the custom list array create the list to DOM map the data and get the random index to sort the list and then create all list items Array.prototype.sort() sort by the callback function MDN and then add the events  drag and drop For each draggable list, the events contain dragstart,dragover,drop,dragenter,dragleave drag and drop API When drag starts on one list, get the specific data-index to be dragStartIndex Elemen

course from Brad Traversy Github code Features: dynamic new year  with 1 second loader cal the difference between new year and current HTML the year is a dynamic new year display the countdown includes the days, minutes, hours, and seconds loader image shows when page loads CSS add the background overlay with ::after and all the other upper layer First, hide the countdown to show the loader For a responsive browser with media JS select elements DOM get current year with Date().getFullYear() newYearTime is current year +1 with date and time new year show in the year section every second the function runs once. calculate the difference between new year's time and the current time. calculate the days, hours, minutes, and seconds of difference seconds total=diff/1000 and the %60 is extra seconds minutes total=diff/1000/60 days total=diff/1000/60/60/24 hours total=diff/1000/60/60 and with ?...:... to make sure every time is two numbers After page loaded one second, the loading hide, and

  course from Brad Traversy Github code Features: canvas drawing  keydown and keyup requestAnimationFrame() HTML rules section hide at the left side with rules button and close button to control canvas is a game container with all the drawing CSS set the canvas to display block side rules lay at the left side and transform with x-axis when adding the class name show JS select elements DOM needed canvas context with canvas.getContext('2d') init the current score and drawing brick row and column counts init the data of ball, paddle, and bricks position x,y,size,moving speed. dx is the position of x-direction. dy is the y-direction First, drawing all the shapes on the canvas. ball, paddle, score, and bricks every time clear the context first with canvas width and height drawBall() with ctx.arc(x,y,radius,start angle,end angle)  More about canvasrenderingcontext2d.arc() MDN ctx .arc( x , y , radius , startAngle , endAngle [, anticlockwise ]); drawPaddle() with rect() more about c

  course from Brad Traversy Github code Features: css animation setInterval setTimeout audio control HTML circle is a circle with solid color text is for reminder messages in the center pointer is the animated circle around the circle gradient circle is the three sections gradient background behind the circle layer audio with a control button CSS gradient circle is a conic gradient background and larger than the circle .  the z-index of circle is -1, soo the gradient cicle is -2 (under the circle) pointer is a small round outside of circle and gradient circle. the pointer container is like the clock, rotating around animation rotate infinitly rotate from 0 to 360 degrees When the class name contains grow, scale bigger when the class name contains shrink, scale smaller JS select all the element DOM init the totalTime,breathTime and holdTime when loading the page, the function breathAnimation runs. the text shows "breath in" and the circle scale larger with grow class name adde

  course from Brad Traversy Github code Features: lyrics API tagName Cors error regular expression  attribute data- HTML searching input in the form result show at the container more is the previous and next buttons generated in js CSS the black layout background at the header  make sure all the input and h1 text at first layer with z-index JS select needed DOM the API URL from Apiary lyrics.ovh When submitting the form content, get the input value to search.  If the input is empty, show the message in the placeholder, or run the searchTerm() fetch the data from API with the input term show the data to DOM create the elements in the result section get the list of data, for each of song getting the artist name and the song title if there is a prev or next attributes which means having more searching results, show the buttons in more div and also add the getMoreSongs() onclick event When getMoreSongs(), fetching the data again with the url of prev or next It will pop up the CORS error wh