CSS/Javascript/HTML Basics
prepared by Jisoo Yu on Jun 22, 2020
- Keep in mind
Others are so good and fast.
Am I dumb?
Absolutely NOT!
You are jst not familiar with the subject.
How can I be familiar with the subject?
Repeat, Repeat, Repeat
The best to way to earn the skill set is to repeat it.
Write the comment first what you are trying to achieve.
- Tip to know
Make the mind-link between the JS and the Browser/HTML
- DOM structure
- select & manipulate the element
var h1 = document.querySelector(“h1”);
h1.style.color = “pink”;
another example
var body = document.querySelector(“body”);
var isBlue = false;
setInterval(function (){
if (isBlue){
body.style.background = “white”;
} else {
body.style.background = ‘#349db”;
}
isBlue=!isBlue;
}, 1000);
- class and id
class 는 다른 element에서도 사용가능. 즉, 하나의 class 를 만들어 다른 element에 적용할 수도 있다는 의미도 됨. 반면 id는 항상 unique해야 함. 다른 element에서 같은 id 이름을 사용할 수 없음.
- element background color change
element.style.backgroundColor = “green”;
Note: Be sure to use backgroundColor instead of background. If you use the background, it won’t work in Firefox.
- element text change
var targetSelect = document.querySelector("#target");
targetSelect.textContent = "RGB(175, 203, 2)"
- element 안에 있는 text를 변경할 때
span을 사용할 것
예)
<h1>The Great <span id="colorDisplay">RGB</span> Color Game</h1>
- this의 사용 예제
for (var i=0; i<squares.length; i++){
squares[i].style.backgroundColor = colors[i];
squares[i].addEventListener("click", function(){
if (this.style.backgroundColor===pickedColor){
console.log("Your guess is correct.");
} else {
console.log("Your guess is not correct.")
}
});
};
- line-through (cross-out / strike-through)
$(input).css('textDecoration','line-through');
- css border margin padding
- body
Dropbox/css에 index.html과 style.css를 만들어 놓았음. 참조하기 바람
body{
background-color:#f4f4f4;
color:#555555;
font-family: Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:normal;
font: normal 16px Arial, Helvetica, sans-serif;
line-height:1.6em;
}
- margin, padding
padding 크기를 크게 하면 사갹형이 커짐
margin 크기를 크게하면 사각형이 작아짐.. 왜냐하면 margin은 사각형의 외부에 적용되기 때문. 반면 padding은 사각형 content와 border 사이의 크기를 결정. 즉, 사각형 내부에 크기가 변화.
Note: margin 을 0으로 정하면 대상 사각형이 커지고 margin 크기를 0보다 크게 하면 사각형 크기가 축소됨.
- HTML내에 있는 element(button)의 색깔을 css에 정의된 색깔과 연결하고자 할 때
js file:
easyBtn.addEventListener("click", function(){
hardBtn.classList.remove("selected");
easyBtn.classList.add("selected"); // css에 정의된 selected와 연결
});
hardBtn.addEventListener("click", function(){
easyBtn.classList.remove("selected"); // css에 정의된 selected와 연결 해제
hardBtn.classList.add("selected");
});
html file:
<button id="easyBtn">Easy</button>
<button id="hardBtn" class="selected">Hard</button>
css file:
.selected{
background:blue;
}
- element display 안되게 하였다가 다시 되게 할 경
easyBtn.addEventListener("click", function (){우
easyBtn.classList.add("selected");
hardBtn.classList.remove("selected");
colors = generateRandomColors(3);;
pickedColor = pickColor();
colorDisplay.textContent = pickedColor;
for (var i=0; i<3; i++){
squares[i].style.display = "none"; // display 가 안되고 함.
}
});
hardBtn.addEventListener("click", function (){
hardBtn.classList.add("selected");
easyBtn.classList.remove("selected");
colors = generateRandomColors(6);;
pickedColor = pickColor();
colorDisplay.textContent = pickedColor;
for (var i=0; i<3; i++){
squares[i].style.display = "block"; // display를 다시 살려서 display가 되게 함.
}
});
- block/square가 일열로 나열 되게 할 경우
display: inline-block;
width: 30%; // 현재 공간(stripe 등)의 30% 만 사용
- button 위로 마우스를 댈 때 button의 background와 font color가 변하게 할 경우
button:hover {
color: white;
background-color: steelblue;
}
- text 모두를 대문자로..
text-transform: uppercase;
- 글자간 spacing
letter-spacing: 1px;
- property changes (color, backgound-color, text etc)를 지연 시키려면..
button{
transition: all 0.5s; // 모든 change를 0.5 초 지연
}
.square {
width: 30%;
transition: background 1.0s; // background color 변경 만 2 초 지연.
}
- rounded corners of the box
- Chrome, firefox, safari에서도 작동하도록 하려면…
.square {
border-radius: 15%;
-webkit-transition: background 1.0s; // 다른 browser에서 작동하도록 하기 위한 것..
-moz-transition: background 1.0s; // 다른 browser에서 작동하도록 하기 위한 것..
}
- button에 생기는 outline 제거
button{
outline: none;
}
- add “li” to “ul” with the value from the input field
// add the todos using javascript
var todos = document.querySelector("input");
todos.addEventListener("keypress", function (event){
if (event.which === 13){
var todoText = event.target.value;
var ul = document.querySelector("ul");
var li = document.createElement("li");
li.appendChild(document.createTextNode(todoText));
ul.appendChild(li);
event.target.value="";
}
})
Animation and Sound
- animation (paper js)
reference sites
download the sound files from https://github.com/jonobr1/Neuronal-Synchrony
Paper.js
http://paperjs.org/download/ download the Paper.js
(1) make sure to copy the paper-full.js into our directory, ex_PaperJs_21_236.
(2) download and copy the mp3 files inhttps://github.com/jonobr1/Neuronal-Synchrony/tree/master/assets/A into the sounds directory.
Patatap
https://patatap.com/
- sound site (Howler js)
howler.js
https://howlerjs.com/
- Howler Documentation
https://goldfirestudios.com/howler-js-modern-web-audio-javascript-library
(주의) mp3 files가 sounds folder에 저장되어 있어야 함.
- Howler cdn
https://cdnjs.com/libraries/howler
- COR ERROR 의 경우
For the CORS message, you would need to look into running the HTML page on a HTTP server, it's mentioned in this lecture note - https://www.udemy.com/course/the-web-developer-bootcamp/learn/lecture/5351442
python v3.x:
python -m http.server
open up your browser and navigate to http://localhost:8000
OR
install Chromium browser
sudo apt install chromium-browser
and disable the web security for the directory
chromium-browser --disable-web-security --user-data-dir="/home/jisooyu/Dropbox/javascript/ex_PaperJS_21_241_Howler"
- Error: An array of source files must be passed with any new Howl
var keyData = {
a: {
color: "#E9D66B",
sound: new Howl({
src:['sounds/bubbles.mp3']
})
},
k: {
color: "cyan",
sound: new Howl({
src:['sounds/corona.mp3']
})
},
}
jQuery
- jQuery CDN link
or
in your directory, download the jQuery library and put in the src in the html file
<script src="lib/jquery-v3.5.1.js"></script>
- Select the divs with id "third" and set the border with the pink color
$("#third").css("border", "solid 4px pink");
- Select the first div only and change the font color to pink
$("div:first-of-type").css("color", "pink");
// Another way: $("div:first").css("color", "pink")
- select the text
console.log($("h1").text());
console.log($("ul").text());
console.log($('li').text());
$("h1").text("New Text !!")
$("li:first").text("M&M");
$("li:eq(2)").text("Golden Chips")
- add “html”
$("ul").html("<li>Nacho Chips</li><li>BB Big</li><li>Melon Bar</li>")
- change the input tpye from the text to the color
$("input").attr("type", "color");
- change the input type to the checkbox
$("input").attr("type", "checkbox")
- back to the input type to the input text
$("input").attr("type", "input");
- change the source of the first image
$("img:first-of-type").attr("src", "https://pbs.twimg.com/profile_images/534840446174781442/MVt_YYKT_400x400.jpeg").css("width", "200px");
$("img").first().attr("src", "https://pbs.twimg.com/profile_images/534840446174781442/MVt_YYKT_400x400.jpeg").css("width", "200px");
- change the source of the last image
$("img").last().attr("src", "https://pbs.twimg.com/profile_images/534840446174781442/MVt_YYKT_400x400.jpeg").css("width", "200px");
- get the value of the input box OR to set the input as empty
$("input").val();
- set the value
$("input").val("Jeffrey Kim");
- get the value of the dropdown values
$("select").val();
- 왜 call back function이 필요한가
다른 statement실행이 끝난 후에 집행해야 할 경우, callback function을 사용.
예)
$("button").on("click", function(){
$("div").fadeOut(1000, function (){
console.log("Fade out completed."); // to ensure the console log after fade-out
});
})
- fade out and remove the element
// delete the completed(clicked) todos
$("span").click(function(e){
$(this).parent().remove();
e.stopPropagation();
})
// fade out the completed(clicked) todos
$("span").click(function(e){
$(this).parent().fadeOut();
e.stopPropagation();
})
위의 것을 다음과 같이 합해서 간단하게 처리할 수 있음.
// fade out and remove the completed todos
$("span").click(function (e){
$(this).parent().fadeOut(500, function(){
$(this).remove();
} )
e.stopPropagation();
})
- on() 과 click()의 차이
on() will add the listeners to the existing elements plus the potential future elements
while
click() will add the listeners to the existing elements
(예제)
// line-through the completed(clicked) todos
$("li").click(function(){
$(this).toggleClass("completed");
})
// activate the listener only when any "li" inside "ul" is clicked
$("ul").on("click", "li", function(){
$(this).toggleClass("completed");
})
(예제)
// fade out and remove the completed todos
$("span").click(function (e){
$(this).parent().fadeOut(500, function(){
$(this).remove();
} )
e.stopPropagation();
})
// activate the listener only when any "li" inside "ul" is clicked
$("ul").on("click", "span", function (e){
$(this).parent().fadeOut(500, function(){
$(this).remove();
} )
e.stopPropagation();
})
- Google Fonts site
https://fonts.google.com/?preview.text=&preview.text_type=custom
- w3school color shades
https://www.w3schools.com/colors/colors_shades.asp
- gradients site
https://uigradients.com/#Disco
copy the css and past it in body { }
- fontawesome site
github
https://github.com/FortAwesome/Font-Awesome
cdn link
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
(예) three-quarters battery
<h1>To-Do LIST <i class="fa fa-battery-three-quarters"></i></h1>
(예) plus sign
<h1>To-Do LIST <i class="fa fa-plus"></i></h1>
- difference among inline, inline-block, and block
<!DOCTYPE html>
<html>
<head>
<style>
span.a {
display: inline; /* the default for span */
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.b {
display: inline-block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.c {
display: block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
</style>
</head>
<body>
The display Property
display: inline
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. Aliquam venenatis gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.
display: inline-block
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. Aliquam venenatis gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.
display: block
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat.Aliquamvenenatisgravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.
- removing the small gap between the list and the input
input{
font-size: 18px;
color:#2980b9
background-color: #DCDCDC;
width: 100%;
padding:13px 13px 13px 20px;
box-sizing: border-box;
border:3px solid rgba(0,0,0,0);
}
- animation of the trash can
span{
background-color: #e74c3c;
height: 40px;
margin-right: 20px;
text-align: center;
color: white;
width: 0;
display: inline-block;
transition: 0.2s linear;
opacity: 0;
}
li:hover span{
width: 40px;
opacity: 1;
}
- fadein and fadeout of input field by clicking the fontawesome icon
$(".fa-plus").on("click", function(){
$("input[type='text']").fadeToggle();
})
-adding the todos using jQuery
$("input[type='text']").keypress(function(e){
if(e.which === 13){
var todoText = $(this).val();
$(this).val("");
$("ul").append("<li><span>X</span> " + todoText + "</li>")
}
})
-adding the todos using javascript
var value = document.querySelector( "input" );
value.addEventListener( "change", function (e){
var todoText = e.target.value;
var todoIl = document.createElement( "li" );
var todoI = document.createElement( "i" );
var todoSpan = document.createElement( "span" );
todoI.className += "fa fa-trash";
todoSpan.appendChild( todoI );
todoIl.appendChild( todoSpan );
todoIl.appendChild( document.createTextNode( todoText ) );
document.querySelector( "ul" ).appendChild( todoIl );
e.target.value = "";
})
REACT
- installing node js
go to nodejs.org/en/download and download the appropriate version
go to the terminal and type:
node -v
- installation create react app
npx create-react-app <my_project/
note: you don’t need to execute the installation commands for the node js. The npx command is used from the node js v.5.0 or above.
- start react app
(assuming your project name is the jsx)
cd jsx
npm start
note: be sure to execute the command at the project directory
- create-react-app structure
- to stop the create-react-app
Ctrl-C
- import the React and ReactDOM libraries
import React from 'react';
import ReactDOM from 'react-dom';
- React Component Structure
prepared by Jisoo Yu on Jun 22, 2020
- Keep in mind
Others are so good and fast.
Am I dumb?
Absolutely NOT!
You are jst not familiar with the subject.
How can I be familiar with the subject?
Repeat, Repeat, Repeat
The best to way to earn the skill set is to repeat it.
Write the comment first what you are trying to achieve.
- Tip to know
Make the mind-link between the JS and the Browser/HTML
- DOM structure
- select & manipulate the element
var h1 = document.querySelector(“h1”);
h1.style.color = “pink”;
another example
var body = document.querySelector(“body”);
var isBlue = false;
setInterval(function (){
if (isBlue){
body.style.background = “white”;
} else {
body.style.background = ‘#349db”;
}
isBlue=!isBlue;
}, 1000);
- class and id
class 는 다른 element에서도 사용가능. 즉, 하나의 class 를 만들어 다른 element에 적용할 수도 있다는 의미도 됨. 반면 id는 항상 unique해야 함. 다른 element에서 같은 id 이름을 사용할 수 없음.
- element background color change
element.style.backgroundColor = “green”;
Note: Be sure to use backgroundColor instead of background. If you use the background, it won’t work in Firefox.
- element text change
var targetSelect = document.querySelector("#target");
targetSelect.textContent = "RGB(175, 203, 2)"
- element 안에 있는 text를 변경할 때
span을 사용할 것
예)
<h1>The Great <span id="colorDisplay">RGB</span> Color Game</h1>
- this의 사용 예제
for (var i=0; i<squares.length; i++){
squares[i].style.backgroundColor = colors[i];
squares[i].addEventListener("click", function(){
if (this.style.backgroundColor===pickedColor){
console.log("Your guess is correct.");
} else {
console.log("Your guess is not correct.")
}
});
};
- line-through (cross-out / strike-through)
$(input).css('textDecoration','line-through');
- css border margin padding
- body
Dropbox/css에 index.html과 style.css를 만들어 놓았음. 참조하기 바람
body{
background-color:#f4f4f4;
color:#555555;
font-family: Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:normal;
font: normal 16px Arial, Helvetica, sans-serif;
line-height:1.6em;
}
- margin, padding
padding 크기를 크게 하면 사갹형이 커짐
margin 크기를 크게하면 사각형이 작아짐.. 왜냐하면 margin은 사각형의 외부에 적용되기 때문. 반면 padding은 사각형 content와 border 사이의 크기를 결정. 즉, 사각형 내부에 크기가 변화.
Note: margin 을 0으로 정하면 대상 사각형이 커지고 margin 크기를 0보다 크게 하면 사각형 크기가 축소됨.
- HTML내에 있는 element(button)의 색깔을 css에 정의된 색깔과 연결하고자 할 때
js file:
easyBtn.addEventListener("click", function(){
hardBtn.classList.remove("selected");
easyBtn.classList.add("selected"); // css에 정의된 selected와 연결
});
hardBtn.addEventListener("click", function(){
easyBtn.classList.remove("selected"); // css에 정의된 selected와 연결 해제
hardBtn.classList.add("selected");
});
html file:
<button id="easyBtn">Easy</button>
<button id="hardBtn" class="selected">Hard</button>
css file:
.selected{
background:blue;
}
- element display 안되게 하였다가 다시 되게 할 경
easyBtn.addEventListener("click", function (){우
easyBtn.classList.add("selected");
hardBtn.classList.remove("selected");
colors = generateRandomColors(3);;
pickedColor = pickColor();
colorDisplay.textContent = pickedColor;
for (var i=0; i<3; i++){
squares[i].style.display = "none"; // display 가 안되고 함.
}
});
hardBtn.addEventListener("click", function (){
hardBtn.classList.add("selected");
easyBtn.classList.remove("selected");
colors = generateRandomColors(6);;
pickedColor = pickColor();
colorDisplay.textContent = pickedColor;
for (var i=0; i<3; i++){
squares[i].style.display = "block"; // display를 다시 살려서 display가 되게 함.
}
});
- block/square가 일열로 나열 되게 할 경우
display: inline-block;
width: 30%; // 현재 공간(stripe 등)의 30% 만 사용
- button 위로 마우스를 댈 때 button의 background와 font color가 변하게 할 경우
button:hover {
color: white;
background-color: steelblue;
}
- text 모두를 대문자로..
text-transform: uppercase;
- 글자간 spacing
letter-spacing: 1px;
- property changes (color, backgound-color, text etc)를 지연 시키려면..
button{
transition: all 0.5s; // 모든 change를 0.5 초 지연
}
.square {
width: 30%;
transition: background 1.0s; // background color 변경 만 2 초 지연.
}
- rounded corners of the box
- Chrome, firefox, safari에서도 작동하도록 하려면…
.square {
border-radius: 15%;
-webkit-transition: background 1.0s; // 다른 browser에서 작동하도록 하기 위한 것..
-moz-transition: background 1.0s; // 다른 browser에서 작동하도록 하기 위한 것..
}
- button에 생기는 outline 제거
button{
outline: none;
}
- add “li” to “ul” with the value from the input field
// add the todos using javascript
var todos = document.querySelector("input");
todos.addEventListener("keypress", function (event){
if (event.which === 13){
var todoText = event.target.value;
var ul = document.querySelector("ul");
var li = document.createElement("li");
li.appendChild(document.createTextNode(todoText));
ul.appendChild(li);
event.target.value="";
}
})
Animation and Sound
- animation (paper js)
reference sites
download the sound files from https://github.com/jonobr1/Neuronal-Synchrony
Paper.js
http://paperjs.org/download/ download the Paper.js
(1) make sure to copy the paper-full.js into our directory, ex_PaperJs_21_236.
(2) download and copy the mp3 files inhttps://github.com/jonobr1/Neuronal-Synchrony/tree/master/assets/A into the sounds directory.
Patatap
https://patatap.com/
- sound site (Howler js)
howler.js
https://howlerjs.com/
- Howler Documentation
https://goldfirestudios.com/howler-js-modern-web-audio-javascript-library
(주의) mp3 files가 sounds folder에 저장되어 있어야 함.
- Howler cdn
https://cdnjs.com/libraries/howler
- COR ERROR 의 경우
For the CORS message, you would need to look into running the HTML page on a HTTP server, it's mentioned in this lecture note - https://www.udemy.com/course/the-web-developer-bootcamp/learn/lecture/5351442
python v3.x:
python -m http.server
open up your browser and navigate to http://localhost:8000
OR
install Chromium browser
sudo apt install chromium-browser
and disable the web security for the directory
chromium-browser --disable-web-security --user-data-dir="/home/jisooyu/Dropbox/javascript/ex_PaperJS_21_241_Howler"
- Error: An array of source files must be passed with any new Howl
var keyData = {
a: {
color: "#E9D66B",
sound: new Howl({
src:['sounds/bubbles.mp3']
})
},
k: {
color: "cyan",
sound: new Howl({
src:['sounds/corona.mp3']
})
},
}
jQuery
- jQuery CDN link
or
in your directory, download the jQuery library and put in the src in the html file
<script src="lib/jquery-v3.5.1.js"></script>
- Select the divs with id "third" and set the border with the pink color
$("#third").css("border", "solid 4px pink");
- Select the first div only and change the font color to pink
$("div:first-of-type").css("color", "pink");
// Another way: $("div:first").css("color", "pink")
- select the text
console.log($("h1").text());
console.log($("ul").text());
console.log($('li').text());
$("h1").text("New Text !!")
$("li:first").text("M&M");
$("li:eq(2)").text("Golden Chips")
- add “html”
$("ul").html("<li>Nacho Chips</li><li>BB Big</li><li>Melon Bar</li>")
- change the input tpye from the text to the color
$("input").attr("type", "color");
- change the input type to the checkbox
$("input").attr("type", "checkbox")
- back to the input type to the input text
$("input").attr("type", "input");
- change the source of the first image
$("img:first-of-type").attr("src", "https://pbs.twimg.com/profile_images/534840446174781442/MVt_YYKT_400x400.jpeg").css("width", "200px");
$("img").first().attr("src", "https://pbs.twimg.com/profile_images/534840446174781442/MVt_YYKT_400x400.jpeg").css("width", "200px");
- change the source of the last image
$("img").last().attr("src", "https://pbs.twimg.com/profile_images/534840446174781442/MVt_YYKT_400x400.jpeg").css("width", "200px");
- get the value of the input box OR to set the input as empty
$("input").val();
- set the value
$("input").val("Jeffrey Kim");
- get the value of the dropdown values
$("select").val();
- 왜 call back function이 필요한가
다른 statement실행이 끝난 후에 집행해야 할 경우, callback function을 사용.
예)
$("button").on("click", function(){
$("div").fadeOut(1000, function (){
console.log("Fade out completed."); // to ensure the console log after fade-out
});
})
- fade out and remove the element
// delete the completed(clicked) todos
$("span").click(function(e){
$(this).parent().remove();
e.stopPropagation();
})
// fade out the completed(clicked) todos
$("span").click(function(e){
$(this).parent().fadeOut();
e.stopPropagation();
})
위의 것을 다음과 같이 합해서 간단하게 처리할 수 있음.
// fade out and remove the completed todos
$("span").click(function (e){
$(this).parent().fadeOut(500, function(){
$(this).remove();
} )
e.stopPropagation();
})
- on() 과 click()의 차이
on() will add the listeners to the existing elements plus the potential future elements
while
click() will add the listeners to the existing elements
(예제)
// line-through the completed(clicked) todos
$("li").click(function(){
$(this).toggleClass("completed");
})
// activate the listener only when any "li" inside "ul" is clicked
$("ul").on("click", "li", function(){
$(this).toggleClass("completed");
})
(예제)
// fade out and remove the completed todos
$("span").click(function (e){
$(this).parent().fadeOut(500, function(){
$(this).remove();
} )
e.stopPropagation();
})
// activate the listener only when any "li" inside "ul" is clicked
$("ul").on("click", "span", function (e){
$(this).parent().fadeOut(500, function(){
$(this).remove();
} )
e.stopPropagation();
})
- Google Fonts site
https://fonts.google.com/?preview.text=&preview.text_type=custom
- w3school color shades
https://www.w3schools.com/colors/colors_shades.asp
- gradients site
https://uigradients.com/#Disco
copy the css and past it in body { }
- fontawesome site
github
https://github.com/FortAwesome/Font-Awesome
cdn link
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
(예) three-quarters battery
<h1>To-Do LIST <i class="fa fa-battery-three-quarters"></i></h1>
(예) plus sign
<h1>To-Do LIST <i class="fa fa-plus"></i></h1>
- difference among inline, inline-block, and block
<!DOCTYPE html>
<html>
<head>
<style>
span.a {
display: inline; /* the default for span */
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.b {
display: inline-block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.c {
display: block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
</style>
</head>
<body>
The display Property
display: inline
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. Aliquam venenatis gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.
display: inline-block
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. Aliquam venenatis gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.
display: block
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat.Aliquamvenenatisgravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet.
- removing the small gap between the list and the input
input{
font-size: 18px;
color:#2980b9
background-color: #DCDCDC;
width: 100%;
padding:13px 13px 13px 20px;
box-sizing: border-box;
border:3px solid rgba(0,0,0,0);
}
- animation of the trash can
span{
background-color: #e74c3c;
height: 40px;
margin-right: 20px;
text-align: center;
color: white;
width: 0;
display: inline-block;
transition: 0.2s linear;
opacity: 0;
}
li:hover span{
width: 40px;
opacity: 1;
}
- fadein and fadeout of input field by clicking the fontawesome icon
$(".fa-plus").on("click", function(){
$("input[type='text']").fadeToggle();
})
-adding the todos using jQuery
$("input[type='text']").keypress(function(e){
if(e.which === 13){
var todoText = $(this).val();
$(this).val("");
$("ul").append("<li><span>X</span> " + todoText + "</li>")
}
})
-adding the todos using javascript
var value = document.querySelector( "input" );
value.addEventListener( "change", function (e){
var todoText = e.target.value;
var todoIl = document.createElement( "li" );
var todoI = document.createElement( "i" );
var todoSpan = document.createElement( "span" );
todoI.className += "fa fa-trash";
todoSpan.appendChild( todoI );
todoIl.appendChild( todoSpan );
todoIl.appendChild( document.createTextNode( todoText ) );
document.querySelector( "ul" ).appendChild( todoIl );
e.target.value = "";
})
REACT
- installing node js
go to nodejs.org/en/download and download the appropriate version
go to the terminal and type:
node -v
- installation create react app
npx create-react-app <my_project/
note: you don’t need to execute the installation commands for the node js. The npx command is used from the node js v.5.0 or above.
- start react app
(assuming your project name is the jsx)
cd jsx
npm start
note: be sure to execute the command at the project directory
- create-react-app structure
- to stop the create-react-app
Ctrl-C
- import the React and ReactDOM libraries
import React from 'react';
import ReactDOM from 'react-dom';
- React Component Structure
댓글
댓글 쓰기