SPACEBESTMIN

WHAT IS REQ.PARAM?! req.params an object containing parameter values parsed FROM THE URL PATH FROM THE URL PATH PARAMETER VALUES PARSED FRO THE URL PATH BEAUTIFUL as router.route("/:id").get((req,res) => {}) it takes the id, which is A PARAMETER VALUE PARSED FROM THE URL PATH you know what im saying.

(req, res) => {} IT MEANS req and res are PARAMETERS passed into this anonymous function. Writing middleware for use in Express apps middleware functions are functions that have access to the request object, the response object and the next function in the application's request- response cycle. the next function is a function in the .... https://expressjs.com/en/guide/writing-middleware.html

http://webframeworks.kr/tutorials/nextjs/nextjs-006/ Axios is a promise based HTTP cliend for the brower and node js by its github but. what is it actually??! Features make XMLHttpRequests from the browser make HTTP requrest from nodejs // maybe even though we do not set the whole new routing file //it can do its job when applied in frontend or react zone. i donno yet supports the promise API intercept request and response transform request and response data cancel request automatic transform for JSON data client side support for protecting against XSRF

My MERN page that i commited after checking that it worked perfect as tutorial with the error fixed last night, made new error... -this is my precious non-error last page scene. fun thing is that I stayed up doing it and getting my nail done because.. i could not sleep  ¯\_(ツ)_/¯ then I got up late, missed a date. fuck me I costed time and energy to work this page out and this bitch ditched me and show me new error yeah take its toll on me all my fault. I still love programming lol. what keeps you insane and weirdly obsessed with is something you have to keep closer. I think this is passion somehow. time to try trouble shooting and debugging the word debugging reminds me of my biggest hatred to prof. park. I wish you are happy by now sir. https://airbrake.io/blog/http-errors/400-bad-request will come back later.. ///////////// I GOT THIS Ok the error was shown only as a bad request and some of my research suggested me delete the site cookie to fix, here is w

this error message can be shown from different situations. literally not enabling it from your web browser could and etc. but in my case, it was caused because i was running only react app not the server.js file with npm. I know it sounds stupid but...thats me I guess. so when I follow youtube tutorial, they mostly shoot 1-2h long video it at once. And i play it time to time, pause it and continue, i forgot how should i be running the server. in the current one, the instructor turned on 3 terminals on VS code. first one to run : nodemon server second to run : nodemon start (to start react app, the frontend) third one for package installing and rest of tasks //sketch starting react app does not run my dynamic server, as when I turn on react app typing npm start i should run npm server!! so that it makes request

https://stackoverflow.com/questions/2944469/how-to-commit-my-current-changes-to-a-different-branch-in-git https://www.atlassian.com/git/tutorials/saving-changes/git-stash Stashing your work The git stash command takes your UNCOMMITED CHANGES (both staged or unstaged), saves them away for LATER USE, and then reverts them from your working copy. at this point you are free to make changes, create new commits, switch branches, and perfom any other Git operation. then come back and re-apply your stash when you are ready git stash pop -popping REMOVES THE CHANGES FROM YOUR STASH and reapplies them to your working copy git stash apply -alternatively you can reapply the changes to your working directory AND KEEP THEM IN YOUR STASH

JSX allow us to write HTML elements in JavaScript and place them in the DOM (Document Object Model) without any createElement() and / or appendChild() methods. JSX convers HTML tags into react elements EXAMPLES with JSX const elem = <h1> I love JSX!</h1>; ReactDOM.render(elem, document.getElementById('root')); without JSX const elem = React.createElement('h1', {}, 'I do not use JSX!'); ReactDOM.render(elem, document.getElementById('root')); Expressions The expressions can be a React variable, or property, or any other valid JS expression const elem = <h1>{5 + 5} is 10</h1>

Snap(also known as snappy) is a software deployment and package management system built by Canonical. The packages, are usually called 'snaps' and the tool for using them is called 'snapd', which works across a range of Linux distribution and therefore allows distro-agnostic upstream software deployment.

Routing refers to how an application's endpoints(URLs) respond to client requests. app.get() to handle GET request app.post() to handle POST request all.app() to handle all http methods app.use() to specify middleware as a callback function (handler func) with multiple callback functions, it is important to provide NEXT as an argument to callback fuction and then call next() within the body of the function to hand off control to the next callback. resource :  https://expressjs.com/en/guide/routing.html EXPRESS :  https://expressjs.com/en/guide/using-middleware.html Express is a routing and middleware web framework that has minimal functionality of its own. An express application is essentially a series of middleware function calls. IF THE CURRENT MIDDLEWARE FUNCTION DOES NOT END THE REQ-REP CYCLE, IT MUST CALL NEXT() TO PASS CONTROL TO THE NEXT MIDDLEWARE FUNCTION. OTHERWISE, THE REQUEST WILL BE LEFT HANGING.

app.use is a way to register middleware or chain of middlewares (or multiple middlewares) before excuting any end rout logic or intermediary route logic depending upon order or middleware registration resource :  https://stackoverflow.com/questions/11321635/nodejs-express-what-is-app-use 3 Json means JavaScript Object Notation

DELETE A LOCAL BRANCH git branch -d branch_name DELETE A REMOTE BRANCH git push <remote_name> --delete <branch_name> *Alternative way git push <remote_name> :<branch_name>

1. git branch -m -when i am on the branch I want to rename 1-1 git branch -m oldName newName -when i am not on the branch 2. git push origin :oldName newName - delete the old name remote branch and push the new name local branch 2-1 git checkout newname -git switch to new name branch 3. git push origin -u newName - reset the upstream branch for the new name local branch. switch to the branch and then :

git status shows tracked and untracked, added and unadded files by git git branch -a shows all the branches, local AND remote from the project including HEAD point git checkout -b newBranchName makes new branch and switch to it -b enables to make a new branch. without the flag, checkout does its job with existing branchName. It moves the head point to the branch. DELETING A BRANCH LOCAL git checkout -d branchName git checkout -D branchName -d deletes the branchName -D option stands for --delete --force, which deletes the branch regardless of its push and merge status, so be careful using this one!! REMOTE git push <remoteName> --delete <branchName> or -d for alias of delete. checkout = an act of switching between different versions of target entities https://www.atlassian.com/git/tutorials/using-branches/git-checkout deleting a branch source :  https://koukia.ca/delete-a-local-and-a-remote-git-branch-61df0b10d323

git add . will only add files located in the root directory. git add all Find all new and updated files everywhere throughout the project and add them to the staging area git add <file> stage all changes in file for the next commit git add <directory> stage all changes in <directory> for the next commit git add -p begin an interactive staging session that lets you choose portions of a file to add to the next commit. This will present you with a chunk of changes and prompt you for a command. use y to stage the chunk, n to ignore the chunk, s to split it into smaller chunks, e to manually edit the chunk, and q to exit resource :  https://rubygarage.org/blog/most-basic-git-commands-with-examples resource :  https://www.atlassian.com/git/tutorials/saving-changes

git add . git commit -m "init" --at once-- git -am "init" credit :  https://velog.io/@hur-kyuh-leez/git-add-%ED%95%98%EA%B3%A0-commit-%ED%95%98%EA%B8%B0-%EA%B7%80%EC%B0%AE%EC%9D%84-%EB%95%8C

Module means : "Each of a set of standardized parts or independent units that can be used to construct a more complex structure, such as an item of furniture or a building" from google dictionary. I can easily find which words should be replaced with programming terms and get a rough idea what it is in Node js. I assume all of you will as well. What is require? source : https://steemit.com/utopian-io/@sagorahmed/node-js-basic-tutorial Once a module is created, it could be exported and used by require func. Or we simply require it from installed packages. like express or http. well I handily installed express trying mern tutorial now but haven't required http nor installed it yet. I will see soon enough tho. -How to create a module export.myDateTime = function(){ return Date() } -How to include dt = require('./myfirstmodule') I could have used naver blog which is way more neat and fancy with provided decoration tools for postings a

>git push -u origin master this is a line that I enter to finish up to upload a file that I worked in github. but the question is, what are they??? origin and master? origin "origin" is a shorthand name for the remote repository that a project was originally cloned from. More precisely, IT IS USED INSTEAD OF THAT ORIGINAL REPOSITORY'S URL -and thereby makes referencing much easier. so it is a shorthand name of the git URL. simple. master "master" is a naming convention for a branch. After cloning(downloading) a project from a remote server, the resulting local repository has a single local branch : the so-called "master" branch. This means that "master" CAN BE SEEN AS A REPOSITORY'S "DEFAULT" BRANCH. default branch when just cloned. simple! references :  https://www.git-tower.com/learn/git/glossary

def solution ( n , costs): answer = 0 V = set () for v1 , v2 , cost in costs: V.add(v1) V.add(v2) # collectiong total index and number of islands without duplication # used as unvisited set sortedCosts = sorted (costs , key = lambda x: x[ 2 ]) # make a sorted list, key : node connection, value : cost # it keeps the sequence of each elem in inner list, # but each inner list is sorted by lower cost # means this sort meet the minial cost condition # x:x[2] means, key value to sort by is x[2] item in inner list visited = set () visited.add(V.pop()) # put the first node index and thats it while V: for i in range ( len (sortedCosts)): v1 , v2 , cost = sortedCosts[i] # how to spead and assign multiple items in one line if v1 in visited and v2 in visited: # means same connection with lower cost has already been confirmed # if the connection

def mysolution (arrangement): arr = list (arrangement) stack = [] piece = 0 answer = 0 for i in range ( len (arr)): if arr[i] == '(' : stack.append(arr[i]) elif arr[i] == ')' : if stack[ len (stack) - 2 ] == '(' : piece += len (stack) - 1 else : piece += 1 stack.pop() print (piece) return answer def solution (arrangement): arr = enumerate (arrangement) stack = [] piece = 0 for idx , ele in arr : if ele == '(' : stack.append(idx) # ??? else : if stack[- 1 ] + 1 == idx: # when it is a match, laser # list[-1] means latest index in the list stack.pop() piece += len (stack) # exactly. its flawless now else : # when it is the end of a pipe stack.pop() piece += 1 retur

import collections participant = [ "leo" , "kiki" , "eden" ] completion = [ "eden" , "kiki" ] def solution (participant , completion): answer = collections.Counter(participant) - collections.Counter(completion) # print(collections.Counter(participant)) # without listing, it looks like below # Counter({'leo': 1, 'kiki': 1, 'eden': 1}) # print(list(collections.Counter(participant))) # with listing # ['leo', 'kiki', 'eden'] # list(obj) distributes each item in the obj and makes new list out of it # unlikely with posted answer, we know the list has only one key value pair # indexing it out is unnecessary return list (answer.keys())[ 0 ] def solution2 (participant , completion): participant.sort() completion.sort() for i in range ( len (completion)): if participant[i] != completion[i]: return particip

def reverse (data): for index in range ( len (data)- 1 , - 1 , - 1 ): # repeat as many as the length of data, # decrement -1 each time till the index becomes -1 #since index starts with 0 yield data[index] for char in reverse( 'gold' ): print (char) Generators are a simple and powerful tool for creating iterators. They are written like regular functions but use the yield statement whenever they want to return data. Each time next() is called on it, the generator resumes where it left off (it remembers all the data values and which statement was last executed). An example shows that generators can be trivially easy to create. Anything that can be done with generators can also be done with class-based iterators as described in the previous section. What makes generators so compact is that the __iter__() and __next__() methods are created automatically. Another key feature is that the local variables and execution state are automatically saved

class Reverse: def __init__ ( self , data): self .data = data self .index = len (data) def __iter__ ( self ): return self def __next__ ( self ): if self .index == 0 : raise StopIteration self .index = self .index - 1 return self .data[ self .index] rev = Reverse( 'spam' ) iter (rev) for char in rev: print (char)

override : to ride across or beyond something. overwrite: to destroy old data by recording new data over it to cover in writing https://wikidiff.com/overwrite/override

Hello no one, since technically no one is reading my post but myself...then let's rephrase, hi me! I have been studying python to prepare for a programming competition. and I found some beautiful code. wanted to remember, I am writing down them here. >>> [( x , y ) for x in [ 1 , 2 , 3 ] for y in [ 3 , 1 , 4 ] if x != y ] [(1, 3), (1, 4), (2, 3), (2, 1), (2, 4), (3, 1), (3, 4)] is same as >>> combs = [] >>> for x in [ 1 , 2 , 3 ]: ... for y in [ 3 , 1 , 4 ]: ... if x != y : ... combs . append (( x , y )) ... >>> combs [(1, 3), (1, 4), (2, 3), (2, 1), (2, 4), (3, 1), (3, 4)]

<!DOCTYPE HTML> <html> <head>   <meta charset="utf-8"> </head> <body>   <script>   //load     function preloadImages(sources, callback) {       let counter = 0;       function onLoad() {         counter++;         if (counter == sources.length) callback();         //when all the pictures are loaded, callback       }       for(let source of sources) {         //get the array of pictures and load them         let img = document.createElement('img');         img.onload = img.onerror = onLoad;         img.src = source;       }     }     // ---------- The test ----------     let sources = [       "https://en.js.cx/images-load/1.jpg",       "https://en.js.cx/images-load/2.jpg",       "https://en.js.cx/images-load/3.jpg"     ];     // add random characters to prevent browser caching     for (let i = 0; i < sources.length; i++) {       sources[i] += '?' + Mat

html, body {   width: 100%;   height: 100%;   padding: 0;   margin: 0; } #prompt-form {   display: inline-block;   padding: 5px 5px 5px 70px;   width: 200px;   border: 1px solid black;   background: white url(https://en.js.cx/clipart/prompt.png) no-repeat left 5px;   vertical-align: middle; } #prompt-form-container {   position: fixed;   top: 0;   left: 0;   z-index: 9999;   width: 100%;   height: 100%;   text-align: center;   /*DHISPLAY NONE*/   display: none;     } #prompt-form-container:before {   display: inline-block;   height: 100%;   content: '';   vertical-align: middle; } #cover-div {   position: fixed;   top: 0;   left: 0;   z-index: 9000;   width: 100%;   height: 100%;   background-color: gray;   opacity: 0.3; } #prompt-form input[name="text"] {   display: block;   margin: 5px;   width: 180px; }

<!DOCTYPE html> <html> <head>   <meta charset="utf-8">   <link rel="stylesheet" href="style.css"> </head> <body style="height:3000px"> <h2>Click the button below</h2> <input type="button" value="Click to show the form" id="show-button">   <div id="prompt-form-container">     <form id="prompt-form">       <div id="prompt-message"></div>       <input name="text" type="text">       <input type="submit" value="Ok">       <input type="button" name="cancel" value="Cancel">     </form>   </div> <script>   function showCover() {     let coverDiv = document.createElement('div');     coverDiv.id = 'cover-div';         document.body.style.overflowY = 'hidden';  

<!DOCTYPE html> <html> <head>   <meta charset="utf-8">   <style>     td select,     td input {       width: 150px;     }     #diagram td {       vertical-align: bottom;       text-align: center;       padding: 10px;     }     #diagram div {       margin: auto;     }   </style> </head> <body>   Deposit calculator.   <form name="calculator">     <table>       <tr>         <td>Initial deposit</td>         <td>           <input name="money" type="number" value="10000" required>         </td>       </tr>       <tr>         <td>How many months?</td>         <td>           <select name="months">             <option value="3">3 (minimum)</option>             <option value="6">6 (half-year)</option>             <option

<!DOCTYPE HTML> <html> <head>   <link type="text/css" rel="stylesheet" href="my.css">   <meta charset="utf-8"> </head> <body>   <ul>     <li>Click the div to edit.</li>     <li>Enter or blur saves the result.</li>   </ul>   HTML is allowed.   <div id="view" class="view">Text</div>   <script>     let area = null;     let view = document.getElementById('view');     //view is the div to turn into txtarea         view.onclick = function() {       editStart();     };         function editStart() {       //when VIEW clicked, create A TXTAREA       area = document.createElement('textarea');       area.className = 'edit';       area.value = view.innerHTML;           area.onkeydown = function(event) {         if (event.key == 'Enter') {           this.blur();//area is out of

<!DOCTYPE HTML> <html> <body>   <select id="genres">     <option value="rock">Rock</option>     <option value="blues" selected>Blues</option>   </select>   <script>   let selectedOption = genres.options[genres.selectedIndex];   alert(selectedOption.value);   let newOption = new Option("Classic", "classic");   genres.append(newOption);   newOption.selected = true;   </script> </body> </html>

<!DOCTYPE HTML> <html> <head>   <style>     body,     html {       height: 100%;       width: 100%;       padding: 0;       margin: 0;     }     #matrix {       width: 400px;       margin: auto;       overflow: auto;       text-align: justify;     }     #arrowTop {       height: 9px;       width: 14px;       color: green;       position: fixed;       top: 10px;       left: 10px;       cursor: pointer;     }     #arrowTop::before {       content: '▲';     }   </style>   <meta charset="utf-8"> </head> <body>   <div id="matrix">     <script>       for (let i = 0; i < 2000; i++) document.writeln(i)     </script>   </div>   <div id="arrowTop" hidden></div>   /*should be hidden until given condition is satified*/   <script>     arrowTop.onclick = function() {       window.scrollTo(pageXOffset, 0);     };      

<!DOCTYPE HTML> <html> <body> <h1>Scroll me</h1>   <script>   function populate(){     while(true){       let windowRelativeBottom = document.documentElement.getBoundingClientRect().bottom;       //when the scroll is about to reach at the end       if(windowRelativeBottom > document.documentElement.clientHeight + 100) break;       document.body.insertAdjacentHTML("beforeend", `<p>Date : ${new Date()}</p>`);     }   }   window.addEventListener('scroll', populate);   populate();//first page contents  </script>  <body> </html>

<!DOCTYPE HTML> <html> <body>   <p>Press "Q" and "W" together (can be in any language).</p>     <script>   function runOnKeys(func, ...codes){ // func = a function returns hello, codes = q and w key     let pressed = new Set();     document.addEventListener('keydown', function(event) {       pressed.add(event.code);       for (let code of codes) { // from spread parameter         if(!pressed.has(code)) {           return;//if the key is neither q nor w, return         }       }       pressed.clear();       func();     });     document.addEventListener('keyup', function(event){       pressed.delete(event.code);     });   }   runOnKeys(     ()=> alert("Hello!"),     "KeyQ",     "KeyW"   );  </script>  <body> </html>

<!DOCTYPE html> <html>  <head>   <meta charset="utf-8">   <link rel="stylesheet" href="style.css"> </head>  <body>    <div id="slider" class="slider">     <div class="thumb"></div>   </div>    <script>     let thumb = slider.querySelector('.thumb');     thumb.onmousedown = function(event) {       event.preventDefault();             let shiftX = event.clientX - thumb.getBoundingClientRect().left;       //from the start of the leftmost side to the exact mouse x             document.addEventListener('mousemove', onMouseMove);       document.addEventListener('mouseup', onMouseUp);               function onMouseMove(event) {       let newLeft = event.clientX - shiftX - slider.getBoundingClientRect().left;             //the pointer is out of slider=> lock the thumb within the boundaries       if(newLeft < 0){         newLeft = 0;//s

<!DOCTYPE HTML> <html> <head>   <meta charset="utf-8">   <style>     body {       height: 2000px;       /* the tooltip should work after page scroll too */     }     .tooltip {       position: fixed;       z-index: 100;       padding: 10px 20px;       border: 1px solid #b3c9ce;       border-radius: 4px;       text-align: center;       font: italic 14px/1.3 sans-serif;       color: #333;       background: #fff;       box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);     }     #house {       margin-top: 50px;       width: 400px;       border: 1px solid brown;     }     #roof {       width: 0;       height: 0;       border-left: 200px solid transparent;       border-right: 200px solid transparent;       border-bottom: 20px solid brown;       margin-top: -20px;     }     p {       text-align: justify;       margin: 10px 3px;     }   </style> </head> <body>   <div data-tooltip="Here

<!DOCTYPE HTML> <html> <head>   <meta charset="utf-8">   <style>     .selected {       background: #0f0;     }     li {       cursor: pointer;     }   </style> </head> <body>   Click on a list item to select it.   <br>   <ul id="ul">     <li>Christopher Robin</li>     <li>Winnie-the-Pooh</li>     <li>Tigger</li>     <li>Kanga</li>     <li>Rabbit. Just rabbit.</li>   </ul>   <script>     ul.onclick = function(event) {       if(event.target.tagName != "LI") return;       //only going to be applied on lis             if (event.ctrlKey || event.metaKey) {         toggleSelect(event.target);       } else {         singleSelect(event.target);       }     }         ul.onmousedown = function() {       return false;     };//disables default mouse action like being selected     //as the task a

<HTML> <head>   <meta charset="utf-8"> </head> <body>   <pre id="rabbit">     |\   /|      \|_|/      /. .\     =\_Y_/=      {>o<}   </pre>   <button onclick="hide()">Hide()</button> <script>   function hide(){     let event = new CustomEvent("hide", {       cancelable:true     });     if(!rabbit.dispatchEvent(event)) {//if it is not dispatched       alert('The action was prevented by a handler');     } else {//if it is dispatched, the tag is hidden as supposed to       rabbit.hidden = true;     }   }   rabbit.addEventListener('hide', function(event) {     if(confirm("Call preventDefault?")) {       event.preventDefault();     }   }); </script> </body> </HTML>

<HTML> <head>   <meta charset="utf-8"> </head> <body>  <h1 id="elem">Hello from the Min script!</h1> <script>   document.addEventListener("hello", function(event) {     alert("Hello from " + event.target.tagName);   }); //i like it when the code is semantic hahaha   let event = new Event("hello", {bubbles: true});   elem.dispatchEvent(event); </script> </body> </HTML>

<HTML> <head>   <title>Gallery</title>   <link rel="stylesheet" href="gallery.css"></link>   <meta charset="utf-8"> </head> <body>   <p><img id="largeImg" src="https://en.js.cx/gallery/img1-lg.jpg" alt="Large image"></p> <ul id="thumbs">     <ul>       <a href="https://en.js.cx/gallery/img2-lg.jpg" title="Image 2"><img src="https://en.js.cx/gallery/img2-lg.jpg"></a>     </ul>     <ul>       <a href="https://en.js.cx/gallery/img3-lg.jpg" title="Image 3"><img src="https://en.js.cx/gallery/img3-lg.jpg"></a>     </ul>     <ul>       <a href="https://en.js.cx/gallery/img4-lg.jpg" title="Image 4"><img src="https://en.js.cx/gallery/img4-lg.jpg"></a>     </

body{   margin:0;   padding:0;   font: 75%/120% sans-serif; } h2 {   font: bold 190%/100% sans-serif;   margin: 0 0 .2em; } h2 em {   font: normal 80%/100% sans-serif;   color: #999999; } #largeImg{   border:solid 1px #ccc;   padding:5px;   width: 550px;   height:400px; } /*in the example it was thumbs a, but it didnt control the size of image so I changed it to be img, works fine*/ #thumbs img {   border: solid 1px #ccc;   width: 100px;   height:100px;   padding:3px;   margin:2px;   float: left; } #thumbs a:hover {   border-color: #FF9900; }

<HTML> <body> <head>   <style>   /* # => select the element BY ITS ID*/   #contents {     padding:5px;     border:1px green solid;   }   </style> </head>   <fieldset id="contents">     <legend>#contents</legend> //legend is for title     <p>     How about to read <a href="http://wikipedia.org">Wikipedia</a> or visit <a href="http://w3.org"><i>W3.org</i></a> and learn about modern standards?     </p>   </fieldset>   <script>     contents.onclick = function(event) {       function handleLink (href) {         let isLeaving = confirm(`Leave for ${href}`);         /*confirm pops yes or no window*/         if (!isLeaving) return false;         /*if user clicked no, isLeaving becomes false, link canceled*/       }       let target = event.target.closest('a');       /*closest traverses parents(heading towards th

<HTML> <body> <Script> function handler(){   alert("...");   return false; } </Script> <a href="http://w3.org" onclick="return handler()">the browser will go to w3.org</a> </body> /*otherwise we can take event parameter into function and use event.preventDefault() when handler's retun value should be used, on* attribute must specify on* "= return handler()" otherwise return value is usually ignored*/ </HTML>

<!DOCTYPE HTML> <html> <head>   <meta charset="utf-8">   <style>   table {      border-collapse: collapse;    }    th, td {      border: 1px solid black;      padding: 4px;    }    th {      cursor: pointer;    }    th:hover {      background: yellow;    } </style> </head> <body>   <table id="grid">       <thead>         <tr>           <th data-type="number">Age</th>           <th data-type="string">Name</th>         </tr>       </thead>       <tbody>         <tr>           <td>5</td>           <td>John</td>         </tr>         <tr>           <td>2</td>           <td>Pete</td>         </tr>         <tr>           <td>12</td>           <td>Ann</td>         </tr>         <tr>          

<!DOCTYPE HTML> <html> <head>   <style>     .tree span:hover {       font-weight: bold;     }     .tree span {       cursor:pointer;       /*damn! its to show that its clickable*/     }   </style>   <meta charset="utf-8"> </head> <body>   <ul class="tree" id="tree">     <li>Animals       <ul>         <li>Mammals           <ul>             <li>Cows</li>             <li>Donkeys</li>             <li>Dogs</li>             <li>Tigers</li>           </ul>         </li>         <li>Other           <ul>             <li>Snakes</li>             <li>Birds</li>             <li>Lizards</li>           </ul>         </li>       </ul>     </li>     <li>Fishes       <ul>         <li>Aquarium           <ul>

<!DOCTYPE HTML> <html> <head>   <link rel="stylesheet" href="messages.css">   <meta charset="utf-8"> </head> <body>   <div id="container">     <div class="pane">       <h3>Horse</h3>       <p>The horse is one of two extant subspecies of Equus ferus. It is an odd-toed ungulate mammal belonging to the taxonomic family Equidae. The horse has evolved over the past 45 to 55 million years from a small multi-toed creature, Eohippus, into the large, single-toed animal of today.</p>       <button class="remove-button">[x]</button>     </div>     <div class="pane">       <h3>Donkey</h3>       <p>The donkey or ass (Equus africanus asinus) is a domesticated member of the horse family, Equidae. The wild ancestor of the donkey is the African wild ass, E. africanus. The donkey has been used as a

<html> <body>   Counter: <input type="button" value="1" data-counter><br>   One more counter: <input type="button" value="2" data-counter>   <script>   document.addEventListener('click', function(event) {     if (event.target.dataset.counter != undefined){       //if THE ATTRIBUTE 'COUNTER' exists...       event.target.value++;     }   });   </script> </body> </html> /*this small little so funny thing ㅠㅠㅠㅠ so cute and funny*/

<HTML>   <body>     <div id="menu>       <button data-action="save">Save</button>       <button data-action="load">Load</button>       <button data-action="search">Search</button>     </div>     <script>     class Menu {       constructor(elem) {         this._elem = elem;         elem.onclick = this.onClick.bind(this); //-         //without the binding in here,         //it would reference the DOM element 'elem'         //not the menu object       }       save() {         alert('saving');       }       load(){         alert('load');       }       search(){         alert('search');       }       onClick(event) {         let action = event.target.dataset.action;         //event.target = button         //event.target.dataset.action = button data-action="save"         //means the DATA-ACTION ATTRIBUTE VALUE. the wo

#bagua-table th{ } #bagua-table td {   width: 150px;   white-space: nowrap;   text-align: center;   vertical-align: bottom;   padding-top: 5px;   padding-bottom: 12px; } #bagua-table .nw {   background: #999; } #bagua-table .n {   background: #03f;   color: #fff; } #bagua-table .ne {   background: #ff6; } #bagua-table .w {   background: #ff0; } #bagua-table .c {   background: #60c;   color: #fff; } #bagua-table .e {   background: #09f;   color: #fff; } #bagua-table .sw {   background: #963;   color: #fff; } #bagua-table .s {   background: #f60;   color: #fff; } #bagua-table .se {   background: #0c3;   color: #fff; }

<HTML>   <body>     <link type="text/css" rel="stylesheet" href="bagua.css">     <table id="bagua-table">   <tr>     <th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>   </tr>   <tr>     <td class="nw"><strong>Northwest</strong>       <br>Metal       <br>Silver       <br>Elders     </td>     <td class="n"><strong>North</strong>       <br>Water       <br>Blue       <br>Change     </td>     <td class="ne"><strong>Northeast</strong>       <br>Earth       <br>Yellow       <br>Direction     </td>   </tr>   <tr>     <td class="w"><strong>West </strong>       <br>Metal       <br>Gold       <br>Youth     </td

<HTML>   <head>     <meta charset="utf-8">   </head>   <style>   form{       background-color: green;       position: relative;       width:150px;       height: 150px;       text-align: center;       cursor:pointer;   }   div {     background-color: blue;     position: absolute;     top: 25px;     left: 25px;     width: 100px;     height: 100px;   }   p{     background-color: red;     position: absolute;     top: 25px;     left: 25px;     width: 50px;     height: 50px;     line-height: 50px;     margin: 0;   }   body {     line-height: 25px;     font-size: 16px;   }   </style>  <body> A click shows both <code>event.target</code> and <code>this</code> to compare <form id="form">FORM   <div>DIV     <p>P</p>   </div> </form>  </body>  <script> form.onclick = function(event) {   event.target.style.backgroudCol