code exercises

NMAP Training NMAP's Some Commands ## The single IP is scanning ## nmap 192.168.0.0 ## Scan a host name ## nmap www.examplesite.com ## Host name with more info ## nmap -v www.site.com ## Multiple scanning ## The IP addresses nmap 192.168.1.1 22.15.2.2 88.1.3.5 Range of IP nmap 192.168.1.1-20 Range of IP with "*" sign nmap 192.168.0.* Entire subnet nmap 192.168.0.0/24 ...

HTML CSS OUTPUT

                                                                  output :

Output

// Redux: const ADD = 'ADD' ; const addMessage = (message) => { return { type : ADD, message: message } }; const messageReducer = (state = [], action) => { switch (action.type) { case ADD: return [ ...state, action.message ]; default : return state; } }; const store = Redux.createStore(messageReducer); // React: class Presentational extends React.Component { constructor (props) { super (props); this .state = { input: '' , messages: [] } this .handleChange = this .handleChange.bind( this ); this .submitMessage = this .submitMessage.bind( this ); } handleChange(event) { this .setState({ input: event.target.value }); } submitMessage() { const currentMessage = this .state.input; this .setState({ input: '' , messages: this .state.message...

/*const For action.type*/ const LOGIN='LOGIN'; const LOGOUT='LOGOUT'; const defaultState = {   authenticated: false }; const authReducer = (state = defaultState, action) => {   switch (action.type) {     case LOGIN:       return {         authenticated: true       }     case LOGOUT:       return {         authenticated: false       }     default:       return state;   } }; const store = Redux.createStore(authReducer); const loginUser = () => {   return {     type: LOGIN   } }; const logoutUser = () => {   return {     type: LOGOUT   } }; /*store.subscribe() function*/ const ADD = 'ADD'; const reducer = (state = 0, action) => {   switch(action.type) {     case ADD: ...

/*Handle an Action*/ const defaultState = {   login: false }; const reducer = (state = defaultState, action) => {   return action.type==='LOGIN' ? state={login:true} : state }; const store = Redux.createStore(reducer); const loginAction = () => {   return {     type: 'LOGIN'   } }; /*Switch Statement to Handle Multiple Actions*/ const defaultState = {   authenticated: false }; const authReducer = (state = defaultState, action) => {  switch(action.type) {     case 'LOGIN':        return {authenticated: true};     case 'LOGOUT':        return {authenticated: false};     default:        return state;     } }; const store = Redux.createStore(authReducer); const loginUser = () => {   return {     type: 'LOGIN'   } }; const logoutUser = () ...

Create a Redux Store const reducer = (state = 5 ) => { return state; } const store=Redux.createStore(reducer) Get State from the Redux Store const store = Redux.createStore( (state = 5 ) => state ); const currentState=store.getState() Define a Redux Action const action={ type : 'LOGIN' } Define an Action Creator const action = { type : 'LOGIN' } function actionCreator(){ return action } Dispatch an Action Event const store = Redux.createStore( (state = {login: false }) => state ); const loginAction = () => { return { type : 'LOGIN' } }; store.dispatch(loginAction ()); store.dispatch({ type : 'LOGIN' });

If they ask "how old are you" before entering the club,this is a good training. HTML(none) <div id="app"></app> CSS(sass) html, body   height: 100%    body   background: #333   display: flex   justify-content: center   align-items: center   font-family: Helvetica Neue    h1   font-size: 2em   color: #eee   display: inline-block a   color: white p   margin-top: 1em   text-align: center   color: #aaa JAVASCRIPT(babel) const inputStyle = {   width: 235,   margin: 5 }; class CheckUserAge extends React.Component {   constructor(props) {     super(props);     this.state = {       input: "",       userAge: ""     };     this.submit = this.submit.bind(this);     this.handleChange = this.handleChange.bind(this);   } ...

HTML(none) <div id="app"></div> CSS(sass) html, body   height: 100%    body   background: #333   display: flex   justify-content: center   align-items: center   font-family: Helvetica Neue    h1   font-size: 2em   color: #eee   display: inline-block JAVASCRIPT(babel) class MyComponent extends React.Component {   constructor(props) {     super(props);     this.state = {       display: true     }     this.leopardDisplay = this.leopardDisplay.bind(this);   }   leopardDisplay() {     this.setState({       display: !this.state.display     });   }   render() {     if(this.state.display) return (        <div>          <button onClick={this.leopardDisplay}>Snow Leo...

HTML <div id="pdiv">   <p>Press Enter</p> </div> <div id="app"> </div> CSS(sass) html, body   height: 100%    body   background: #333   display: flex   justify-content: center   align-items: center   font-family: Helvetica Neue    h1   font-size: 2em   color: lightblue   display: inline-block    p   font-size: 1.8em   font-family: Verdana   color: black JAVASCRIPT(babel) class MyComponent extends React.Component {   constructor(props) {     super(props);     this.state = {       message: ""     };     this.handleEnter = this.handleEnter.bind(this);     this.handleKeyPress = this.handleKeyPress.bind(this);   }   componentDidMount() {     document.addEventListener("keydown", this.handleKeyPress);   ...

HTML <div id="app">   </div> CSS(sass) html, body   height: 100%    body   background: #333   display: flex   justify-content: center   align-items: center   font-family: Helvetica Neue    h1   font-size: 2em   color: lightblue   display: inline-block JAVASCRIPT(babel)  class MyComponent extends React.Component {   constructor(props) {     super(props);     this.state = {       programmers: null     };   }   componentDidMount() {     setTimeout( () => {       this.setState({         activeUsers: 3051       });     }, 50001);   }   render() {     return (       <div>         <h1>Programmers: { this.state.programmers }</h1>   ...

HTML <div id="app">   </div> CSS(sass) html, body   height: 100%    body   background: #333   display: flex   justify-content: center   align-items: center   font-family: Helvetica Neue    h1   font-size: 2em   color: lightblue   display: inline-block input   color: black,   font-size: 1.4em p   margin-top: 1em   text-align: center   color: #aaa,   font-size: 2em JAVASCRİPT(babel)/*Reactjs*/ class MyApp extends React.Component { constructor(props) { super(props); this.state = { inputValue: '' } this.handleChange = this.handleChange.bind(this); } handleChange(event) { this.setState({ inputValue: event.target.value }); } render() { return ( <div> <GetInput input= {this.state.inputValue} handleChange={this.handleChange}/> ...

HTML <div id="app">   </div> CSS(sass) html, body   height: 100%    body   background: #333   display: flex   justify-content: center   align-items: center   font-family: Helvetica Neue    h1   font-size: 2em   color: #eee   display: inline-block a   color: white p   margin-top: 1em   text-align: center   color: #aaa JAVASCRIPT(babel)/*Reactjs codes in here.*/ class MyApp extends React.Component {   constructor(props) {     super(props);     this.state = {       name: "Ordinary Student",       property: "Student"     };   }   render() {     return (       <div>         <Navbar property={this.state.property} />       </div>     );   } ...

@for @for is used in two ways: "start through end" or "start to end". The main difference is that "start to end" excludes the end number, and "start through end" includes the end number. "Start  through  end" example: < style type = 'text/sass' > @for $i from 1 through 5 { .text-#{$i} { font-size: 10 * $i; } } </ style > < p class = "text-1" > Hello </ p > < p class = "text-2" > Hello </ p > < p class = "text-3" > Hello </ p > < p class = "text-4" > Hello </ p > < p class = "text-5" > Hello </ p > f-s will be 10px, 20px, 30px, 40px 50px respectively. @each On each iteration, the variable gets assigned to the current value from the list or map. < style type = 'text/sass' > @each $color in blue, black, red { .#{$color}-bg {backg...