Frontend/JavaScript (16) 썸네일형 리스트형 NPM - Nodemon Usually, to reflect the changes in the backend on the front end when developing an app, we have to save changes and rerun the server. Nodemon is a live server library that reflects the changes automatically without us having to do so. Implementation Installing Nodemon npm i nodemon Running Once installed we can either run the nodemon directly using the path or NPM commend ▶ Running Directly Run .. Canvas The HTML element provides various features such as drawing shapes and animations that can be used to create games and other applications. In this writing, we will see some of its attributes and how to use them and I will also introduce some useful tricks when working with the canvas such as dynamic sizing and the drawing application made with the canvas. HTML 삽입 미리보기할 수 없는 소스 Drag and Drop Let's see how we can implement drag and drop using JavaScript Set Up In the HTML file, add the draggable="true" to the element you want to drag and drop. Add styles /* main.css */ * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; display: flex; align-items: center; justify-content: center; gap: 10px; } .img-box { height: 200px; width: 200px; border: solid 3px #000; borde.. JavaScript Module - Button Ripple Effect Let's see how we can create a button ripple effect. The completed code looks like the one below. I have used the coordinates and the click event to implement this. // wave-module.js export function createEffect() { const btn = document.querySelector('button') const rippleEl = document.querySelector('.ripple') btn.addEventListener('click', (e) => { rippleEl.classList.add('clicked') rippleEl.style.. NPM - JSON Server JSON server is one of the NPM packages that provides a server for testing. It stores data in a JSON format and is very easy to work withList of Contents">HTML 삽입미리보기할 수 없는 소스 Implementation Installing the Package Setting Up the NPM command Running the Server Working with Data Angular .. JavaScript Module - Text Wave Effect Let's see how we can create a wave effect. The completed code looks like the one below. To make it easy to implement this feature to any existing website, I structured this to work by adding a class name to a text element. When you add the class name 'wave-text', the effect will take effect given that you have done the necessary configurations. // wave-module.js const waveTextEl = document.query.. Client Side Storage - Indexed DB indexed db is a client storage. It is similar to web storage but can save more data than web storage. Think of indexed db as a database where you can create, add, edit, and delete. For every tasks, you have to connect to the database first. Create open(“dbName”, version): this opens a database or creates one if not exists. The schema of a database differs by the version. const req = window.index.. Client Side Storage - Web Storage Web storage API allows to store data on user’s browser. Web storage is more secure as it dose not send data to a server and has larger storage limit than cookie. HTML has two web storage objects: localStorage: No expiry date for the data stored sessionStorage: Data lost when session (browser) closed How to Use? We can use ‘setItem(‘key’, ‘value’) to store data, getItem(‘key’) for get stored data.. 이전 1 2 다음
