Course created by Wes Bos. Here's the challenge 👉 JavaScript30, you can join it for free!
Hi there 👋
I created this repository in order to keep track of my progress in the JavaScript 30 Day Challenge and to commit and log what I learnt every day.
It's a 30-day vanilla JavaScript coding challenge. You will build 30 unique projects in 30 days using fun and easy video tutorials. You should already know some JavaScript to take on this challenge.
- key event
- transitionend event
- ES6 template strings
Methods Learnt:
1. addEventListener()
2. querySelectorAll()
3. remove()
4. play()
✦ classList proprty -> The classList property returns the CSS classnames of an element. It returns a DOMTokenList.
Found a very useful tool for JavaScript events Keycodes at keycodes.info.
- Learnt about CSS transitions and transform
- The ES6 'const' keyword
- Live UI update after few seconds
- Element.style for inline styling
✦ The goal today was to create an Image editor to control the spacing, color, and blur by modifying CSS variables with JavaScript.
CSS variables explained:
- spacing
- base
- blur
- How to declare variables in css
:root{
--base: yellow;<br>
}
img{
background-color: var(--base);
}
- Code snippet to select all inputs on the page ->
const inputs = document.querySelectorAll('.controls input'); - querySelector gives you a NodeList
- Learnt about 'change' and 'mousemove' events
Example code:
inputs.forEach(input => input.addEventListener('change', handleUpdate));
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
- Learnt about 'dataset' that can be used to access all data attributes.
✦ This lesson is all about Fundamentals of JavaScript(Array methods).
- Worked with ES6 Arrow functions.
- Learnt about JavaScript array methods:
- filter() is like you give 10 things and it return 2.
- map() returns exact same amount of elements as you give it.
- sort() used for sorting elements in some order.
- reduce() allow you to sort of build something on every single one.
✦ The image will expand when you click on it and then shrink when you click it off.
✦ Today's lesson was about making a photo gallery
- Primarily focused on CSS flex property.
- Transitioned on flex-grow and font-size to expand images.
- Used Funtions:
- toggleOpen
- toggleActive
✦ Best resourse to learn CSS Flexbox:Flexbox
- Fetch API
- Getting .json() from fetch response
- Array spread operator
- Match() function
- Learnt some more Array methods
- some()
- every()
- find()
- slice()
- findIndex()
- Learnt the fundamentals of HTML5 canvas.
- Build a painting canvas where if you hold down the mouse button and drag, you can paint on it. Something like Microsoft Paint👀
✦ You can find a similar project in Book Eloquent JavaScript Drawing on Canvas.
- Learnt how to use developer tools in your browser effectively.
- Wes shared some amazing tips and tricks for using the developer tools in your browser.
All methods explained today👇
| Regular | console.log('text') |
| Interpolated | console.log('text with a %s', 'placeholder') |
| Styled | console.log( '%c text styling', 'background:red') |
| Warning! | console.warn('warning message') |
| Error | console.error('error message') |
| Info | console.info('message info') |
| Testing | console.assert(false, 'the word is %s', 'foo') |
| Clearing | console.clear() |
| Grouping together | console.group() console.groupCollapsed() console.groupEnd() |
| Counting | console.count('Count') |
| Timing | console.time('fetching data') |
Code Example:
const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]');
- Check if they had the shift key down
- AND check that they are checking it
inBetween = !inBetween;
checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleCheck));
✦ How it works:
- When you click a checkbox, hold Shift, and click another checkbox a few rows down or up, all the checkboxes in between those two are checked. BOOM!! Wes style :D
- learnt some useful tips on customizing HTML5 video player controls.
- Used
togglePlayto play and pause the video. - Added
clickevent. - Used event listners
mousemove,mouseup.
- Used
- It works in a way when when someone types in a series of keys, something occurs.
- Learnt about Key Sequence Detection and Konami Code.
✦ Today we used Javascript to add the Slide-In-On-Scroll functionality to a pre-built page.
✦ As you scroll down, images slide in from the right or left sides of the page.
- Learnt about JavaScript
debouncefuction- The overhead of a function can be reduced by preventing it from being called repeatedly. This will help to speed up the website.
Sample Code:
function debounce(func, wait = 20, immediate = true) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
- Learnt the differences between array & object references and actual copies.
- A primitive type can be manipulated by its value, whereas a reference type can be modified by its reference.
- Today's Challenge is about 2 main things:
- Local Storage
- Event Deligation
e.preventDefault()-> stops the page from reloading.JSON.stringify(items)-> When you pass items it's going to convert your objects and arrays into a JSON string.JSON.parse()-> take items from the string and put it back into form whatever it was initially.If you addEventListner()on something that doesn't exist, you'll know that in future it won't be clicked.
- Day-16 is about adding shadow with
mousemove. - Mainly learnt about ES6 Object destructuring and updating CSS rules, like text-shadow, using javascript.
- Learnt about
array.sort()method to sort a list of band names without 'Articles'.
- See the usability test case scenario for
Array.prototype.reduce(). - When used correctly,
reduce()can be quite effective.
- Learnt how to make a photo booth using JavaScript.
- Real-time image pipelining and canvas were new concepts to me.
- Learnt about SpeechRecognition something like google voice search. Definitely a good challenge!
- Learnt abbout Geolocation and Orientation Api.
- Learnt that mobile devices generally use GPS hardware to locate themselves.
- Learnt about
Element.getBoundingClientRect()method and how it works.
✦ The function returns a DOMRect containing information about the size and position of an element in relation to the viewport.
- Learnt about speech Speech Synthesis CSS radial-gradient.
- Method Used:
- addEventListener()
- toggle()
- querySelectorAll()
- querySelector()
- includes()
- Learnt how to fix a nav using JavaScript when you scroll to it.
- You use
nav.OffsetHeight-> to grab the height of the pixels.
-
Learnt about
propagation,bubbling,event capturing, and new propertyonce.- Bubbling refers to the browser being able to determine what you clicked on, as well as trigger clicks to ripple up every time you click. For example: Whenever you click on a nested element, it actually starts from the top and then captures all of those events. It then starts at the bottom and starts doing something called a bubble.
- The capture happens from top to bottom and then the events, the events haven't started yet. It only captures where you clicked, and is storing them. As you go up, it will begin to bubble up, which means it will start triggering events as you go up.
-
e.stopPropagation();-> stop bubbling this event up -
If you set once to true it will listen for a click and unbind itself and unbinding itself is the same thing as
div.removeEvent.Listener('click', logText) -
You can use it for buttons when someone clicks that button more than once. (Example: Store checkouts)
button.addEventListner('click', () =>{
console.log('click!!!');
},{
once: true
});
- Learnt how to make a "Follow Along" Navigation.
- Learnt about
getBoundingClientRect().
✦ SEJ- Search Engine Journal: Best website I have found for finding SEO information which has Stripe Follow Along Dropdown navigation. Check it out for inspiration.
- Learnt logic behind Click and Drag to Scroll using that plays main role
element.offsetLeft. - It's just a combination of mouse down, mouse leave, mouse out, mouse up, and mouse move.
CSS code:
.item.active{
background: rgba();
cursor: grabbing;
cursor: -webkit-grabbing;
transform: scale(1);
}
- Learnt how to use offset techniques for design presentations. By making use of the offset property, you can align elements exactly where you want them.
Code Sample:
<script>
const speed = document.querySelector('.speed');
const bar = speed.querySelector('.speed-bar');
const video = document.querySelector('.flex');
function handleMove(e) {
const y = e.pageY - this.offsetTop;
const percent = y / this.offsetHeight;
const min = 0.4;
const max = 4;
const height = Math.round(percent * 100) + '%';
const playbackRate = percent * (max - min) + min;
bar.style.height = height;
bar.textContent = playbackRate.toFixed(2) + '×';
video.playbackRate = playbackRate;
}
speed.addEventListener('mousemove', handleMove);
</script>
- Learnt about
Date.now(),clearInterval()functions.
- Completed today's challenge used
document. query selector,classList.add('up')andclassList.remove('up').
✦ It is recommended for those who wish to gain a deeper understanding of JavaScript.
Thank you for sticking with me all the way to the end! Please consider staring this repo on top right of the page if you enjoy it and find it useful!