User:Alessia/pomodoro timer

🍅🍅🍅🍅🍅🍅🍅🍅🍅🍅🍅🍅🍅🍅🍅🍅🍅🍅🍅🍅🍅🍅🍅🍅🍅🍅🍅🍅🍅🍅🍅🍅🍅🍅

I want to make my own pomodoro timer app. I'll study everything needed to understand how a timer works before, through javascript and python, then get into the app making.

build a Pomodoro Timer App with JavaScript

https://freshman.tech/pomodoro-timer/

html, css, javascript. Needed: Git, Node.js, npm

basics

What is Git in simple terms?
Git, a version control system for software development, ensures developers can revert back to specific past versions of their work to see records of work completed and allows for streamlined collaboration by permitting changes made by multiple people to be merged into one location.

What is a version control system (VCS)?
a time machine for your files, an assistant tool to organise your work, collaborate with others, lets you travel back in time if things go wrong?

a Version control systems is a software tool that help software teams manage changes to source code over time. As development environments have accelerated, version control systems help software teams work faster and smarter. It records changes made to a code over time in a database called repository, there you can look at the project history. Without a version control system it could be mandatory to constantly store copied of the entire projects in various folders, manually merging...

Why should I use Git with my coding projects?
It's sort of a cloud for code. You don't have to necessarily use GIT. You might use Mercurial or Subversion as SCM/VCS...
In this case, Git is useful to clone the repository(?)

what is Node.js?
multitasking assistant, allows you to use javascript on the server side as well, not just the front-end part, the web browser. Scalability?
Node.js is a runtime environment for executing JavaScript on the server side, while Git is a version control system for tracking and managing changes in your codebase. Both tools play important roles in modern software development, with Node.js handling the server-side logic and Git managing version control and collaboration. Using them together can contribute to a more efficient and organized development process.

what is a nmp?

NPM is like an online store for JavaScript tools and libraries. These tools can be anything from small utility functions to entire frameworks that help you build web applications. When you're building a project using Node.js, you often rely on existing code written by others. NPM helps you easily find and install these pieces of code (packages) into your project. These packages are the dependencies your project needs to run.

difference between Git and npm?
Git is for tracking changes in your code, while NPM is for adding ready-made code components to your project.
what is Github?
It's the social network for Git. It hosts Git repositories online.


what does it mean markup?
In the web development contest "markup" refers to the practice of adding special symbols or codes to a document to provide information about the structure, formatting, or presentation of the content. These symbols or codes are often called "tags." The most common form of markup is HTML (Hypertext Markup Language), which is used to structure content on the web. HTML uses tags to define elements such as headings, paragraphs, links, images, and more. Markup is a way to add structure and meaning to content, allowing computers or other systems to interpret and display it in a specific way.

what is a browser-sync dependency?

clone the repository to your filesystem

git clone https://github.com/Freshman-tech/pomodoro-starter-files.git

cd into it in your terminal

cd pomodoro-starter-files 

run the following command to install the browser-sync dependency which is used to automatically refresh the browser once a file is changed

npm install 

start the app on http://localhost:3000 using:

npm start 

getting into the browser

Then interface of Freshman timer is quite simple. a progress bar + 3 buttons for the 3 modes of the application.Then the countdown timer and the start button.
As a tradition pomodoro session is 25 mins + short break 5 mins/ long break 15 mins after 4 consecutive session.
To create a timer variable follow:

main.js

const timer = {
  pomodoro: 25,
  shortBreak: 5,
  longBreak: 15,
  longBreakInterval: 4,
};

what is const? a keyword to declare a costant variable, cannot be changed.
so this is to get the variables

We need to update the countdown with the right amount of minutes and seconds. We need to create an event listener that detects a click on the buttons and a function to switch the mode of the timer appropriately.

what the hell is an event listener?
a function in JavaScript that waits for an event to occur then responds to it

main.js

const modeButtons = document.querySelector('#js-mode-buttons');
modeButtons.addEventListener('click', handleMode);

function handleMode(event) {
  const { mode } = event.target.dataset;

  if (!mode) return;

  switchMode(mode);
}

On this previous part we use event delegation to detect a click on any mode buttons.

what is an event delegation? technique where instead of attaching an event listener to each individual element, you attach a single event listener to a common ancestor (like a parent element) of multiple elements. This single event listener then handles events for all the elements inside that ancestor.
what's an ancestor in javascript?