Project Link:

https://50-projects-15-days.vercel.app/ What i learnt:CSS is harder than js.Basically it dealt with removing the active class from allAnd adding it once the button is clicked.And basically we need that flex property to like widenThe horizon :)

2nd was kinda easyThe thing to keep in mind is that while making the circle,The width and height of the object has to be sameAnd border radius has to half of the widthThe line that is seen is a kind of rectangle ie it has width and height Talking about the js, we maintain two global variablesFirst one will be mostly active because initially that’s the one that gets selected The variables had to be maintained and the if conditions had to be in place.

Nice fonts: Muli, roboto, lato, ubuntu,Montserrat,heeboDay 3 ok lets gooIn this project so basically we have our body element.Then we kind of like rotate or tilt the container element by certain degree. This is interesting as it will rotate the entire container transform:rotate(-20deg) transform:rotate(-20deg); transform-origin: top left;}This is to make sure that it rotates front the top left instead of the middle which is default.

For the position stuff would like place the top nav bar position:fixed; top:-100px; left:-100px Since both of them have negative values they will be like not shown from other sidesposition:fixed; Fixed vs absolute the difference is that fixed would like fix it even if the screen is scrolled.But, absolute is like it would not be fixed as we scroll down. position: relative;Positon relative chai parent ma halinxa ani esko anusar ma children lai milaune ho.By default the positioning is staticRelative is like staticBut relative allows us do 4 things that static doesn’t allowsWe can add top bottom left right with relative that we can’t add with staticWith relative we can like shift the element in any directionPosition:relative is not used to shift Also watch out on line-height

4th day:.search.active→ this means that they are kind of sibling ie they are targeting the same element.search .active→ due to the space, they are parent and child.search + .acitve→ this ig should be immediate parent child relation Learn about background-image: linear-gradient(90deg, #7d5fff,#7158e2);Like position is kind of tricky.By default all the position is staticRelative is also like stattic but with relative we can do moreIf parent is made relative, then the children can be positionedRelative to the parent instead of the domSo with parent relative the child element can be placed relative to the parent.So once the parent is relative the child can be placed with respect to parent For that we have left right top bottom So left position means to shift 10 units from the left

Extra js:search.classList.toggle('active') input.focus() Toggle just toggle the classThe 2nd line brings the focus to the input button

ONLY FOR UNDERSTANDING THE CONCEPTS: transform: rotate(45deg); transform:rotateX(80deg); transform:rotateY(89deg); transform:rotateZ(4deg); Different ways of rotating; transform: scale(1.5); transform: scale(1.5,2); transform: scaleX(1.5); transform: scaleY(1.5);Different ways of scaling;So basically all these transform and all the stuff is the high school A.math. In transform first is always x and the second one is alway y axisOnly in margin it’s (y,x) otherwise mostly it’s (x,y) We Dont use translateZ as we dont deal with 3d stuff Css is mostly about math /_ most useful of them all _/ transform: translate(-30px,-40px); transform: translateX(20px); //translateX and translate are same if we pass only one value transform: translateX(-20px); transform: translate(100%) The last one we pass translate(100%) This shifts/translates by 100% of the width of the containerIe like box’s widthShifting is done on the basis of the width of the box if we write the measurement in %

transform: rotate(45deg) scale(0.75) translateX(200px); Lastly we could also combine the different properties like this about rotate, scale and translate. Rotate→ we pass deg, scale()--> we just provide magnitude and lastly with translate we provide either % or the value in pixels.

.parent:hover .child{ /_ transform: scale(2) translate(50px,50px) / transform: translate(100%);}//also could be achieved with css the :hover stuff Let’s learn transition for animation1st mistake people make on transition is that they place transform witSo the first rule is dont place transition where we have transform Which object do you want to transition is the place where you want to add transition property. Transition property is like margin;It combines all different 4 functionalities into one So we can use shorthand property transition-delay: ; transition-duration: ; transition-duration: ; transition-timing-function: ; 4 available transitions transition: transform 0.3s ease;//by default it will animate all the property even if we dont write transform as an attribute1st argument is one which property transition should be applied2nd is the time upto which we want the animation transition: transform 0.7s; } .parent:hover .child{ / transform: scale(2) translate(50px,50px) / background-image: linear-gradient(90deg,#abc,#cba); transform: translate(100%);} With this when we hover bg-color wont changeBut instead of transform if we leave blank,then the color will change .parent:hover .child{ / transform: scale(2) translate(50px,50px) _/ background-image: linear-gradient(180deg, rgba(255, 0, 255, 0.667), rgba(255, 0, 102, 0.733)); transform: translate(100%); transition: transform 0.7s; } Writing this will kind of work half way because like halfway onlyOnly one direction As soon as we move away from the child, the animation wont be there and hence it wont take into effect. Golden rule of transition:Always transition should be done on the base class and not the modified class.Always the base class for the animation and not the updated/modified class. Last parameter is the animation and what type of animation we wantMostly we use linearBut we could also use like ease in Ease-out and stuff similar To make relative we dont have to make parent child relation ig

Day#4

Day#5Used stackoverflow blur function.To like blur the image

.content:nth-of-type(even){ transform: translateX(-400%);}

Idk what this is const boxTop=content.getBoundingClientRect().top; This project is less about css and more about jsSo kinda focus more on the js of this question

transform:translateX(400%); transition: transform 0.5s ease; Esma chai transition is with transform because intitlally we have set or we haveForced the boxes to go to right Actual animation happens when we kind show the stuff.content.show{ transform:translateX(0) } Actual animation is hereBut we didn’t add the transition hereInstead it was added above. const triggerBottom=window.innerHeight/5 *4;//we are setting the trigger point; as we enter here event should fire upSo like yes we are setting a place for the trigger point,The trigger point should not be exactly at the bottom so setting it little above the actual height of the dom/ window

​ const boxTop=content.getBoundingClientRect().top;This is kinda important because it gives the height at which the particular box stands in the document.Like it returns a containers height in the screen.The top attribute .getBoundingClientRect; Gives the value of how down is the element from the top of the window screen.

Overlay is the stuff that is kind of new to me in this project.Kind of focuses more on the pseudo selector and stuff. :root{ --left-bg-color:rgba(87,84,236,0.7); --right-bg-color:rgba(179, 146, 146, 0.8);} New stuff learnt ie – ith that syntax the we are defining the variable.That can be used again with the help of var keyword..xbox::before{ content:''; position: absolute; width: 100%; height:100%; background-color: var(--right-bg-color);} using the variable that was set earlier This is kind of added for the overlay stuffIe like that transparency that gets added with the help of the ::before syntax

white-space:nowrap;This is used to like wrap the content and not like shrink the content even if the space is not enough.Like the text wont move to the next line even if the space is not enough ie no moving to the next line.

left:50%; transform: translate(-50%); Doing this has a important significance. Than this left:30%;The above one would ensure that after placing the element left of 50% of the screen width the content there would be like forced to shift right.But with transform -50% we ensure that the content is like properly placed like center alignment is done properly But with the latter one we are only making that the item is placed perfectly in one screen.

This project wasn’t that hard on day#8 Only thing to keep in mind is that whenever we want to position anything exactly at the center, then we have to use flex property.

.login button:active{ transform: scale(0.98);}Best place to use scale is when we want to decrease the size of the button.

label.innerHTML=label.innerText .split('')//make an array .map((letter,index)=>{// map returns alot of span tag with each one having one char return <span style="transition-delay:${*index**50}ms" >${*letter*}</span> }) In every tag we are kind of adding transition delay.

.field input:focus + label span ,.field input:focus + label span { color:rgb(154, 221, 248); transform: translateY(-30px);} This is the crux why only when clicked, we have the animationThe focus state in which it is would like transform its positionUntil and unless it is not clicked transformation wont happen.So when we click there only then the transform will happen and then the transition is added. Wavy login.

Like in the previous project where we added every object in the span class using the js,Even in this project we try to add the buttons using the jsFirstly we loop through the arrayAnd for every element we create a buttonAnd add certain class in the button.After that, we set the innerHtml to respective value.Finally the button is added to the document by using appendChild method.btn.addEventListener('click',()=>{ document.getElementById(sound).play() })At the center we also have the event listener that like plays when we click that.

sounds.forEach(sound**=>{ const song= document.getElementById(sound); song.pause(); song.currentTime=0; })Just like how we removed the active class in previous projects, here we have to first pause any other playing song and then only start playing the other song. No like other image here. Main gist of this project was to import the sound using audio tag in htmlThen in the js we would create each button based on an array of sounds using that name. Then on every button there would be an event listener that would like when clicked play the song. That’s it. But also the other thing would be to like stop every other music if we click on other button. For that we need to pause every other song.day #10 did some projects in college and continuing them z-index: 1;Important stuff is this. When we want to place one thing over the other we use this.Higher z-index means it will be on the top.Hence we could have the navigation at the above layer.

Very important stuff to try out when we want to hide stuff:things to try:use the z-index to put it behind some other elementmove it off the screen by absolute positioningvisbility: hiddenmake the content "invisible" by setting background to foreground color (works only for text)opacity: 0but the real question is: why? Nice way of using linear gradient is as belos background-image: linear-gradient( 180deg, #eafbff 0%, #eafbff 50%, #5290f9 50%, #5290f9 100% ); Would create a split effect and based on the % it would fill up the entire document. box-shadow:0px 2px 5px rgba(0,0,0,0.4); Perfect when it comes to like showing on the screen By default in which state the element will be that will be kind of in active stuff Initially A—------------------>B When it goes to B state at that class we will add the transition property. So always we have to understand that at the beginning it will be in which stateIf it is in active state, then we want to make it as inactive transition:transform 0.6s linear, opacity 0.6s linear;We could add multiple transition like this. padding: 0;Even when we dont have anything in the screen sometimes we have to add padding.

.nav ul li{ transform: rotateY(0deg); opacity:0; transition:transform 0.6s linear, opacity 0.6s linear;} .nav.active ul li{ opacity:1; transform: rotateY(360deg);}

Initially the element will be in active state.So the opacity will be one.When clicked, then it wont be in active state, hence, The opacity would be 0.But the element would still be there.The width would also reduce when not in activeAll the coll transition would happen On the width and the text ie the opacity and the movement of text ie 360 rotated We have .nav.nav.nav.ulBoth has transition.In nav the transition is to shrink the entire width But in .nav.ul the idea is to change the width of like itself alsoBecause we dont want to change that of the button.So

Interesting project to increment the followers count.

Interesting fact:This one has always been a gotcha for me and many others. In short, the opening and closing tags for the <textarea> element must be on the same line, otherwise a newline character occupies it. The placeholder will therefore not be displayed since the input area contains content (a newline character is, technically, valid content).Good:<textarea></textarea>Bad:<textarea> </textarea>

font: inherit;To make font alike even in textarea textarea.addEventListener('keyup',()=>{ })//because of this I wasn’t able to like aptly solve this quesNew event understood in js .filter(choice**=>**choice.trim()!=='') Only keeping if the choice lai trim garda it isn’t emptyIf empty then filtering it out..map(choice**=>**choice.trim()) This is purely optional to like trim any whitespace in an html tag

Entire crux of the app for me was:const interval=setInterval(()=>{ const randomTag=pickRandomTag() activateChoice(randomTag) setTimeout(()=>{ deActivateChoice(randomTag) },100) },100) I couldn’t think about setTimeout in setIntervalLike I had thought of activating and deactivating like syncly.What was instead needed was to make async using setTimeout.New lesson learnt

Nothing so new learnt in this project just did the usual stuff that I do. eventKey.innerText= event.key===' '? 'Space':event.key eventKeyCode.innerText=event.keyCode eventCode.innerText=event.codeOnly these things were kind of new.All others were kind of the old mundane shits that I do.

Not much new in this project. To use font awesome, the cdn link has to be there in the htmlOther wise we can’t use it.

New stuff learnt about pseudo element selector: The ::before and ::after pseudo-elements in CSS allows you to insert content onto a page without it needing to be in the HTML. While the end result is not actually in the DOM, it appears on the page as if it is, and would essentially be like this:How to actually use it;div::before { content: "before";}div::after { content: "after";} What it really does to the div container

before after

Dklfsdl What it does is basically allows us to insert content without using any sort of html. To add font-awesome comment icon we didcontent:'\f075'; font-family: 'Font Awesome 5 Free';The content is actually the unicode that represents the comment iconAlso since we used the unicode stuff we could actually treat the content as like regular font/text unlike any image .question-answer.active::before/_ .question-answer.active::after{ _/{ content:'\f075'; font-family: 'Font Awesome 5 Free'; color:#2ecc71; font-size:7rem; position: absolute; opacity:0.2; top:20px; left: 20px; z-index:0;} Actual stuff that was added before and after. But I didn’t pretty much like it.Here we added the comment icon as a unicode and also made that comment feel like a background by reducing the opacity of the icon. .big-bottle .drank{ opacity: 0; transition: 0.5s ease;} To kinda like add transition to position we also did like mention above itself. let visited=new Array(bottles.length).fill(false); New stuff learnt about creating an array of boolean value false

Classlist. bottles.classList.contains('full')smallCup.nextElementSibling.classList.contains('full') Extra stuff to like check if the certain element contains a classlist or not.Also the nextElementSibling is an interesting one as it would help to like check the nextSibling.

Something left to understand is how to like not increase the height if we click on the same glass.The other stuff is like if I click on last one then all should be filled up,Lastly how to add transition on positions

There was a native min-height: property that was over riding my attempts to change. Simply put in min-height: 500px !important;min-height: 93vh !important; So native min height was overriding the attempts. Simply the min height was changed to certain height to like make it apt.

To make the stuff sticky we have to use:position: sticky; top: 0;This would like make them sticky when scrolling the page.

Now we should focus here Very important stuff for the scrollbar stuff:::-webkit-scrollbar { /_ scrollbar-width: thin; / width:0.5rem; }::-webkit-scrollbar-track { / scrollbar-width: thin; / background:white;}::-webkit-scrollbar-thumb { / scrollbar-width: thin; _/ background: grey;}

Overlay is very important. The way we use overlay is by using the pseudo class selector prolly. The ::before and ::after as mentioned in FAQ collapse app, kind of adds content before and after the tag without adding the HTML tag.We use ::before to add overlay by setting the background color as required. position: fixed;Very important to make it fixed. When the text were inside a tag and i was trying to change their color to sth else,It didn’t happen,.navigation.active a { color: black; }
Whenever changing color of text inside the anchor tag make sure that the anchor tag is selected ie be more specific.The internet had told me to be more specific. I was specific but not like in terms of exactly selecting the a tag.

if(websiteBanner.getBoundingClientRect().top<0){ navigation.classList.add('active') }else{ navigation.classList.remove('active') } Finally the most important stuff is this. I figured this out quite easily because we had done a similar project like this before. We also have other way to do this stuff:if(window.scrollY>navigation.offsetHeight+150){ navigation.classList.add('active') }else{ navigation.classList.remove('active') }

Clock project created Do programmers need math?secondDegree=seconds _ 6; minuteDegree=(minutes+(seconds/60) ) _ 6 ; hoursDegree=((hours +(minutes/60) +(seconds/3600) )*30)%360; This project of building a clock says it all.A lot of math kinda was used. To apply dark and light mode we generally target the html tag itself rather than the body tag body.active{ background-color: black; color: white; } Here i used body tag instead. transform-origin: bottom center; For clocks its essential to set the transform origin to bottom center. *letter-spacing*: 0.3px;To add letter spacing we use the above style if(mode.classList.contains('active')){ mode.innerText='Light Mode' }else{ mode.innerText='Dark Mode' }mode.classList.contains→ this was the important kind of stuff to add and like check

Interesting stuff is that the scale function that we used in blur image project could be used here also.

Like use scale function to convert hour hand to degree value time.innerText=${hours}:${minutes<10? 0${minutes}:minutes}:${seconds} Kind of nesting the template literalsClock added

Creating triangle with borders: .triangle{ width: 0px; height: 0px; /_ background-color: whitesmoke; _/ border-left: 50px solid transparent; border-right: 40px solid transparent; border-bottom: 30px solid white; transform-origin: top center;}Kind of new stuff learnt in this project. To use ::before and ::after the parent has to be positoined relative position: relative; To keep like the before and after we have to use the following position: absolute; top: 0; left: 0;

Kinda also learnt how to use animation in cssanimation: rotateA 2s linear infinite 0.5s;} .kinetic::before{ transform: rotate(90deg); animation:rotateB 2s linear infinite} @keyframes rotateA{ 0%,25%{ transform: rotate(0deg); } 50%,75%{ transform: rotate(180deg); } 100%{ transform: rotate(360deg); }}

So basically I have to learn more on this topic on how to like animate properly More animation is taught in web dev simplifiedWay to convert a string into an array using split method:const displayText=We love programming displayText.split('')

innerText wont print the extra spaces in the text.text.innerText+=arr[index]This won’t add the spaces as required.Hence we have to use innerHTML property instead to bring the white spaces as intended. text.textContent+=arr[index]This could also be used ie textContent could also be used.

Here in the question since everytime we want to change the speed as it is input by the user, we have to follow a different approach.Here we have to like pass as argument everytime to a function. lIke speed should should be varying with the value in the screen. So since we had this varying time ie time in ms was not fixed ie it was dependent on the speed, we had to take the speed as a argument. Hence, we can’t use setInterval function.Because in setinterval the time that is passed is not changing, we can’t use it.Also like in setInterval like even if we use a function and use, we can increment directly but cant decrement nicely. Hence a nice approach would to use kinda recursive nature of setTimeout where by we could take speed as a argument.function writeText(){ if(index<arr.length){ text.textContent+=arr[index] index++; }else{ text.innerText='' index=0; } setTimeout(writeText,speed)} writeText()

This type of application wont be designed where the user can set the speed of moving text.But this taught a lesson to use closure and stuff that parent’s value will be remembered.Like whenever value is changing we pass it inside a function.

The approach I took was to like hard code the values directly using HTML. But actual the way to do this is kinda using the animated class to every content that has to be animated.Once, we have this kinda animated loaded up,We can go to the js and like make the dynamic kinda fetching from an API

object-fit: cover;New way to kinda like make the image to fit exactly in the center.

Lesson Learnt:In such places where we want to place stuff fetching from the API,Ie We shouldn’t hard code the valuesThere we should use css first.Kind of design the raw design firstThen populate those stuff using js.

This is the project to create ripple effect button.To do this we simply add a span inside the button.And basically have an animation on that button.Hence I have to understand more about animation.

animation:scale 0.5s ease-out;} @keyframes scale{ to{ transform: translate(-50%,-50%) scale(3); opacity: 0; }}

We kinda want to add an animation named scale.That scale named animation kind of helps to transform the span tag that is added inside the button. console.log(e.clientX,e.clientY) This like helps to get the exact position where the button is clicked in the viewport.Like we get the exact positon in the dom about the x and y position.

getBoundingClientRect().top vs offsetTopThe difference between them is that getBoundingClientRect() gives top bottom left right positon relative to the viewport. But, the offsetTop gives alway the position not relative to the viewport.

Side note:Always to use this keyword the function has to be like function declaration.

When we using the vanilla js then we have to kind of delete the stuff from the DOM:

setTimeout(()=>{ circle.remove() },500) Doing this makes sure that the DOM is not populated with unnecessary data.

position: absolute; top:90%; right:-110px; Right could be given negative value to place it at the right most part of the screen. notificationDiv.style.opacity='0' Instead of doing this just remove it.Removing unnecessary divs from the DOM is the way to go. notificationDiv.remove() This is more preferred Tiktok Love Reaction:image.addEventListener('dblclick',(e)=>{‘Dblclick’ is the event name to like actually trigger the stuff. This project is kinda similar to the button ripple project that we did.

@keyframes grow{ to{ transform: translate(-50%, -50%) scale(2); opacity: 0; }} This is the part that controls the animation.Animation is the only stuff besides grid that I have left to study. Instead of using the dblclick, we could also create our own doubleClick event.But I didn’t choose to do it.Simply used the inbuilt event.

const totalScreenX=e.clientX; const totalScreenY=e.clientY; const imageX=image.offsetLeft const imageY=image.offsetTop const insideImageX=totalScreenX-imageX; const insideImageY=totalScreenY-imageY; This stuff is similar to the ripple effect button.

This is the drawing app that we are about to create. We will use the HTML canvas element. Using this canvas element we can create the canvas!We can also use the canvas api:https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API So like once we set up the canvas we can like create any shape that we want inside the canvas. The code for creating the canvas is as follows:const canvas=document.body.querySelector('#canvas')const ctx=canvas.getContext('2d')ctx.fillStyle='green';ctx.fillRect(10, 10, 150, 100); function drawCircle(x,y){ ctx.beginPath(); ctx.arc(x, y, size , 0, Math.PI * 2, true) ctx.fillStyle=color; ctx.fill()}function drawLine(x1,y1,x2,y2){ ctx.beginPath(); ctx.moveTo(x1,y1); ctx.lineTo(x2,y2) ctx.strokeStyle=color; ctx.lineWidth=size; ctx.stroke()}The juice of the project x=e.offsetX; y=*e*.offsetY;Where the mouse being pressed in mousedown event.3 events being used:mousedown, mouseup, mousemove

So basically doodling is just about creating continuous circle and lines.So whenever we have mouse down event we kind of start setting the position of the mouse. So now after mouse starts moving, we draw circle and draw line continuouslyFinally at last we also release the mouse and make x and y undefined.colorEl.addEventListener('change', (e) => color = e.target.value) We also have change event to track the changing color.

To make sth draggable in html itself we have to add this stuff:

This js project is heavily focused around dragging stuff.dragStart, dragEnd, dragOver, dragEnter, dragLeave, and dragDrop These aret the events for dragging stuff. this.className+= ' hold' This will be pointing to the clas in which the function is called ie this here is pointing to box Here we can either assign a class or append a class this.className=' invisible'This is kinda inbuilt that will make it invisible literally without we adding the css

‘This’ will only point to stuff if we use function declaration Learnt a new way to add class without using .classlistAnd that is by using this.className. We could either add or append the class using this approach.

function dragStart(){ this.className+= ' hold' setTimeout(()=> this.className=' invisible',0)}function dragEnd(){ this.className='fill'}function dragOver(e){ e.preventDefault()}function dragEnter(e){ e.preventDefault() this.className+=' hovered'}function dragLeave(){ this.className='box'} function dragDrop(){ this.className='box' this.append(fill)}

Even here we have to use overlay. For overlay we have to use before pseudo selector.Initially the idea is to like have a default background image in the bg using body tag.Then with the ::before we would add a overlay as usual.Also learnt about css calc function to like calculate height and width based on the particular screen size. left:calc(1vw + 65px);Example of calc function/property(bg is overlay and container is place on top and pos is adj) overflow: hidden;To prevent anything to overflow from the container.Js of this project was quite easier.Only like id hadn’t understood the concept of what should be done in the project.Basically, we had to like set an overlay.And then kind of make the other stuff happen. The css was kinda tricky but then not very tricky. I myself didn’t think alot about how to do it. Had I thought, it should’ve popped up white-space: nowrap;Was added even in split page as we had to like not make the text break into a new line. The images in html should have been in the same div. Then same is the content in the left side. This will ensure that when we change the stuff up and down, we can use relative properties. Then instead we changing the classes here in this problem, we just change the position by transforming ie by translating it. Th const height=container.clientHeightThis height has to be multiplied by index to get the correct image position. Then we transform by that.(one goes up and other goes down) right.style.transform=translateY(-${activeSlideIndex * height}px) left.style.transform=translateY(${activeSlideIndex * height}px)transition: opacity 0.5s linear; opacity: 0; height:0; overflow: hidden; Adding transition on display wasn’t possible.Hence we set the height 0 and opacity 0. Then on that we added transition.image.active{ /_ opacity: 1; _/ opacity: 1; height: 530px;Then on active we set the opacity to 1.

Working with APIs was easy. Just call the API using the fetch method.The catch here is that only the link to fetch the api can be sent.We have to add some configurations to kind of work with that fetch api.Here since we have our data in json format we have to request that the response is also sent in json format itself. For that we configure sth as: const config = { headers: { Accept: 'application/json', }, } After that is done we simply use the async await syntax that we have been using since a long while. const joke=await fetch(' https://icanhazdadjoke.com' ,config) const actualJoke=await joke.json() jokeEl.innerHTML=actualJoke.joke Max-width is used to like make the width of the content as expected. max-width: 100%; width: 800px; Adding this sometimes can be done so that the inside text doesn’t take all the space. Instead it goes down. To make sure that the total width is 800px. But the elements inside it can have max-width of 100%. They can’t like overflow. They have to be within the container itself.Max-width is mostly for children and text content inside the div

Very important in a button: .btn button:active{ transform: scale(0.98);}

There is another alternative to fetch. That’s the axios library. It has a lot of stuff inbuilt. This ensures that we don’t have to rewrite a lot of stuff.

Github Profiles.search input::placeholder{ color:rebeccapurple;}Kinda repeated stuff but about placeholder https://docs.github.com/en/rest/overview/endpoints-available-for-github-apps Important resource for github app endpointsTo use axios we need to link it in the index file itself.After it’s like linked in the index file then we can use it.Like axios.get() axios.post() and so on.By default axios(‘url’) → this makes a get request. With fetch data: const config={ headers: { Accept: 'application/json', }, } const prof=await fetch(https://api.github.com/users/${*userId*},config) const actualProfile=await prof.json(); With axios: const {data:actualProfile}= await axios(APIURL+userName)Here {data}--> this would get only the data from the returned json.But we want to rename data to actualProfile. Hence the above syntax is used to rename a object key into sth else.

input::-webkit-outer-spin-button,input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0;} This is used to remove up and down arrow.inputs.forEach((input,index)=>{ input.addEventListener('keydown',function(e){ if(e.key>=0 && e.key<=9){ inputs[index].value=''; setTimeout(()=>{ inputs[index+1].focus() },10) }else if(e.key==='Backspace'){ setTimeout(()=>{ inputs[index-1].focus() },10) } })})// everytime it’s set to empty in line4 Basically while entering a number we want of move the focus to the next input. Simple.

word-wrap:break-wordString.fromCharCodeThis is used to convert ascii values to character

return String.fromCharCode(Math.ceil(Math.random()*(max - min)+min))This function wholehandedly help return the entire random char. const typesArr=[{lowercase},{uppercase},{numbers},{symbols}] .filter(*item*=>Object.values(item)[0]) Whenever like we have to check out for multiple stuff like whether this is true and also this is true, kind of create a an array of object and kind of have a filter to filter out stuffs.Here we filter if the stuff is not selected using the Object method in js.const funcName=Object.keys(type)[0];

To make the password more random we can shuffle the typesArr array. ****

Unsure about writing a lot of if conditionals?Make sure to convert each one of them into a object.Each object has to have kind of similar name to which it will stand for. Finally the object is kind of mapped to its original function name.And then we kind of fetch the stuff.

A project can either be only 2 from good, cheap and fast.Whenever we have such things we could use input tag with checkbox property. sliders.forEach((slider,index)=>{ slider.addEventListener('click',()=>{ slider.classList.toggle('active') checkOthers() }) })--> for toggling the classes.Custom Range Sliderinput[type='range']{ Way to select a attribute only and style in css input[type='range'] + label Way to select like a subsequent sibling.Like label here is the next sibling of input tag input[type='range']::-webkit-slider-runnable-track{ To target the line. input[type='range']::-webkit-slider-thumb{ To target the thumb at the middle(in moziila change change -webkit to -moz) const value=+e.target.valueThe +sign before is used to make the stuff into a number Important stuff: const range_width=getComputedStyle(e.target). getPropertyValue('width')getComputedStyle would like get the final list of all properties on the element. getPropertyValue would then get the desired property. Here the above would always get 300px const num_width=+range_width.substring(0,range_width.length-2) This is to like get the width but in number. At last we also subtract by 2 to like only get the value rather than getting the string itself. Just to map stuff we had to do a lot of calculations

object-fit: cover;This is to make the image kind of fit in..btn:hover{ opacity: 0.9;}One stuff that is not done since a long time. To transform means to move the element by index* (the width of the image). This project made me respect this guy more! function resetInterval(){ clearInterval(interval) interval=setInterval(run,2000)} Calling this would reset the interval first and then only kind of run the next interval. setInterval returns a timer and that could be cleared using the above way.Try to break the code as much as you can into functions

flex-wrap: wrap;Very important for wrapping the stuff within the container.boxShadow=0px 0px 2px ${color}, 0 0 10px ${color} boxShadow could have multiple values also. Hoverboard added:Two major events were:Mouseover, and mouseoutBut i used mouseover and set the timeout of two sec to add the fading effect.

I have to understan animations more.

I have to understand animations property more to exactly match the animations Brad uses in this project.

So yes Brad used Tailwind for the project. password.addEventListener('input',(e)=>{We listen for the input event. After the password gets passed a certain range, then the blur value gets reduced to 0 and the image kind of loads fully. Also the form turns green. Here if we erase the password, again it would get back to its previous form.

Feedback design AppSo basically in this project instead adding and removing classes, Brad uses event bubbling to do the same.previous.addEventListener('click',(e)=>{ if(e.target.classList.contains('emotion')){ e.target.classList.add('active') // passIndex } }) Here previous is actually a container.And clicking on the container anywhere the event would be fired.This is called event bubbling.And then we check if the target is the one that we are looking for.We could aslo check like e.target.parentNode and so on.Actually we have to kind of use parentNode property previous.addEventListener('click',(e)=>{ if(e.target.parentNode.classList.contains('emotion')){ removeAllActive() e.target.parentNode.classList.add('active') text=e.target.nextElementSibling.innerText // passIndex() }else if(e.target.classList.contains('emotion')){ removeAllActive() e.target.classList.add('active') text=e.target.firstChild.nextElementSibling.innerText } })

Random Image Loader:function setBg(image,date){ setTimeout(()=>{ const url="url(https://picsum.photos/200/300/?random&t=" + date +")"; console.log(url) image.style.backgroundImage=url; },10)} This is the closure stuff that helps get random image.With this only we get random image.Because we increase the date by 1 everytime we call the above function the image will be random for(let i=0;i<IMAGES;i++){ const image=document.createElement('div') const date=new Date().getMilliseconds() setBg(image,cb) cb++; image.classList.add('image') container.appendChild(image)}

.option input[type="radio"]{ appearance: none; background-color: #fff; margin: 0;To remove the defaults in radio button. Then next to the input tag we have the circle tag as span Then we position it normally by scale to 0. When active then to 1 transform: scale(0);After transform: scale(1);

I did the correct answer based on index. But could have done like based on numbering each answer as a b c d and so on.Also we could have all questions and answer on the same object itself.

Created the netflix app I guess this was the app that gave the least amount of learning.

Notes AppWhen making something that should be fixed there itself, we use position:fixed.Other stuff in this app was kind of easy and stuff. The interesting part of this app is working with localstorage localStorage.setItem('name','Brad')localStorage.getItem('name')localStorage.removeItem(‘name’) We store in the form of key value pair.And we then get back that stuff with the help of specific key. localStorage.setItem('name',JSON.stringify(obj))JSON.parse(localStorage.getItem('name')) To store object in localStorage, first we convert it into JSon data using JSON.stringify()And while accessing it, we use JSON.parse() The tricky part was storing in localstorage.Except that it was a pretty cool app.

Way for searching and filtering through the data if(user.innerText.toLowerCase().includes(data)){ if(!user.childNodes[3].innerText.toLowerCase().includes(data.toLowerCase())){ user.classList.add('hide') }else{ user.classList.remove('hide') } Way to actually search stuff and get stuff done.

The learnings of yesterday’s localstorage carried along in this project also. Implemented all of them using local storage so that we it stays even if we reload the page

(index++).toString().padStart(3,'0') To start with like zeros we do this ::-webkit-scrollbar { /_ scrollbar-width: thin; / width:0.5rem; }::-webkit-scrollbar-track { / scrollbar-width: thin; / background:white;}::-webkit-scrollbar-thumb { / scrollbar-width: thin; _/ background: rgba(128, 128, 128, 0.428); border-radius: 10px;} ::-webkit-scrollbar-thumb:hover{ background: grey;} A thing that could be used in any project.

Movie AppIn url we can have & to add more queries paras More than anything it was about learning more about URL and stuff Add & in urls to kinda add queries and stuff.

Let’s get done with insect catch game:So we are defining screen.So when we scroll the page we can move to next page.Generally when we have to list out some stuff we generally use li and ul tag.

margin-top: -200vh;With this margin functionality we could move the screen up and down. Like nothing was kind of new in terms of css and HTML up until now. btn.querySelector('img') We could add query selector on intermediate stuff as well. const source=img.getAttribute('src') const alt=img.getAttribute('alt')getAttribute and setAttribute are 2 imp stuff