CodemySite_Web development

When you start to study Front-end development, you will learn HTML, CSS, Javascript and then the other frame for easy building such as React, Angular, VUE.  The Javascript knowledge is the basis for a front-end developer. Even when you connect with React for front-end or Node.js for back-end. So I am trying to practice Javascript with small projects to improve my skills. Actually, it's never outdated for these years, the basic knowledge contains in the projects usually. I choose the 10 Javascript projects in 10 hours of Florin Pop, and I can not believe I really spent a whole day doing it. For viewers who would like to get more details. here is his Github  code. And I also will show the code below for easy checking. 1.countdown timer See the Pen countdown timer by Yifang Di ( @diyifang ) on CodePen . 2.Quiz App See the Pen Quiz App by Yifang Di ( @diyifang ) on CodePen . 3. recipe app See the Pen Recipe App by Yifang Di ( @diyifang ) on CodePen . 4....

  course from Brad Traversy Github code Features: localStorage set and get card flip animation CSS slide the cards two direction add, clear cards  HTML cleat button is on the bottom of the page add new card button is on the top of the page with title cards-container is the place to display the added cards container the navigation with two buttons and the current card number add-container is the box with two inputs and a submit button when triggering add-a-new-card  CSS apply perspective to the outside of card each card is in an absolute position when the card is active, change the translalteX and rotateY degree .  with the left class name, change the x axis and rotateY degree for a flipping card effect, transform-style:preserve-3d and animation rotateX degree when flip, rotate x each card has two sides: front and back add an icon before the flip button with Font awesome  The pop-up adding container position is the same as card. hide first when loading JS select ...

  course from Brad Traversy Github code Features: localStorage get and set setting difficulty selects matching words score add when correct time reduces and the time add if typing correctly(time depends on difficulty level) HTML button controls the setting section at the top the setting is a form with three selections the word data will be shown in the h1 tag the text input compare to the word when the user types time on the left, score on the right and when the game end, the message shows up with the score and a reset button CSS hide the arrow on the select with appearance, for other browser adding the -webkit and -moz When focusing on select, hiding the outline the setting places at the top. when hiding, the position of the y-axis moves up the messager box show at the absolute position relative to the container and hide first. when the game ends, show up JS select all the DOM needed with id the words array or can be fetched from API the initial score is zero, and the time is 10 s...

  Course content from Brad Traversy Github code Features: input value to DOM onclick delete item based on id localStorage to get and set HTML: the income has a plus sign value the expense has a minus sign value the balance is the total of income and expense The history is a list of income or expense either getting from the localStorage or the value of the input. The form is the input part with the text and amount. When submitting, the input value display in the DOM history. CSS The income and expense should be aligned. Flex=1 the same space separating line in the middle is the border right The delete button of each list item positions in the head of the list. Hide first, when hovering, show up with the transition. JS get the DOM needed with id we plan to store the input value in the localStorage named transaction When first load the page, it should get the data from localStorage right away. If the memory has the transaction, grab it, wither way, set the init array to empty. When su...