day-2 exercise

3 years ago · 0a978254c0
parent b1c17bd8de
commit 0a978254c0
1 changed files with 69 additions and 0 deletions
--- a/solutions/day-2/index.html
+++ b/solutions/day-2/index.html
@ -0,0 +1,69 @@
 <!DOCTYPE html>
 <html lang="en">
     <head>
          <meta charset="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <title>30 Days Of React Challenge</title>
          <style>
               *{
                    padding: 0;
                    margin: 0;
                    box-sizing: border-box;
                    font-family: sans-serif;
               }
               h1{
                    font-size: 40px;
               }
               h3{
                    text-decoration: underline;
               }
          </style>
     </head>
     <body>
          <div class="root">
          </div>
          <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
          <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
          <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
          <script type="text/babel">
               //React code goes here
               // JSX Elements
               const rootElement = document.querySelector('.root');
               let nameElement = <h1>Satya Surendra</h1>
               let country = <p>India</p>,
                    title = <p>Student</p>,
                    gender = <p>Male</p>,
                    email = <p>sathyaxxxxxxx@gmail.com</p>,
                    phoneNumber = <p>9550xxxxxx</p>;
               let footerElement = <footer>This is the footer.</footer>
               let style = {
                    color:'red'
               }
               let personInfo = (
                    <section>
                         <header>
                         </header>
                         <main>
                              {nameElement}
                              <h3 style={style}>Details of the user</h3>
                              {country}
                              {title}
                              {gender}
                              {email}
                              {phoneNumber}     
                         </main> 
                         {footerElement}   
                    </section>
               );
               ReactDOM.render(personInfo,rootElement)
          </script>
     </body>
 </html>