JS-React: Event Listener

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)
  1. class MyComponent extends React.Component {
  2.   constructor(props) {
  3.     super(props);
  4.     this.state = {
  5.       message: ""
  6.     };
  7.     this.handleEnter = this.handleEnter.bind(this);
  8.     this.handleKeyPress = this.handleKeyPress.bind(this);
  9.   }

  11.   componentDidMount() {
  12.     document.addEventListener("keydown", this.handleKeyPress);
  13.   }
  14.   componentWillUnmount() {
  15.     document.removeEventListener("keydown", this.handleKeyPress);
  16.   }

  18. hideP() {
  19.     var x = document.getElementById("pdiv");
  20.         x.style.display = "none";
  21.     
  22. }
  23.   handleEnter() {
  24.     this.setState({
  25.       message: this.state.message + "You pressed the enter key! "
  26.     });
  27.   }
  28.   handleKeyPress(event) {
  29.     if (event.keyCode === 13) {
  30.       this.hideP();
  31.       this.handleEnter();
  32.       
  33.     }
  34.   }
  35.   render() {
  36.     return (
  37.       <div>
  38.         <h1>{this.state.message}</h1>
  39.       </div>
  40.     );
  41.   }
  42. }

  44. React.render(<MyComponent />, document.getElementById("app"));

Comments

Post a Comment

Popular posts from this blog

Tech Duos For Web Development

Complete Guide to Web Development Technology Stacks Complete Guide to Web Development Technology Stacks Choosing the Right Technology Stack Selecting the appropriate technology stack is one of the most critical decisions in web development. Your choice impacts: Development speed - How quickly you can build and iterate Scalability - How well your application can grow Performance - The speed and responsiveness of your app Maintainability - How easy it is to update and extend your code Team expertise - The skills your developers need to have Cost - Both development and hosting expenses Pro Tip: Consider your project requirements, team skills, and long-term maintenance needs when choosing a stack. Popular Technology Stacks MERN Stack The MERN stack is one of the most po...
Read more

CIFAR-10 Dataset Classification Using Convolutional Neural Networks (CNNs) With PyTorch

CIFAR-10 Image Classification with CNN (PyTorch) - Complete Guide CIFAR-10 Image Classification Using CNN with PyTorch This comprehensive guide demonstrates how to classify images from the CIFAR-10 dataset using Convolutional Neural Networks (CNNs) built with PyTorch. The project covers the entire machine learning pipeline from data loading to model deployment, including advanced techniques for improving performance. 🚀 Key Features Complete PyTorch implementation Data augmentation techniques Multiple CNN architectures Training visualization Model evaluation metrics Hyperparameter tuning Model saving/loading Deployment options 📊 Performance Baseline model: ~70% accuracy Improved mod...
Read more

Long-short-term-memory (LSTM) Word Prediction With PyTorch

LSTM Text Generation with PyTorch - Complete Guide LSTM Text Generation with PyTorch A comprehensive guide to building word-level language models with Long Short-Term Memory networks Introduction to LSTM Text Generation Long Short-Term Memory (LSTM) networks are a special kind of recurrent neural network (RNN) capable of learning long-term dependencies. They are particularly useful for sequence prediction problems like text generation, where the context from previous words is crucial for predicting the next word. Key Concepts Word-level modeling : Predicts the next word given previous words Embeddings : Dense vector representations of words ...
Read more