This Repository is created to practice JavaScript using project building
Project 1. Quote Generator
Here, in this project I got an idea of how to use event listener(addEventListener), invokation and event propagation. I'm generating quote and author name using random value generated by Math.floor(Math.random()) and I created an const object which stores quotes and author name, and according to it, assigns value using innerText( used for security purpose, innerHTML should be avoided as it gives more authority to user to change HTML or JS content).
Project 2. Accordion
In this project, I created a menu that displays a list of headers with answers hidden stacked on top of one another.
CSS Learnings: These all are Flex Box Layout Module properties display:flex -> make sit easier to design flexible responsive layout structures without using float and positioning justify-content center -> alignment along the main axis align-items: center -> alignment along the cross axis
display: inline -> any height and width properties will have no effect, displays in inline like span block -> starts on a new line takes the whole width flex -> Displays an element as a block-level flex container inline-block -> inline element where you can apply height, width properties
position: static -> default(normal flow) relative -> positioned relative to its normal position, can set left,right,top, bottom, other content will not be adjusted to fit gap left by the element (can overlap) fixed -> positioned relative to the viewport, stay same even if the page is scrolled absolute -> positioned according to positioned ancestor (can overlap) sticky -> placed somewhere but it sticks according to user scroll
JavaScript:
// Variable
const accordion = document.getElementsByClassName('content-container');
for(i=0 ; i< accordion.length; i++){
accordion[i].addEventListener('click',function(){
this.classList.toggle('active'); // toggle class if it is present in element or not
})
};
Project 3. StopWatch In this project, I created a stopwatch with play, pause and reset functionlaity. Major Learnings: window.setInterval(stopWatch,1000) -- this method is used to call the parameterised method, with another set interval parameter, here 1000ms is 1 sec window.clearInterval(timerInterval) -- to stop the timer
JavaScript: // Variables for buttons
const startStopBtn = document.querySelector('#startStopBtn')
const resetBtn = document.querySelector('#resetBtn')
// Variables for time values
let seconds = 0
let minutes = 0
let hours = 0
// Variables for leading zero
let leadingSeconds = 0
let leadingMinutes = 0
let leadingHours = 0
// Variables for set interval & timerStatus
let timerInterval = null;
let timerStatus = "stopped"
// Stop Watch Function
function stopWatch(){
seconds++;
if(seconds / 60 === 1){
seconds = 0;
minutes ++;
if(minutes / 60 ===1){
minutes = 0;
hours++;
}
}
if(seconds < 10){
leadingSeconds = "0" + seconds.toString();
}
else{
leadingSeconds = seconds
}
if(minutes < 10){
leadingMinutes = "0" + minutes.toString();
}
else{
leadingMinutes = minutes
}
if(hours < 10){
leadingHours = "0" + hours.toString();
}
else{
leadingHours = hours
}
let displayTimer = document.getElementById('timer').innerText = leadingHours+ ":" + leadingMinutes + ":" + leadingSeconds;
}
// window.setInterval(stopWatch,1000)
startStopBtn.addEventListener('click', function(){
if(timerStatus === "stopped"){
timerInterval = window.setInterval(stopWatch,1000)
document.getElementById('startStopBtn').innerHTML = `<i class= "fa-solid fa-pause" id = "pause"></i>`
timerStatus = "started"
}
else{
window.clearInterval(timerInterval)
document.getElementById('startStopBtn').innerHTML = `<i class= "fa-solid fa-play" id = "play"></i>`
timerStatus = "stopped"
}
})
// reset to initial state
resetBtn.addEventListener('click',function(){
window.clearInterval(timerInterval)
seconds = 0
minutes = 0
hours = 0
document.getElementById('timer').innerHTML = "00:00:00";
document.getElementById('startStopBtn').innerHTML = `<i class= "fa-solid fa-play" id = "play"></i>`
})
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent