msb-public
/
30-Days-Of-React
mirror of https://github.com/Asabeneh/30-Days-Of-React
2
1
Code Issues Projects Releases Wiki Activity

day 3 excersize completed, small little button

Browse Source
pull/379/head^2
seanj29 2 years ago
parent 657670e78d
commit 0c335c5e67
2 changed files with 116 additions and 16 deletions
Show Stats Download Patch File Download Diff File

67
Solutions/Day-03/day3/public/index.html
Unescape View File

@ -24,6 +24,73 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<Style>
.rounded{
border-radius: 0.5vw;
}
.text{
margin: 1vw;
}
.outerbox{
margin: auto;
width: 50%;
text-align: center;
display: "flex";
justify-content:'center';
}
.input{
border:none;
outline:none;
display:inline-block;
height:34px;
vertical-align:middle;
position:relative;
bottom:14px;
right:9px;
border-radius:22px;
width:220px;
box-sizing:border-box;
padding:0 18px;
margin: 1.5vw 1vw 1vw 1vw;
}
.button-9 {
appearance: button;
backface-visibility: hidden;
background-color: #bd7406;
border-radius: 6px;
border-width: 0;
box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset,rgba(50, 50, 93, .1) 0 2px 5px 0,rgba(0, 0, 0, .07) 0 1px 1px 0;
box-sizing: border-box;
color: #fff;
cursor: pointer;
font-family: -apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif;
font-size: 100%;
height: 44px;
line-height: 1.15;
margin: 0 0 1vw 0;
outline: none;
overflow: hidden;
padding: 0 25px;
position: relative;
text-align: center;
text-transform: none;
transform: translateZ(0);
transition: all .2s,box-shadow .08s ease-in;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
}
.button-9:disabled {
cursor: default;
}
.button-9:focus {
box-shadow: rgba(50, 50, 93, .1) 0 0 0 1px inset, rgba(50, 50, 93, .2) 0 6px 15px 0, rgba(0, 0, 0, .1) 0 2px 2px 0, rgba(50, 151, 211, .3) 0 0 0 4px;
}
</Style>
<title>Day 0-3 React App</title> <title>Day 0-3 React App</title>
</head> </head>
<body> <body>

61
Solutions/Day-03/day3/src/index.js
Unescape View File

@ -1,26 +1,57 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom/client'; import ReactDOM from 'react-dom/client';
import cute from './images/cute.png';
const header = ( // const header = (
<header> // <header>
<h1>Welcome to 30 Days Of React</h1> // <h1>Welcome to 30 Days Of React</h1>
<h2>Getting Started React</h2> // <h2>Getting Started React</h2>
<h3>JavaScript Library</h3> // <h3>JavaScript Library</h3>
</header> // </header>
) // )
const root = ReactDOM.createRoot(document.getElementById('root')); const root = ReactDOM.createRoot(document.getElementById('root'));
root.render( root.render(
<React.StrictMode> <React.StrictMode>
<div style = {{display: "flex", justifyContent:'center', height: 'auto'}}> <div className = 'rounded outerbox' style = {{background: 'lightblue'}}>
<header>
{header} <h1 className='text'>
</header> Subscribe
</h1>
<p className='text'>
Sign up with your email address to recieve news and updates
</p>
<div>
<input
className = 'rounded input'
type = "text"
id="firstname"
name="firstname"
placeholder='First Name'
/>
<input
className = 'rounded input'
type = "text"
id="lastname"
name="lastname"
placeholder='Last Name'
/>
<input
className = 'rounded input'
type = "text"
id="email"
name="email"
placeholder='Email'
/>
</div> </div>
<div style = {{display: "flex", justifyContent:'center', height: 'auto'}}>
<img src={cute} alt='Cute Bunny!'></img> <button className='button-9'>
Subscribe
</button>
</div> </div>
</React.StrictMode> </React.StrictMode>
); );
@ -28,3 +59,5 @@ root.render(
// If you want to start measuring performance in your app, pass a function // If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log)) // to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

Write Preview
Loading…
Cancel
Save